Ionic is an open-source mobile SDK which allows developers to create hybrid mobile apps using HTML5, AngularJS, and SASS. While this certainly be accomplished with tools such as Cordova (which Ionic is built on top of) and PhoneGap, Ionic brings a handful of tools at your disposal that help expedite the development and testing process, while also adding performance enhancements to your application.

With Ionic’s recent announcement of Windows Universal App support, many more companies may see Ionic as a viable solution for building cross-platform applications. With that being said, I figured it would be an ideal time to provide some tips for building mobile applications with Ionic.

These additions to your Ionic mobile app can potentially help save you and your development team a massive amount of time – here are some the options for your consideration:

Use or create a yeoman generator

Yeoman is a scaffolding tool which allows you to quickly deploy pre-configured projects. A place to start is exploring some of the Ionic Yeoman generators to see if they meet your requirements. While Ionic does have some excellent inclusions, you will likely want to customize your development environment with tools such as javascript linters, code coverage support, emulators, and platform integrations to help improve your application. Additionally, Yeoman generators can expose you to different folder structures that may work better than existing or previous approaches.

If you’re not comfortable with using one of the available generators, or you’re a purist who would rather determine your environment configuration from scratch, you might benefit from Yeoman by creating your own generator. This can be beneficial for projects with big teams, where streamlining project setup time is helpful.

Consider Implementation Following an Angular Style Guide

Angular style guides are a documented set of best practices for Angular implementations, which take much different approaches to structuring and writing applications than what is shown in the Angular documentation and many of the available tutorials online. The two most popular style guides are by John Papa and Todd Motto. There is also a style guide that Google has released which is an external version of what engineers at Google use, but it’s not as thorough as the ones I previously mentioned.

John Papa is a Google Developer Expert who is well-known in the Angular developer community. He authored an Angular style guide which has been gaining popularity, and has also received many contributions for improvement on Github. This style guide is a little more detailed than Tod Motto’s, and more specific in implementation standards.

Todd Motto is also a Google Developer Expert, and his style guide has recently been updated to accommodate changes to the Angular framework with recent releases. His style guide is more concise and may be a little bit easier to follow for less experienced developers.

Since Ionic is built off of the Angular framework, many of the approaches recommended in the style guides are relevant to Ionic implementations. As long as you don’t interfere with Ionic’s core files, which could get overwritten with updates to the framework, there are many advantages to utilizing the style guides.

So what are these advantages? For one, you’ll be able to utilize the many years of experience of expert developers that contributed to these style guides. Additionally, they both recommend excellent file structures to quickly locate and edit your code. Both style guides also recommend using the controllerAs method of setting scope instead of the $scope usage shown in the Angular documentation, although John Papa’s guide is a little bit more implicit in recommending usage.

Quickly test your mobile application with the PhoneGap Developer App

There are many options to choose from when it comes to mobile app testing, but the PhoneGap Developer App is one of the simplest ways to deploy your application to a device from your local environment. This isn’t going to replace your other testing strategies, or be utilized by your QA Team, but it is a quick way for developers to test their applications – and since it’s a hybrid app, less data has to be pushed to the device than with native apps, making deployment much quicker. The app also allows developers to remotely inspect and debug their code and live reload changes.

Use Babel to enable ES6 support

ECMAScript 6/ES6 has been officially approved since June 2015, but adoption in projects has been mixed, partially due to legacy browser support. As an alternative or way to streamline development, some projects opt for inclusion of javascript libraries such as lodash, underscore, or jQuery. While these libraries are relatively lightweight, many of the features they provide have been included in the ES6 standard.

Thankfully, BabelJS allows you to compile ES6 code into ES 5.1 javascript, and it’s easy to implement into your Ionic project. If you’re starting a new project and are open to using Yeoman, there are several generators available which include BabelJS, otherwise there is a tutorial here which shows you how to integrate Babel into your gulp task. Of course, you can also use any of the other libraries in addition to ES6, should you choose to do so.

Simplify your browser support by using Crosswalk

The most frustrating issue with developing hybrid WebView mobile apps for Android is dealing with version fragmentation – different versions of the operating system all run different webview versions, which are based on the Chrome browser. However, the older versions have many issues with handling HTML, CSS, and javascript properly – similarly to how older browser versions behave. Similarly, older versions of Windows 7 and 8/8.1 use versions of Internet Explorer 9 and 10 respectively, which are surprisingly not as difficult to deal with as Android versions, but still can cause some problems. So how do we overcome this challenge?

I recently discovered Crosswalk, which allows you to develop your Apache/Cordova based app (which includes Ionic) while only having to support the latest version of Chromium. This is a huge benefit for developing hybrid Android apps (for Android 4.0+), which could potentially save hundreds of man-hours on your project. Basically, Crosswalk embeds the Chromium into your application, which adds some extra megabytes to your package, but in my opinion it is definitely worth the extra bloat.

Make use of available plugins, frameworks, and libraries

One of the most valuable assets of building hybrid mobile applications is the availability of 3rd party plugins, libraries, and plugins for use, often for free. While I’ve covered a few of them in this article, such as Crosswalk and Babel, there are many more out there to discover – and many of them will be based on your specific application requirements.

To narrow down your list of choices, some of the best options are going to come from the list of Apache/Cordova plugins, Ionic plugins from the marketplace, and Angular modules.

When deciding on your mobile app’s architecture, overcoming ongoing challenges, or deciding on how to build out a specific feature, make sure you check out if some of the existing resources can help with implementing a solution. While many core features you are building will likely not be solved this way, many elements, such as UI components, can be quickly implemented.

Consider writing end-to-end automation testing

I’ve written before about strategies for testing mobile applications, but it was more generalized towards any kind of mobile app. With hybrid mobile apps, there are some commonly used testing frameworks to implement unit and end-to-end testing into your project.

Jasmine, Karma and Mocha are popular choices for unit testing your javascript code, while tools like Instanbul ensure that your code coverage standards are being met.

However, end-to-end testing allows you to write test that actually navigate and interact with your application’s user interface. Protractor is an end-to-end testing tool which is specifically for AngularJS applications. One of the biggest benefits of using protractor is that tests can be written in javascript, and potentially can even be written by existing developers without requiring additional resources.

Conclusion

Ionic is an excellent and growing framework which has many options available to accelerate your development process. Combining it with best practices and other available frameworks will help save you a considerable amount of development time. Of course, you don’t want to use too many add-ons, as that may have an impact on your application’s performance, but if the added value seems worth it then by all means- add it to your environment’s ecosystem.

Hopefully this blog has helped with giving you some additional options for your Ionic application. There are many more options to discover, and many times the decision for your application is not about the “right” or “wrong” approach, but rather what works best for you and your team.