Get started with Lit

1. Getting started with Lit #WebComponents Hardik Pithva @hardikpthv #UseThePlatform
2. • Set of web platform APIs • Specifications: ◦ Custom Elements ◦ Shadow DOM ◦ ES Modules ◦ Template Web Components
3. Custom Elements Shadow DOM - - - <lit-html /> LitElement
4. Custom Elements
5. What is it? • Create new or extend existing HTML tags • Create reusable components using nothing more than vanilla JS / HTML / CSS • Combines the features offered by most modern browsers • An approach to modernizing HTML @hardikpthv class FrontManiaDrawer extends HTMLElement { ... } window.customElements.define('front-mania-drawer', FrontManiaDrawer); front-mania-drawer.js <front-mania-drawer></front-mania-drawer> index.html
6. Front-Mania Drawer Element @hardikpthv class FrontManiaDrawer extends HTMLElement { constructor() { super(); ... } connectedCallback() { ... } disconnectedCallback() { ... } attributeChangedCallback(attrName, oldVal, newVal) { ... } } front-mania-drawer.js
7. Shadow DOM
8. • Problems: ◦ Global attitude of HTML, CSS, and JS ◦ CSS:!important (specificity) ◦ CSS Containment What is it? @hardikpthv • Shadow DOM is the rescuer: ◦ Support for the scoped style ◦ Neither tools nor naming conventions ◦ Self-contained component • An option to provide HTML and CSS to your custom element • Just like a DOM, but not a DOM. (Isolation from DOM tree, although it’s a part of it.)
9. Shadow DOM (cont’d) @hardikpthv Isolated DOM Scoped CSS Composition Simplifies CSS
10. Custom Element with Shadow DOM @hardikpthv class FrontManiaDrawer extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style>#tabs { ... }</style> <!-- Scoped style--> <div id="logo">...</div> <div id="speakers">...</div> `; } ... } front-mania-drawer.js
11. Who uses the WebComponents!/?
12. …and many more
13. <lit-html>
14. • HTML templating library for JavaScript (No VDOM) • Lets you write HTML templates in JavaScript using `template literals` • Lazily rendered • Possible to style, bind to attributes, properties, and add event listeners lit-html @hardikpthv // Import lit-html import {html, render} from 'lit-html'; // Define a template const eventTemplate = (eventName) => html`<h1>Welcome to ${eventName}</h1>`; // Render the template to the document render(eventTemplate('FrontMania'), document.body); index.js
15. Example (cont’d) @hardikpthv (eventName) => html`<h1>Welcome to ${eventName}</h1>`; TEMPLATE <h1>Welcome to {{}}</h1> PARSED <h1>Welcome to</h1> PARSED Joins all the literal parts with a special placeholder, similar to "{{}}" Creates a `<template>`
16. LitElement
17. • A simple base class • Lets you create fast, lightweight web components • Work in any web page with any framework • Uses lit-html to render • Reactive properties, async updates for elements, life cycle hooks. LitElement @hardikpthv import { LitElement, html } from 'lit-element'; class FrontManiaDrawer extends LitElement { render(){ ... } } customElements.define('front-mania-drawer', FrontManiaDrawer); front-mania-drawer.js
18. Front-Mania Drawer as LitElement @hardikpthv import { LitElement, html } from 'lit-element'; class FrontManiaDrawer extends LitElement { render(){ return html` <h1>2019 FrontMania</h1> <!-- template content --> `; } } customElements.define('front-mania-drawer', FrontManiaDrawer); front-mania-drawer.js
19. Tool and Best Practices
20. OpenWC • To encourage developers with efficient and futuristic tools • Set of recommendations and standard practices for: ◦ Developing: Dev-server, Scaffold ◦ Linting: ESLint, Prettier, Types ◦ Testing: Karma, Browserstack, Wallaby ◦ Building: Rollup, Webpack ◦ Demoing: Storybook ◦ Publishing: Netlify ◦ Automating: CircleCI @hardikpthv
21. OpenWC (cont’d) @hardikpthv npm init @open-wc BEGIN WITH Requires Node 10 or > and NPM 6 or >
22. <demo />
23. View @ bit.ly/lit-movies
24. Compare DX with React
25. View @ github.com/react-movies View @ github.com/lit-movies
26. Thank You Hardik Pithva @hardikpthv
27. Get the content and stay tuned • Slides @ bit.ly/start-with-lit • Repo. @ github.com/online-edu/lit-movies • Demo @ bit.ly/lit-movies • Follow @ github.com/hardikpthv or speakerdeck.com/hardikpthv • Resources: ◦ open-wc.org ◦ lit-element.polymer-project.org ◦ lit-html.polymer-project.org