When Ionic 2 was first released I was excited about it, but I also shared the thoughts of many Ionic 1 developers which would be something along the lines of: “Oh man, I was just getting comfortable with Ionic 1 and now I have to learn another framework?”.
It comes with the territory that we are always going to need to learn new technology as it comes out and can’t rely on a single skill set for our lifetimes, but the gap between the full release of Ionic 1 and the Ionic 2 alpha was pretty small.
Despite this short time frame, it was easy to see that this was the best and most obvious choice for Ionic. The options were basically:
- Angular 2 which comes with massive improvements over Angular 1, especially for mobile, is being developed and will eventually overtake the first version of Angular. Build a new framework around that.
- Continue developing Ionic 1 on an older version of Angular, spending more time and effort to see lesser results, and eventually end up switching over to Angular 2 anyway
Out of those two options I think number one is the obvious choice (even if I have written those options with extreme bias). The Ionic team will be continuing to support Ionic 1 for a long time anyway, so they’re not leaving people stranded out in the dark there.
I’ve spent a lot of time (like, a lot a lot) learning and building with Ionic 2 since the alpha was released. Throughout this time I’ve been writing Building Mobile Apps with Ionic 2 so I’ve been forced to dive deep into many aspects of this new framework and in my view, Ionic 2 is better than Ionic 1.
I’m not really making a huge claim in this post, it’s not really surprising that the second iteration of something is going to be better (with movies perhaps being the exception there). With Ionic 2 being built on Angular 2, naturally there are going to be huge improvements and with a fresh start the Ionic team can take all of the lessons they learned from Ionic 1 and use them to build a better Ionic 2.
Ionic 2 is currently in beta and is being actively devleoped, so to say right at this instant whether Ionic 2 is better than Ionic 1 could be debated. It’s not as stable as Ionic 1 and is still missing some important components and there’s plenty of bugs. That’s not really the point I’m getting at with this post though, I’m going to be talking about things I like about Ionic 2 purely from a development perspective.
At a high level, Ionic 2 is very similar conceptually to Ionic 1. In Ionic 1 you have controllers that hold your logic, and templates that define your views. Ionic 2 is the same, except you have classes instead of controllers. There are some differences in the template syntax, and a lot of differences in the class structure, but the concepts are still similar and it feels pretty natural switching from Ionic 1 to Ionic 2. I have a more detailed case study on the differences between Ionic 1 and Ionic 2 if you’d like to examine the differences in greater detail (it is slightly outdated, but still relevant).
So, let’s jump into some specifics. Here’s 7 reasons why I think Ionic 2 is better than Ionic 1.
1. Organisation and Structure
In Ionic 2, every page or component in your application has its own folder with its own class file, template file and style file. If I have two pages in my application, Home and About, I would have the following file structure:
- home
- home.ts
- home.html
- home.scss
- about
- about.ts
- about.html
- about.scss
This keeps everything very neat and organised and also makes the features you create very modular. I’ve created an entire Ionic 2 application, and then later dropped that application inside of a single tab in another application by copying over the relevant components and everything worked flawlessly. I’ve also made a Google Maps service that I can easily just drag and drop into any application that I want to use it in.
Of course, you could organise your Ionic 1 projects like this as well, but it wasn’t really the default style that was used. It would require prior knowledge and motivation to achieve a sensible and scalable structure like this in Ionic 1.
With Ionic 2 you can’t really break out of the best practices mould, you’re more or less forced into doing things the right way. In Ionic 1 I could get lazy and just create one controller that would handle the logic for multiple different pages in my application, but in Ionic 2 you can’t really do that.
2. Tooling
It’s a simple thing, but one of my favourite things about Ionic 2 is this command:
ionic generate page MyPage
which can also be shortened to:
ionic g page MyPage
With the Ionic 2 CLI you can automatically generate pages, providers, tabs, pipes, components and directives and it will set up all the files you need and some boiler plate code for you. For example, by running that command above the Ionic CLI would automatically generate the folder and files for me:
- my-page
- my-page.ts
- my-page.html
- my-page.scss
and inside of those files will be some code to get you started, most notably the TypeScript file will look something like this:
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
}
So when starting a new project I can run about 7-8 different commands and have half of my application built for me. I can jump right past all the tedious stuff like saving new files and setting up the basic structure and just jump right into the interesting stuff. It’s also great for beginners because it gives you an idea of what the file should look like.
3. Navigation
Navigation in Ionic 2 is very different to Ionic 1. In Ionic 1 navigation was defined using URLs, for example:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'templates/intro.html',
controller: 'IntroCtrl'
})
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise("/");
});and you would activate these states by linking to them, which is a very “web” approach. In Ionic 2 a more “native” approach is used where pages are “pushed” and “popped”:
this.nav.push(MyPage);I won’t get too much into what that means here if you don’t know already because I’ve already written a large post explaining push pop navigation in Ionic 2. Essentially though, you can push a page onto the navigation stack to make it the current page, and you can pop a page to remove it from the navigation stack and go back to the previous page. Just like pushing and popping an array.
This is a much more flexible approach in terms of how easily complex navigation structures can be created, but I’d never run into too much trouble with the navigation system in Ionic 1 so this is mainly just a preference thing for me. I find it much easier to navigate between pages this way.
4. Template Syntax
This is another preference thing for me because the template syntax between Ionic 1 and Ionic 2 is extremely similar. It looks a little weird and quirky at first but I find the template syntax in Ionic 2 to be cleaner. Let’s take a look at a couple of examples:
Ionic 1:
<img ng-src="{{photo.image}}" />Ionic 2:
<img [src]="photo.image" />The difference here is inconsequential really, but the second code block certainly looks cleaner. Here’s another example:
Ionic 1:
<button ng-click="doSomething()"></button>Ionic 2:
<button (click)="doSomething()"></button>Again, it looks a little bit cleaner but another advantage with the Ionic 2 code here is that I can easily change the click handler to any event I like, I could use (tap), (change) or whatever else I like and it will work.
There’s a lot more small changes to the template syntax like this, but I don’t want to spend too long talking about it here. In general though, I find the new syntax to be a bit cleaner and a bit more useful. If you’d like to dive deeper into the new template syntax, you can take a look at another post I wrote about new Angular 2 concepts and syntax.
5. It’s Just Javascript
In Angular 1 and Ionic 1 there was a lot of framework specific terminology and syntax to learn, but with Ionic 2 it’s basically just plain old (or rather new) Javascript. Everything you build is basically just standard ES6 (well, TypeScript technically) code, which isn’t specific to any framework. It’s just Javascript.
If you’re unfamiliar with what ES6 is, take a look at this post that explains what ECMAScript 6 is, but essentially it is just the latest specification for Javascript and comes with a bunch of new features.
The benefit of this is that everything you learn when building Ionic 2 application isn’t just going to help you build Ionic 2 applications, it’s also going to help you be a better Javascript developer in general. The skills you develop with Ionic 2 are going to be able to be applied in a bunch of other places as ES6 eventually becomes the new “normal” Javascript.
6. ES6 Syntax
Similar to the last point, but this is more to do with the new syntax ES6 offers specifically. Since Ionic 2 uses ES6, that means we can use all of the new ES6 syntax. ES6 isn’t universally supported by browsers now, but Ionic 2 transpiles your code into valid ES5 code (which is the Javascript most people are familiar with using) when it is built. You won’t really see this happening unless you’re debugging the transpiled code, so you can essentially just happily code away in ES6 and everything will just work.
As I mentioned, I already have a post that explains ES6 in detail so I’m not going to spend much time on that here, but if I had to pick one ES6 feature I absolutely love it would be the fat arrow syntax which allows you to turn a function with a callback like this:
doSomething(function (data) {
console.log(data);
});into this:
doSomething((data) => {
console.log(data);
});The code looks a bit cleaner which you may have gathered I am a fan of, but the coolest thing about this is that it maintains the parents scope. What this means is that any references to this will be called in the context of the parent, not the callback function. So now rather than doing something like this:
this.someData = null;
var me = this;
doSomething(function (data) {
me.someData = data;
});you can just do this:
this.someData = null;
doSomething((data) => {
this.someData = data;
});with no need to create additional variables to maintain an accurate reference to the parent.
7. Building
In Ionic 2 almost all of your coding will be done inside of the app folder, which is completely separate to the www folder which contains the code that is actually served to the browser. When you run an Ionic 2 application, the code in the app folder is automatically transpiled and bundled into a single Javascript file which is copied into the www folder and served. For the most part, you don’t have to touch your index.html file at all.
I prefer this to Ionic 1 where you would have to import all of the Javascript files you’ve created into your index.html file, and this also meant that your final built application would contain bunch of different Javascript files (your source code). Although the Ionic 2 bundled code isn’t minified or obfuscated automatically, I like that by default the built application won’t contain the source code directly (just the single, transpiled Javascript file, which looks pretty funky and hard to reverse engineer). This does however make debugging a little trickier, which is about the only thing I prefer about Ionic 1 so far.
Summary
Without a doubt, I would recommend everybody switch to Ionic 2, the question is when. The question of whether to use Ionic 2 comes up a lot, so here’s my recommendations summarised:
- If you’re completely new to Ionic, start with Ionic 2. By the time you’re up to speed it’ll likely be stable enough to use in any project.
- If you’re using Ionic 1 for existing projects, stick with Ionic 1 for now and switch them over later
- If you’re using Ionic 1 and starting a new project, use Ionic 1 if it is a mission critical or complex application that needs to be released soon, use Ionic 2 if there can be some tolerance for bugs in the short term or if the application won’t be released for months.
If you want to start learning more about Ionic 2 (which I would recommend everybody do now, even if you’re sticking with Ionic 1 for the time being), feel free to check out some of my Ionic 2 tutorials or take a look at my massive Ionic 2 book: Building Mobile Apps with Ionic 2.