raise_the_roof

Hi Ionites 👋, it’s been a while 🍻. We’ve been busy cranking out a steady stream of Ionic related updates, from Ionic CLI version 3, to @ionic/app-scripts 2.0.2, to ionic-angular 3.5.3. We hope you’re enjoying the stream of bi-weekly releases. We intend to continue this cadence moving forward. Today we wanted to take an opportunity and just give a few high level updates about where things are at with the recent releases and a bit of info about where we’re going next.

Ionic Angular

ionic-angular 3.5.x releases have so far been mainly focused on improving navigation. Over the past few weeks, we’ve squashed many pesky bugs, and made dramatic improvements to the Deeplinking system. Behind the scenes, we did a large refactor of navigation code to enable multiple “root level” navigation elements. Historically, Ionic apps have utilized a single-pane, phone-oriented design. With the improvements made to the ion-grid component and the addition of ion-split-pane over the past few months, the door was blown wide open with new possibilities and user experience options.

With that said, we knew we needed to make some improvements to how the navigation system worked. As of ionic-angular 3.5.3, all things navigation should Just Work ™. Whether you’re making a traditional phone app, or you’re targeting desktop, building a complex app using ion-split-pane, everything will just work. Whether you’ve got nested ion-navs, or multiple sets of ion-tabs, the navigation system is up to the task. ionic-angular 3.5.3 is a drop-in replacement, so it’s just an npm install away. As always, it’s a good idea to review the changelog, and be sure to let us know if you have any issues.

@ionic/app-scripts

With the release of @ionic/app-scripts 2.0.2, we’ve made large improvements to the ionic serve experience and app start-up time. By upgrading to the latest webpack version, we were able to take advantage of some bug fixes, and a new technique for improving performance called “scope hoisting”. If you’re already using version 2.0.0 or 2.0.1, please update to the latest version.

The ionic serve experience has been improved dramatically in the latest release of app-scripts. Due to a bug in Webpack, our incremental update build while developing was always slower than we’d like. The bug we were seeing was fixed in the latest webpack release, and we’ve seen a huge speed up in build performance. For large apps utilizing many, many pages, we’ve seen incremental build improvements of up to 50x. For smaller apps, the difference is smaller but still very noticeable. We’ve seen the time cut down between refreshes from ~5 seconds down to about ~2.5 for a medium-sized app in our testing. Ultimately, this will result in a better, faster developer experience with Ionic. We’re super stoked about that 🏄!

Another great update to app-scripts is introducing Webpack’s “scope hoisting” into our production builds. “Scope hoisting” is a technique used to concatenate several ES2015 modules together into a single module. This technique can result in tremendous improvements in both the browser’s time needed to parse/compile the javascript, as well as reducing the overall size of the deployed code. Ultimately, this means Ionic apps will be smaller and faster going forward.

@ionic/app-scripts 2.0.2 has a very minor breaking change. In the src/index.html file, a new script tag referencing a vendor.js file needs to be added:

...
<body>
  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>
  <script src="cordova.js"></script>
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>
  <!-- all code from node_modules directory is here -->
  <script src="build/vendor.js"></script>
  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>
</body>
...

Please take a look at the changelog for more information. Please let us know if you have any issues upgrading.

What’s next

Ionic Angular 4.x! The team has some big improvements to Ionic Angular in store for version 4. Internally, we have updated Ionic components to utilize standards-compliant Web Components 🎉. Ionic components are now being built with a new tool we’ve created called Stencil. We’ll have more to share about Stencil soon, but the gist of it is that Stencil helps build high performance web components. Since Ionic Angular 4.x apps will use Stencil components under the hood, they will start-up faster, have a smaller payload, and be more performant than Ionic Angular 3.x apps.

We’re working to speed up the developer experience as well. Ultimately, these improvements will make it easier to build high-performance apps. We will be working closely with the community in the coming weeks asking for alpha and beta testers. Please stay tuned for this info and help us out – we’d really appreciate it.

Conclusion

We’ve definitely been busy! We hope you’re enjoying the frequent updates to Ionic and the build process. We’re confident ionic-angular has never worked better, and we’re excited that ionic serve has become so much faster! We want all of the Ionites to truly love working with Ionic, and we will not take our foot off the gas until Ionic is as good as it possibly can be. Our north star has been and always will be providing a tremendous user experience, and a top-of-the-line developer experience.

Please take a look at the changelogs for ionic-angular and @ionic/app-scripts, and give ‘em a shot. As always, we request that you let us know if run into any problems. We have some very big improvements coming soon with ionic-angular 4 that we cannot wait to share with everyone. Have a great rest of your week and happy hacking!