Ionic 4.2 is upon us, and with it, so is our second feature release of Ionic 4! This release is codenamed Helium, after the second element in the periodic table of elements.

Did you know? Helium is the second-most abundant element in the Universe (after hydrogen), making up about 24 percent of the universe’s mass. However, it is relatively rare on Earth. Scientists fear that we might someday run out of helium as it is considered a non-renewable resource. More info.

Ionic 4.2 landed on NPM today with a couple of highly-requested features and some great bug fixes. Let’s dive in and take a look.

New Features

New Error Event for ion-img

An event is now emitted on <ion-img> when an image fails to load. This can be useful to load default images in case the specified image is not found:

  <ion-img class="xt-lazy-img" src="/assets/goodperson.jpg" (ionError)="loadDefault($event)"></ion-img>
  <ion-img class="xt-lazy-img" src="/assets/badimage.jpg" (ionError)="loadDefault($event)"></ion-img>
loadDefault(event) {
    event.target.src = '/assets/img/default.png';
}

This feature was a pull request made by community member Ivan Tham. Thanks!

Optional ticks on ion-range

Before, when you specified snaps on <ion-range>, you would get tick marks on the slider bar. Thanks to a contribution from Seth Lilly, you can now specify a ticks boolean attribute to control if they appear or not (defaults to false):

<ion-range min="0" max="20" step="5" snaps="true"></ion-range>
<ion-range min="0" max="20" step="5" snaps="true" ticks="false"></ion-range>

Note that the ticks will only display if snaps is set to true, regardless of the value of ticks.

Bug fixes

There are a few notable bug fixes that are in 4.2.

Activated Route Observable Fixes

There was an issue where the observables on an ActiveatedRoute would only fire the first time the page was loaded. This is now fixed and fire every time the observable changes:

constructor(
  public actionSheetCtrl: ActionSheetController,
  private route: ActivatedRoute,
  private router: Router
) {}

ngOnInit() {
  this.route.queryParams.subscribe(qp => this.qp = qp);
}

DateTime Fixes

Lots of updates went into the DateTime picker this release. Defaulting to the local timezone and having the picker update the days in the month when you select a new month are a couple we think the community will be excited about:

For a full list of bugs fixes with links to issues, see the release notes here.

Special thanks to all our community contributors who helped by filing and fixing issues in this release, we appreciate it!

Whats next? We are heads down focused on bringing first-class desktop support to Ionic. Stay tuned!

Read more

Last week, I had the privilege to speak at the second VueConf USA in sunny Tampa, Florida. On behalf of the whole Ionic team, I was really excited to present a full talk and also get to know more members of the Vue community. And, with all of the excitement around Vue and VueConf, we decided that this was the perfect place to release the beta for @ionic/vue! So let’s dive right into that bit.

What is Ionic?

If you’re already using Vue, you might be wondering, what is Ionic and why should I care?

Well, let’s take a step back and just say, “Hello, we’re Ionic!” We’re about 5 million apps (and users) strong, with companies like Nationwide, Marketwatch, and Sworkit using our code.

We’re best known for our popular open source Framework, which at its core is a collection of UI components for building high-quality, cross-platform hybrid apps. All of these components are built with HTML, CSS, and JavaScript and can be easily deployed natively to iOS and Android devices, to desktop with Electron, or to the web as a progressive web app (PWA).

And, because the Ionic Framework is focused on the Component/UI layer, you can still keep your framework’s build tools and CLI. Our main goal is to care about how your apps look and behave, not how they’re built. In the past, Ionic Framework has been built only supporting Angular. While we still love and support Angular, we’re also opening up to other tools in the front-end ecosystem. This is why we’re excited to share the details about @ionic/vue.

Getting Started

Getting started with Vue and Ionic is fairly straightforward if you’ve used Vue before. We first need to create a basic Vue project with the CLI.

npm install -g @vue/cli
vue create my-vue-app

cd my-vue-app

Currently, we have a dependency on vue-router, so during the prompt selection in vue create, be sure to select vue-router, or run:

vue add router

From here, we can install @ionic/vue and add it to our project

npm install @ionic/vue

Once the install is finished we have access to the Ionic plugin and can add it to our main.js.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

From here, we now have access to all of Ionic’s components.

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="/../assets/logo.png">
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>

And that’s it!

Building on Vue Router

Like the Angular and React versions of Ionic, we chose to use the official router that’s provided with Vue, vue-router. In order to handle Ionic’s animations though, we’ve extended the Router’s API and have created an ion-vue-router component based on the default router-view. Working off our basic starter project, we can modify App.vue and use ion-vue-router and update router.js to use the IonicVueRouter class.

src/router.js

import Vue from 'vue';
import Home from './views/Home.vue';
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () =>
        import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
});

What is important to note is that instead of creating a new Router instance from vue-router, we use IonicVueRouter. Since this is built off the Router API, we’re able to reuse all of the features that you would expect, like Lazy Loading or navigation guards.

In App.vue, we simply use ion-vue-router the same way we would use the default router-view.

src/App.vue

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

The router integration is currently one place where we’d love to get feedback from the community and see where things could be improved, so please do not hesitate to reach out!

Doing Things the Vue Way

ionic/vue includes support for almost every Ionic component we have. So all your HTML will still feel familiar, but will use Vue’s template syntax.

<ion-content>
  <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
    <ion-refresher-content
      :refreshingSpinner="dynamicIcon"
      :refreshingText="refreshMessage"
    >
    </ion-refresher-content>
  </ion-refresher>
</ion-content>

Ionic’s virtual scroll component is currently not included in the beta release.

Overlay components, like Modals, are created dynamically using the $ionic object in Vue.

import Modal from "@/components/Modal.vue";
export default {
  name: "home",
  methods: {
    showModal: async function() {
      const modal = await this.$ionic.modalController.create({
        component: Modal,
        componentProps: {
          propsData: {
            userData: Math.round(Math.random() * 100)
          }
        }
      });
      await modal.present();
    }
  }
};

The $ionic object provides controllers for Modals, Alerts, and the rest of the overlay components.

What’s Next?

With beta, ionic/vue is fairly stable, but does have room for improvements. Some areas we’re looking for feedback are:

  • Router Integration
  • Tabs ergonomics
  • Performance review

Reach out to us on the forum, slack, or Github if you’re using Ionic Vue! Cheers 🍻

Read more

In case you missed it, last week we gave a live presentation on the top Cordova challenges and the best strategies to overcome them.

During that discussion, Ionic’s Senior Product Evangelist, Matt Netkow, and I dug into the top challenges that development teams face when working with Cordova to unlock native features in a hybrid mobile app. This included tackling dependency management, addressing failed builds, and crafting ongoing maintenance strategies. If you’d like to learn more, check out the on-demand recording.

The purpose of this post is to go back and address some of the great questions that we weren’t able to get to in the Q&A session. Some of them are specific to Cordova, and some are about Ionic 4 (or Ionic 3) application development in general.

How can I run and debug my Ionic app from within Android Studio or Xcode?

There are several Ionic command line options you can use to package and run your app locally on an Android or iOS device. If you run them from each dedicated IDE (Android Studio or Xcode) though, you can view native logs in addition to web logs – incredibly useful for debugging Cordova issues.

Within Android Studio:
1. Select the “Profile or Debug APK” option from the Welcome screen.
2. Navigate to the APK file from within your Ionic project: platforms/android/app/build/outputs/apk/<build_type>/YourAppName.apk.

Within Xcode (only available on a Mac):
1. Go to “File > Open”.
2. Navigate to your Ionic project, and open the .xcworkspace file: platforms/ios/YourAppName.xcworkspace.

Note that you will need to select a development team (provisioning profile) associated with your app before you can run it. This is due to Apple’s code signing requirements.

Finally, in either IDE, click on the “Play” button to run your app using a simulator/emulator or a physical device.

For additional debugging tips, please refer to these Android and iOS sections of the Ionic Framework documentation site.

What are some strategies for addressing native mobile performance issues?

The recommended approach will vary greatly depending on the application and the Cordova plugins in use. That said, here are some general strategies:

  • Update to the latest versions of the Cordova plugins (and platforms) used in your application. This can result in increased performance, but it isn’t guaranteed.
  • Perform an audit of your Cordova plugins. Removing those that are no longer needed may improve application startup times.
  • Consult with the Ionic team. We offer a variety of Cordova-related assistance, including Advisory Services, Architecture Reviews, and more.

What are the best ways to keep up with iOS and Android Cordova updates?

Keeping up with the constantly changing mobile landscape can be difficult. There are always new operating system updates, hardware form factors, and thousands of mobile phones and tablets available at any given time.

Besides the Ionic blog, follow the Cordova team’s blog, a great source of information for the latest Cordova platform releases. These announcements (like the most recent cordova-android 8.0.0 and cordova-ios 5.0.0) include release notes on improved functionality, performance, and features that can make your development experience and applications better.

As for keeping track of plugin updates, there are a few handy commands and resources at your disposal:

  • The best resource for any given Cordova plugin is its associated GitHub repository. Most plugin repositories include information regarding general plugin details, including known or existing issues, code examples, and release notes.
  • To get a snapshot of the current state of your application’s plugins, run some of the commands we mentioned during the presentation, such as:
ionic doctor check: Detect common Ionic project issues and suggestions to fix them. cordova plugin ls: Once you’ve added at least one Cordova platform to your project (via ionic cordova platform add <platform>), run this command to determine the exact version of the Cordova plugins installed in your app. This is useful for general troubleshooting, comparing development environments, or checking that your plugins are actually being installed with the versions you specify. npm outdated or npm outdated <dependency>: Review all project dependencies (or a specific one) to see if any updates are available. Caution: We don’t recommend updating a plugin just because there is an update available, or all of them at once! Make small, iterative changes in a separate code branch and perform lots of testing.

What version of Node.js does Ionic support?

We recommend using the Long Term Support (LTS) version of Node.js as it is the most stable option for Ionic apps. Understandably, not all dev teams are able to update frequently, but it’s generally OK to use an older version of Node with your Ionic project as long as it builds (ionic build) and runs successfully.

You mentioned that Cordova plugins may conflict with each other when they share the same underlying native dependencies (i.e. Google Play Services). What’s the best way to tackle this issue?

Unfortunately, there isn’t a catch-all solution. The answer to this question in part depends on the plugins you’re using. For example, the popular cordova-plugin-firebase plugin can conflict with other plugins like cordova-plugin-googleplus or google-analytics-plugin because the underlying Play Services versions don’t match.

One possible solution is to add cordova-android-play-services-gradle-release to your Ionic project. It attempts to resolve the issue by forcing a specific Google Play Services version for all plugins in your Ionic/Cordova project. This may require you to do some testing to find out which version of Play Services your app should be using. Check the Github repo for more information, and don’t be afraid to try things out!

Is there any way to build and submit iOS apps without owning a Mac?

In order to build and submit an iOS app to the App Store, Apple’s Xcode software is required. Unfortunately, it only runs on Mac computers.

When it comes to building iOS apps, there are some options:

  • You can develop and test your apps using a Mac and a connected iOS device without a paid Apple Developer account.
  • Ionic’s Package service allows you to create native app binaries in the cloud, taking away a lot of the pain of managing iOS provisioning profiles and certificates away, especially for larger development teams. Ionic Package creates the IPA binary file that can then be submitted to the App Store – either manually with Xcode’s Application Loader or in an automated fashion using Appflow’s CI/CD capabilities.

When you’re ready to submit your app to the App Store, follow along here.


Cordova opens up a world of cross-platform opportunities for web developers. The broad ecosystem of Cordova plugins enables anyone proficient in JavaScript to build native-powered iOS and Android mobile apps, without having to be a native expert. If you’re an individual developer just getting started, or working on the next hot app, open source Cordova plugins are a great option.

Ionic’s Native Bridge feature, part of Ionic Enterprise Edition, takes it a step forward, providing easy access to native features and third-party apps for professional development teams building mission-critical apps in an enterprise environment, where time-to-market, support, and stability are critical.

If you would like to learn more about how Ionic Enterprise Edition can help your team tackle its development projects with stability and speed, get in touch with one of our Solution Engineers today.

Read more

A few weeks ago, we announced the beta of our official React support, making it possible for developers to build quality apps for mobile, desktop, and the web using React and standard web development techniques. Predictably, we’ve gotten a few questions from the community wondering about Ionic React and how it’s different from React Native, and when someone would pick one over the other.

First of all, we are huge fans of the React Native project and what the team at Facebook has built. In many ways, React Native has helped Ionic quite a bit by getting more and more teams to be okay with building apps in JavaScript. We have a shared mission in making app development easier using JavaScript, and are thankful to have them fighting alongside us.

However, we believe Ionic React fills an important void in the React ecosystem and has a few fundamental philosophical differences that may resonate with your team. Let’s dig into some of those differences.

Web Native vs Mobile Native

Ionic React is what we call “web native,” meaning that it is based on pure web technology that runs in a browser. In fact, Ionic’s mission is to help make the web platform the dominant app runtime by helping teams build awesome apps for mobile, desktop, and the web, without compromising native power and performance.

That means every Ionic React component is a typical HTML element that runs in most every browser environment on most every platform out there, without any custom per-platform UI code needed. Under the hood, Ionic styles your UI for each platform to follow platform design standards and meet user expectations.

Ionic React components use the standard web development technology stack so it’s very natural for the traditionally-trained web developer. Every bit of Ionic React works the same as any other web app component framework, so customizing with CSS, adding custom div’s to build custom UI, etc. work exactly the same. With Ionic React you can drop in pretty much any web library or component (such as a graphing library like c3) just like you do in the browser, helping you take advantage of decades of web libraries and existing web code.

On top of that, one of the biggest benefits to being web-native like Ionic React, is being able to build a huge portion of your app directly in your desktop browser (Chrome, etc.) using the typical Dev Tools workflow. This is one of my personal favorite aspects of the web-native approach.

React Native, in contrast, uses React to orchestrate iOS and Android stock “native” controls on the screen. React Native provides some utilities, like a flexbox-like library and stylesheet abstraction, to bring some of the web dev experience to native, but fundamentally it’s not drawing standard HTML elements like divs on the screen and it’s not running a browser environment, so those features are emulated and may not let a web developer apply the exact same skills to mobile.

In fact, even React Native and React are not the same development experience, since React Native does not support CSS files or DOM. One of the bits of feedback we’ve had from early Ionic React users is they are glad they can use the same React development experience they use for the web to build mobile and desktop apps with Ionic React. Given that the standard React DOM npm package (React web support) has nearly 25x the installs that React Native has, we think focusing on this most popular of React environments is a safe bet.

To be clear, React Native is a high-quality mobile experience and has focused on providing a core set of familiar web-dev features but running using stock mobile controls. There are some benefits and tradeoffs to that approach that may fit better for your team (more on that at the end).

More than mobile

Ionic at the core is a UI framework for building apps. While we focused primarily on mobile for the first few years of Ionic’s existence, we’re increasingly adding desktop and mobile web (Progressive Web Apps) as core supported platforms.

That means a typical Ionic app can literally run without modification in the app stores, as a Progressive Web App, as a deployed intranet app available in a browser, as an Electron or UWP app, as an embedded view in a traditional native app, and on some smart devices like TVs and wearables.

React Native, in contrast, is focused on iOS and Android app store apps. There are some projects that bring React Native to desktop and a web project that uses the React Native control names but renders web controls. However, keep in mind that none of those projects are official and the desktop ones have a similar tradeoff compared to mobile as a non-web native abstraction.

For us, supporting more than iOS and Android app store apps is important, because it’s important for you. In our 2018 developer survey, over 50% of developers reported targeting the web with a Progressive Web App using their Ionic code, something that isn’t quite possible to the same extent with React Native.

Similar Plugin Model

While the two projects have more that separates them than they have in common, React Native has a similar plugin model to Cordova and Capacitor. Native code is written in a platform-specific native language, and then exported to JavaScript through an internal plugin API. Capacitor is even more similar here as portions of its plugin system were inspired by React Native.

Capacitor, like React Native, automatically exports Plugin API code to JavaScript in a way that your plugins are immediately available to use as soon as your app code starts executing. This differs from Cordova which loads plugin interfaces in an async fashion and requires you to wait for deviceready before using plugins.

With a similar plugin model, that means React Native and Cordova or Capacitor have similar concerns when considering community plugins. You need to ask if a plugin is maintained, whether or not there is support available if you have issues, and whether the plugin exposes the full functionality you need. Many people complain about plugin support in Cordova but forget that this is a question about open source sustainability first and foremost, not about the project itself, and React Native is no different.

This last point is one place that React Native differs heavily from Ionic. Facebook does not commercialize React Native, so teams building mission-critical apps on the platform are not able to engage with Facebook for commercial support contracts or access to additional software on top. Ionic, in contrast, is commercializing the platform by providing enterprise support and expanded native plugin functionality on top of our open source offerings, such as our Identity Vault solution and suite of supported native plugins. For many teams, that means you have an expert available to help you navigate any app development challenges, and a team of native mobile experts providing ready-made native components in a well-supported fashion.

When to choose Ionic React or React Native?

Ionic is relentlessly focused on the web platform and we are excited about aligning with the core web developer skill set. When thinking about whether to try out Ionic React or use React Native, consider whether your team will want to target Desktop or Web/PWA along with app store apps for iOS and Android, and whether you plan to hire and build a team of primarily web developers. If so, you might want to try Ionic React to get as broad of cross-platform support possible using the standard web developer skill set. Also, if you have existing web libraries and code you want to incorporate, Ionic React is a good bet.

When would you pick React Native over Ionic React? While we think Ionic React can handle many React Native use cases, we think there are a few cases where React Native would be a better choice for your team. First, if your team is largely native developers and you want to experiment with adding some JavaScript powered bits to your app, React Native might be a better fit. If you want to use stock native controls in your app for every bit of your UI, React Native would be a better fit (though Ionic supports rendering native UI controls in many scenarios, so this choice is not quite cut and dry). If there’s a plugin out there you really like for React Native, Ionic won’t work with it (yet…) so you’ll want to use React Native in that case.

And, obviously, there’s a matter of taste and preference here. If you like React Native and prefer that project’s view of the world, then stick with it! We’re not out here to tell anyone to change platforms. We think Ionic React offers something compelling for the React community and so far it seems many of you agree based on the passionate reception we’ve gotten since we announced the project. We’re thrilled to be able to bring Ionic to the React community, especially considering how many React fans we have at Ionic (myself included!).

Get Started with Ionic React

At the end of the day, Ionic React is focused on being 100% aligned with where the web platform is going, and this mission drives us to build better and better ways to build apps on top.

Ionic React is in beta at the time of this writing, but you can get started using it today.

Check out our announcement blog that walks through getting started, and our fully-featured demo app that features most of the Ionic React UI components and explores more complicated navigation flows.

And, stay tuned for a lot more on the React front as we work to make Ionic React one of the primary way Ionic apps are built!

Read more

When it comes to hybrid app development, there are often some lingering misconceptions among those who are less familiar with the landscape. Also, many of the worries that persist about hybrid app dev were born out of issues that arose in its infancy stages, but no longer apply as much to the technology today.

Thankfully, because of the powerful evolution of the web and emerging platforms, concerns around topics like delivering great UX and achieving high performance from this type of development are less in question. So, we decided to deep dive into why that is and what’s changed in the current scope of hybrid app development that makes it a great choice for modern enterprises.

In our recent post, we explore the particulars of how this approach is able to help companies create apps that look-and-feel native to any device or channel while still achieving great app performance. From having more time to focus on features, iterating faster, saving resources, and building seamless cross-platform experiences, it’s harder, now, to argue the for the concerns that once existed against the hybrid approach.

In case you missed it, we have a new section in our Resource Center for articles where we tackle high-level industry topics and share thought-leadership content.

Be sure to check it out this new space and explore the full article, which highlights the key reasons for How Hybrid App Development Helps Deliver Great UX and includes helpful use cases for inspiration.

Happy reading!

Read more

© 2020 Extly, CB - All rights reserved.