What is Ionic?
Ionic isn’t new to the mobile app development market. Created in 2013 as an open-source SDK for hybrid mobile applications, Ionic now has more than 5 million apps built using it. It’s known for providing platform-specific UI elements through a library of native components for iOS and Android. Ionic is basically an npm module, requiring Node.js installed to function as part of a large JavaScript ecosystem.
Front-end technologies and WebView
Ionic uses front-end technologies like HTML, CSS, JavaScript, and Angular for application development. Using web technologies, Ionic helps to build cross-platform mobile applications with a single codebase. Basically, it allows web developers to create web pages that are run inside a device’s browser instance called WebView. WebView may come as a plugin, and it’s essentially an application component that renders web pages and displays them as a native application.
Ionic v.4 and web components
Since its creation, Ionic had been dependent on Angular framework components, as a tool for Angular users. The change came with the fourth and latest version of Ionic, which is chock full of new things.
With the fourth version, Ionic became framework-agnostic, meaning its independent of Angular. It’s planned to add support for React and Vue.js as well, but for now, Ionic can be used without any frameworks at all. The change was made possible thanks to the utilization of web components and the promotion of Ionic’s CLI. The CLI has now been refactored and tailored to work with Angular CLI. So, you can work with Angular if you like it, but also use other supported frameworks to widen the technology stack that can be used with Ionic.
Another big change is a shift to web components. Web components are sets of features that use standard APIs natively supported in nearly all mobile browsers today. Thus, those can be deployed on any mobile platform or used to create desktop apps with Electron framework, or PWAs. The usage of web components also allows for the utilization of any frameworks with Ionic.
Web components are basically encapsulated HTML elements that are interoperable with each other. Each of these elements contains a custom iOS and material design (Android) theme support by default. This makes theme-identity across numerous apps a fairly easy task. It was announced that Ionic will be distributed as a set of more than 100 web components. To support this initiative, the Ionic team launched Stencil a vast library of web components and a tool to build new ones.
