Ionic 4 neutronium released

January 27, 2019, 10:52 am Categories:


If you've been involved in the Ionic community you'll already know that a production-ready release of Ionic 4 was recently published and announced this past week.

In this article I want to cover the key changes/features of this release and how Ionic 4 impacts you as a developer - but first that codename....


Coined by scientist Andreas Von Antropoff in 1926 the term neutronium is a hypothetical substance conjectured to be the element of atomic number zero which Antropoff placed at the head of the periodic table (remember that chart from your high school chemistry classes?).

This was shortly before the actual discovery of the neutron itself in 1932 whereupon, since the mid-half of the 20th Century, the term neutronium has been popular within science fiction to refer to incredibly dense and strong forms of matter - presumably inspired by the matter at the core of neutron stars.

Interesting choice of codename for the latest release of Ionic 4 right?

Ironically neutronium as a dense, strong state of matter bears little resemblance to the proposed cores of neutron stars which scientists believe to be composed of fluids and extremely unstable.

Hmm....might want to re-think that codename! :D

Web Components

One of the biggest changes introduced with Ionic 4 is the use of Web Components to build and supply the 100 or so default Ionic UI components that we've used in previous iterations of the framework.

This is a pretty significant change as the Web Components API provides a standards compliant way to create customisable UI widgets consisting of pre-packaged HTML, TS/JS and CSS code that is encapsulated AWAY from the rest of the application code.

With the Web Components API Ionic components now get to leverage the following technologies:

  • Custom elements - JavaScript APIs that allow new HTML elements to be created and their behaviour defined
  • Shadow DOM - Allows a feature to be separate from the main document DOM through JavaScript APIs which allow for the creation and management of a shadow DOM “tree”
  • HTML Templates - Reusable chunks of HTML are able to be defined within a Custom Element using the <template> and <slot> elements
  • HTML Imports - Makes importing/reusing HTML elements in other documents possible

That's an impressive collection of APIs isn't it?

The following table summarises the pros and cons of using the Web Components API - particularly in the context of Ionic application development:

Web Components
Pros Cons
Code is self-contained Can be hard to debug
Shadow DOM encapsulation (no memory leaks or interference with other elements in the DOM) Programmatic manipulation of shadow DOM elements can be tricky
No third-party libraries/plugins required Legacy browser support requires use of polyfills
Allows creation of semantic markup (I.e. <site-logo></site-logo>, <login></login> etc Custom components can be difficult to write from scratch
In-house component libraries can be created for use across projects Improper planning might lead to poor execution and bigger problems with implementation
Makes use of modern browser technologies Backward compatibility can be limited

Web Components used in Ionic 4 are built entirely with StencilJS - a custom Web Component authoring tool developed by the team at Ionic - which I have covered in previous blog articles.

Bring your own framework

Previously Angular (which is still the default choice of front-end development framework for Ionic) was the only default option available for developers to work with. Now, thanks to the adoption of Web Components Ionic 4 is able to integrate and work with mainstream front-end framework such as Angular, Vue and React.

This is a massive change in how Ionic can be used as it frees developers to use the framework of their choice when developing their apps (which will also have the knock-on effect of helping to grow the adoption of Ionic within the wider development community).

By making Ionic 4 framework agnostic developers can simply continue using the development framework tools of their choice and build on top of those with Ionic's UI components, APIs, plugin architecture (Apache Cordova or Capacitor) and ecosystem tools (I.e. AppFlow and Ionic Studio). Doing so will result in cross-platform applications that are optimised for mobile, leverage best-of-breed technologies for an improved user experience and perform quicker while being less resource intensive than apps built with previous versions of Ionic.

That's a win-win situation for developers, clients and the team at Ionic as all parties benefit from this approach.

Caveat emptor: the official React and Vue bindings for Ionic are still in an alpha stage and are NOT as yet baked into the Ionic CLI project generator tool.

The team at Ionic are continuing to work on progressing the integration of those two frameworks within Ionic and the Ionic CLI but for now.....proceed with caution.

Progressive Web Apps

One of the goals of Ionic 4 was to provide out-of-the box support for building high performance Progressive Web Apps (PWAs).

Through complete redevelopment of the framework's internal UI components using Stencil Ionic 4 can now benefit from smaller file sizes and increased performance (thanks to use of Web Component APIs such as Shadow DOM and HTML imports) as well as lazy loading components on request.

Sounds great right?

However, unlike Ionic 3, publishing your completed application as a PWA isn't enabled by default. Instead, if you're using Angular as the default framework for Ionic 4 development, then you'll need to install the Angular PWA package and configure your application accordingly.

I suspect that with Ionic 4's move to being a framework agnostic development tool that baked-in PWA support might be difficult to accomplish across different front-end framework options such as Angular, React and Vue - hence the use of third-party packages for this purpose.

Let's see how that situation shapes up with forthcoming iterations of Ionic 4 and what changes they may bring.

Is Ionic 4 really production-ready though?

I've been mostly impressed with what I've found when exploring/playing with Ionic 4 - particularly with the deliberate decision to simply allow Ionic to sit on top of the choice of development framework and let that framework do the work instead. As an Angular developer this is perfect for me as I can generate an Ionic project and work with that as if I'm working directly with an Angular project - same directory structure, naming conventions and tools.

No differences. No having to familiarise myself with the Ionic versions of what I'd normally work with in Angular. Less hassle. Quicker to work with. Perfect.

Now that said there are some minor quibbles - and this is not meant in any way, shape or form to take away from the hard and amazing work that has been put into version 4 of Ionic (which, as developers, we should all take some time to be grateful for as we get access to some amazing software tools to help us realise the development and delivery of our apps) - so, as respectfully as possible, here they are:

  • VirtualScroll bugs (which have persisted for some time now in previous versions of Ionic), navigation/animation issues and other bugs affecting both expected functionality and performance
  • No CLI baked in Vue and React integration - still a work in progress as current integration methods are a little cumbersome and the documentation isn't as detailed/extensive as it could be

Given that there are some serious bugs/issues that have been reported with Ionic 4 then it's hard to justify the Ionic team's announcement that this release is indeed production-ready. That said I also understand as a developer that NO software is ever released being 100% perfect, that there are always going to be flaws (however tiny and/or non-impacting they might be). When all is said and done, no matter the software tool, it's simply a case of weighing those issues up and determining if that tool can be used to develop applications that are able to be delivered in a production capacity.

And as far as Ionic 4 is concerned? No complaints from me.

In Summary

Ionic 4 brings the largest internal changes yet to the framework - particularly where Web Components and Framework integration is concerned - and these are all good news for developing hybrid native apps and PWAs...even if there are still outstanding bugs and issues that need to be resolved with certain aspects of the framework.

In particular I'm really looking forward to the official React and Vue integration being baked into the CLI as part of the project generation process but I suspect that won't be available for some months yet. Given the popularity of those two frameworks, especially React, their integration into the framework is a pretty shrewd move as it allows for much wider adoption of Ionic amongst the developer community.

By making Ionic non-reliant on a particular framework, thanks to the underlying use of Web Components, this also future proofs the tool against framework churn and decline which, in the development community, is no bad thing. I'm sure most developers will agree that there's nothing worse than devoting all your time and energies into learning a particular software tool only for that to be radically revamped within the next year to 18 months or so, or even worse fall from use altogether (remember Adobe Flash anyone?).

All that investment goes up in smoke as you have to re-tool yourself (and with the pace of industry change and innovation, combined with less available time than we might like, that can often be a stressful process). Not good. Not healthy. Thankfully Ionic 4 is making a huge step in the right direction by allowing developers to use their framework of choice.

Additionally changes to the online documentation see that particular resource greatly expanded and refined to be better organised and user friendly (which is no small feat given how good the Ionic 3 documentation was) - and this is only going to improve given forthcoming changes and iterations of the Ionic framework and its ecosystem of related products and services .

What are your thoughts on Ionic 4? Love it? Loathe it? Neutral? Please feel free to share in the Disqus section below.



Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.