Ionic 4 is here! And as many developers claim, this is the best Ionic’s version ever. There are many upgrades and new features. Find out what changed in Ionic 4!
Ionic 4 Was 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 with less coding. That’s one of the most important aims of Web Components: to enable developers re-using code as much as possible. These changes have significantly improved loading time and performance. Thanks to that 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 will be displayed 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 Ionic team created a new web component compiler for building reusable UI components — Stencil. It’s used 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, build 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 was built to work 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 will let developers create applications with rich animations. With the new router, we also 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 can be split into multiple bundles and load when it is required. That improves the performance and cuts loading time. Thanks to the new Lazy Loading 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. The Ionic Framework documentation was completely redesigned and improved. It’s easy to maintain and update, loading time and navigation are improved. There are more examples, previews and code snippets that can be dropped into our app. New documentation is open source, and it’s built with previously mentioned Stencil. The design is simpler, navigation well-organized, components and API references are easily-understandable. Great job!
Ionicons is the official pack of icons delivered by the Ionic team. They are designed to be used 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 Ionic 4 was designed 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 allowing 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. 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 made things easier.”
Custom Web Animations
Ionic’s internal web animations library will soon be migrated to the standardized Web Animation API. Thanks to that 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 reported by the Ionic community. In the team’s GitHub Project Board we can track on which issues they are working and what is planned. What is more, patch releases are expected to be shipped every two weeks. The Ionic community can count on better support from the side of the Ionic team, better support for the desktop is also provided.
Ionic 4 seems to be a great UI framework for building cross platform apps and Progressive Web Apps. It’s framework independent, the performance is a lot better, there are a few really useful features and upgrades.
At Appstronauts we’ve organized a hackathon to check out Ionic 4 in action and evaluate it. Soon we’ll present you the results of the hackathon combined with our opinions about the new Ionic. Follow us so as not to miss this post!