#100DaysOfCode Day 26: The Hybrid Mobile App Development Approach and Ionic

In the last post, we discussed 3 common approaches for developing mobile apps.  This included developing with native code, developing a web app for mobile, and the hybrid approach using a framework.  Today, I’ll highlight the hybrid approach and discuss the mobile framework I’m currently using for a course project: Ionic.

The Hybrid Mobile App Development Approach

Before Ionic, Cordova, and similar tools (Titanium, Unity, Kivy, Xamarin, etc) became popular, front-end developers could produce HTML5 and JavaScript-based apps using tools like jQuery mobile, or focus on making sure web apps were responsive to mobile.  However, there are problems that developers had to work around when it came to using webview (browser) for mobile.  Most importantly, lags in performance, UX considerations not being met, and speed became ongoing issues.  What makes the hybrid approach unique is that apps can be written in any language.  They are embedded or “wrapped” in a native container that provides them native code functionality.

This doesn’t mean they adopt all native capabilities, but more native features are accessible using the hybrid app approach than they would if you build an HTML5 app.   Features such as device access to the camera, calendar, notifications, contacts, and geolocation can be available in hybrid apps.   A SQL file system providing secure offline storage, and gestures such as pinch, spread, and swipe are also supported.  JavaScript developers should also note that using framework tools like Ionic and Cordova makes distribution through app stores possible (1).

Enter Ionic

I compare what Ionic is for mobile to what Bootstrap is for UI development. As a front-end tool, Ionic is based on Cordova and built with Sass, allowing developers to write apps in HTML, CSS, and JavaScript.  Bootstrap users will like that the Ionic CSS component syntax is similar in that it uses classes to drive both CSS styling and JS functionality.  Below is sample code I took from my project for the course to create a login form in a popup modal. You’ll notice Ionic’s own CSS component classes (.list, .item-input, .input-label) and directives (<ion-modal-view>, <ion-content>, <ion-list>) intermixed with Angular directives while applied to inputs:

sample form using Ionic directives, classes, and Angular ngModels

sample form using Ionic directives, classes, and Angular ngModels

Because Ionic works with Angular, I can program the modal and the JS function doLogin() in a separate controller. Likewise, I can add any Angular services or factories as a dependency injection in the controller if I need them to power the app.  I will share more code from my project’s controllers in a post on that subject later.

What’s also useful about Ionic is that it comes pre-packaged with templates to use when you install it and start an app. In Day 27, I’ll walk you through installation, starting an app, and more about templates and Ionic directives.

*** Day 27 Recap ***

  1. Finished module 2 and 3 of Multiplatform Mobile App Development with Web Technologies course.
  2. Finished week 1 of London U’s MOOC on web design, see code in the assignment I submitted on #100DaysOfCode GitHub repo.
(1) Source: Native, HTML5, or Hybrid: Understanding Your Mobile App Development Options

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s