Ionic 4 — what’s new?

April 18, 2019

Most popular

Ionic 4 is here! And as many developers claim, this is the best Ionic’s version ever. Ionic already had many advantages, but now there are many upgrades and new features. Find out what changed in Ionic 4!

Ionic 4 Switched to Web Components

And that changed the game! In the new version, Ionic components are now Web Components. What’s the consequence?

To clarify, Web Components are a set of web APIs that have extensive support on modern browsers. With Web Components, we can create custom, reusable HTML tags to use in web pages and web apps. Developers can generate widgets and components on the Web Components standards and use them with any JavaScript framework that works with HTML. Browsers interprete that kind of components natively. They are part of the browser, so they don’t need external libraries or frameworks. Technologies that relate to Web Components are among others Custom Elements and Shadow DOM.

What’s essential, Web Components push more work to a browser, which results in less coding. That’s one of the most important aims of Web Components: to enable developers re-using code as much as possible. Certainly, these changes significantly improved loading time and performance of Ionic apps. Therefore, Ionic 4 is perfect for Progressive Web Apps. But more on that later.

What is more, Shadow DOM isolates a component from any global styles or scripts applied to the website. You can be sure that everything displays as you want it to. That’s the thing our programmers really appreciated:

“I especially like changes in styling. Thanks to Shadow DOM it’s much easier to manage the design.”

It’s also worth mentioning here, that the Ionic team created a new web component compiler for building reusable UI components — Stencil. They use it to package each Ionic component as a web component.

Ionic 4 is Framework Independent

Thanks to the fact that Ionic components are now Web Components, Ionic 4 is completely framework independent. As we mentioned before, web components work with any framework and even with no framework at all. Therefore, now Ionic works not only with Angular, as it was so far. It can work with any JavaScript framework, like Vue.js or React.js., or with no framework at all. Since then we had Ionic Angular, now there are also Ionic Vue and Ionic React. That’s a big win for the Ionic team because since the beginning they wanted to create an independent UI framework.

Our developer found that fact really game-changing:

“The best thing is that Ionic is now framework independent. What is more, we can use it without any framework at all. It allows us to check some solutions in plain Javascript project quickly. It’s a massive change as regards to Ionic 3.”

Ionic CLI in Ionic 4

Ionic CLI is a Command Line Interface — a text-based interface used for interacting with a framework. It’s a tool that offers a lot of helpful commands for Ionic developers.

Ionic CLI 4.0 offers more features, works faster and is easier to use. It comes with Cordova integration with live-reload, building and debugging tools. It allows to use console commands to create components, new pages or directives, and custom schematics for generators. What is more, the new CLI works perfectly with Angular CLI so the developers could benefit from both.

Ionic 4 is also compatible with Capacitor, a cross-platform API and a code extension layer. Capacitor makes it easy to call the native SDKs and write custom native plugins. It also supports PWAs and allows developers to write one app and deploy it to two app stores.

Navigation and Routing in Ionic 4

Ionic 4 uses the Angular Router, one of the most important libraries of Angular. It allows the app to maintain its navigation state on browser reloads. A combination of Ionic Framework and Angular Router lets developers create applications with rich animations. What is more, with the new router, we don’t have to use deep-links to link to the various parts of our app.

Ionic 3 used navigation based on the simple stack, new pages were pushed on the top. To navigate backwards developers had to make a pop of the last page. Now it’s possible to use parallel navigation and exchange multiple navigation stacks at any time.

Lazy Loading And Better Performance: Ionic 4 Is 1.5x Faster

Lazy Loading is Ionic’s design pattern that allows distinguishing the moment of the initialization of components. The elements split into multiple bundles and load when it is required. That improves the performance and cuts loading time. Therefore, the performance is a lot better, and the apps are 1.5 x faster.

New (Better) Documentation

Ionic was already known for easy and rich documentation, but now it’s a lot better. Above all, the Ionic team completely redesigned and improved The Ionic Framework documentation. Therefore, it’s easy to maintain and update, with improved loading time and navigation. There are more examples, previews and code snippets that developers can drop directly into their app. New documentation is open source, and the team built it with previously mentioned Stencil. The design is simpler, navigation well-organized. In addition, components and API references are easily-understandable. Great job!

Ionicons 4.0

Ionicons is the official pack of icons delivered by the Ionic team. Developers can use them in Android, iOS, web, and desktop apps. In version 4.0 they are distributed as web components, and their sizes are significantly reduced. There are also some new icon forms that reflect the latest iOS trends.

Progressive Web Apps with Ionic 4

Let’s start with the fact that the Ionic team designed Ionic 4 especially to be the best UI framework for building Progressive Web Apps. With Ionic 4 we can develop fast and reliable PWAs and reach high Lighthouse scores. Web components made using Stencil are lazy loaded and delivered in collections developers can easily use. That kind of components rank high in Lighthouse! Ionic 4 template app is progressive, and UI components are very flexible. Therefore, they allow developers to easily build a responsive design needed for PWAs. The framework supports using service workers to make the app work offline or with a bad connection.

Native API Changes

Ionic Native is a set of Cordova plugins that allow adding native functionalities to apps. The community maintains them. What is more, now, Ionic Native 5.0 also is framework independent. It means that developers can use Typescript wrappers for Cordova plugins outside of Angular.

CSS Variables in Ionic 4

Developers can define CSS variables (Custom Properties) and reuse them in the document. When they access the code JavaScript, they use CSS variables to add advanced features. CSS Variables provide a standardized way of theming to Ionic apps, independently of the frontend frameworks. In Ionic 4 developers can change the overall look and feel of the app’s UI just by changing a few variables. There’s no need to use complex building tools.

What do developers think about that?

“The most significant change is making the Ionic framework agnostic. Other modifications are not so revolutionary but provide smooth evolution. Although for me, changes in theming make things easier.”

Custom Web Animations

Ionic’s internal web animations library will migrate to the standardized Web Animation API. Therefore, it will be easier to provide custom web animations for Ionic. The team claims that soon they will give even more animation options.

Predictable Releases And Better Support

The whole Ionic team watches issues the Ionic community reports. On the team’s GitHub Project Board we can track on which issues they are working on. What is more, they ship patch releases every two weeks. The Ionic community receives better support from the side of the Ionic team. What is more, they also provide better support for the desktop.

Conclusion

To sum up, Ionic 4 is a great UI framework for building cross platform apps and Progressive Web Apps. It’s framework independent, the performance is a lot better. Moreover, it has a few really useful features and upgrades.

At Appstronauts we’ve checked if it’s worth to migrate an app to Ionic 4. Results are really interesting.

 

You may also like..