Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES6ModulesとServiceWorker時代のTypescript開発

 ES6ModulesとServiceWorker時代のTypescript開発

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

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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 ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ