September 28, 2016
  • All
  • Framework
  • Ionic
  • Ionic 2
  • Top Posts

Announcing the Ionic 2 Release Candidate!

Mike Hartington

Director of Developer Relation...

Ionic 2 RC0
Well, hello there, wonderful people! You may have noticed that we’ve been a bit quiet since the last release of Ionic and may have been wondering where we ventured off to. We’ve been hard at work prepping the Ionic 2 Release Candidate! We’re happy to announce that it’s finally here, along with some major performance improvements and new features!


All The excitement

Now, before you rush off to update your dependencies, please take the time to read over this section of the changelog. There are several structural changes to the setup and build process that need to be made before your app can be upgraded. The changelog goes over the update process. Without these changes, your app will not be upgradeable.

Update to Angular 2 Final

Angular 2.0 final is out and ready for folks to use. Make no mistake, THIS IS HUGE!! The API has solidified! Final introduces some updates that make organizing dependencies in your app much easier. @NgModule allows you to declare all your dependencies up front, instead of having to declare them multiple times in an app. Other changes in Angular include internal API changes, so any custom components will need to be updated accordingly. Give the Angular Changelog a glance for your updating process.

Ahead of Time Compiling: Simply put…faster apps

With the updates to the core version of Angular used in Ionic, we’ve been able to take advantage of the Ahead of Time (AoT) compiler in our build process. This was a big change for the internals of Ionic, but the payoff is well worth it. Instead of compiling your templates in the browser and on the fly, which can be very slow if you have a large view, AoT allows for the templates to be pre-compiled in a build step. With AoT in place, you can expect to see a big improvement in your app’s boot-up time, as well as in view switching. The compiled code that is created by AoT is highly optimized code that can run much faster than code any of us could write.

Don’t believe us? Take a look! We used our tabs starter as a base point for testing Beta 11 and this release.

beta11-vs-beta12


Beta 11 on the left, RC on the right

A New Build Process

Now, with AoT in place and Angular’s API finalized, we’ve been able to look at Ionic’s build process and really see how we could make it better. We took our time and looked at all the available build tools and fell in love with Rollup. There are many build tools out there, and they all do a great job, but for us, Rollup provides some nice technical features, like much more optimized code that tends to have fewer closures. This enables code to be executed much faster in the browser. There’s also tree-shaking, which allows you to include only the code your app needs to run, making the bundled output much smaller.

With this new build process, we’ve also started to move away from a Gulp-based workflow. We’ve started moving over to NPM scripts, since they offer the same flexibility that Gulp tasks provide. This also means that there’s one less dependency to install (which ultimately turns out to be many many less dependencies) when you build the app. The new NPM script build is heavily inspired by the amazing work done by the Create-React-App team, where all the configuration and build scripts are a package that gets called. For users, though, nothing changes. You can still run ionic serve and have the entire build process run before launching a live-reload server. If you want to customize your build, thankfully, everything is configurable and very straightforward. We think this strikes a good balance between “Batteries Included” and “Bring Your Own Build Step”.

It’s worth noting that the updates to the CLI to make this possible also include backwards compatibility for older Gulp-driven projects. So even as these new features become the default, Gulp will still be supported for older projects. And if you still want to use Gulp in new projects, no problem! Go for it! Any task runner, or even straight node calls, can execute these scripts.

We’d also like to point out that Ionic is not tied to any one bundler or our @ionic/app-scripts package. If you’re happy with your own build process, there’s no reason you can’t pick and choose the tools of your liking to customize your own Ionic build scripts.

Cleaning up the App Structure

Now that Ionic and Angular themselves have finalized their APIs, we now have a solid sense of “how” Ionic apps should be structured, such as the directory structure, filenames, and file locations. We’ve also made some changes to the default app you get from ionic start, which will make a lot of sense when you see them. We’d like to point out that the new structure is the structure we’ll recommend moving forward. But just like our recommended build scripts, you’re welcomed to adjust it however you like, since Ionic itself is not tied to a specific structure.

With @NgModule being introduced, we decided to rename the top source directory to src (mind-blowing, we know!). All of the files related to the root app component and @NgModule get stored in an app folder, while pages and providers sit in src/. We’ve also added an assets directory to house things like images, manifest.json, and a service worker file.

Parting words

This release brings Ionic 2 very close to its final form. Between each alpha and beta version, we’re sure you’ve noticed significant changes to the API…but no more! The API for this release candidate is the same we hope to ship for our final (which isn’t far behind). Now, with the RC out, we’d like to ask for assistance from our awesome community members to really beat on the framework and break all the things. As always, please report any issues you find. Once we’re confident there aren’t any major show-stopping bugs within our release candidate(s), you can expect to see 2.0.0 out soon afterwards.

Link to Changelog

Link to Rollup

Link to Ionic 2 RC0 Docs

Link to NgModule


Mike Hartington

Director of Developer Relation...