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?
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
Our developer found that fact really game-changing:
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 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
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.
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.
Want to create an app with Ionic? Our team of experienced Ionic developers will gladly help you. Send us a short description of your project to firstname.lastname@example.org.
If you need more details, check our references on Clutch and discover previous projects in our portfolio. You’ll also find us on Facebook.