Nifty Stuff

There are several things that made us believe ionic 3 is much better, easier and mature than ionic 1 to build high quality apps. Some of them are explained below. Learn Ionic Framework!

Object oriented everything!

As we mentioned when we talk about models, they are key for defining and enforcing business logic in applications. Angular 5 embraces this and that’s why you will see object oriented stuff all along the way. Depending on the style guide you followed for developing angular 1 applications, this may sound akin to you or not as angular 1 didn’t embraced OOP the way angular 2 does.

Another key ingredients to my previous argument are Typescript and ES6. Angular 5 is written in TypeScript, and TypeScript is a superset of JavaScript, in particular ES6.

ES6

One of the new features of ES6 are Classes. They are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. You can learn more in this article about ES6 features.

Typescript

TypeScript makes abstractions explicit, and a good design is all about well-defined interfaces. It is much easier to express the idea of an interface in a language that supports them. I won’t go in detail here because much it’s said in this post about typescript and angular.

But as a conclusion let me tell you that TypeScript takes 95% of the usefulness of a good statically-typed language and brings it to the JavaScript ecosystem. You still feel like you write ES6: you keep using the same standard library, same third-party libraries, same idioms, and many of the same tools (e.g., Chrome dev tools). It gives you a lot without forcing you out of the JavaScript ecosystem.

Ionic 3 Navigation

This may be the key point that differs more an angular 5 app. Ionic 3 doesn’t use angular 5 routing system, instead they created their own navigation to better serve the use cases of mobile apps. They inspired themselves in the way ios handles navigation between pages, pulling a pushing views instead of a tree structure most commonly seen on the web.

At first I was reticent about this approach as I was used to the way ionic 1 worked with tree structures for the routing. After some time playing around with ionic 3 I must admit that this new navigation is much more easy and understandable than the one in ionic 1.

In ionic 1 you were reaching the limits of the framework everytime you wanted to implement a sophisticated navigation. I have created complex navigation structures in this app template and I don’t get that feeling, in the contrary, complex navigations can be easily implemented with ionic 3 navigation system.

As a final note, in ionic 3, don’t think about your pages as specific route paths, but rather views you can display anywhere at anytime in your app, for example, a ContactDetail page could be displayed through any number of user navigation flows. It could even link to itself infinitely.

In Ionic 1 you had to say “this page lives at this route” and new flows required new routes. Ionic 3 liberates you from strict paths -> pages.

Ahead of Time

Using this angular 5 technique you can radically improve performance by compiling Ahead of Time (AoT) during a build process.

An ionic application consist largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by the Angular compiler.

When developing the app you can compile the app in the browser, at runtime, as the application loads, using the Just-in-Time (JiT) compiler. This is the standard development approach, it's great .. but it has shortcomings.

JiT compilation incurs a runtime performance penalty. Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won't actually need.

The Ahead-of-Time (AoT) compiler can catch template errors early and improve performance by compiling at build time.If you want to learn more about AoT I would suggest you reading these posts here and here.