Is it possible to build your UI components using only web components?

Angular React Vue are the giants in the Frontend World.
But sometimes we need to create a new component library without using these "frameworks", well maybe lit can be our solution.
With lit we can create components using the WebComponent Standard, so we can use them in all our web applications.
In this speech, I'll show you the base concepts behind the lit library and how to start to play with it.

Transcript

1. Is it possible to build your UI components using only web components? Luca Del Puppo
2. Thanks FEVR
3. Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer in Flowing JS and TS Lover @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net
4. WE ❤ REMOTE WORKING Milan, Rome, Turin, Treviso, Bologna, Ancona, Catania and wherever you want! We are hiring ⮕ recruitment@flowing.it
5. Which framework can we use for the next project?
7. But if a crazy developer says
9. lit.dev could be the way
10. What is it? A library with 3 simple properties ➔ Simple ◆ Building on top of the Web Components standards ◆ ready to productivity ◆ designed with web platform evolution in mind ➔ Fast ◆ 5KB (minified and compressed) ◆ no need to rebuild a virtual tree and diff it with the DOM ➔ Web Components ◆ Every Lit component is a native web component Is it possible to build your UI components using only web components? Luca Del Puppo
11. Lit Web Component’s concepts 1. Defining a component 2. Rendering 3. Reactive properties 4. Events 5. Styles 6. Lifecycle Is it possible to build your UI components using only web components? Luca Del Puppo
12. Defining a component ➔ Extend LitElement ◆ ReactiveElement ◆ HTMLElement ➔ Register the component to the customElement Registry ◆ use customElement decorator ◆ customElements.define ➔ Good typing ◆ add definition to the HTMLElementTagNameMap interface Is it possible to build your UI components using only web components? Luca Del Puppo
13. Rendering ➔ add render method ➔ return a TemplateResult ◆ string, number, or boolean ◆ TemplateResult objects created by the html function. ◆ DOM Nodes. ◆ Arrays or iterables of any of the supported types. Is it possible to build your UI components using only web components? Luca Del Puppo
14. Conditional Is it possible to build your UI components using only web components? 1. ternary operator 2. if else statement N.B. it’s possibile to cache the result using the cache directive Luca Del Puppo
15. List 1. using the map function to transform the elements to a list of Templates 2. using the for loop to create the Templates’ list N.B. use repeat directive to perform you render Is it possible to build your UI components using only web components? Luca Del Puppo
16. Reactive properties ➔ decorate fields with the property decorator ◆ Reactive updates (by getters and setters) ◆ Attribute handling ◆ Superclass properties ◆ Element upgrade N.B. state decorator is a special property decorator Is it possible to build your UI components using only web components? Luca Del Puppo
17. Reactive properties Converts ➔ Number ➔ String (default) ➔ Boolean ➔ Object, Array (JSON.parse) Is it possible to build your UI components using only web components? Luca Del Puppo
18. What happens when properties change 1. The property's setter is called. 2. The setter calls the component's requestUpdate method. 3. The property's old and new values are compared. If the property has a hasChanged function, it's called with the property's old and new values. 4. If the property change is detected, an update is scheduled asynchronously. If an update is already scheduled, only a single update is executed. 5. The component's update method is called, reflecting changed properties to attributes and re-rendering the component's templates. Is it possible to build your UI components using only web components? Luca Del Puppo
19. ➔ addEventListener/removeEventL istener ➔ using the @ in the template follow by the event name (e.g @click=”handler”, @focus=”handler”) Events Listen Dispatch Using dispatch method we can send to type of event ➔ CustomEvent ➔ Own Events created extending the Event Class Is it possible to build your UI components using only web components? Luca Del Puppo
20. Styles ➔ scoped styles ➔ css function helper ➔ ShadowDOM (:host, :host(selector), ::slotted()) ➔ inline Style Is it possible to build your UI components using only web components? Luca Del Puppo
21. Lifecycle 1. constructor: at the component creation 2. connectedCallback(): when the component is added to DOM 3. disconnectedCallback(): when the component is removed from the DOM 4. attributeChangedCallback(): when one of the element’s observedAttributes changes 5. adoptedCallback(): when the component is moved to a new document Is it possible to build your UI components using only web components? Luca Del Puppo
22. Built-in directives ➔ Styling ◆ classMap, styleMap ➔ Rendering special values ◆ repeat, templateContent, unsafeHTML, unsafeSVG ➔ Conditional rendering ◆ cache, guard, ifDefined, live Is it possible to build your UI components using only web components? Luca Del Puppo ➔ Referencing the rendered DOM ◆ ref ➔ Asynchronous rendering ◆ until, asyncAppend, asyncReplace
24. draw the conclusions
27. It is a great solution to build a components’ library
28. To build an app? Emh depends!
29. Frameworkless Front-End Development https://www.apress.com/gp/book/9781484249666 Thanks to @Strazz COUPON: F90I2KYXr7T6WNJ Disponibile fino al 31 Ottobre 2021
30. Links WebComponents ➔ https://developer.mozilla.org/en-US/docs/Web/Web_ Components ➔ https://www.webcomponents.org/ ➔ https://open-wc.org/ ➔ https://css-tricks.com/a-bit-on-web-component-librar ies/ Lit ➔ https://lit.dev/ ➔ https://dev.to/thisdotmedia/lit-2-0-released-building- fast-and-lightweight-web-components-558f ➔ SSR (not ready for production) https://github.com/lit/lit/tree/main/packages/labs/ssr ➔ https://github.com/web-padawan/awesome-lit Is it possible to build your UI components using only web components? Luca Del Puppo
31. • Demo https://puppo.github.io/webcomponents-with- lit/ • Code https://github.com/Puppo/webcomponents-wi th-lit/
32. Thanks to FEVR
33. Thanks Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net