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

Fancy Web Components with Stencil

Fancy Web Components with Stencil

Vitalii Bobrov

November 30, 2017
Tweet

More Decks by Vitalii Bobrov

Other Decks in Programming

Transcript

  1. FANCY WEB COMPONENTS WITH

  2. VITALII BOBROV JAVASCRIPT DEV @ LUXOFT @bobrov1989 vitaliy-bobrov.github.io

  3. STENCIL IS A COMPILER THAT GENERATES WEB COMPONENTS ” “

    WHAT IS STENCIL?
  4. IT IS NOT A FRAMEWORK

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

    Modules • Custom Elements • HTML Template • Shadow DOM
  6. FRAMEWORKS WEB COMPONENTS SKATEJS

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

    (optional) ☹ Custom Elements ☹ ☹ HTML Template ☹ Shadow DOM ☹ ☹
  8. FOR OLD BROWSERS USE POLYFILL

  9. WHY WE SHOULD USE WEB COMPONENTS?

  10. RE-USABLE COMPONENTS ALL WE WANT

  11. COMPONENTS THAT NOT RELY ON ANY FRAMEWORK BUT PLATFORM ”

    “ AND FRAMEWORK AGNOSTIC
  12. AWESOME ALL MODERN FRAMEWORKS

  13. STENCIL COMBINES THE BEST CONCEPTS OF THE MOST POPULAR FRAMEWORKS

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

    React Fiber) • Reactive data-binding • TypeScript • JSX • Server Side Rendering (SSR)
  15. FIBER VS STENCIL DEMO https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html https://stencil-fiber-demo.firebaseapp.com/perf.html

  16. WE ARE ENTERING NO FRAMEWORK ERA ” “

  17. HOW TO GET STARTED?

  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> ); } }
  19. API REVIEW

  20. DECORATORS • @Component • @Prop • @State • @Method •

    @Element • @Event • @Listen
  21. LIFE CYCLE HOOKS • componentWillLoad • componentDidLoad • componentWillUpdate •

    componentDidUpdate • componentDidUnload
  22. PROPERTY HOOKS • @PropWillChange • @PropDidChange

  23. DEMO TIME https://github.com/vitaliy-bobrov/stencil-meetjs-demo

  24. QUESTIONS?

  25. THANK YOU! USE THE PLATFORM ” “