Web Components - Scaling to the Future

This talk walks through the basics of what web components are, and why you should consider using them to manage your UI in the future.

Transcript

1. Web Components Scaling to the future
2. Agenda What? Why? How?
3. What are Web Components? Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
4. What are Web Components? • Web components provide a simple cross browser API for creating reusable behavior and styles. • Web components are written with plain JS and do not need a framework to support them.
5. Why use Web Components? • “The primary use case for Web Components is to create framework-independent UI components. Thanks to the broad browser support, this is already possible today.” • Full support in almost all SPA frameworks • https://custom-elements-everywhere.com/
6. Why use Web Components? • If the support is bad in React, why bother? • Support is still good, there are just some caveats • The React team encourages use of them
8. Why use Web Components? • Cross platform styles and behavior • Separate your style concerns from your business logic • Enable teams to choose their own framework while keeping consistent styles and user interactions • Enable quicker upgrades to future versions of your chosen framework • Scale to the future
9. Why use Web Components? • They already work today! • https://ionicframework.com/ • https://www.webcomponents.org/ • Design system popularity • The constantly changing JS ecosystem
10. How to Build Web Components • Build them yourself in the browser with plain JS:
11. How to Build Web Components • Use a web component framework • Polymer.js • Slim.js • Stencil.js
12. How to Build Web Components • Use a SPA framework to compile components to web components • Angular • Svelte • Vue
13. Stencil – My Preferred React Method
14. Questions?