Mobile App Development with Ionic 2, 1st Edition

Foreword

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 didn’t 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.

What’s 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 wasn’t 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 wouldn’t have embarked on a costly and risky rewrite of the framework if we didn’t 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 don’t have a natural analog in the browser. We’ve added a plethora of features, components, and a ton of native APIs.

Additionally, the mobile world saw a dramatic shift in 2016. Suddenly, the mobile web is back in vogue as progressive web apps have come onto the scene in a major way. With Google pushing a new world where apps run right in the browser with no install required and provide a great experience regardless of bandwidth and connectivity, mobile developers are faced with the daunting prospect of adding mobile web as a part of their mobile strategy.

Developers using Ionic 2 can now target the mobile web with practically zero code changes. Ionic apps work both as a native app on iOS and Android and as a progressive web app on the mobile web. Write once, run everywhere!

We’ve put our heart and soul into Ionic 2, and we’re excited to finally be able to recommend Ionic 2 for production-ready mobile apps. We hope that you find it just as performant and flexible as we do and that it makes building mobile apps and mobile websites easier than you ever thought possible. After nearly three million apps built on Ionic, we’ve learned a thing or two about how to build a quality app framework, and we’ve taken every lesson learned and put them all into Ionic 2.

And if you like Ionic 2, we hope you take a look at some of the supporting tools we’ve built to give Ionic developers an edge up, including our rapid testing tool Ionic View, our fast prototyping and rapid app development tool Ionic Creator, and our suite of tightly integrated backend services with Ionic Cloud. Ionic is becoming a one-stop shop for everything mobile.

From all of us on the Ionic Team, please enjoy Ionic 2, and we hope to see you on the forum!

Max Lynch

Cofounder/CEO, Ionic