Fancy Web Components with Stencil

Fancy Web Components with Stencil

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

November 30, 2017
Tweet

Transcript

  1. 5.

    CONSISTS OF 4 API WHAT IS WEB COMPONENTS? • JavaScript

    Modules • Custom Elements • HTML Template • Shadow DOM
  2. 7.

    BROWSERS SUPPORT Chrome (blink-based) Safari Firefox Edge IE JS modules

    (optional) ☹ Custom Elements ☹ ☹ HTML Template ☹ Shadow DOM ☹ ☹
  3. 13.

    STENCIL COMBINES THE BEST CONCEPTS OF THE MOST POPULAR FRAMEWORKS

    INTO A SIMPLE BUILD-TIME TOOL ” “ JUST USE ALL THE BEST
  4. 14.

    KEY FEATURES • Virtual DOM • Async rendering (inspired by

    React Fiber) • Reactive data-binding • TypeScript • JSX • Server Side Rendering (SSR)
  5. 18.

    BASIC COMPONENT import { Component, Prop } from '@stencil/core'; @Component({

    tag: 'my-name', styleUrl: 'my-name.scss' }) export class MyName { @Prop() first: string; @Prop() last: string; render() { return ( <div> Hello, my name is {this.first} {this.last} </div> ); } }