Mobile App Development with Ionic, Revised Edition

Chapter 1. Hybrid Mobile Apps

Mobile application development is becoming one of the most important skills that a developer can possess. Over the past decade, we have seen an explosion of mobile devices—phones, tablets, and now wearables—that have given rise to a whole ecosystem of mobile applications. We are now living in an age of mobile apps. But learning how to create them is still a challenge. Typically, a developer will need to learn and master each platform’s specific development language: Objective-C or Swift if you are creating iOS-based applications, or Java if you are creating Android-based applications. Wouldn’t it be nice if there were a solution that allowed for one shared language that we could use across multiple platforms? There is: by leveraging the shared language of the web and some incredible frameworks, developers can now develop their applications in one code base and deploy it to a wide range of mobile platforms. This is known as a hybrid mobile application because it blends the native capabilities of the mobile device with the ability to develop using web technologies.

What exactly is a hybrid mobile application? Unlike traditional native mobile apps that are built using the device’s native development language. Hybrid apps are built with web technologies (HTML, CSS, and JavaScript) instead. In fact, you probably have more than one hybrid app installed on your mobile device right now.

The Ionic Framework is one of the most popular hybrid mobile application frameworks in use today. The framework has over 30,000 stars on GitHub and has been forked over 8,000 times. With the release of the next major version of the framework, it is poised to continue its growth as the go-to solution for hybrid mobile developers.

This book presents the foundations required to build Ionic applications by guiding you through the process of creating three separate applications. Each of these applications will give you insight into the various components available in the Ionic Framework, as well as an understanding of the Ionic ecosystem. Before we get into creating our first application, we need to make sure we have a good understanding of the various foundations that Ionic is built upon, as well as some of the tooling we will be using throughout this book.

What Is the Ionic Framework?

So what exactly is the Ionic Framework? Simply put, it is a user interface framework built with HTML, CSS, and JavaScript for use with hybrid mobile application development. Beyond just the user interface components, the Ionic Framework has expanded to include a robust command-line interface (CLI) and a suite of additional services such as Ionic View and Ionic Creator. We will explore each of these throughout the book.

Ionic is really a combination of several technologies that work together to make building mobile applications faster and easier. The top layer of this stack is the Ionic Framework itself, providing the user interface layer of the application. Just beneath that is Angular (formally known as AngularJS), an incredibly powerful web application framework. These frameworks then sit on top of Apache Cordova, which allows for the web application to utilize the device’s native capabilities and become a native application.

The combination of these technologies enables Ionic to deliver a robust platform for creating hybrid applications. Each of these technologies will be explored further in this book.

What’s New in Ionic?

To say the Ionic Framework underwent a major upgrade after version 1 is almost an understatement. Not only did the Ionic Framework itself evolve significantly, but one of its underlying technologies, Angular, did as well. Although some things might look the same on the surface, under the hood, there are radical changes. Ionic is almost a new framework.  If you are familiar with Ionic 1, much of the component syntax will appear similar, but the code that brings them to life will be new.

Ionic Version 3

In March 2017, Ionic announced version 3 of the framework. This new version is more like a traditional upgrade, and not the radical change that occurred from Ionic 1 to Ionic 2. The company also announced that going forward, the framework will just be referred to as Ionic, without the version number. For clarity, in this book, we will only append a version number to Ionic to highlight something to you.

The following are some of the major improvements to the framework:

Overhauled navigation

Completely control the navigation experience of your app without being tied to the URL bar. Navigate to any page inside of any view, including modals, side menus, and other view containers, while maintaining full deep-linking capability.

Native support

There is now more native functionality directly into Ionic, making it easy to take advantage of the full power of the device without hunting down external plug-ins and code.

Powerful theming

With the new theming system, it’s easy to instantly match your brand colors and design.

Material Design

Full Material Design support for Android apps.

Windows Universal apps

Support for developing applications that will run on the Windows Universal platform.

But with these improvements to Ionic comes the added effort of learning the new version of Angular, as well as learning TypeScript. We will touch on these requirements in a later chapter.

Comparing Mobile Solutions

When needing to deliver your application to a mobile platform, there are three primary solutions that are available, each with its own strengths and weaknesses. They can be grouped into native mobile applications, mobile web applications, and hybrid mobile applications. We’ll look at each solution in a bit more detail to understand the overall mobile application landscape.

Native Mobile Applications

Typically, native code is the solution most developers think of when they need to create a mobile application. To build a native application, developers need to write in the default language for each targeted mobile platform, which is Objective-C or Swift for iOS devices, Java for Android, and C# or XAML for Windows Universal.

This type of development comes with several strong advantages over the other options. First, the development tools are tightly integrated into the device platform. Developers are able to work in IDEs that are configured to create mobile applications for that platform: Xcode for iOS, and Android Studio for Android. Second, since development is done in the native framework, all the native APIs and features are available to the developer without the need of additional bridge solutions. The third advantage is the performance of the application will be as good as possible. Since the application is running natively, there are no intermediate layers of code that can affect performance.

The primary disadvantage of native mobile application development centers around development language issues. Since quite often you will want to release your application for both iOS and Android (and possibly Windows), you will need to have proficiency in all the different languages and APIs. None of the client-side code can be reused, and it, therefore, must be rewritten. In addition, there is the technical burden of maintaining multiple code bases.

Mobile Web Applications

When the iPhone was first announced, there were no third-party applications—or even an App Store, for that matter. In fact, the initial vision was that third-party applications were only to be available as mobile web applications and not as native applications. While this is certainly not the case today, creating a mobile web app is still an option. These apps are loaded via the device’s mobile web browser. Although the line between a mobile website and mobile app can become blurred, this option is really just about creating your application using web technologies and delivering it through the device’s browser.

One of the advantages of this solution is that we can have a much wider reach with our application. Beyond iOS and Android, additional mobile platforms become available. Depending on the market that you are targeting, this may be a critical factor. Since you have direct access to your web server, the application approval process that can be tricky or slow at times for native apps is not an issue. Updating your application to add a new feature or resolve a bug is as simple as uploading new content to the server.

However, the fact that these applications run inside the native browser brings along a set of limitations. First, the browser does not have access to the full capabilities of the device. For example, there is no ability for the browser to access the contact list on the device. Second is the discoverability of the application. Users are used to going to their device’s app store and finding the app. Going to the browser and inputting a URL is not common behavior.

Hybrid Mobile Applications

A hybrid application is a native mobile application that uses a chromeless web browser (often called a WebView) to run the web application. This solution uses a native application wrapper that interacts between the native device and the WebView. Hybrid apps have a number of advantages. Like mobile web applications, the majority of the code can be deployed to multiple platforms. By developing in a common language, maintaining the code base is easier, and if you are a web developer there is no need to learn a completely new programming language. Unlike mobile web applications, we have full access to the device’s features, usually through some form of a plug-in system.

However, this solution does have some real disadvantages. Since the application is still just a web app, it is limited by the performance and capabilities of the browser on the device. The performance can vary widely. Older devices often had very poor performing mobile browsers, meaning the app’s performance was less than ideal. Although this solution is a native application, communication between the WebView and the device’s native features is done via plug-ins. This introduces another dependency in your project and no guarantee that the API will be available through this method. Finally, the other native user interface components are not available within the WebView. Your application’s entire UI/UX will be completely written by you.

The Ionic Framework takes the hybrid app approach. The team at Ionic has taken great care in recreating web-based UI components that look and feel like their native counterparts. With the framework leveraging Cordova and its plug-in library, the lack of access to the device’s capabilities are solved.

Understanding the Ionic Stack

Now that we have a general understanding of the types of mobile application development, let’s look a bit deeper into how the Ionic Framework works. Ionic applications are built as part of three layers of technology: Ionic, Angular, and Cordova.

Ionic Framework

The Ionic Framework was first launched in November 2013, and its popularity has quickly grown and continues to increase. Ionic is provided under the MIT license and is available at the Ionic Framework website.

The primary feature of the Ionic Framework is to provide the user interface components that are not available to web-based application development. For example, a tab bar is a common UI component found in many mobile applications. But this component does not exist as a native HTML element. The Ionic Framework extends the HTML library to create one. These components are built with a combination of HTML, CSS, and JavaScript, and each behaves and looks like the native controls it is recreating.

Ionic also has a CLI tool that makes creating, building, and deploying Ionic applications much easier. We will be making extensive use of it throughout this book.

The Ionic platform also extends to several add-on services. These include an online GUI builder to visually lay out the interface of your Ionic applications and packaging and updating solutions. Although these Ionic services all have free developer access to test and develop with, any production use will require a monthly charge.

The main focus of the Ionic Framework is in the user interface layer and its integration with both Angular and Cordova to provide native-like experiences.

Angular

The next part of the Ionic stack is Angular (formally known as AngularJS), an open source project primarily supported by Google. Since its release in 2009, Angular has become one of the more popular web application frameworks. The goal of Angular is to provide an MVW (model-view-whatever) framework to build complex, single-page web applications. The Ionic team decided to leverage the power that this framework offers, so they built upon. For example, Ionic’s custom UI components are just Angular components. Angular is licensed under the MIT license and is available at the Angular website.

With the release of Angular 2, the framework has changed massively. This change did cause some discord within the Angular community, but many of the concerns about the new aspects of the framework have been addressed. We will explore Angular in more detail in Chapter 4.

Cordova

The final element of the Ionic stack is Apache Cordova. Cordova was originally developed by Nitobi Software in 2009 as an open-source solution to build native applications using web technologies via an embedded WebView. In 2011, when Adobe Systems bought Nitobi—and along with it the PhoneGap name—the project had to be renamed. Although the project was always open source, the name was not. The open source version was eventually named Cordova (after the street where the Nitobi offices were located). As Brian Leroux, one of the founders of PhoneGap, put it: “PhoneGap is powered by Cordova. Think: Webkit to Safari.” Adobe continues to be a major contributor to Cordova (along with several other major software companies) and it is licensed under the Apache 2.0 license.

Cordova provides the interface between the WebView and the device’s native layer. The library provides a framework to bridge the gap between the two technology stacks (hence the original name of PhoneGap). Much of the functionality is handled through a system of plug-in modules, which allows the core library to be smaller. Beyond working on the two primary mobile platforms, Cordova is used on a much wider range of mobile platforms, such as Windows Phone, Blackberry, and FireOS. For a full list, see https://cordova.apache.org.

Beyond the library, Cordova as has its own command-line tool to assist in scaffolding, building, and deploying your mobile applications. The Ionic CLI is built atop the Cordova CLI, and we will be making use of it throughout this book.

Prerequisites for Ionic Application Development

In order to develop Ionic applications, you will need to have some additional technical skills that are not covered in this book. While you do not need to be an expert in these skills, you will need a general knowledge in order understand the concepts of Ionic development:

Understanding HTML, CSS, and JavaScript

Since Ionic applications are built using HTML, CSS, and JavaScript, you should have a fundamental understanding of how these technologies combine to build web applications. We will be using HTML to create the foundational structure of our applications. Our CSS will provide the visual styling for our applications. Finally, JavaScript will provide the logic and flow for the applications.

While we will work a modest amount with JavaScript, you will need to be familiar with its syntax and concepts like variable scoping, asynchronous calls, and events.

Understanding Angular

Beyond understanding basic HTML, CSS, and JavaScript, you will need some understanding of building web applications. In this book, we will be writing our applications with JavaScript, specifically Angular 2. This means we will be developing in ES6 and writing the code in TypeScript. For many, this is probably something that is new to you. We will cover the basics in Chapter 4 to get you up and running.

Access to a mobile device

It goes without saying, you are going to need an actual mobile device to install and test your applications on. In fact, you will probably need at least one device for each platform you plan to develop for. While both the iOS and Android SDKs provide emulators/simulators that allow you to see what your app looks like and functions, they are no substitute for testing on a real device.

Summary

Hopefully, now you have a better understanding of the difference between the types of mobile application solutions and how the Ionic stack is composed. In addition, you should have a clearer picture of the elements needed for Ionic development.

In the next chapter, we will demonstrate how to set up your computer to develop Ionic applications.