Web Components: Ionic
Ionic, the best usage of Web Components.
As part of this article, I will refer to Web Components, ShadowDom, or CSS Variables. If you're not familiar with those, I invite you to read my previous article as a walk-through. Also, I'm mentioning Stencil a couple of times, and that's another critical part of this; read about it here.
One of the products of Ionic Framework is named Ionic Components; this is an Open Source library with MIT License.
Why are Ionic Components different?
Components change to complaints the Usability Guidelines of iOS and Android. Additionally, each component provides an API to customize styles like colors sizes to fit the need of your brand or product.
How are they able to do this?
Well, the magic behind this idea is Web Components.
As the headline of this article, you could see a diagram that describes different levels or layers, but what does that mean? Let's deep dive into this.
Ionic Core
- Web Component library: developed using Stencil.
- ShadowDom: styles encapsulation.
- CSS Variables: components customization.
- Github: https://github.com/ionic-team/ionic-framework/tree/main/core
Ionic Wrappers
The Ionic team understands that a developer from a given framework is used to some features and capabilities.
For that reason, they decided to create specific wrappers of their core library to bring those functionalities; some examples are:
- Angular: directives, router, and services.
- React: hooks, router, and context.
- Vue: hooks, and router.
Apps
Let's recap what we've learned until now:
- Ionic Core: Web Component library -> developed using Stencil.
- Ionic Wrappers: Angular, React, and Vue libraries on top of Ionic Core.
When you build an app, you want to bring the best user experience to mobile platforms, not locking you to a framework or trend.
Don't you like frameworks? Do you have a WordPress site? Do you have a JSP site?
It doesn't matter; you can still use Ionic Core and bring that unique experience to your customers, thanks to the HTML Custom Elements - Living Standard (aka Web Components).
Conclusion
I think Ionic Components is an exciting approach to developing mobile apps or bringing a native experience to your website.
In any case, the goal of this article is not to convince you about the usage of Ionic Components. I want to illustrate how you can achieve amazing things using Web Components.
Can you imagine developing your Design System library using Web Components? That makes you framework-free, and then every team could choose the one that fits their need, or if you need to migrate from one to another, the process will be much easier.
