Intro to Web Components

Not so short presentation for the Brighton webdev meetup on 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
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
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