If you’ve heard of hybrid apps, chances are that you’ve heard of Ionic as well. Touted as one of the best frameworks available for hybrid app development, Ionic comes with a lot of great features that contributed to its recent wide-scale adoption by app developers. The open source SDK features a library of UI components that can be used to develop blocks for an app.

Ionic 4

Two years have passed since the release of Ionic 3. And with a few more enhancements in functionality, documentation, build-time, multi-framework compatibility and a few other aspects, Ionic 4 was launched earlier this year. Ionic 4 seems to be the result of the team’s goal to make Ionic a robust platform for developing immersive progressive web applications (PWAs).

This is probably why the new version of the popular framework comes with an array of interesting tools, technologies, and concepts including but not limited to Ionic PWA Toolkit, Capacitor, Stencil etc. Ionic 4 allows the use of Ionic elements with React, Angular, Vue etc. which makes the latest iteration quite impressive compared to many of its tackier counterparts.

New features in Ionic 4

Ionic 4 is designed to be much easier to handle compared to the previous iterations of the SDK; developers won’t have to put much effort when it comes to rebuilding or retracing their apps. The upgrade added a number of features including Stencil and internal code refactoring to Ionic.

Let’s delve into the new features and enhancements of Ionic 4 in detail.

Web components

The addition of web components in Ionic 4 is probably one of the biggest enhancements of this version. These components are basically web platform APIs that enable creation of reusable and encapsulated custom HTML tags that can be used in both websites and web applications. Widgets and other elements built on these web components will work across popular modern web browsers and can also be used with any HTML-friendly JavaScript library or framework.

The browsers will essentially do the heavy lifting while also improving site/app launch and loading speeds. This feature would be useful when building high-performance PWAs.

Stencil

Another great addition from the Ionic team, Stencil is a framework-agnostic web component compiler designed to work with any JavaScript framework and even without a framework. Stencil also employs a few APIs including Virtual DOM, TypeScript, JSX and Async Rendering. Again, this is another feature ideal for PWAs.

Capacitor

It’s both a code execution layer and a cross-platform API added to Ionic 4 to make it easier to call native SDKs from web code to write custom Native plugins. Capacitor inherently supports Progressive Web Apps enabling developers to write one app and deploy it not only on app stores but also on the mobile web.

Lazy Loading

Lazy Loading is a great enhancement that can hold back initialization of components until it is needed; thus boosting app performance and speeding up the app load time by splitting it into a number of bundles which can be loaded on demand.

Routing

Ionic 4 also features some routing improvements. Developers are now required to map components to routes instead of pushing them into ion-nav directly. With a single ion-router component in the codebase, it can control all interactions with the browser history. Additionally, it utilizes an event system that aggregates updates making it easier to support native PWA development. Meanwhile, the ion-router outlet and the Angular router can assist developers with Angular projects.

Improved customizability

Customization with Ionic 4 is better than ever due to the improved CSS Custom Properties also known as CSS Variables. With the new CSS Custom Properties, developers can expose a ‘public theming API’ that provides structure. Subsequently, this feature also makes modifications easier.

Optimized to be 1.5x Faster

Having evaluated over 100 Ionic components reportedly, the Ionic team performed some major performance improvements on the latest version of the SDK. Additionally, they improved the UI and theme customizability. Furthermore, Ionic 4 includes a comprehensive overhaul on material design and iOS to match the latest standards. The components have been optimized for load and render performance so much that each component scored a 100/100 on Google’s Lighthouse benchmark tool.

An array of new components

Ionic 4 features a number of new components serving a variety of purposes that would help an app outshine its competitors.

Here are a few worth mentioning:

  • ion-backdrop
  • ion-picker
  • ion-ripple-effect
  • ion-skeleton-text
  • ion-select-popover
  • ion-searchbar
  • Ionicons 4.0

Conclusion

Some solid changes along with a number of notable improvements emphasize the Ionic team’s passion when it comes to transcending the capabilities of the beloved framework. It’s been just a few months since the release of Ionic 4 but the impact of the latest version is still apparent as a number of organizations including ours step forward to invest more on Ionic.

If your organization wants to give Ionic a shot in developing a high performance PWA, we can help you out with our expertise. Drop us a message to get started.