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
59
Fancy Web Components with Stencil
Vitalii Bobrov
November 30, 2017
Tweet
Share
More Decks by Vitalii Bobrov
See All by Vitalii Bobrov
Listen to UI: Making Apps Accessible
bobrov1989
0
25
The Future of Audio Processing in the Web
bobrov1989
0
91
Job Behind the Scene: Web Worker
bobrov1989
0
58
Running in Parallel: WebAssembly, Web Workers and Worklets
bobrov1989
0
150
Algorithms and Their Habitat
bobrov1989
0
150
WebAssembly-driven CSS
bobrov1989
2
150
Angular State Management with NgRx Workshop
bobrov1989
0
63
The Man who Sold the Amp: How to Process Music with JS
bobrov1989
1
200
No Apollogies: Making Apps Accessible
bobrov1989
1
190
Other Decks in Programming
See All in Programming
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
210
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
280
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.3k
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
510
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
220
T3 Stack and TypeScript ecosystem
quramy
3
730
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
210
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
310
OSSから学んだPR Descriptionの書き方
fugakkbn
4
130
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
100
Writing Greener Java Applications
hollycummins
0
340
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
GitHub's CSS Performance
jonrohan
1020
430k
In The Pink: A Labor of Love
frogandcode
132
21k
For a Future-Friendly Web
brad_frost
166
7.8k
Agile that works and the tools we love
rasmusluckow
320
20k
KATA
mclloyd
12
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Code Reviewing Like a Champion
maltzj
508
38k
What's new in Ruby 2.0
geeforr
336
30k
Done Done
chrislema
178
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
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 ” “