WavebreakMediaMicro - Fotolia

Ionic 4 taps Web Components for mobile app development

Ionic 4, a rebuilt version of Ionic's web and mobile development platform, conforms to the Web Components standard and expands support to all popular JavaScript frameworks.

Mobile and web development platform provider Ionic has rebuilt its tools framework using web standards so developers can work from one codebase to build mobile, desktop and web applications.

The Ionic platform previously only supported Angular, but Ionic 4 supports all popular JavaScript frameworks, including Angular, React and Vue, to make the platform future-proof and platform agnostic. In 2017, Ionic moved its tools into a set of Web Components, a standard component model for the web.

The company rebuilt its UI library of more than 100 components as Web Components, so Ionic developers can build apps for any platform or device using one codebase. The shift also enables apps to load faster and work better in low-bandwidth environments, said Max Lynch, CEO at Ionic, in Madison, Wis. The company also built its own JavaScript framework, Stencil.js, to let developers build web experiences on a more standard Web Components model.

Ionic 4's support of all current major web development libraries and frameworks is a big jump from where the company started, said Michael Facemire, an analyst at Forrester Research, based in Cambridge, Mass.

"We see a regular progression from Ionic in becoming a framework-agnostic tool that developers can use to build any mobile or web experience," he said.

We have a single codebase that is our web application, our iOS application and our Android application built with Ionic 4 that is in production right now serving millions of users.
Ben Simmonsvice president of engineering, Sworkit

As progressive web apps that behave like native mobile apps become core to many digital experiences, the move to Web Components will position Ionic as a leader, he said. However, overall support and adoption of Web Components isn't a given.

While the model makes sense, the timing and adoption of some competing component frameworks such as React, Vue and Ember has not led to the expected landslide adoption of Web Components, Facemire said.

Sworkit, which writes health and fitness applications, has 10.7 million user accounts in 13 languages across 70 countries. The company built its first application in 2014 using Ionic's version 1.0 platform. It also wrote its current release in February 2018 using alpha versions of the Ionic 4 platform, said Ben Simmons, vice president of engineering at the Rockville, Md., firm.

"We have a single codebase that is our web application, our iOS application and our Android application built with Ionic 4 that is in production right now serving millions of users," he said.

Sworkit app built with Ionic 4
Sworkit app built with the Ionic 4 app development environment.

Ionic Studio

Ionic 4 follows the company's integrated development environment (IDE), Ionic Studio, unveiled at AWS re:Invent in November 2018, which provides drag-and-drop capabilities for developers to add components to web and mobile apps while the system adds logic and code.

The IDE features TypeScript support, auto-completion and debugging, plus back-end integration with AWS Amplify, a library of cloud services for mobile and web apps. The Ionic IDE makes it easy for developers to integrate with back-end services, discover and add UI components, or preview their device in a native simulator, Ionic's Lynch said.

The University of Vermont Medical Center in Burlington, Vt., uses Ionic Studio for its line-of-business developers and UI/UX designers, said John McConnell, a solutions architecture and development supervisor in the medical center's IT development operations unit. The center uses Ionic Studio on Mac OS X but plans to move to Windows 10 development devices due to cross-platform requirements.

"We see Studio becoming a critical addition to our development toolchain," McConnell said.

Dig Deeper on Software design and development

Cloud Computing
App Architecture