Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fancy Web Components with Stencil
Search
Vitalii Bobrov
November 30, 2017
Programming
0
86
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
60
The Future of Audio Processing in the Web
bobrov1989
0
160
Job Behind the Scene: Web Worker
bobrov1989
0
120
Running in Parallel: WebAssembly, Web Workers and Worklets
bobrov1989
0
250
Algorithms and Their Habitat
bobrov1989
0
190
WebAssembly-driven CSS
bobrov1989
2
200
Angular State Management with NgRx Workshop
bobrov1989
0
130
The Man who Sold the Amp: How to Process Music with JS
bobrov1989
1
350
No Apollogies: Making Apps Accessible
bobrov1989
1
230
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
240
PicoRuby on Rails
makicamel
2
110
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
490
Java on Azure で LangGraph!
kohei3110
0
170
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
5k
Is Xcode slowly dying out in 2025?
uetyo
1
210
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
WindowInsetsだってテストしたい
ryunen344
1
200
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
370
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A better future with KSS
kneath
239
17k
Practical Orchestrator
shlominoach
188
11k
Unsuck your backbone
ammeep
671
58k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Become a Pro
speakerdeck
PRO
28
5.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Fireside Chat
paigeccino
37
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.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 ” “