Fancy Web Components with Stencil

Transcript

1. 1.

   FANCY WEB COMPONENTS WITH

2. 2.

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

3. 3.

   STENCIL IS A COMPILER THAT GENERATES WEB COMPONENTS ” “

   WHAT IS STENCIL?
4. 4.

   IT IS NOT A FRAMEWORK

5. 5.

   CONSISTS OF 4 API WHAT IS WEB COMPONENTS? • JavaScript

   Modules • Custom Elements • HTML Template • Shadow DOM
6. 6.

   FRAMEWORKS WEB COMPONENTS SKATEJS

7. 7.

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

   (optional) ☹ Custom Elements ☹ ☹ HTML Template ☹ Shadow DOM ☹ ☹
8. 8.

   FOR OLD BROWSERS USE POLYFILL

9. 9.

   WHY WE SHOULD USE WEB COMPONENTS?

10. 10.

    RE-USABLE COMPONENTS ALL WE WANT

11. 11.

    COMPONENTS THAT NOT RELY ON ANY FRAMEWORK BUT PLATFORM ”

    “ AND FRAMEWORK AGNOSTIC
12. 12.

    AWESOME ALL MODERN FRAMEWORKS

13. 13.

    STENCIL COMBINES THE BEST CONCEPTS OF THE MOST POPULAR FRAMEWORKS

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

    KEY FEATURES • Virtual DOM • Async rendering (inspired by

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

    WE ARE ENTERING NO FRAMEWORK ERA ” “

17. 17.

    HOW TO GET STARTED?

18. 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. 19.

    API REVIEW

20. 20.

    DECORATORS • @Component • @Prop • @State • @Method •

    @Element • @Event • @Listen
21. 21.

    LIFE CYCLE HOOKS • componentWillLoad • componentDidLoad • componentWillUpdate •

    componentDidUpdate • componentDidUnload
22. 22.

    PROPERTY HOOKS • @PropWillChange • @PropDidChange

23. 23.

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

24. 24.

    QUESTIONS?

25. 25.

    THANK YOU! USE THE PLATFORM ” “