Lit Webcomponents Framework - Lit It Up Keynote

This is second part of my talk in September 2023 about the Lit framework. In my first talk (Lit There Be Light), I talked about the framework, its features, and areas where it can be used. In the new talk (Lit it up), I will share what we’ve learned using this framework in production for eight months, its pros, key takeaways, and things to consider.

1. Lit it up
Lit framework. Series 2

2. Ilya Gorenburg
Frontend Developer at .

5. Disclaimer
This is our journey of using the Lit framework; your
experience might differ. Use it responsively.

6. So, what problem were we trying to solve?...

7. Community Forum

8. What is Lit?
Lit is a simple library for building fast, lightweight web components that work in or
without any framework. You can create shareable components, applications, design
systems, and more with Lit.
Lit provides APIs to simplify everyday web component tasks, such as managing
properties, attributes, and rendering.

9. Why Lit?
Lightweight, fast, great documentation, built by Google. Just like Angular

10. 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

11. The journey of using Lit

14. The pros of using Lit*

*After 8 months in production

15. Typescript ready

16. Storybook ready

17. ?????? Lightweight
* From the initial version of the component to these days, the size of it grew from 29kb
to 155kb.

18. ⚒ Extensive toolset

19. ?????? Localization-ready

20. ?????? Great documentation
And community on Discord

21. Key takeaways

22. ?????? Subcomponents

23. ?????? Slots aka content projection

25. ?????? 3rd party services integration
Yes, you can integrate components with Headless CMS

26. Things to consider
??????

27. ?????? Sites consuming your components
-Developers don’t read documentation
-Communication with main application
-Different approach of doing things (ex.: HTTP requests)
-CORS

28. ⚙ Infrastructure required (?)
If have infrastructure for your main app (with dev, staging, production) - you might need
the same for the components library

29. ?????? Versioning
You might need versioning because in case of breaking changes.
And they happen.
Unexpectedly.

30. ?????? Attribute values
-YOU will handle all different cases (ex.: locale
values can be different: en, en-en, en-us, en-US,
en-gb, en-ca)
-YOU will deal with incorrect values

31. ?????? Usage with other frameworks
Wrap your Lit component into your framework’s component

32. ‼ The most important tip

Refrain from introducing a new
framework if you can solve your
problem with your existing stack.

33. Thank you
Web: ilya.gorenburg.com
Twitter: @gorenburg
linkedin.com/in/gorenburg
Keynote: Lit there be light