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
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
Simplify your browser support by using Crosswalk
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.
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.
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.
Let the experts at Aptude implement your mobile solution
As experts in mobile application development, Aptude has the the knowledge and expertise to get your mobile app built to your requirements. From custom enterprise mobile applications to user-centric mobile apps, if you are looking for mobile solutions then we have the answer. You can read more about our mobile development services here.