Ionic 4 — what’s new?

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?

First, Web Components are a set of web APIs that have extensive support on modern browsers. They allow creating custom, reusable HTML tags to use in web pages and web apps. Widgets and components generated on the Web Components standards can be used with any JavaScript framework that works with HTML. Components built like that are interpreted by browsers natively. They are part of the browser, so they don’t need external libraries or frameworks. Technologies related to Web Components are among others Custom Elements and Shadow DOM.

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

Thanks to the fact that Ionic components are now Web Components, Ionic 4 is completely framework independent. As it was mentioned before, web components work with any framework and even with no framework at all. That means now Ionic works not only with Angular, as it was so far, but 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, it can be used 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, 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 4.0

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

Developers can define CSS variables (Custom Properties) and reuse them in the document. When accessed from JavaScript, they are used to add advanced features. CSS Variables provide a standardized way of theming to Ionic apps, independently of the frontend frameworks used. 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 build 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 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.

Conclusion

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!

Interested in creating an app with Ionic? Our team of experienced Ionic developers will gladly help you. Send us a short description of your project to hello@appstronauts.co.
Check our references and previous Ionic projects on Clutch  if you need more details. You’ll also find us on Facebook.

RELATED POSTS

Real-time Communication Apps: Implement WebRTC with Ionic

WebRTC allows you to create an app that enables real-time communication between peers. Combining it with Ionic, you can quickly develop two cross-platform apps with access to the device’s features.

From App Idea to App Store. How to Make Your Vision Reality?

You have an idea for a perfect mobile app, but you’re not sure what steps to take to deploy it to the app store? You’re in the right place: we’ll explain it to you.

HarmonyOS officially presented: Huawei announced the new OS for their devices

Huawei officially presented their new original operating system. HarmonyOS, previously known in China as Hongmeng, was announced during HOC 2019 (Huawei Developers Conference).

Liked that? Share with others!