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

Intro to Web Components

Intro to Web Components

Not so short presentation for the Brighton webdev meetup on web components.

Miguel Laginha

August 29, 2019
Tweet

More Decks by Miguel Laginha

Other Decks in Programming

Transcript

  1. INTRO TO WEBCOMPONENTS

    View full-size slide

  2. ABOUT ME
    ▸ Miguel Laginha
    ▸ Apereo Foundation
    ▸ Open Academic Environment (OAE)
    ▸ ESUP-Portail

    View full-size slide

  3. 2018 WAS A LEAP YEAR FOR THE WEB.

    View full-size slide

  4. YET NO ONE NOTICED.
    WHY?

    View full-size slide

  5. WE'VE BEEN TOO BUSY
    DISCUSSING WHICH FRAMEWORK IS BEST

    View full-size slide

  6. WHAT HAPPENED?
    FIREFOX 63

    View full-size slide

  7. WE CAN ALL BE BFFS AND LEVERAGE EACH OTHER'S
    WITHOUT ADOPTING EVERY ASPECT OT EACH OTHER'S WORK

    View full-size slide

  8. ENTER WEB
    COMPONENTS =)

    View full-size slide

  9. WHAT IS THAT?

    View full-size slide

  10. 1ST ANSWER
    IT'S NOT ANOTHER FRAMEWORK

    View full-size slide

  11. 2ND ANSWER
    IT'S A SET OF W3C STANDARDS

    View full-size slide

  12. 3RD ANSWER
    YES, IT'S AVAILABLE TODAY, EVERYWHERE

    View full-size slide

  13. 4TH ANSWER
    IT'S NOT EVEN A NEW IDEA!
    THERE'S PROOF

    View full-size slide

  14. 5TH ANSWER (FAV)
    THE WEB AS THE PLATFORM

    View full-size slide

  15. HTML TEMPLATE
    CUSTOM ELEMENTS
    ES MODULES <br/>SHADOW DOM <slot><br/>

    View full-size slide

  16. ALRIGHT, BUT
    HOW?

    View full-size slide

  17. LIBRARY
    DIFFERENCES
    EXAMPLE

    View full-size slide

  18. HELLO WORLD EXAMPLE
    // taken from https://lit-element.polymer-project.org/
    import { LitElement, html } from 'lit-element';
    class SimpleGreeting extends LitElement {
    static get properties() {
    return { name: { type: String } };
    }
    constructor() {
    super();
    this.name = 'World';
    }
    render() {
    return html`Hello, ${this.name}!`;
    }
    }
    customElements.define('simple-greeting', SimpleGreeting);

    View full-size slide

  19. WHAT'S IN IT FOR DEVS?
    ▸ CSS is scoped
    ▸ Custom HTML is semantic
    ▸ JS scoping is simpler
    ▸ Re-usable code
    ▸ Accessibility becomes manageable
    ▸ WC keeps design intentional

    View full-size slide

  20. WHAT'S IN IT FOR MANAGERS?
    ▸ Lower maintenance costs
    ▸ Cost of development collapses
    ▸ Lower boilerplate and churn for future projects
    ▸ Extensibility
    ▸ It's a W3C standard, no legacy

    View full-size slide

  21. I'M SOLD, LET'S
    TRY IT

    View full-size slide

  22. A GLIMPSE INTO
    THE FUTURE!

    View full-size slide

  23. A GLIMPSE INTO THE FUTURE
    ▸ video players
    ▸ dropdown menus
    ▸ timelines
    ▸ animations
    ▸ all sorts of visual and non visual components

    View full-size slide

  24. ADVANTAGES IN A NUTSHELL
    ▸ 100% re-usable components (style, business logic or mixed)
    ▸ Split work among teams
    ▸ CDN served components
    ▸ No need for greenfield projects, upgrade step by step!
    ▸ No need for a framework
    ▸ Avoid (platform) lock-in

    View full-size slide

  25. BARRIERS TO ADOPTION
    ▸ Lots of libraries already (litElement, skateJs, Stencil, slimJS, etc)
    ▸ Requires proper JS knowledge
    ▸ Requires tooling (webpack, lerna, rollup, npm, git, etc...)
    ▸ Deployment
    ▸ Documentation

    View full-size slide

  26. WHO'S USING?
    ▸ Youtube: https://www.youtube.com/
    ▸ EA: https://www.ea.com/en-gb
    ▸ https://www.webcomponents.org/
    ▸ https://www.byu.edu/

    View full-size slide

  27. COMMUNITY RESOURCES
    ▸ OpenWC
    ▸ WebComponents.org
    ▸ Try litElement
    ▸ Polymer
    ▸ Compatibility
    ▸ dev.to

    View full-size slide

  28. THANK YOU.
    Q&A TIME

    View full-size slide