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
Tweet

More Decks by Ahmad Alfy

Other Decks in Programming

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
  23. None
  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
  27. None
  28. None
  29. None
  30. None
  31. None
  32. Demo Time

  33. None
  34. None
  35. None
  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?