Introduction to Ionic 4

In this post, we'll introduce Ionic 4, learn about its new features and finally show you how to install and use the Ionic CLI v4 to generate a new Ionic project based on Angular 7.

We’ll also introduce the new Ionic 4 ecosystem comprised of new tools like Stencil, Capacitor and modern browser technologies such as web components, shadow DOM and CSS variables.

Ionic 4 is the latest version of Ionic and the best Ionic yet! It’s a mobile UI library that embraces modern browser technologies but also the new Angular 7 tooling and features.

Ionic 4 lets you use your preferred JavaScript or TypeScript front-end library or framework such as Angular, Vue, Preact, React or jQuery to build mobile applications so you are no longer forced to use TypeScript and Angular.

While Ionic is now framework-agnostic, Ionic developers that still want to use Ionic with Angular will get support from the Ionic team with the ionic/angular package, just like Ionic 3 and the previous versions.

Now, let’s introduce the technologies behind the new Ionic.

Stencil

Stencil is an open-source tool created by the Ionic team to help them easily build the Ionic Core with standard compliant web components.

Stencil is a web components compiler which allows you to use framework-like constructs such as JSX templates, routing, data binding and TypeScript classes and decorators to easily build web components — but your final application is completely based on web components that run natively on modern browsers.

The new Ionic uses Stencil behind the curtain — which means you don’t need to use it when developing Ionic apps but you can use Stencil to author web components or create full Progressive Web Apps with or without the Ionic UI components.

Web Components

Web components are a series of standards defined by the W3C. They allow front-end developers to build components that are natively interpreted by modern web browsers.

Among the technologies related to web components are Custom Elements and Shadow DOM.

Custom Elements

Using Custom Elements, you can extend HTML and create new tags or reuse and extend the components authored by other developers. This native browser API is the base of web components. It provides a native way of creating reusable components using vanilla JavaScript with HTML and CSS.

Thanks to Custom Elements, we can re-use Ionic UI components in modern web browsers natively without any frameworks or run-times.

Shadow DOM

Shadow DOM is another native browser API that allows the encapsulation of DOM elements and CSS styles independently from the other code in an HTML document. It provides a way to attach a hidden DOM (called shadow root) to an element using the Element.attachShadow() method.

Using Shadow DOM helps to easily consume Ionic UI components from any web application by encapsulating the CSS styles.

CSS Variables/Custom Properties

Just like typical programming languages, where variables are used to hold typed values, they can similarly be used to store values in CSS such as colors, widths, heights and font properties, among others. Developers are now able to define CSS variables, then reference and reuse them throughout the document. They can also be accessed from JavaScript which can be further explored to add advanced features such as dynamic theming. Although most developers call them CSS variables, they are actually Custom Properties.

In Ionic, CSS Variables are the core of the components theming. Developers can easily modify the overall look and feel (or themes) of the application UI just by changing a few variables, without resorting to Sass and complex build tools.

Generating a New Ionic Project with The Ionic CLI

You can use the Ionic CLI to generate a project based on many starters. It is also used for:

serving apps locally;

running apps in emulators or actual devices;

building the final packages;

generating various features such as pages;

connecting to Ionic Pro services.

The Ionic CLI v4 comes with new features, such as experimental support for Capacitor — a new alternative to Cordova built by the Ionic team to create cross-platform apps for mobile (Android and iOS), desktop (thanks to Electron) and the web (as PWAs).

Installing The Ionic CLI v4

To generate Ionic/Angular v4 projects, you need to install the Ionic CLI v4. Before installing the CLI, make sure you have the following requirements:

The latest version of Node.js and npm. You can run node --version to check if Node.js is installed. If not, simply head to the official website and grab the binaries for your system.

If you want to target Android, you also need Java and Android SDK installed. You can download JDK 8 from the official website and Android Studio — which is used for downloading the Android SDK — from its official website. Also, make sure you configure environment variables such as ANDROID_SDK_ROOT.

If you want to target iOS, you need to have a macOS with the Xcode IDE. You can download Xcode from the official website or through the Apple Store.

Now, you can install the Ionic CLI globally from npm using the following command:

npm install -g ionic

Depending on your npm configuration, you may need to use sudo on Linux/Mac or use an Administrator command prompt on Windows if you want to install packages globally.

Creating a New Project

After installing the Ionic CLI v4, you can create a new Ionic project using the ionic start command and specifying the name and a starter template such as:

the blank starter: A blank project with one home page;

the tabs starter: A simple project with tabs;

or the sidemenu starter: A simple project with a side menu.

You also need to specify the type of framework to use with the --type=angular option, which is new in the Ionic CLI v4 (for now, the CLI supports only Angular).

Head over to your terminal and run the following command:

ionic start myApp blank --type=angular

The CLI will ask you if you want to integrate Cordova. Answer Yes if you want to target native iOS and Android or No if you just want to create a Progressive Web App with Ionic.

This is a screenshot of the directory structure:

Most work you’ll do will be inside the src/app/ folder, which contains the root app component and module and any other directories for pages and components.

Serving the Application

You can run and debug your Ionic application right in the browser using the ionic serve command. This is one of the benefits of hybrid mobile development — you don’t need to use emulators or actual mobile devices until you need to test native device features (presuming you can’t mock the feature in the browser).

You can also use the ionic build command for building the final application. Check all the available commands from the docs.

Conclusion

In this post, we introduced the new Ionic 4 library and its new ecosystem, which comprises the tools and technologies behind the new powerful features. We also installed the Ionic CLI v4, created and served a new project based on Angular. Similarly, you should now be able to create a new Ionic 4 app and use the Ionic CLI v4.