Now that Angular 2 is final, I thought I’d take another look at Ionic 2. With an Ionic 2 Release Candidate also available, hopefully everything will be a bit more stable from here on forward… (Hopefully.)
In any case, here are some of the differences I’ve found in Ionic 2 compared to Ionic 1:
- The Obvious: Angular 2, TypeScript, and all that entails. If you’re not willing to buy into TypeScript and transpiling, there’s not much point in reading any farther.
- Components: Honestly, the difference between a Controller file and a Component class file isn’t that significant to me. Rather, what I appreciate about Components is this: it was always sort of insane that the starting point of Angular 1 and Ionic 1 was to jam all your controllers into a single file. How much fun is it to scroll through a 10,000-line file and get merges on every single commit? Thankfully, the Component-based approach in Angular 2 and Ionic 2 is pushing everything away from this. All the code related to a component gets packaged together, and separately from other components. Sanity!
- Routing: Ionic has its own routing system, in place of the standard Angular router. They promote the push/pop method of routing as being more mobile-friendly. I’m not sure I’m convinced. Many apps I work on look more like a cloverleaf than a tree — you go through some complete process and end up back at the home or dashboard, rather than drilling down and then unrolling back to the start. I fear the ever-growing nav stack, so I’ll have to see how well this works in practice.
- New Components: Ionic 2 brings a number of new components, including (but certainly not limited to) alerts, date pickers, and the oddly named (yet familiar) Toast. I am already looking forward to more custom code and third-party plugins that I can eliminate in favor of new built-in components.
- UI Revisions: As one standout example, Buttons in Ionic 2 no longer have borders (unless transparent, in which case they show only the border). Ordinarily, this would be no problem, just a change of style. Except unfortunately, this change was backported to Ionic 1 where it works much less well. For instance, a Segment in Ionic 2 renders a border around the entire thing, between options, and also (on the desktop) highlights the option under the mouse. In other words, each option gets a lot of visual distinction. Whereas in Ionic 1, despite the appearance in the documentation, a Button Bar uses vanilla borderless buttons, meaning you appear to get a large colored bar with a bunch of random text floating freely within it (there’s no visual distinction between the buttons). Still, at worst, this is motivation to upgrade to Ionic 2.
Altogether, I’m excited to try Ionic 2, if only for the amount of code and tedium I can cut out using the updated tools and new components. If the hard requirements to use TypeScript and Angular 2 are the price to pay, I’m at least willing to entertain that.