Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Is it possible to build your UI components usin...

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.

Luca Del Puppo

October 20, 2021
Tweet

More Decks by Luca Del Puppo

Other Decks in Programming

Transcript

  1. Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer in

    Flowing JS and TS Lover @puppo92 https://www.linkedin.com/in/lucadelpuppo/ [email protected]
  2. WE ❤ REMOTE WORKING Milan, Rome, Turin, Treviso, Bologna, Ancona,

    Catania and wherever you want! We are hiring ⮕ recruitment@flowing.it
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. ➔ 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
  13. 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
  14. 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
  15. 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
  16. 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