Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Fancy Web Components with Stencil
Vitalii Bobrov
November 30, 2017
Programming
0
50
Fancy Web Components with Stencil
Vitalii Bobrov
November 30, 2017
Tweet
Share
More Decks by Vitalii Bobrov
See All by Vitalii Bobrov
bobrov1989
0
6
bobrov1989
0
54
bobrov1989
0
26
bobrov1989
0
63
bobrov1989
0
130
bobrov1989
2
140
bobrov1989
0
20
bobrov1989
1
130
bobrov1989
1
150
Other Decks in Programming
See All in Programming
tetsukick
0
180
kimyan
3
250
sters
2
140
ianaya89
1
220
danilop
1
740
xrdnk
0
130
joergneumann
0
140
manfredsteyer
PRO
0
110
abeta
1
210
neripark
3
670
layzee
1
220
alperhankendi
1
150
Featured
See All Featured
zenorocha
296
40k
marktimemedia
7
400
michaelherold
225
8.5k
bkeepers
321
53k
danielanewman
1
520
destraynor
146
19k
hursman
106
9.3k
geoffreycrofte
21
930
chriscoyier
683
180k
myddelton
109
11k
andyhume
63
3.7k
sferik
610
55k
Transcript
FANCY WEB COMPONENTS WITH
VITALII BOBROV JAVASCRIPT DEV @ LUXOFT @bobrov1989 vitaliy-bobrov.github.io
STENCIL IS A COMPILER THAT GENERATES WEB COMPONENTS ” “
WHAT IS STENCIL?
IT IS NOT A FRAMEWORK
CONSISTS OF 4 API WHAT IS WEB COMPONENTS? • JavaScript
Modules • Custom Elements • HTML Template • Shadow DOM
FRAMEWORKS WEB COMPONENTS SKATEJS
BROWSERS SUPPORT Chrome (blink-based) Safari Firefox Edge IE JS modules
(optional) ☹ Custom Elements ☹ ☹ HTML Template ☹ Shadow DOM ☹ ☹
FOR OLD BROWSERS USE POLYFILL
WHY WE SHOULD USE WEB COMPONENTS?
RE-USABLE COMPONENTS ALL WE WANT
COMPONENTS THAT NOT RELY ON ANY FRAMEWORK BUT PLATFORM ”
“ AND FRAMEWORK AGNOSTIC
AWESOME ALL MODERN FRAMEWORKS
STENCIL COMBINES THE BEST CONCEPTS OF THE MOST POPULAR FRAMEWORKS
INTO A SIMPLE BUILD-TIME TOOL ” “ JUST USE ALL THE BEST
KEY FEATURES • Virtual DOM • Async rendering (inspired by
React Fiber) • Reactive data-binding • TypeScript • JSX • Server Side Rendering (SSR)
FIBER VS STENCIL DEMO https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html https://stencil-fiber-demo.firebaseapp.com/perf.html
WE ARE ENTERING NO FRAMEWORK ERA ” “
HOW TO GET STARTED?
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> ); } }
API REVIEW
DECORATORS • @Component • @Prop • @State • @Method •
@Element • @Event • @Listen
LIFE CYCLE HOOKS • componentWillLoad • componentDidLoad • componentWillUpdate •
componentDidUpdate • componentDidUnload
PROPERTY HOOKS • @PropWillChange • @PropDidChange
DEMO TIME https://github.com/vitaliy-bobrov/stencil-meetjs-demo
QUESTIONS?
THANK YOU! USE THE PLATFORM ” “