With the release of Ionic 1.0, we’ve reached a new level in building hybrid mobile applications via web technologies. While Ionic is probably more well known for its CSS components and JavaScript/AngularJS extensions, I’d like to highlight a few tools that have really improved my ability to develop applications rapidly, which are included with the Ionic CLI.
The first, and probably most time-saving tool in the Ionic CLI, is the ability to live reload your app as you make code changes. Prior to being able to live reload, if you wanted to preview/test changes in a simulator or on an actual device, you would have to “build” (or compile) your app’s package, and then “run” (or install on the device, and launch). Web developers familiar with using live reload in Chrome to debug web apps will be very familiar with the Ionic CLI live reload process. Each time you save an HTML, CSS, or JS file that’s being “watched” in your app, the app will refresh while running on your device, so you don’t have to build & run each time (which is a very slow process). You can also change the files being watched by editing the watchPatterns in your ionic.project file. Read more about the live reload tool on the Ionic blog, or in the CLI documentation.
One of the great features of developing hybrid apps is leveraging the same code base for building iOS and Android apps. Ionic’s CSS components and JS extensions appear differently on iOS and Android, as they’re geared to mimic each native platform closely. The Ionic Lab tool allows developers to launch a browser window displaying how the app would look and behave on both iOS and Android. Since its running in a browser, it’s not going to allow you to preview native-level functionality, like if the ngCordova $cordovaCamera service performs differently on each platform, but it is very handy for monitoring CSS changes, and whether a change you made breaks something on one platform, but not the other. It also comes with the aforementioned live reload tool built in, so you’ll see both the iOS and Android version of your app refreshing in real time. Read more about Ionic Lab on the Ionic blog, or in the CLI documentation.
The last tool I really appreciate is the ability to print your app’s console logs to the Terminal tab you’re running the app from. There was a time when, before Safari allowed debugging of an iPhone connected to a Mac, developers had to hack together a solution in order to gain visibility into the JS running in their hybrid app running on a device. This consisted of Xcode logs and a tool called WEINRE (“WEb INspector REmote”). It was not pretty. Suffice to say that the ability to access the console logs of your app running on a device by simply passing the “-c” flag when running the “ionic serve” command is nothing short of a godsend. Read more about the command line flags available with the Ionic CLI.
While using live reload, Ionic Lab, and a combination of console logs and other tools available with the Ionic CLI have vastly improved the speed with which I can build hybrid mobile apps, the Ionic CLI currently has many additional features. You can emulate or run your app on a simulator or actual device, automatically generate the icons and splash screens required for both iOS and Android, or share your app with others using Ionic View. There are also many more exciting things in the pipeline, like Ionic Deploy (update your app without having to resubmit to app stores), Ionic Analytics (track all activity in your app), and Ionic Creator (prototype Ionic apps using drag-and-drop components).
Its an exciting time to be a hybrid mobile app developer, and Ionic is leading the pack when it comes to modern hybrid frameworks. Start building your own apps today!
