Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Web Components with Stencil

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.

Ahmad Alfy

July 13, 2018

More Decks by Ahmad Alfy

Other Decks in Programming


  1. 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
  2. Outline • Introduction to Web Components • What is Stencil

    • How Stencil works • Getting started
  3. 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
  4. 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.
  5. 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
  6. 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.
  7. 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
  8. When you are creating a web component with Stencil, you

    are writing TSX; TypeScript and JSX It brings the best of the two worlds
  9. Similarity with Angular: • Uses TypeScript • Uses similar decorators

    to the ones used in Angular @Component @Component @Prop @Input @Event @Output @Listen @HostListener @Element @ElementRef
  10. 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
  11. • Performant • Lazy loading • Virtual DOM • Reactive

    • Async rendering similar to react fiber • Stable • Familiar • Interoperable Why Stencil
  12. 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.