Fancy Web Components with Stencil

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