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 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.
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.1, please update to the latest version.
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 🏄!
@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> ...
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.
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!