We use cookies to make for you best possible experience on our web shop and create targeted advertising.

Ionic 4 vs Ionic 3: How To Migrate?

Mon.27.08.2018 BY Admin

Migrating from Ionic 3 to Ionic 4


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 thatcan 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.
Ionic Banner
Graphic Banner