Announcing Ionic 3.5.3
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!
