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!
- Source Code & Tools, Part 1: Between Components and the TypeScript transpiler, stuff I used to have to sort out by hand is now free. Files get separated and organized in a logical way, and then the output is jammed back together by the transpiler to eliminate loads of downloads and manual index.html maintenance. Ionic 2 will even precompile templates for better performance (see “Ahead of time Compiling”). That knocks out half of my Gulp chain that validated and combined JavaScripts, preloaded the page cache, and etc.
- Tools, Part 2: As a convenience, and to help motivate the move to a saner code layout, the “ionic” command-line tool is a little smarter and can code-generate components and services with the basic boilerplate code and put it all in the right place. It saves me the trouble of copying and pasting an existing controller JavaScript only to rip out 90% of the guts to get back to a starting point. All right, the generated code is still not a perfect starting point, but it’s a big improvement over nothing — and it’s fine-grained enough to be useful.
- Bye-Bye CSS: In the old days of Ionic 1, I built a plain old Web app with Ionic that was meant to work well on desktops and tablets. I used the Ionic CSS only, because it was a smaller download without the JavaScript API and I could do without the JavaScript add-ons. The CSS alone dressed up basic HTML nicely, making mobile-friendly widgets and etc. Those days are over, with Ionic supporting only the JavaScript versions of components. On a side note, I guess this means there’s not much chance of using Ionic 2 without Angular.
- 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.