Lit there be light
0 likes36 views
The document discusses web components, which are reusable, encapsulated HTML tags for web pages and apps that can be integrated across modern browsers with various JavaScript libraries. It highlights the advantages of using frameworks like Lit and Stencil for building these components, emphasizing features like localization and tree-shaking. The document also provides resources for further exploration of web components and related technologies.
Lit there be light
- 7. The problem
- 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>
- 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
- 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
- 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
- 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