Griffith - Mobile app development with Ionic cross-platform apps with Ionic, Angular, and Cordova

by Chris Griffith

Copyright 2017 Chris Griffith. All rights reserved.

Printed in the United States of America.

Published by OReilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.

OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com .

• Editor: Meg Foley
• Production Editor: Justin Billing
• Copyeditor/Proofreader: Amanda Kersey
• Indexer: WordCo Indexing Services, Inc.
• Interior Designer: David Futato
• Cover Designer: Karen Montgomery
• Illustrator: Rebecca Demarest

• September 2017: First Edition

See http://oreilly.com/catalog/errata.csp?isbn=9781491998120 for release details.

The OReilly logo is a registered trademark of OReilly Media, Inc. Mobile App Development with Ionic, Revised Edition, the cover image, and related trade dress are trademarks of OReilly Media, Inc.

While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

978-1-491-99812-0

[LSI]

In 2013, our small team was then one year into working on drag-and-drop developer tools for the two most popular mobile and desktop web frameworks at the time: jQuery Mobile and Bootstrap. We saw the rapid rise of reusable components and frameworks for web development, and we were working hard to make it easier to use them through better and more inclusive tooling.

Around this time, the iPhone 5 came out, followed shortly by iOS 7, with dramatically faster web performance and new web APIs that unlocked previously inaccessible performance and features for mobile browser apps. We wondered: could a web framework be built that took advantage of this new performance to provide a native-like UI kit for web developers to build native-quality apps with standard browser technologies? A Bootstrap for mobile, if you will?

Coincidently, Angular 1 was seeing incredible adoption in the broader web development space and seemed to provide a perfect answer for reusable JavaScript and HTML components for the web. We decided to try our hand at building a mobile-first web UI framework, using the fast-growing Angular 1 framework to make it interactive and distributable.

The first release of Ionic, at the end of 2013, was met with excitement from web developers, and the project quickly accumulated stars on GitHub and installs on npm. Over the next year and a half, the project saw over one million apps built by startups, dev shops, and enterprise users alike.

Then in 2015, JavaScript seemingly evolved overnight. Suddenly, ES5, the JavaScript we all knew from the web 2.0 era, was old news. In its place was ES6, the next generation of JavaScript complete with major new features for object-oriented development, sharing and loading modules, easier syntax, and a whole lot more. The JavaScript world was turned upside down as browser runtimes and developers alike struggled to keep up with the rapid transition to ES6.

Transpilers were built to translate the new JavaScript syntax into the ES5 syntax that browsers could understand. Developers experimented to figure out the best way to distribute their JavaScript libraries as reusable modules. New build tools were created, thrown out, and created again to build and distribute disparate JavaScript modules. New projects like TypeScript and Flow took off in an attempt to reduce errors and standardize the syntax of modern JavaScript. Experimental features from ES7 and beyond made their way into transpilers and, much to the chagrin of conservative JavaScript developers, into production code bases before being deprecated and removed from the standards track. In short, it was chaos.

Framework authors from the pre-ES6 era were suddenly faced with the daunting task of throwing out custom abstractions in exchange for standardized ones now available in ES6 and beyond. Of those frameworks, few had developed such momentum with custom abstractions as Angular 1. For Angular, the question was clear: how do all these framework-specific things like scope, controllers, directives, and the like translate to the world of standardized JavaScript classes, web components, and beyond?

With the rare evolution of JavaScript, the Angular team saw an opportunity to take the lessons learned from building one of the first major JavaScript frameworks and apply them to a framework that would adapt and scale with the future of both web and mobile development. It didnt hurt that the majority of Angular 1 concepts mapped very naturally to ES6 concepts. In fact, in many cases, they felt much more natural in ES6.

When we heard about Angular 2, we knew immediately that it was our own opportunity to take the lessons learned from Ionic 1 and the over one million apps that had been built at the time to build our own framework for the future.

The Ionic team broke ground on Ionic 2 in spring of 2015. After almost a year and a half of development, mistakes made, novel solutions discovered, and a whole lot of experimentation, we are excited to finally roll out a major, production-ready release of Ionic 2.

At a high level, Ionic 2 is similar to Ionic 1. Components are used by writing custom HTML tags that Ionic turns into powerful mobile components. Actions are bound to callbacks in a class that acts as a controller for a given page in the app. The project is built and tested using the same command-line tool. The look, feel, and theming are similar, drawing on the classic Ionic look from the original release.

Whats different is what goes under the hood. In this case, Ionic 2 was rewritten from the ground up using TypeScript and Angular 2. All of the Ionic code is typed, which has dramatically reduced bugs and type issues in our own code. It has also led to wonderful new features, such as inline documentation and easy refactoring, for developers using tools like Atom and Visual Studio Code. Also, the code is more object-oriented, which just makes more sense for a UI framework. That architecture wasnt as natural in Angular 1.

Angular 2 was rebuilt with the goal of running wonderfully on mobile by reducing overhead and streamlining core operations such as change detection. Thus, Ionic 2 apps run faster and can handle more complexity than Ionic 1 apps.

The goal of Ionic has always been to be the easiest way to build awesome mobile apps, period. We wouldnt have embarked on a costly and risky rewrite of the framework if we didnt truly believe we could make Ionic easier to use and more powerful at the same time. We believe that TypeScript makes Ionic code easier to write and to understand. We believe that Angular 2 is easier to use than Angular 1 and requires far less domain-specific language and understanding. We believe that Ionic 2 projects are cleaner and more organized and that using components is more straightforward.

In addition to the technologies underneath, Ionic 2 has some major new features. Today, Ionic 2 will adapt the look and feel of your app to match the platform underneath, with much-expanded support for Material Design and easier theming. Our navigation system makes it possible to build the kinds of flexible and parallel navigations native apps do uniquely well, but which dont have a natural analog in the browser. Weve added a plethora of features, components, and a ton of native APIs.