What to expect with Ionic 4

October 21, 2017, 12:02 pm Categories:


It wasn't that long ago that Ionic was in the midst of transitioning from version 1 to version 2 of the framework resulting in lots of new features and tools including Web Components, TypeScript, Angular 2, Ionic Native plugins and a revamped navigation model (to mention but a handful of changes).

All necessary and very welcome improvements for sure but radically different from how we worked with Ionic 1.

Now we're awaiting the release of Ionic 4.

Ionic 4?

Damn, time does pass way too quickly doesn't it?

Having cut my teeth developing with Flash MX (way back in 2002 during the 'dark days' of the browser wars and lack of agreed standards) I thought I'd be used to the constant churn of technology changes and developments by now but the pace of that change just seems to have intensified in recent years (and trying to stay on top of those developments can feel like a full-time job in and of itself).

It's certainly no fun investing time and effort into learning a technology, building your product/service around that and then finding that your hard-won skills and knowledge are now moving into obsolescence due to the technology being fundamentally re-developed, becoming increasingly less relevant (think Flash/Flex development - once the hottest show in town now little more than a fading and rapidly forgotten legacy) or abandoned altogether.

Those types of scenarios can leave you feeling more than a little concerned as to how you're going to move forwards as a developer.

So what can we expect from Ionic 4?

Will this latest iteration of the framework require a fundamental re-working of the knowledge and skills that we've acquired since Ionic 2? Will we have to adopt a radically different approach to building our applications? What will the impact be on developers expecting to familiarise themselves with using Ionic 4?

Different mask, same face

The good news is that as developers we can expect to develop our Ionic applications with minimal changes at most.

Ionic 4 should be viewed as more of an upgrade than an overhaul as, according to this official blog post, your application will continue to work the same way as it does right now.

Translated: Just carry on as normal.

The interesting news concerning developments for Ionic 4 though involve:

  • Ionic's internal codebase being refactored to use Web Components via their Stencil tooling software
  • Ionic will become framework-agnostic


If you're not familiar with Stencil please take a few minutes to read through my previous blog article.

Stencil, which was developed by the team at Ionic, takes what is considered to be the best features of Angular and React then leverages these to meet the following goals:

  • Framework agnostic - not restricted by or tied to a particular front-end framework (will play nicely with all frameworks)
  • Generates standards compliant web components
  • Utilises additional API's such as Virtual DOM, JSX and async rendering
  • Ideally suited for Progressive web Apps (runs well on slow/fast networks, small code size, fast execution/rendering times, interoperable across different browsers & devices)

As the internal code for Ionic 4 will run on Web Components developed with Stencil we should expect to find our applications taking less time to launch, rendering more quickly and benefitting from a general all round improved performance.

I recommend you watch the following YouTube video taken from the Polymer Summit 2017 for futher information on Stencil:

Framework agnostic

This is a HUGE change to how we approach Ionic development!

Angular will continue to be the default framework for building Ionic applications but developers will have the choice to replace this - if they so wish - with another front-end development framework such as VueJS, React, Knockout or Backbone for example.

There's not a great deal of information that has come out with regards to this proposed development so it will be interesting to see how this option is offered.

I suspect that the Ionic CLI will be the engine that provides the option to select a different framework when generating an Ionic project (or will simply install Angular by default) otherwise I'm not sure how 'cleanly' and friendly this feature can be added for novice developers as, let's face it, software installation and configuration tasks can feel like a hassle at the best of times.

I'm curious to see how far the scope for installing different frameworks with Ionic 4 will go.

Are we limited to a selected handful of frameworks or will we have carte blanche?

Interesting times ahead for sure.

In summary

Ionic 4 brings with it some solid changes such as internal code refactoring with Stencil and the option to use other frameworks instead of Angular but, for all intents and purposes, developers should be able to continue developing their applications with minimal impact on the way they currently do that.

We'll see how accurate that is with the release of Ionic 4 but any bumps in the road should be fairly minor at best!

I'm quite interested in further stencil development and seeing how that particular tool is going to be integrated into the Ionic CLI (or whether it will come as a separate tool in its own right). Generating custom web components is going to be a massive step forward for creating semantic HTML mark-up and optimised, self-contained blocks of code so Stencil is definitely on my radar with the next major release of the Ionic framework.

When Ionic 4 is released I'll publish further articles on using Stencil within your own Ionic projects and developing Ionic applications using different frameworks but until then I hope you enjoyed this tutorial and please feel free to leave feedback in the comments 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.