Presentation of Lit framework on JS Montreal meetup, comparison with Stencil.js and showing how easy it is to build web-components

1. there be light

2. Ilya Gorenburg
Frontend Developer at .

5. State of frameworks

6. 3
Projects are .

7. The problem

8. Community Forum

9. Web Components

10. 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.
Source: https://www.webcomponents.org/introduction

11. Can I use?

12. Example of web component code
<script type="module" src="./motion-carousel.js"></script>
<motion-carousel id="carousel">
<img src="https://picsum.photos/seed/1/200">
<img src="https://picsum.photos/seed/2/200">
<img src="https://picsum.photos/seed/3/200">
</motion-carousel>

13. Define web component

14. How to kickstart
Vanilla JS
Frameworks*
- Stencil
- Lit
- Hybrids
- Contextful Web Components Library
- Slim.js (Outdated)
- Skate.js (Outdated)
- Polymer (Deprecated in favor of Lit)

15. Why Lit?

17. Lit Stencil
Solution type Library Compiler*
Typescript ✅ ✅
Templates Declarative templates JSX
Virtual DOM ✅** ✅
Server Side Rendering ✅ ✅
Testing Jest, Karma, Mocha, Jasmine, Web
Test Runner
Jest
Localization ✅** Plug-in / Custom solutions
Tree-shaking ✅ ❌
Lit vs Stencil

18. Features showcase

19. Vite Lit TS Starter
$ yarn create vite

20. Project structure
webcomponent/
├─ dist/
├─ node_modules/
├─ public/
├─ src/
│ ├─ index.css
│ ├─ my_element.ts
├─ types/
├─ .gitignore
├─ tsconfig.json
├─ index.html
├─ vite.config.ts
├─ package.json

21. Basic Lit Component

22. Property bindings

23. Context

24. Localization
Runtime Transform
● Native support for expressions and HTML markup inside localized templates. No need for a
new syntax and interpolation runtime for variable substitution—just use the templates you
already have.
● Automatic re-rendering of Lit components when the locale switches.
● Only 1.27 Kb (minified + compressed) of extra JavaScript.
● XLIFF localization files.
Modes

25. Localization

26. Subcomponents

27. Shadow DOM

28. Moving CSS Out of Component

29. Styling the block

30. Web Component Inherited CSS
Most common:
● color
● cursor
● direction
● font
● font-* (font-family, font-size etc.)
● letter-spacing
● line-height
● text-align
● text-indent
● text-transform
● visibility
● word-spacing
Full list: W3.org

31. Integration with Angular
Or any other framework

32. Good to know

33. Using images
Any type: inline or external

34. Icon Fonts
Tricky, but doable

35. External API Requests
Just use fetch()

36. Localstorage
Same access as the rest of the javascript

37. External CSS
Yes, but not recommended by Lit team

38. …and
It’s just a javascript. Do what you want to do 🎉

39. Bundle size
Framework Time to Interactive Eager JS KiB Total KiB
Angular 1.6s 72Kb 74Kb
Lit 0.8s 16Kb 18Kb
Next 2.2s 83Kb 94Kb
Nuxt 3 1.5s 50Kb 55Kb
React 0.8s 150Kb 171Kb
Svelte 1.5s 19Kb 24Kb
Vue 3 1.2s 33Kb 41Kb
Source: https://github.com/BuilderIO/framework-benchmarks#todo-app

40. Resources
- Use web components for what they’re good at
https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/
- Custom Elements Everywhere
https://custom-elements-everywhere.com/
- A curated list of awesome Web Components resources:
https://github.com/web-padawan/awesome-web-components
- All the Ways to Make a Web Component:
https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/
- Web Components Today:
https://webcomponents.today/
- Moving from Stencil to LitElement:
https://www.abeautifulsite.net/posts/moving-from-stencil-to-lit-element/
- Framework Benchmarks:
https://github.com/BuilderIO/framework-benchmarks
- A curated list of awesome Lit resources:
https://github.com/web-padawan/awesome-lit
- Building UI components in DevTools with Custom Elements:
https://goo.gle/building-ui-devtools
- Google Material Components:
https://github.com/material-components/material-web
- Handling data with Web Components
https://itnext.io/handling-data-with-web-components-9e7e4a452e6e

41. Thank you
Web: ilya.gorenburg.com
Twitter: @gorenburg