Building Better Ionic Apps with Ionic Pro, Part 2

Part1: Ionic Creator
Part2: Ionic DevApp
Part3: Ionic Monitor
Part4: Ionic Deploy

In Part 1 of this series, we created a rapid prototype using Ionic Creator. In Part 2 we’ll talk about the Ionic DevApp to see how it helps in developing apps faster.

According to a survey by Ionic, 94.3% of developers are targeting Android while 83.2% of them targeted iOS. Tablets and Progressive Web Apps (PWA) come next in being the most targeted platforms. In general, hybrid apps with Ionic have always been fast. But it usually took hours to set up the environment and tools to run/debug on devices.

Luckily, Ionic announced the Ionic DevApp on 31st Oct 2017.

What is Ionic DevApp?

Ionic DevApp is an app that runs on your iOS/Android device. It comes with tons of pre-installed native plugins (view plugin support here). This makes it easier to test native plugins and any applications you are developing. When you run ionic serve, it installs the application onto all the devices running the Ionic DevApp. What’s awesome is that it is free and available for iOS and Android.

Why you should try Ionic DevApp

The following features make Ionic DevApp great for developing Ionic apps:

• It has pre-installed native plugins. You may have an app that depends on some of the native plugins. They’re super easy to debug as you change your code because all it takes is running ionic serve.
• No need to install the native SDKs. This removes the need to set up Android SDK. And you don’t need to install Android Studio or Xcode to view your apps on devices.
• Find your apps running on local network. Ionic DevApp connects to your Wifi. As soon as you run ionic serve, DevApp identifies and loads your apps, so you can preview them in the app.
• LiveReload FTW. You can see all code changes immediately on any device running DevApp. This makes development faster.

Let’s use it

If you do not have the latest version of the Ionic CLI installed, run the command below:

npm install -g ionic

Download the Ionic DevApp (iOS/Android) on your device(s).

Make sure your device and your computer are on the same WiFi network.

• Open DevApp on your device(s).
• Run ionic serve from your computer. This should bring up the app inside the DevApp running on your device.
• Click on the app’s name. Now you have your app running on a physical device with native plugin support and live reload.

See the notes-app in action below. On the left we have the terminal and on the right, we have our actual device’s screen casting through Vysor.

See LiveReload in action below:

If you have already used the Ionic View app, you might be thinking that Ionic DevApp is quite similar to that. In essence, the Ionic team decided to split the Ionic View app into two apps: the new Ionic View app and Ionic DevApp. While Ionic DevApp is focused on rapid development and local testing on devices, Ionic View is focused on helping developers share test distributions with product managers and other team members. You can read more about Ionic View here.

While this demo only has one device showing, you can have more devices running Ionic DevApp. You can see how fast it shows the updated result on the real device.

Part 3

In Part 3 of this series, we will set up monitoring for our application using Ionic Monitor. We will go through what the service offers and how we can use it to make better, more reliable hybrid apps with Ionic.