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
ES6ModulesとServiceWorker時代のTypescript開発
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 15, 2017
Programming
0
140
ES6ModulesとServiceWorker時代のTypescript開発
ServiceWorkerとES6 Modulesを利用してTypescript開発をどう変えていけるか考えてみた
Taketoshi Aono(青野健利 a.k.a brn)
June 15, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
5
2.5k
Parsing Javascript
brn
12
6.9k
JSON & Object Tips
brn
1
280
CA 1Day Youth Bootcamp for Frontend LT
brn
0
660
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
590
tc39 proposals
brn
0
640
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
490
Other Decks in Programming
See All in Programming
LPIXEL×CADDi_kaerururu
kaerururu
3
300
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
Open Source Swiftc Workshop
kitasuke
1
180
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Why 1 + 1 = 2 in Swift?
1plus4
1
240
Honoとhtmx
yusukebe
6
1.2k
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
Introduction for Open Source Swift Workshop
giginet
PRO
0
180
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
14k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Featured
See All Featured
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Documentation Writing (for coders)
carmenintech
59
3.8k
How to name files
jennybc
62
92k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Code Reviewing Like a Champion
maltzj
512
39k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Why Our Code Smells
bkeepers
PRO
330
56k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Web development in the modern age
philhawksworth
201
10k
Design by the Numbers
sachag
274
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Transcript
Typescript Development with ServiceWorker and ES6 Modules
せ: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
What is ServiceWorker? ServiceWorkerהכWebل٦آغحؙؚٓؐٝسד؝ٝزٗ٦ٕ׃ծ httpؙٔؒأزך؎ٝة٦إفز瘝➙תדjavascriptדכדֹזַֿה 㹋植ׅ堣腉דׅկ https://developers.google.com/web/fundamentals/getting-started/ primers/service-workers?hl=ja
Intercept http request ֿד➙㔐כServiceWorkerךhttpؙٔؒأز؎ٝة٦إفز堣腉הծ ES6 Modulesⵃ欽׃גTypescriptך如⚅➿涪橆㞮圓眠׃גת׃կ
ES6 Modules ֲ兛鸐ח⢪גְתׅ״י 涺ׁ㛇劤涸חכbabelדزٓٝأػ؎ٕ׃גְה䙼ְתׅկ ـٓؐؠדכ植㖈SafariהChrome Canarayד؟ه٦زׁגְתׅկ ➙㔐כֿךES6 Modulesⵃ欽׃גծ Typescriptךٌآُ٦ٕٗ٦س׃תׅկ
Typescript Compiler ـٓؐؠד⹛ֹתׅկ ׃ծCompilerHost鏣㹀ׅװ倯כ㢳ⴓئזךדծ ts.transpileModuleⵃ欽׃ג1ٌآُ٦ٕ嫣ח؝ٝػ؎ٕ׃תׅկ https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function
Strategy ؝ٝػ؎ٕך崧דָׅծ • ServiceWorkerךinstall؎كٝزskipWatingדׅ굲לׅ • ServiceWorkerךactivate؎كٝزclaimד㸣✪ׅկ • ً؎ٝ⩎כnavigator.serviceWorker.registerך䨱⦼ךPromiseⰻדactiveف ٗػذ؍湊鋔 •
activeחזtypescriptscript type="module"דٗ٦سׅկ • ServiceWorkerךfetch؎كٝزⰻד؝ٝػ؎ٕ׃ג鵤ׅկ הְֲ䠬ׄדװגת׃կ
tsconfig.json ׁח؝ٝػ؎ٕך鏣㹀tsconfig.jsonַ《⳿׃ֻזךדծ • 剑ⴱחً؎ٝأٖحس⩎ַpostMessageדtsconfigך《䖤䭷爙կ • tsconfigךٗ٦سָ㸣✪׃ServiceWorker⩎ַpostMessageד鸐濼 • typescriptךٗ٦س ה׃ת׃կ
Strategy ServiceWorkerכⴱ㔐ח؎ٝأز٦ׁٕהծinstall؎كٝزָ涪抟׃ծ waiting朐䡾חזתׅկ׃גٔٗ٦سׅהactive朐䡾ח獳遤׃ծ ✳䏝湡ך鏝㉏⟃꣬ծfetch؎كٝزٍؗحثֿׅהָ〳腉חזתׅկ install active ⴱ㔐 ✳㔐湡⟃꣬
Strategy ׃ַ׃ծ➙㔐כⴱ㔐ַل٦آ؝ٝزٗ٦ٕ׃ְկ זךדծself.skipWaiting()ㄎן⳿׃גactivate׃ծclaim()ㄎן⳿׃גծ ل٦آ؝ٝزٗ٦ٕ朐䡾ח׃תׅկ ل٦آך؝ٝزٗ٦ٕ朐䡾ָ㢌⻉ׅהծcontrollerchange؎كٝزָً ؎ٝل٦آדㄎן⳿ׁתׅկ ך؎كٝزٔحأٝ׃גֶֹծactive朐䡾嗚濼׃postMesseage דtsconfig.jsonך《䖤遤ְתׅկ install ⴱ㔐
active ⴱ㔐 skipWaiting controllerchange Main postMessage
Strategy register() controllerchange postMessage(load tsconfig) postMessage(load succeeded) load typescript via
script tag ... ServiceWorker Main install active skipWaiting() claim() wait fetch event load typescript via ES6 import transpileModule transpileModule Transpiled code
Demo رٌ https://brn.github.io/swts/
Problem 植㖈ךהֿES6 Modulesח㼎䘔׃גְזְModuleכ⹛⡲׃תׇկ את㣐⼱ךnpmךModuleכ⹛ַזְגֿהדׅկ ׃✲חⵃ欽ׅModule؝ٝػ؎ٕ׃גֶֽלזהַכז ַ׃תׇկ
GitHub ֿֿתדך㹋鄲npm moduleה׃גⰕ׃גֶֹת׃կ https://github.com/brn/swts.git
Summary ServiceWorkerדbabel٥typescriptכַז⦜זֿהָ㢳ְկ 暴חES6 Modulesָ⢪ִגծ commonjs䕎䒭ךٌآُ٦ָٕٗ٦سדֹזַהծ鼋欵ך㉏겗ָ֮կ commonjs => ES6 modulesַׅծamd٥Systemjsהְֲ鼋欵ח걾ַկ ES6
Modulesⵃ欽׃tranpileחꟼ׃גכתתװֿהָ㢳ֲկ
Summary ׀幠耮ָ֮הֲ׀ְׂת׃կ