Skip to content

Instantly share code, notes, and snippets.

@arielsalminen

arielsalminen/readme.md

Created August 16, 2022 13:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arielsalminen/930d2d612580f899d5fa13ecd8ec5503 to your computer and use it in GitHub Desktop.
Save arielsalminen/930d2d612580f899d5fa13ecd8ec5503 to your computer and use it in GitHub Desktop.
Download ZIP
Lit vs. Stencil.js
Raw
readme.md

Some of you who have followed our previous design systems adventures on Twitter might know that both me (Viljami) and Nick Williams, our newest Frontend Developer, have a long experience working with Stencil and Web Components. So you naturally might wonder why are we migrating away from Stencil?

Please note that this isn’t meant to be an advice against Stencil. Stencil has its place in the ecosystem, and depending on your company’s needs it can still be an amazing tool. Heck, I even wrote an article praising the tool a couple years back. With Nord Design System, it mainly came down to these reasons:

  • For developers Stencil is a bit of a “black box” in certain cases and it often requires a lot of digging via the source code to understand specifically why something works like it does. We prefer transparency and simplicity.
  • The sheer number of bugs on GitHub that got never addressed was a little problematic for our team as it eventually forced us to make our own forks of Stencil’s parts. It would’ve been nice if the open source community could’ve been involved more.
  • Documentation, or the lack of it in some cases. Again, this meant that we had to instead go read the source code to understand how things work and what options are available.
  • Forced lazy loading by default. There’s a way around this, but forcing it by default doesn’t work very well for our current use case.
  • Performance in some cases. This became problematic especially on slower mobile devices together with the lazy loading which made the page jump back and forth for multiple seconds as the components kept loading.
  • Lastly, in a way, we feel like Stencil tried to do too much and that we’d be happier with something that provides the smallest possible set of features. Reactivity, declarative templates, and small utilities to make our life easier.

Note: In recent months, the Stencil team has started working on improving project governance on GitHub and increasing community involvement, so some of these issues should be solved soon. We hope they succeed in this and wish them all the best!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment