Building Web Components with Stencil

Learn how you can build standard compliant web components utilizing information you already know from popular frameworks like React and Angular using Stencil.

Transcript

1. Building Web Components Using
2. Development head at Robusta Instructor at AlMakinah Writing front-end code for more than I can remember Accessibility and Web standards fanatic Love teaching, StarCraft, good puns and memes Currently trying to write my own book
3. You can reach me via: ahmadalfy @Facebook, Twitter, ASK.fm, LinkedIn Email: ahmad@alfy.me
4. We’re hiring Senior Frontend Developer
5. Outline • Introduction to Web Components • What is Stencil • How Stencil works • Getting started
6. Web components are a set of APIs that allow us to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. It works across modern browsers, and can be used with any JavaScript library or framework. Web Components
7. https://www.webcomponents.org/element/GoogleWebComponents/google-map
8. Source: https://dzone.com/articles/web-components-a-new-perspective-to-web-developmen
9. HTML template • Elements inside the tag are inert: • Content within the tag are not rendered. You cannot select it using document.querySelector • <img /> won’t fire a request even if has a src • <a /> and other focusable elements aren’t accessible using tabs • Events aren’t attached to elements inside it.
10. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
11. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
12. Shadow DOM • Shadow DOM API allow us to encapsulate parts of our document to prevent clashing between it and the rest of the code on the page. • Example: a widget on a page that should have its own style and behavior and shouldn’t be affected by the global nature of the CSS/JavaScript
13. HTML Imports Imports allow us to bring true dependency management to the browsers without hacks.
14. Let’s take bootstrap as an example What about this? Shared resources are downloaded once
15. Custom Elements Custom Elements allow us to create new HTML elements or extend existing ones. It’s the foundational API of the Web Component that most of our work is based upon.
16. https://www.webcomponents.org/
17. What the heck is
18. Stencil is a Compiler that allows you to use its API to write standard compliant web components through concepts and tools you are already familiar with. Built by the team who built Ionic
19. STENCIL IS NOT A FRAMEWORK
20. AGAIN IT IS NOT A FRAMEWORK
21. NO, SERIOUSLY IT IS NOT A FRAMEWORK
22. When you are creating a web component with Stencil, you are writing TSX; TypeScript and JSX It brings the best of the two worlds
24. Similarity with Angular: • Uses TypeScript • Uses similar decorators to the ones used in Angular @Component @Component @Prop @Input @Event @Output @Listen @HostListener @Element @ElementRef
25. Similarity with React: • Uses JSX • Uses the concept of state / props • Have similar life cycle componentWillLoad componentWillMount componentDidLoad componentDidMount componentWillUpdate componentWillUpdate componentDidUpdate componentDidUpdate componentDidUnload componentDidUnmount
26. • Performant • Lazy loading • Virtual DOM • Reactive • Async rendering similar to react fiber • Stable • Familiar • Interoperable Why Stencil
32. Demo Time
36. HOW IS STENCIL DIFFERENT FROM X? • Angular/React/Vue/etc.: Stencil builds standards-based web components that run natively in the browser. • Polymer: Stencil works primarily at build rather than runtime. Outputs vanilla web components. Opinionated around JSX, Virtual DOM, and other framework features. • Vanilla Web Components: Stencil provides complicated framework features as if you wrote them yourself in vanilla Web Components.
37. Questions?