ES6ModulesとServiceWorker時代のTypescript開発

ServiceWorkerとES6 Modulesを利用してTypescript開発をどう変えていけるか考えてみた

Transcript

1. Typescript Development with ServiceWorker and ES6 Modules
2. せ⵸: @brn (ꫬꅿ⨳ⵃ
   a.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔ
   RightSegment٥AI Messenger ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
3. What is ServiceWorker?
   ServiceWorkerהכWebل٦آ׾غحؙؚٓؐٝسד؝ٝزٗ٦ٕ׃ծ httpؙٔؒأزך؎ٝة٦إفز瘝➙תדjavascriptדכדֹזַ׏׋ֿה ׾㹋植ׅ׷堣腉דׅկ https://developers.google.com/web/fundamentals/getting-started/ primers/service-workers?hl=ja
   
4. Intercept http request
   ׉ֿד➙㔐כServiceWorkerךhttpؙٔؒأز؎ٝة٦إفز堣腉הծ ES6 Modules׾ⵃ欽׃גTypescriptך如⚅➿Ꟛ涪橆㞮׾圓眠׃ג׫ת׃׋կ
5. ES6 Modules
   ׮ֲ兛鸐ח⢪׻׸גְתׅ״י 涺ׁ׿㛇劤涸חכbabelדزٓٝأػ؎ٕ׃גְ׷ה䙼ְתׅկ ـٓؐؠדכ植㖈SafariהChrome Canarayד؟ه٦زׁ׸גְתׅկ ➙㔐כֿךES6 Modules׾ⵃ欽׃גծ Typescriptךٌآُ٦ٕ׾ٗ٦س׃תׅկ
6. Typescript Compiler
   ـٓؐؠד׮⹛ֹתׅկ ׋׌׃ծCompilerHost׾鏣㹀ׅ׷װ׶倯כ㢳ⴓئזךדծ ts.transpileModule׾ⵃ欽׃ג1ٌآُ٦ٕ嫣ח؝ٝػ؎ٕ׃תׅկ https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function
7. Strategy
   ؝ٝػ؎ٕך崧׸דָׅծ •  ServiceWorkerךinstall؎كٝز׾skipWatingדׅ׏굲לׅ •  ServiceWorkerךactivate؎كٝز׾claimד㸣✪ׅ׷կ •  ً؎ٝ⩎כnavigator.serviceWorker.registerך䨱׶⦼ךPromiseⰻדactiveف ٗػذ؍׾湊鋔 •  activeחז׏׋׵typescript׾script type="module"דٗ٦سׅ׷կ •  ServiceWorkerךfetch؎كٝزⰻד؝ٝػ؎ٕ׃ג鵤ׅկ הְֲ䠬ׄדװ׏ג׫ת׃׋կ
8. tsconfig.json
   ׁ׵ח؝ٝػ؎ٕך鏣㹀׾tsconfig.jsonַ׵《׶⳿׃׋ֻז׏׋ךדծ •  剑ⴱחً؎ٝأٖحس⩎ַ׵postMessageדtsconfigך《䖤׾䭷爙կ •  tsconfigךٗ٦سָ㸣✪׃׋׵ServiceWorker⩎ַ׵postMessageד鸐濼 •  typescriptךٗ٦س ה׃ת׃׋կ
9. Strategy
   ServiceWorkerכⴱ㔐ח؎ٝأز٦ׁٕ׸׷הծinstall؎كٝزָ涪抟׃ծ waiting朐䡾חז׶תׅկ׉׃גٔٗ٦سׅ׷הactive朐䡾ח獳遤׃ծ ✳䏝湡ך鏝㉏⟃꣬ծfetch؎كٝز׾ٍؗحثׅ׷ֿהָ〳腉חז׶תׅկ install active ⴱ㔐
   ✳㔐湡⟃꣬
   
10. Strategy
    ׃ַ׃ծ➙㔐כⴱ㔐ַ׵ل٦آ׾؝ٝزٗ٦ٕ׃׋ְկ זךדծself.skipWaiting()׾ㄎן⳿׃גactivate׃ծclaim()׾ㄎן⳿׃גծ ل٦آ׾؝ٝزٗ٦ٕ朐䡾ח׃תׅկ
    ل٦آך؝ٝزٗ٦ٕ朐䡾ָ㢌⻉ׅ׷הծcontrollerchange؎كٝزָً ؎ٝل٦آדㄎן⳿ׁ׸תׅկ
    ׉ך؎كٝز׾ٔحأٝ׃גֶֹծactive朐䡾׾嗚濼׃׋postMesseage דtsconfig.jsonך《䖤׾遤ְתׅկ
    install ⴱ㔐
    active ⴱ㔐
    skipWaiting
    controllerchange Main
    postMessage
    
11. 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
    
12. Demo
    رٌ https://brn.github.io/swts/
13. Problem
    植㖈ךהֿ׹ES6 Modulesח㼎䘔׃גְזְModuleכ⹛⡲׃תׇ׿կ את׶㣐⼱ךnpmךModuleכ⹛ַזְ׏גֿהדׅկ ׋׌׃✲⵸חⵃ欽ׅ׷Module׾؝ٝػ؎ٕ׃גֶֽלז׿הַכז ׷ַ׮׃׸תׇ׿կ
14. GitHub
    ֿֿתדך㹋鄲׾npm moduleה׃גⰕꟚ׃גֶֹת׃׋կ https://github.com/brn/swts.git
15. Summary
    ServiceWorkerדbabel٥typescriptכַז׶꬗⦜זֿהָ㢳ְկ 暴חES6 Modulesָ⢪ִג׮ծ commonjs䕎䒭ךٌآُ٦ָٕٗ٦سדֹזַ׏׋׶הծ鼋欵ך㉏겗ָ֮׷կ commonjs => ES6 modules׾ׅ׷ַծamd٥Systemjsהְֲ鼋欵ח걾׷ַկ ES6 Modules׾ⵃ欽׃׋tranpileחꟼ׃גכת׌ת׌װ׷ֿהָ㢳׉ֲկ
16. Summary
    ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ