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
82
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
51
The Future of Audio Processing in the Web
bobrov1989
0
140
Job Behind the Scene: Web Worker
bobrov1989
0
98
Running in Parallel: WebAssembly, Web Workers and Worklets
bobrov1989
0
230
Algorithms and Their Habitat
bobrov1989
0
180
WebAssembly-driven CSS
bobrov1989
2
180
Angular State Management with NgRx Workshop
bobrov1989
0
120
The Man who Sold the Amp: How to Process Music with JS
bobrov1989
1
330
No Apollogies: Making Apps Accessible
bobrov1989
1
220
Other Decks in Programming
See All in Programming
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
170
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
810
Return of the Full-Stack Developer
simas
PRO
1
310
ニックトレイン登壇資料
ryotakurokawa
0
140
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
500
フロントエンドテストの育て方
quramy
8
2.5k
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.6k
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.6k
ベクトル検索システムの気持ち
monochromegane
29
8.8k
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
120
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
Producing Creativity
orderedlist
PRO
344
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
KATA
mclloyd
29
14k
A better future with KSS
kneath
238
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
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 ” “