Ionic 2 Beta

7 Reasons Why Ionic 2 Is Better Than Ionic 1



·

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:

  1. 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.
  2. 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 [email protected]/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()">

Ionic 2:

<button (click)="doSomething()">

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.

What to watch next...

  • Awesome read! ‘ionic generate page MyPage’ takes me back to my django days, I love it.

    I have a couple of apps running v1 I’m migrating one this week, since it’s a simple catalog app I don’t expect to have much trouble, and depending how everything goes I’ll just start building everything with V2 😛

  • Graham Logan

    So context, I have a breadth in technology but not a depth, pride myself in “Hello World” in as many things as possible. Wrote a few Ionic 1 apps to learn it and now trying out Ionic 2. The structure of a 2 project is really clear and logical to me. Hint for your book a simple well explained examples of object, constructors that does not instantiate an object instance with the same name as the objects ‘template’ that coves the use of ‘this’ would help me 🙂

  • guy katz

    personally, although tooling is great for speeding up processes, I like to understand the bits and bytes and I usually do not like it when frameworks mandate folder structure, build tools, CLI, etc.
    I usually concatenate,minify and package my css/js/html/resources by using an ANT file I write (use to this as a java developer).
    I remember not liking, for example, the requires attribute in sencha touch, which was used to dynamically load ‘classes’. I mean, eventually everything is put in a single JS/css file for performance reasons and so the requires was DOA for me – I simply skipped it.
    seems to me like my next choice of tech is ionic 2. I tend to follow and agree with things Josh says in this blog. I just hope I get the freedom to do things out of the box (structure, tooling wise etc) with ionic 2 and not have the constraint of doing things exactly how the ionic devs imagined or else I would not be able to use it. I mean, again, this is just JS/CSS/HTML and the rules are simple.

    • I feel like Ionic’s whole approach is pretty much “make it super easy for developers to get started so that they don’t have to worry about setting up complex configurations, but allow others to do what they like”. By default now Gulp is being used for building (previously webpack) but if you want to use webpack instead you can (and you can create whatever kind of custom build process you’d like). You can use plain ES6 which is the default or you can use TypeScript if you prefer. The only thing I think that is going to stay pretty rigid is the component style architecture, which is pretty much the core concept of Angular 2 – it makes a lot of sense and I don’t think it would be a good idea to structure projects in any other way.

      • Bla

        Sorry I’m spamming your site with the same question so you can see it within so many others. Can Ionic2 app be submited to app store already?

  • ChanOngpang Kuch

    Great. It very useful. Thanks you

  • Julio Campos

    Good post, I will start learning Ionic 2

  • Bla

    Sorry I’m spamming your site with the same question so you can see it within so many others. Can Ionic2 app be submitted to app store already?

    • Yes, you can, I have submitted two Ionic 2 apps.

      • Bla

        And you think it’s much better than Ionic1?

      • Bla

        I noticed Ionic2 is so much bigger than the ionic 1….

  • Great article Josh – I agree with everything you say here. I am loving Ionic 2 too.

  • أبو يمنى

    Hello,
    First, thanks for this article.

    I develop a mobile application with Ionic 1 and I have a problem :
    I use the lib ionic material design for animate the click and css style, but with the use of ng-repeat loop in the view I have found that the material design is disabled inside the loop !
    there is a conflict between the lib material design and angular js? and how I can fix this?

    thanks.

  • Sonics Wong

    So, if I need to move from ionic 1 to 2, I need to learn 3 new things?
    1) ES6
    2) angular2
    3) ionic2

    • Ahmed Galal

      plus TypeScript
      new in everything

  • jamzi

    Great article, Josh. I agree with all reasons and also ionic-cli makes it so easy to start developing Ionic 2 apps.

  • SherpaDesk Customer Support

    Thanks for your tutorials, Josh!

    I followed them I converted our jQuery Mobile app to Ionic 2 just in two month!

    Results of releasing the new production app have been amazing:

    + Loading time improved 2000% (10 sec -> 500 ms)

    + Site size decreased 600% (3Mb -> 500 Kb)

    + User interaction response speed improved 2000% (2 seconds -> 100ms)

    Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/9

    I am going to write tutorial on http://blog.ionic.io/tag/built-with/

    and on http://www.sherpadesk.com/blog/

    Our site is completely on Ionic2 beta.8

    http://m.sherpadesk.com

    FYI: some good recomendations:

    -http://blog.angular-university.io/how-to-run-angular-2-in-production-today/22

    -http://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm

  • Prudhvi raj

    How to integrate ionic in phonegap? is CSS and Js files including in phonegap is enough or any solution?

  • Rahul Jain

    Very good article, thanks!.
    http://ionicmobile.blogspot.com/

  • SomeGuy

    I think this was a stupid change. It is much cleaner this way You can tell which one is the src and which one is the variable. where in something like this if you come from any other language, the photo.image seems to be the extension. I am all about cleaning thing up, but clearly defining variables in html is just a simple way of doing this, and a dum idea to go away from.

    • st3ph31

      I totally agree, why change things that work well and is clear for developpers (who complain about this synthax??) ?

  • jstuartmilne

    Hey Josh,
    Nice post, I really like ionic2 however I don’t agree with the “It’s Just Javascript” statement, to startoff its TypeScript, which i fell in love with but angular2 has many angular specific stuff, i would agree with the “its just javascript” if it was in React which feels more like just javascript.
    Regarding performance i was expecting to see a change there, because of the NativeScript etc, but my app takes like 10s to load. Once its loaded. It looks pretty nice and it seems really native, but 10s to load its a great deal of time for a phone app. Hope they improve this.
    Thanks for your great posts! Regards

    • I could probably elaborate on the “It’s Just JavaScript” point a bit more (especially now since TypeScript is the default, which I do prefer), but what I like is that, unlike Angular / Ionic 1, there isn’t Angular specific syntax. Of course, things are imported from the Angular and Ionic libraries and you need to know how to use those, but that’s more like the frameworks fitting into a normal Javascript environment, rather than having their own special syntax.

      Your app taking 10 seconds to load doesn’t sound normal – in my experience apps take about 1-2 seconds to load. Are you using the latest version of the framework?

  • Mark Thien

    I like ionic 2 but hate angular 2 as a steep learn curve and need to write in typescript which I am not familiar with

    https://meebleforp.com/blog/36/angular-2-is-terrible
    https://ilikekillnerds.com/2016/01/why-angular-2-is-doa/