Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Thanks FEVR

Slide 3

Slide 3 text

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]

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Which framework can we use for the next project?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

But if a crazy developer says

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

lit.dev could be the way

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

➔ 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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

draw the conclusions

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

It is a great solution to build a components’ library

Slide 28

Slide 28 text

To build an app? Emh depends!

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Thanks to FEVR

Slide 33

Slide 33 text

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