Fancy Web Components with Stencil

Fancy Web Components with Stencil

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

November 30, 2017
Tweet

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 ” “