Intro to Web Components

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