Intro to Web Components

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

Transcript

1. INTRO TO WEBCOMPONENTS
   

   View Slide

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

   View Slide

3. 2018 WAS A LEAP YEAR FOR THE WEB.
   

   View Slide

4. YET NO ONE NOTICED.
   WHY?
   

   View Slide

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

   View Slide

6. WHAT HAPPENED?
   FIREFOX 63
   

   View Slide

7. View Slide

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

   View Slide

9. ENTER WEB
   COMPONENTS =)
   

   View Slide

10. WHAT IS THAT?
    

    View Slide

11. 1ST ANSWER
    IT'S NOT ANOTHER FRAMEWORK
    

    View Slide

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

    View Slide

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

    View Slide

14. View Slide

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

    View Slide

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

    View Slide

17. 
    
    

    View Slide

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

    View Slide

19. ALRIGHT, BUT
    HOW?
    

    View Slide

20. LIBRARY
    DIFFERENCES
    EXAMPLE
    

    View Slide

21. 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 Slide

22. 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 Slide

23. 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 Slide

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

    View Slide

25. A GLIMPSE INTO
    THE FUTURE!
    

    View Slide

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

    View Slide

27. 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 Slide

28. 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 Slide

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

    View Slide

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

    View Slide

31. THANK YOU.
    Q&A TIME
    

    View Slide

32. View Slide