Introduction
Ionic 4.0 is here!
Ionic Framework released the Ionic Framework 4.0. This new version has been built using Web Components, not Angular Components (which has been used up until now).
According to the Ionic officials, “it is the next generation of Ionic Framework, the fastest, smallest, and most extensible version yet.
Considering that, Ionic 4.0 is a complete rebuild of the widely used JavaScript framework for developing mobile and desktop applications.
Concluding that, this version of the popular Ionic Framework is now an application development framework that can be used alongside numerous front end frameworks, not just Angular.
Not just for Angular developers, the new version opens up new options for development teams around the world. Before diving in, let’s understand Ionic Framework first.
What is Ionic Framework?
Originally released in 2013, Ionic Framework is an open source UI toolkit for building high-quality mobile and desktop applications using web technologies (CSS, HTML, and JavaScript).
Ionic Framework was created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co.
The original version of Ionic Framework was built on top of AngularJS and Apache Cordova.
Using Ionic Framework, one can build and deploy apps that work smoothly across multiple platforms, such as Android, native iOS, desktop,
and the Progressive Web App. While past releases of Ionic were tightly coupled to Angular, V4 of the framework was re-engineered to work as a standalone Web Component library, with integrations for the latest JavaScript frameworks, like Angular.
Introducing Ionic 4
Up until now, Ionic framework was built using angular components, but the new version, Ionic 4, has been built using web components. This is a substantial change.
As the official document of Ionic states,
“Ionic Framework V4 is a major advance in the underlying technology and capabilities of the project, with a focus on performance, compatibility, and overall extensibility. Although V4 still integrates deeply with Angular through the @ionic/angular package, it is now also framework-agnostic, meaning it can work with any other JavaScript framework (Vue, React, Preact, etc), or with no framework at all.â€
As V4 has moved to web standards, it allows the core of Ionic to rely on the standard component model supported in browsers, rather than a framework-specific model – improving overall performance.
The new version comprises of around 100 web components, custom elements, and shadow DOM APIs – allowing developers to leverage the components for desktop apps, mobile apps, and progressive web apps.
Now that we all know, one significant change in V4 is web component, let us learn what Web Components are?
Web components are a set of web platform APIs that enables developers to build reusable, custom, encapsulated HTML tags for web apps and pages. Web Components can help developers build almost anything with HTML, CSS, and JavaScript – helping them build a component that can be reused.
Web components are based on four major specifications; Custom elements, Shadow DOM, HTML Imports, and HTML Template.
What’s New with the Framework Compatibility?
As we know, the new Ionic V4 framework has been re-engineered to work as a standalone Web Component library, it can now be used in most frontend frameworks easily, including React and Vue.
JavaScript
The core components of the V4 can work standalone using a script tag in a web page – making it possible to use Ionic as a standalone library in a single page.
Angular
While the core components of the Ionic 4 have been designed to work as a standalone Web Component library, the @ionic/angular package eases the integration with the Angular ecosystem. @ionic/angular has all the functionalities that would be expected coming from Ionic version 2/3, and integrates with those core Angular libraries.
Ionic CLI in Ionic 4
The Ionic CLI has been built as go-to tool for developing Ionic apps, providing powerful Cordova integration with livereload, custom schematics for generators. The CLI 4.0 has been significantly re-engineered to provide more features while improving the speed and ease of use. This new version of CLI has been built to work next to the Angular CLI so that developers can get the best of both worlds.
Future Support
The official document states that the team is working to offer support for other frameworks in a future release – currently working for Vue and React.
How to migrate your application from Ionic 3 to Ionic 4?
Well, if you are using Ionic 3 for building apps then you probably want to know how to migrate an existing Ionic 3 application to the latest Ionic 4. With V4, the Ionic team has also launched new range of documentation. They have also curated a detailed and easy to understand documentation with the migration steps.
The Ionic team suggests the following general process when migrating an existing application from Ionic 3 to 4 (taken from the official Ionic Framework doc):
- Generate a new project using the blank starter
- Copy any Angular services from src/providers to src/app/services
- Services should include { providedIn: ‘root’ } in the @Injectable() decorator.
- Copy the app’s other root level items (pipes, components, etc) keeping in mind that the directory structure changes from src/components to src/app/components, etc.
- Copy global Sass styling from src/app/app.scss to src/global.scss
- Copy the rest of the application, page by page or feature by feature, keeping the following items in mind:
- Emulated Shadow DOM is turned on by default
- Page/component Sass should no longer be wrapped in the page/component tag and should use Angular’s styleUrls option of the @Component decorator
- RxJS has been updated from v5 to v6
- Certain lifecycle hooks should be replaced by Angular’s hooks
- Markup changes may be required
As per developers worldwide, who have already used the migration steps, the entire migration process is quite easy.
If you don’t want to go through those simple steps, then you can also use some the tools such as the migration linter.
Final Thoughts on Ionic Framework 4.0
The release of Ionic Framework 4.0 is really interesting release as it suggests that Web Components are going to be the essential part of the web in the future – regardless of how frameworks evolve. Moreover, the release also suggests that Progressive Web Apps are not going anywhere and might become essential in the coming days.
The shift away from Angular to Web Components makes a lot of sense. It has significantly increased its chance to boost adoption beyond those approximately five million developers worldwide, who are already using the framework. Earlier, it could only be used by Angular developers, but now it opens up new options for development teams as well.
Source: ionicframework.com/docs/