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

Thanks FEVR 

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] 

WE ❤ REMOTE WORKING Milan, Rome, Turin, Treviso, Bologna, Ancona, Catania and wherever you want! We are hiring ⮕ recruitment@flowing.it 

Which framework can we use for the next project? 

No content

But if a crazy developer says 

No content

lit.dev could be the way 

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 

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 

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 

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 

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 

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 

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 

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 

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 

➔ 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 

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 

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 

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 

No content

draw the conclusions 

No content

No content

It is a great solution to build a components’ library 

To build an app? Emh depends! 

Frameworkless Front-End Development https://www.apress.com/gp/book/9781484249666 Thanks to @Strazz COUPON: F90I2KYXr7T6WNJ Disponibile fino al 31 Ottobre 2021 

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 

● Demo https://puppo.github.io/webcomponents-with- lit/ ● Code https://github.com/Puppo/webcomponents-wi th-lit/ 

Thanks to FEVR 

Thanks Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/ [email protected]