This article is part 3 of the “The dilemmas you’ll face when creating a web component library” series. If this is the first article in the series you’ve come across, I’d recommend giving the introduction a read first.
Photo by Markus Winkler
You’ve learned a good deal about how to scaffold and manage your monorepo. So enough yak shaving, it’s time to buckle down and pick a framework to build your web components with.
Dilemma 2: Pick a library for creating web components
Disclaimer: This article assumes that you want to create a web component library. I won’t spend any time going into the pros and cons of web components, and I’ll assume you already know the fundamentals.
How can we build web components?
If you want to get developing quickly, here are four common frameworks/libraries:
- Lit - a simple library for building fast, lightweight web components.
- Stencil - a simple compiler for generating Web Components and static site generated PWAs
- Haunted - React’s Hooks API but for standard web components and lit-html or hyperHTML.
- Hybrids, with their catchy description - a UI library for creating web components with unique declarative and functional approach based on plain objects and pure functions.
For those that really want to see more of the web component iceberg, here’s a wonderful tool that shows 55 (😱) different ways to create web components.
Do we even need to pick a framework/library?
When it comes to writing web components, there’s also the option to go vanilla. Going vanilla is perfectly valid if you’re prepared to write more verbose code and get acquainted with the web component specs. In fact, I went vanilla for oui- ui.
If you care more about rapidly developing UI, then choosing a framework can let you hit the ground running. A lot of frameworks offer bells and whistles to ease the learning curve, improve the developer experience, and provide more for your end-user.
For instance, Stencil offers additional lifecycle hooks and helper decorators as abstractions over the browser’s lower-level APIs. This means you can deliver more while writing less code and avoid learning the ins and outs of the web component spec.
Lit is another popular choice, and is used by Material Web, Wired, Lion, and many other libraries. Lit’s designed to remove a lot of the boilerplate involved with writing web components, but doesn’t offer as many extras out of the box as Stencil does. This keeps Lit’s API simple. In fact, the core LitElement is derived from HTMLElement, meaning their API should feel familiar for those with some pre-existing web component development experiences.
Don’t feel like choosing a framework/library limits creative control over your library. Wired elements demonstrates that you can make something truly unique using a web component library.
Both Lit and Stencil offer starter kits that set up your development environment to ease with developing, testing, and publishing. If you want to fast-track through this article series, those kits are a great place to start.
Haunted can be used in conjunction with Lit, and its shtick is offering an API akin to React’s hook API. For someone coming from a React-heavy background, this could be a viable choice.
If bundle size is your concern, then why not use the web component comparison tool to pick a framework that outputs your library with a bundle size smaller than its vanilla equivalent! 😵
We’ve gone and found ourselves back at the age-old problem of having too much choice. If you find yourself in this position, just go ahead and pick the one that looks the most fun to use. You can revisit this dilemma after writing some code and better understanding whether you’ve made the right choice.
For me, choosing a framework for oui-ui was like picking my favourite Neapolitan ice-cream flavour, I’m going vanilla. If oui-ui becomes a fully-fledged repo, I’ll consider migrating to a more robust solution. Because each library/framework aims to solve a specific problem, I can’t give a confident personal recommendation for which you should go for, but I hope I’ve given you enough to get you curious about which framework is right for your library.
Next steps
Great, you’ve rolled a 55-sided dice and chosen a web component framework/library/spellbook. You’ve followed the quickstart and have your first