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

Fancy Web Components with Stencil

Fancy Web Components with Stencil

Avatar for Vitalii Bobrov

Vitalii Bobrov

November 30, 2017
Tweet

More Decks by Vitalii Bobrov

Other Decks in Programming

Transcript

  1. CONSISTS OF 4 API WHAT IS WEB COMPONENTS? • JavaScript

    Modules • Custom Elements • HTML Template • Shadow DOM
  2. BROWSERS SUPPORT Chrome (blink-based) Safari Firefox Edge IE JS modules

    (optional) ☹ Custom Elements ☹ ☹ HTML Template ☹ Shadow DOM ☹ ☹
  3. STENCIL COMBINES THE BEST CONCEPTS OF THE MOST POPULAR FRAMEWORKS

    INTO A SIMPLE BUILD-TIME TOOL ” “ JUST USE ALL THE BEST
  4. KEY FEATURES • Virtual DOM • Async rendering (inspired by

    React Fiber) • Reactive data-binding • TypeScript • JSX • Server Side Rendering (SSR)
  5. 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> ); } }