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

Shared web-components with StencilJS

Felipe Sousa
September 25, 2019

Shared web-components with StencilJS

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA).

The presentation focuses on a review of all main concepts and rules. Checking the syntax and how to apply it in different frameworks.

Meetup GDG, 25 de septiembre de 2019 / Santiago/Chile
Link: https://www.meetup.com/gdg-santiago-chile/events/264634504/

Felipe Sousa

September 25, 2019

More Decks by Felipe Sousa

Other Decks in Programming


  1. Web Components concepts A set of JavaScript APIs that allow

    you to define custom elements and their behaviour, which can then be used as desired in your user interface. HTML Templates Custom Elements Shadow DOM
  2. Custom Elements Web Components concepts An important aspect of web

    components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. Shadow DOM HTML Templates Custom Elements
  3. Custom Elements Web Components concepts The <template> and <slot> elements

    enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure. Custom Elements HTML Templates Shadow DOM
  4. StencilJS Stencil is a toolchain for building reusable, scalable Design

    Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.
  5. Personal Notes ◦ Mixin between Angular & React ◦ Web

    Components Based ◦ Really shared concept ◦ Easy to scale ◦ No hard setups ◦ Easy to learn
  6. Features ◦ Virtual DOM ◦ Async Rendering (inspired by React

    Fiber) ◦ Reactive data-binding ◦ TypeScript
  7. Stencil Component Life-Cycle ◦ connectedCallback ◦ disconnectedCallback ◦ componentWillLoad ◦

    componentDidLoad ◦ componentWillRender ◦ componentDidRender ◦ componentWillUpdate ◦ componentDidUpdate
  8. CLI/Utils ◦ Tests: E2E & Unit Tests ◦ Plugins •

    Sass • Less • Stylus • Posts CSS ◦ Auto Documentation