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
71
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
31
The Future of Audio Processing in the Web
bobrov1989
0
110
Job Behind the Scene: Web Worker
bobrov1989
0
74
Running in Parallel: WebAssembly, Web Workers and Worklets
bobrov1989
0
190
Algorithms and Their Habitat
bobrov1989
0
150
WebAssembly-driven CSS
bobrov1989
2
160
Angular State Management with NgRx Workshop
bobrov1989
0
100
The Man who Sold the Amp: How to Process Music with JS
bobrov1989
1
270
No Apollogies: Making Apps Accessible
bobrov1989
1
200
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Elm 0.19.0 Changes
bkuhlmann
0
490
Ruby GitHub Packages
bkuhlmann
0
630
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
雑に思考を整理する技術と効能
konifar
60
29k
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
What the flash - Photography Introduction
edds
64
11k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Writing Fast Ruby
sferik
621
60k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
GitHub's CSS Performance
jonrohan
1025
450k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
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 ” “