Component-based development is good, how about using Web Components?
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. https://www.webcomponents.org/introduction
Many developers heard about Web Components, and I believe some of you already used Web Components in production. In this article, we will explain why and how we use Web Components.
Table of content
- Tech background
- The problem
- Solution we chose
- Real-world usage
- Conclusion & references
Technical background
In Crescendo Lab, we use React.js, Vue.js, and even Svelte in production. We enjoy the component-based style brought from these frameworks (or libraries).
As a technical partner of LINE, Crescendo Lab provides several useful marketing features for LINE Official Account (LINE OA) owners. Our main product — MAAC is built with React.js which lets LINE OA owners operate on it and gain useful features like LIFF (LINE front-end framework) page, Rich menu, Auto-reply, etc in their OA. We will focus on LIFF today.
A LIFF App can run on the LIFF browser in the LINE App. We can use LIFF JavaScript SDK on our website. Then set up a new LIFF App on the OA console provided by LINE and assign the LIFF endpoint locating to our website. Once the user clicks the LIFF link (named “LIFF URL” in OA console), it will open the LINE App and open the LIFF browser, the user can see the content of your website. Through the LIFF SDK, we can get user data in the LIFF browser without the logging process (the user just needs to grant the permission).
We provide many LIFF Apps, such as Prize (獎券), My-coupons (我的優惠券), Chat (客服對話), Games (互動遊戲). They are built with different front-end technologies.
The problem
Some of the LIFF Apps are built with Vue.js. The others are built with vanilla JS. We want all the LIFF Apps to have the same loading component. It’s not good to include the Vue.js library in a vanilla JS project just because we want to use the loading component built with Vue.js. Also, copy-and-paste across all Vue.js projects is worse in my opinion. So here is the question “how can we share a component across all repositories which might be built with different front-end frameworks?”
Short break here. Our requirements are:
- A framework-agnostic component that can be used across our LIFF pages
- At least supports React.js, Vue.js, and vanilla JS
- Good developer experience and web standard compliance
Stencil JS
Stencil JS is a Web Component-based component solution built by the Ionic team. It provides a compiler that compiles React-like JSX to the web components. Also, it is 100% TypeScript support (thanks to the Ionic team).
Let’s list the benefits of Stencil JS:
- Supports Angular, React.js, Vue.js, and vanilla JS
- TypeScript support
- React-like APIs, like JSX, props, state, component lifecycle
- Strongly supported by the Ionic team
Let’s check the demo code:
We can see the React-like syntax like “Prop”. Also, Stencil provides component lifecycle methods similar to React or other UI libraries. You can check the API in Stencil docs.
By using the CLI command, Stencil will build the Web Components bundle and README of the component. Code comment in the component will be written to README automatically.
Real-world usage
We put all LIFF Apps in a monorepo, so it’s easy to include another module (we call “package” named from Yarn 2 Workspace) in one package. You might get the answer that we have a “components” package that contains all shared components built with Stencil JS. In the Prize LIFF App (a package named “prize”), we just import `@namespace/components` and follow the integration API from Stencil. The shared component will show up then.
Check the demo repo for more details:
https://github.com/chatbotgang/web-components-demo
Conclusion
- We use several front-end frameworks or libraries to built LIFF Apps
- We use Stencil JS for the framework-agnostic component solution
- In a monorepo, it’s easy to include a shared component from another package in one package
“Finally, I use Web Components in production” is the first thought after the component is released. Trying new technology is cool and use the new technology to solve the problems is cooler.
