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