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
87
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
64
The Future of Audio Processing in the Web
bobrov1989
0
170
Job Behind the Scene: Web Worker
bobrov1989
0
120
Running in Parallel: WebAssembly, Web Workers and Worklets
bobrov1989
0
260
Algorithms and Their Habitat
bobrov1989
0
190
WebAssembly-driven CSS
bobrov1989
2
200
Angular State Management with NgRx Workshop
bobrov1989
0
140
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
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
260
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
880
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
640
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
3
150
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
230
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
560
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
410
型で語るカタ
irof
0
320
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Thoughts on Productivity
jonyablonski
69
4.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fireside Chat
paigeccino
37
3.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How STYLIGHT went responsive
nonsquared
100
5.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
A designer walks into a library…
pauljervisheath
207
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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 ” “