Hybrid Mobile Apps Part 1: Ionic Framework Basics

Introduction

According to an April 2016 report by comScore, a global media analytics company, mobile users now represent 65 percent of digital utilization with mobile apps dominating usage overall. All indicators show future growth will continue to be driven by mobile devices.

In part one of this series, we’ll explore reaching this mobile segment with mobile hybrid apps created in the Ionic Framework. We’ll specifically focus on what a hybrid app is and then give you basic installation and setup for Ionic to get your first app up and running.

Options for Mobile Development

First, let’s look at the three approaches to creating a mobile app and the pros and cons of each from a development standpoint.

Responsive Apps

Responsive sites are designed so that layout responds and adapts to the user’s viewing environment, allowing a single app or site to display at phone, tablet and desktop sizes. These sites are accessed like any other website via a web browser.

This approach often utilizes popular Responsive frameworks such as Foundation or Bootstrap and relies on elements based in percentages of screen width. CSS media queries are used to control multiple breakpoints (widths at which screen layout significantly changes), allowing for unique changes to layout, content and style at various widths.

Minimum technology needed

• HTML 5
• CSS 3
• JavaScript
• Optional framework (predefined HTML, CSS and JavaScript geared towards responsive behavior)

Pros

• Built on standard technologies most developers are familiar with
• No proficiency in native platforms/SDKs required
• No proficiency in specific languages required
• Allows applications to use a single code base
• Accessible from any device via a web browser

Cons

• Does not necessarily “feel” like a native app
• UI patterns may not be standard interactions users are used to
• Not available as a stand-alone app in a platform’s app store

Native Mobile Apps

Native apps are built for a single mobile platform, and can be viewed only on that platform. For example, apps built for iOS, accessible from Apple phones or tablets or apps built for Android and accessible from Android devices. Completed apps must be downloaded to the device via the applicable device’s app store. This approach relies on platform-specific requirements and programming proficiency.

Minimum iOS technology needed

• Mac OS
• Apple Developer Account
• Xcode IDE (integrated development environment) including:
  • iOS SDK (software development kit)
  • Source code editor
  • User interface (UI) editor
  • Debugging tools
  • Device emulators
  • Objective-C or Swift

Minimum Android technology needed

• Mac OS, Microsoft Windows or Linux
• Java development kit (JDK)
• Android Studio IDE or alternative IDE including:
  • Source code editor
  • Device emulators
  • Code patterns
• Android SDK or Eclips
• Java/XML or C/C++ with the Android Native Development Kit (NDK)

Pros

• Feels like a true native app, specific to the device it’s running on
• UI patterns are standard to the device meaning users are familiar with the interactions
• Available as a stand-alone app in a platform’s app store

Cons

• Proficiency in native platforms/SDKs required
• Proficiency in specific languages required
• Requires separate code bases per device
• Not accessible to desktop users

Hybrid Apps

Hybrid apps essentially aim to combine the pros of Responsive and Native apps.

A Hybrid app is built using standard technologies (HTML, CSS and JavaScript) like a responsive app but is delivered inside of a native app web view. This makes it accessible to various native platforms while making it feel like it’s native to the device, all while allowing for a single codebase and no need for additional proficiency.

Minimum technology needed (note the similarity to responsive apps)

• HTML 5
• CSS 3
• JavaScript
• Optional framework (predefined HTML, CSS and JavaScript geared towards responsive/native-like behavior)

Pros

• Built on standard technologies most developers are familiar with
• No proficiency in native platforms/SDKs required
• No proficiency in specific languages required
• Allows cross-platform applications to use a single code base (for hybrid frameworks that support cross-platform)
• Feels like a true native app, specific to the device it’s running on
• UI patterns are standard to the device meaning users are familiar with the interactions
• Available as a stand-alone app in a platform’s app store
• Accessible in a web browser (if desired)

Cons

• Some hybrid app approaches are intended for and best experienced on mobile devices only and not currently designed for desktop at all

Options for Hybrid App Development

Because hybrid apps provide so many positives and little to no negatives, we’ll focus on this mobile approach.

It is certainly possible to build a hybrid app from the ground up using the standard technologies and native web view mentioned. However, there are a number of hybrid app frameworks that simplify the process. These frameworks typically include common UI controls like icon bars, lists, buttons, inputs, avatars and common functionality like action sheets, history stacks and gesture control.

Here’s a quick look at some of the hybrid app frameworks currently available at the time this article was published. As with any development, each framework may be better suited for any given project based on business requirements, integrations, and other factors.

Since the focus of this article is not a comparison of what’s available, you can learn more about framework differences at NoeticForce.com  and TutorialZine.com.

Ionic Framework

We’ll be focusing on the Ionic Framework for its ease of use, available UI and functional components, performance, cross-platform compatibility, documentation, excellent community base and availability of starter apps, plugins and themes. Not to mention that the Ionic Framework is open source, touts more than 2,000,000 installs and provides a number of extras that extend the framework, which we’ll cover.

As previously mentioned, hybrid app frameworks consist of HTML 5, CSS 3 and JavaScript. In the case of Ionic, AngularJS serves as the core of Ionic’s functionality.

Ionic Versions

At the time of writing this article, there are two versions of Ionic Framework available: v1.3 and v2.0 Beta, the primary difference between them being that v1.3 is built on AngularJS 1 and v2.0 is built on AngularJS 2.

That change in AngularJS version does significantly change how Ionic apps are built. Because Ionic considers its v2.0 to be a complete rewrite, an app’s underlying structure and markup syntax will be different between Ionic version.

For the purpose of this article we’ll cover getting started with v1.3 since v2.0 is still a beta release.

What the Ionic Framework Is Not

It’s important to remember that Ionic’s primary purpose is building cross-platform apps intended for phone-sized screens. That means it does not come with support for individual phone, tablet and desktop views as you’d expect from responsive frameworks like Foundation or Bootstrap.

Out of the box, Ionic’s tablet display is simply a wider version of the phone display (elements are based in percentages) with no built-in means to change layout between sizes. However, this is certainly doable via CSS media queries if necessary. Nine times out of 10 the same view will work for most purposes for both phone and tablet sizing.

Also, if you’re used to working with Foundation or Bootstrap, you’ll find the Ionic Framework grid system to be fairly bare bones. It will allow you to lay out columns as necessary but may feel a little immature. However, considering that we’re really dealing with narrow phone screens and not changing views between screen sizes, the likelihood of needing something like a complex 12-column layout is almost non-existent in a real-life scenario.

Installing Ionic

Node.js

First, you’ll need to install the package system, Node.js.

Before proceeding, we should note that some users have experienced problems with using Sass within Ionic on any version of Node.js newer than v0.12.7. If you experience similar issues and intend to use the optional Sass to compile your CSS, you may want to try v0.12.7.

Windows

Install https://nodejs.org/dist/v0.12.7/node-v0.12.7-x86.msi

MAC OS
Install https://github.com/creationix/nvm
With Node installed run the following from a command line:

Creating a New Ionic Project

From a command line, you’ll start a new project with the following command:

• AppName can be any arbitrary application name and will become the name of the application’s folder that Ionic will create.
• TemplateName is an optional template that scaffolds the app based on what type of navigation structure you’d like to use. Your options are:
  • tabs – Uses a horizontal tab navigation (typically bottom of screen on iOS and top of screen below header on Android)
  • sidemenu – Uses an icon-triggered vertical offcanvas navigation
  • blank – No navigation or app setup

If no template name is specified, Ionic will default to using Tabs.

There are other options for both free and licensed starter templates which we’ll cover under Ionic Extras in a future part of this series. In the meantime, you can explore available starter templates in the Ionic Market.

Also, when starting a new project, if you haven’t done so previously, you will most likely be asked to create an account with Ionic from the command line. This is highly recommended because it will give you access to some of the extras Ionic provides (again, which we’ll cover). You can create an account at any time if necessary.

Adding Sass to Your Project

By default, Sass and its dependencies aren’t included in a project so if you intend to use Sass, you’ll need to add them.

If you’re not familiar with Sass, it is essentially a language that allows for variables, calculations, nesting and other advanced features in extended CSS. Individual Sass files are compiled into a production-ready CSS which the application uses for styling.

Because the Ionic Framework is built on Sass, this option is highly recommended. Even if you choose not to create anything new in Sass, adding this option will allow you to quickly change Ionic’s variables files. This file controls everything from color to padding so quite a bit of customization is possible even for those not experienced with Sass.

To add Sass support, move to the application folder from a command line and run:

Keep this running when you run the Ionic app and both your Sass and Ionic files will automatically update and do a live reload as you work.

Adding Platforms to Your Project

In order to build out an app for iOS or Android, each platform and its dependencies must be added to the project. This will allow you to locally build the app in a given platform’s format and run it in the platform’s emulator.

Technically speaking, adding platforms isn’t actually required to create and view an Ionic Framework app. You can develop and view your app (outlined in the next section) without ever adding a platform and because of this, JBS teams often work without platforms installed.

If you decide to add platforms to your Ionic project, building and emulation have specific platform dependencies like needing a Mac for iOS platform builds and Java JDK, Apache Ant and Android SDK for Android builds, please refer to Ionic’s Platform Installation documentation for details.

Viewing Your App

Once everything is installed and your optional Sass is up and running, there are several ways to view your Ionic Framework application.

Desktop

You can start your Ionic project from a command line in the application folder using the ionic serve command.

This will open a local live-reload server in your desktop browser with any changes updating the browser output in real time.

It may be helpful to run the application in Chrome, using the Chrome DevTools Device Mode. We also find it helpful to switch the User-Agent to match the device you’re trying to emulate which can be done using a Chrome extension such as User-Agent Switcher for Google Chrome.

Ionic Upload to Ionic View

The Ionic Framework gives you the ability to publish your application to Ionic’s servers so you can view it from your native device. To do that, you’ll first need an Ionic user account.  As previously mentioned, you should be asked to create an account when starting a new project or you can create one when uploading.

To publish an app, run the following command from the application folder.

To view a published app, Ionic provides an incredibly helpful app known as Ionic View, available from the App Store for iOS and from Google Play for Android. Once installed on your native device, you can log in to Ionic View and your application will be available for viewing.

Apps you publish are given a unique ID number. They are relatively private but anyone with the ID number can view them making it easy to test your work from different devices or share them with clients or colleagues with no additional effort.

You can update the app at anytime by rerunning the ionic upload command. You can also delete it from Ionic’s servers any time you like.

Simulator, Mobile Browser or Native App

As previously mentioned under Adding Platforms to Your Project, there are a number of dependencies for viewing in a simulator, in a mobile browser or as native app and isn’t typically necessary if you’re using Ionic View and some of Ionic’s other tools. If you’d like to view the application in one of these environments, please refer to Ionic’s Platform Installation and Testing Your App documentation.

Once Your App is Up and Running

With your app installed and running in the viewing method of your choice, you’re now able to start customizing it to make it your own.

We’ll explore customization and building out features in the next part of this series. Meanwhile, you can refer to the Ionic documentation to get started.