Intro to Web Components

Intro to Web Components

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

5943abec14734639dd5ad75e437639d3?s=128

Miguel Laginha

August 29, 2019
Tweet

Transcript

  1. INTRO TO WEBCOMPONENTS

  2. ABOUT ME ▸ Miguel Laginha ▸ Apereo Foundation ▸ Open

    Academic Environment (OAE) ▸ ESUP-Portail
  3. 2018 WAS A LEAP YEAR FOR THE WEB.

  4. YET NO ONE NOTICED. WHY?

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

  6. WHAT HAPPENED? FIREFOX 63

  7. None
  8. WE CAN ALL BE BFFS AND LEVERAGE EACH OTHER'S WITHOUT

    ADOPTING EVERY ASPECT OT EACH OTHER'S WORK
  9. ENTER WEB COMPONENTS =)

  10. WHAT IS THAT?

  11. 1ST ANSWER IT'S NOT ANOTHER FRAMEWORK

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

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

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

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

  17. <your-tag></your-tag> <!-- - Custom, reusable, encapsulated HTML tags - For

    use in web pages and web apps - Work in all major browsers - JS agnostic -->
  18. HTML TEMPLATE <template> CUSTOM ELEMENTS <your-tag/> ES MODULES <script type="module">

    SHADOW DOM <slot>
  19. ALRIGHT, BUT HOW?

  20. LIBRARY DIFFERENCES EXAMPLE

  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`<p>Hello, ${this.name}!</p>`; } } customElements.define('simple-greeting', SimpleGreeting);
  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
  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
  24. I'M SOLD, LET'S TRY IT

  25. A GLIMPSE INTO THE FUTURE!

  26. A GLIMPSE INTO THE FUTURE ▸ video players ▸ dropdown

    menus ▸ timelines ▸ animations ▸ all sorts of visual and non visual components
  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
  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
  29. WHO'S USING? ▸ Youtube: https://www.youtube.com/ ▸ EA: https://www.ea.com/en-gb ▸ https://www.webcomponents.org/

    ▸ https://www.byu.edu/
  30. COMMUNITY RESOURCES ▸ OpenWC ▸ WebComponents.org ▸ Try litElement ▸

    Polymer ▸ Compatibility ▸ dev.to
  31. THANK YOU. Q&A TIME

  32. None