Everyone involved in hybrid app development has already found out that the Ionic Framework team has released version 4.0.0-beta.0., and it took them one year to do so.
In this Ionic 4 migration guide, we will show you the novelties introduced with the version 4 of Ionic, and where you can find the information regarding migrating your app from Ionic 3 to Ionic 4.
Main differences between Ionic 4 and Ionic 3
The new version offers changes in performance, compatibility with various frameworks (not only with Angular), a new documentation and many other advancements.
Navigation in Ionic 4 vs navigation in Ionic 3
Ionic 3 used a navigation based on a simple stack where the new pages were pushed on top of the stack. Ionic 4 now uses the Angular Router. It is significant to emphasize that navController is no longer used for the navigation in Ionic 4.
Independent of any particular framework
When Ionic Framework saw the light of the day, it was built to work just with Angular. Nowadays, with the popularity and support of web components, this has changed.
Ionic 4 version has brought a significant change – it is completely independent of the based framework. Since the components of Ionic Framework are now encapsulated as Web Components, binding to a base framework has become redundant. Web components are compatible with any framework, and you don't have to use any framework at all if you don't consider it necessary.
The main goal that Ionic team had in mind is to show their original vision was to build a UI framework that
can work with any technology a web developer chooses.Web Components - Stencil
One of the major changes in Ionic 4 is the fact they moved to web components for each component. This is the main reason they built Stencil, for their own needs. Ionic 4 is based on Stencil, a compiler for web components. It is based on TypeScript, and inspired by the best parts of Angular, Vue, React, and Polymer.
Team Ionic unveiled Stencil during the Polymer Summit 2017. The great thing about Stencil is that it works along with the best tools out there for developing amazing apps that can be shipped to production without too much effort. Stencil compiles components into clean web components which can be used in other frameworks such as React, Preact, and even with no framework at all.
New documentation
The team behind Ionic Framework has completely redesigned and significantly improved the Ionic Framework documentation. They added more previews and examples, along with more code snippets. The new docs have been built with Web Component compiler Stencil, and are an open source.
New components introduced in Ionic 4
Ionic 4 brings new amazing components which are listed below.
ion-content
Provides an easy-to-use content area with some useful methods to control the scrollable area.
ion-ripple-effect
Designed to be efficient, noninvasive, and usable without adding any extra DOM to your elements, the ripple effect component adds the Material Design ink ripple interaction effect.
ion-backdrop
This is a full-screen component which overlays other components.
ion-picker
This component displays a row of buttons and columns on top of app's content, and at the bottom of the viewport.
ion-route
What this component basically does is taking a component, and rendering it when the Browser URL matches the URL prop.
ion-skeleton-text
Skeleton Text serves for rendering placeholder content. The element will render a gray block at the specified width.
ion-select-popover
A Popover is a dialog which appears on top of the current page, and is used to overflow actions that do not fit in the navigation bar.
ion-show-when
It shows it's child contents when a query evaluates to true.
ion-searchbar
Ionic team has added 9 different search bar styles, which represent a text field that can be used to search through a collection.
ion-reorder
This component allows items to be dragged to change its order horizontally.
How to migrate your app from Ionic 3 to Ionic 4?
You are probably thinking about the process of migrating your existing Ionic 3 application to Ionic 4. We are glad to inform you that Ionic Framework team has written a highly detailed documentation with the
migration steps.
Besides the aforementioned documentation, you can use the
migration linter which is a tool that automatically reviews your code and unveils you what changes you should apply to migrate your Ionic 3 app to Ionic 4.
It is important to emphasize that migrating from Ionic 3 to Ionic 4 does not require rewriting your whole application, as it was the case in the migration from Ionic 1 to Ionic 3. However, if you plan to build a new Ionic app, you should consider using Ionic 3, as Ionic 4 is still in beta.
Conclusion
Although Ionic 4 brings some substantial changes such as internal code refactoring with Stencil and the option to use other frameworks instead of Angular, developers should be able to continue developing their applications with minimal impact on the way they currently do that.
If you are just starting out with the Ionic framework, it is not a bad idea to break the ice with
Ionic app templates. These templates save time and enable you to learn Ionic by example.