Morioh
Login
Daisy Rees

Daisy Rees

5 years ago

Introduction to Ionic 4: How Web Components Changed the Game

Based on Web Components Ionic is a collection of UI components for building high-quality, cross-platform apps. These components are all built with HTML, CSS, and JavaScript and can easily be deployed natively to iOS and Android devices, desktop with Electron, or to the web as a progressive web application.


Getting Started with Ionic

To install Ionic on your machine, you must have Node installed first, if you have not. Then you can install ionic globally with npm like this:

sudo npm install -g ionic

Now you can navigate into your preferred folder where you want your Ionic application to reside. Start a new app with this command:

ionic start [appName] [option]

appName is the name you want to call your application, option can be one of:

  • tabs: A tabs based layout.
  • sidemenu: A side menu based layout.
  • blank: An empty project with a single page.

Your start command might look like this:

ionic start newApp tabs

Follow the prompts to make a few guided configurations and when it is all setup, you can change directory to the newly created folder and then run your app with this command:

ionic serve

A few days ago, Max and the team at Ionic released the Ionic newest version 4 to all of us and dubbed it Ionic for everyone. In the remaining part of this article, we would take a look at the new features and mostly massive improvements that shipped with this new version.


Web Components

Web components were used to re-write each of the Ionic components in this new version. Web components are a group of Web APIs that have extensive support on modern browsers both on mobile devices and desktops. Some of these APIs include shadow DOM and custom elements which has started getting widespread adoption. Web components makes the browser handle more of the work with less code from you. Big improvements in load time and performance is also very ideal for progressive web applications. Ionic polyfills browsers that do not support web components yet so you do not have to ever worry about browser support.


Framework Agnostic

Ionic’s very first and subsequent versions were focused on the Angular js framework and the team consistently kept up to the phases and updates of Angular. However, the dream was always to build mobile apps using web technology, no matter your preferred framework. In this new version, thanks to custom elements, you can use Ionic components which are basically used as HTML tags in any framework of your choice. Yes, you heard correctly. For Angular devs, nothing about the syntax you already use changes. Just like Ionic Angular, there is now the React and Vue versions, Ionic Vue and Ionic React and soon more resources and guides are going to be available to work with them.


Adapting Angular Core Features

Initially when Ionic 2 was in the beginner days and was built for Angular applications, there was a cloud of uncertainty around Angular and support for tooling so the Ionic team built their own in-house CLI tools, build tools and router. But now that the Angular team has taken up these things as their priority, the Ionic team is embracing the Angular CLI and Router tools from Angular .

To this effect, ionic-app-scripts is now replaced with the official Angular tooling. So Angular devs can use the Angular CLI directly and evolve with these core tools overtime. While this will be a change for existing Ionic Angular developers, it is a long term win for the project as Ionic can focus more on components and less on unnecessary, complex tooling, and a win for Ionic Angular developers that can now use first-class Angular tooling and conventions.


Shiny New Docs

One of the best news and my favourite too is the new documentation. Ionic version 4.0 has a revamped documentation, Ionic is already well known just like Vue for super easy docs and now the team has added even more improvements to accommodate v4, they call it the 0.5 major release work-in-progress. This documentation, along with dramatically improved performance also includes a simpler design, focused on content, and an easier-to-navigate organisation and code snippets. The components and the API references were also made concise enough for easy understanding. Check it out here.

Additionally, the Ionic CLI tool also got an overhaul to provide more information in a cleaner and easier to read layout. Check out the new CLI Docs

Refactored CLI 4.0

Ionic 4.0 also ships with a refactored CLI Version 4.0. Ionic CLI is used to develop Ionic apps and is designed to work alongside the Angular CLI so you can get the very best from both. It is faster and cooler than ever, providing powerful Cordova integration with live-reload, custom schematics for generators, and support for multiple projects out of the box.


Bring Your Own Framework Party

Thanks to Web Components APIs, you can now use Ionic in not just only your Angular Applications but in Vue and React and other frameworks. Although there is need to make the processes as smooth as it is in Angular, where features like routing has been handled by the framework itself. So in the coming weeks, expect Vue or React specific functionality to be released. Official Vue.js and React bindings are currently in alpha and are expected to be a big part of the Ionic 4 developer experience henceforth.


Ionicons 4.0

Ionicons are the official icons pack by the ionic team. This new version is available and distributed as web components with drastically reduced sizes, and brand new icon forms reflecting the latest iOS and Material Design styles.


PWAs on Steroids

Ionic prides itself as the best UI framework for building high performant Progressive Web Applications. To achieve this and make astonishingly excellent lighthouse scores, the team at Ionic built out a web component pipeline using Stencil to render Ionic components, ensuring they were tightly packed, lazy loaded, and delivered in smart collections consisting of components developers use. Stencil-built components rank very high in lighthouse audits.


Native API Upgrade

With this new Ionic version, Ionic Native 5.0 Beta has been upgraded to also be framework independent. You can now use the wrappers outside of Angular as simple classes while still offering Angular providers that work with dependency injection. Check out the Docs here


Customisations with CSS Variables

Another big change made in this new version of Ionic was to start using CSS Variables in each component. These variables use a public theming API that provides developers with structure to customise components in Ionic in a way that supports easily upgrading to future versions of Ionic without introducing compatibility issues. They also provide a standardised way to theme Ionic apps independent of the frontend framework used in your application. You can modify the overall look and feel of your app by just changing a few variables, all without build tools.


Migrating from 3.0 to 4.0

You can migrate your ionic application to version 4.0 in the following steps:

  1. Generate a new project using the blank starter (as described at the start of this article)
  2. Copy any Angular services from src/providers to src/app/services
  • Services should include { providedIn: 'root' } in the @Injectable()decorator. For details, please see Angular provider docs.

3. 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.

4. Copy global Sass styling from src/app/app.scss to src/global.scss

5. 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](https://angular.io/api/core/Component#styleUrls) option of the @Componentdecorator
  • RxJS has been updated from v5 to v6 (see RxJS Changes)
  • Certain lifecycle hooks should be replaced by Angular’s hooks (see Lifecycle Events)
  • Markup changes may be required (migration tool available, see Markup Changes)
In many cases, using the Ionic CLI to generate a new object and then copying the code also works very well.

Conclusion

We have thoroughly looked at the new version of Ionic and everything it shipped with and what it means for us Ionic developers. We saw how web components is now in the forefront of democratizing mobile development across browsers. Upgrade your ionic application to 4 today and enjoy.

Learn more

☞ Building a mobile chat app with Nest.js and Ionic 4

☞ Android Studio for beginners

☞ Getting started with Flutter

☞ Learn Swift 4: From Beginner to Advanced

Originally published by Nwose Lotanna at https://blog.bitsrc.io

#ionic #mobile-apps

Introduction to Ionic 4: How Web Components Changed the Game
47 Likes33.35 GEEK