Universal JavaScript

Roppongi.rb #3 Rails x Frontend-Tech

Transcript

1. Universal JavaScript - ࠓޙ10 ೥Λੜ͖ൈͨ͘Ίʹ @mizchi Roppongi.rb #3 Rails x Frontend-Tech
2. About Me • ϑϩϯτΤϯυ/SPA/Node.js ΤϯδχΞ • ήʔϜܥ => ڭҭܥ => Increments(Qiita) • 4݄͔ΒϑϦʔϥϯεͰ Redux ΍ Express middleware • ࠷ۙͷڵຯ: ReactNative / AMP / ےτϨ
3. Podcast ͸͡Ί·ͨ͠ https://genba.fm/ • #1 Awesome Vue • #0 React vs Angular - ͋Δ͍͸ Functional JavaScript
4. ͓඼ॻ͖ • Sprockets ͷࡴ͠ํ • ͓લͷ Webpack ͸ࢮ͵ • ͜ͷઌ10೥ੜ͖࢒ΔͨΊʹ
5. !!!!CAUTION!!!! !!!!!!!!!!!! ຊࢿྉͷະདྷ༧ଌ͸๻ࣗ਎ͷצͰ͋Γ ੹೚ΛऔΕΔ΋ͷͰ͸͋Γ·ͤΜ !!!!!!!!!!!!
6. ୈҰ෦: Sprockets ͷ ࡴ͠ํ
7. ࠓ೔ͷจ຺ toshimaru_e ʮQiitaͷSprockesΛࡴͨ࣌͠ͷ࿩Λ͓ئ͍Ͱ͖·͔͢ʯ mizchi ʮ͸͍ʯ
8. SprocketsΛࡴͨ͠هࣄ • Qiita - app/assets/javascriptsҎԼͷJSΛશͯ commonjsͷrequireʹॻ͖׵͑Δ • Qiita - decafͰcoffeeͷίʔυΛES.next ʹॻ͖׵͑Δ ஫ҙ: 2೥͙Β͍લ
9. લఏ: ͳͥ Sprockets ͸ࢮ͵΂͖͔ • Ϟδϡʔϧղܾʹ͸ ES Modules ͱ͍͏ඪ४ ͕͋Δ • JSͰϑΝΠϧείʔϓΛ࣋ͯͣ ࢀর͕άϩʔόϧ౉͠ ʹͳΔ • ධՁॱͷ੍ޚ͕೉͍͠ • RailsଆʹӅṭ͞Εͯͯ node πʔϧνΣΠϯΛ࢖͍ʹ͍͘ • ஗͍ (ExecJS)
10. (2015೥౰࣌ͷ) Sprockets ͷࡴ͠ํ • browserify-rails ͷಋೖ, ޙʹ webpack • εΫϦϓτॻ͍ͯ sprockets/require Λ commonjs ʹ • άϩʔόϧม਺ͷࢀরΛ module.exports = ... ʹ୅ೖ • ࢀরղܾΛάϩʔόϧม਺͔Β require('...') ʹ
11. before // define window.App.View.render = function () {/* render */} // use App.View.render()
12. after: commonjs // define on render.js module.exports = () => {/* render */} // use const render = require('./render') render()
13. ౰࣌ͷ੍໿ • ES Modules Ͱ͸ͳ͘ commonjs ͳͷ͸ɺ coffee ͕΄ͱ ΜͲͩͬͨͨΊ • ࠓͳΒ ES Modules
14. େࣄͳ͜ͱ: ߟ͑ํͷస׵ • ෼ׂ୯ҐΛ ࣮ߦίʔυ ͔Β ؔ਺Ϟδϡʔϧ ΁ • Ϟδϡʔϧఆٛͱͦͷ࣮ߦΛڧ۠͘ผ͢Δ • େࣄͳͷ͸ɺ ࣮ߦ࣌ͷ෭࡞༻ͷநग़ ͱɺ༧ଌ͠΍͢͞
15. ʮ࣮ߦίʔυʯ͔Βʮؔ਺Ϟδϡʔϧʯ΁ // Bad document.title = 'foo' // Good // setTitle.js export default function setTitle(title) { document.title = title } // runner.js setTitle('foo')
16. ͍͍͍ͨ͜ͱ • ଞͷݴޠ/؀ڥͰ΋ʮධՁɺଈɺ࣮ߦɺ෭࡞༻์Γ౤͛ʯΈ͍ͨ ͳίʔυ͸͋·Γॻ͔ͳ͍͸ͣ • ౰ͨΓલͷ͜ͱΛ౰ͨΓલʹ ΍Γ·͠ΐ͏
17. ୈೋ෦: ͓લͷ Webpack ͸ࢮ͵
18. Webpack ͷ໾ׂ • ES Modules ͷόϯυϧ • ֦ுࢠ͝ͱͷ transform • ։ൃ࣌ͷ Hot Reload • ࢀরղܾͷ Alias • etc...
19. ໰୊ҙࣝ: ػೳ͕͋Γׂ͗ͯ͢Ε૭ • JSόϯυϥͷൣᙝΛӽ͍͑ͯͯ node.js Ͱ࠶ݱͰ͖ͳ͍ • ઃఆϑΝΠϧ͕Ͱ͔͍ & Α͘Θ͔ΒΜ • css-modules ಋೖ͕ࠇຐज़Ͱਏ͍ • ίϐϖͰಈ͍ͨޙɺಈ͔ͳ͘ͳͬͨͱ͖ͷௐ͕ࠪେม
20. Universal JavaScript • Universal: ECMAScript ͷ Spec Λຬͨͤ͹ɺͲΜͳ؀ ڥͰ΋ಈ͘JS • Isomorphic : ڱٛͷUniversalɻBrowser/Node͕ର৅ɻ => Webpack ͸ Universal ੑΛഁյ͢Δ(͠΍͍͢)͔ΒϞδ ϡϥϦςΟ͕௿Լ͢ΔΑͱ͍͏࿩
21. Babel ͸ Universal ͔ʁ • DOM Λ৮Βͣɺbabel-preset-es201* Λ࢖ͬͯΔ͏ͪ͸ Yes • ͨͩ͠ ES Modules ͷύεղܾ͸ commonjs + α • lib/index ͱ͔ node_modules ͱ͔ • stage0~3, jsx, flow ͸ඪ४֎
22. Native ES Modules ͷ଍Ի
23. Native ES Modules • Safari 10.1 • Chrome M60(Canary) ϑϥάͰ • Edge ϑϥάͰ
24. ES Moduls in Browser <script type="module"> import {addTextToBody} from './utils.js'; addTextToBody('Modules are pretty cool.'); </script> https://jakearchibald.com/2017/es-modules-in- browsers/
25. ES Modules ͕͋ͬͨΒ࢖͑Δ͔ʁ • ࢓༷తʹ͸YES • ͨͩ͠HTTP/2Ͱͳ͍ͱύϑΥʔϚϯε͕େ෯ʹྼԽ͢ΔՄೳੑ • ES Modules͸HTTP/2Ͱ෦෼ߋ৽ͷເΛݟΔ͔ʁ • Cache aware server push - kazuho
26. ES Modules: ࠓޙͷ༧૝ • དྷ೥ʹ͸࣮૷͕ग़ἧ͏ • ࠷ॳ͸ Fastly ͷΑ͏ͳ CDN Ͱղܾ͞ΕΔͷͰ͸ • কདྷతʹ͸ nginx/h2o ͷϞδϡʔϧԽ͞Εͯ࢖͑ΔΑ͏ʹͳ ͬͯΔ͸ͣ • ES Modules ͷ੩తղੳεςοϓ͸ඞཁ ϓϩμΫγϣϯͰ࢖͑Δͷ͸ɺ͓ͦΒ͘ 2~3೥ޙ
27. Webpack ͷ໰୊ͱࢮ͵ཧ༝: ·ͱΊ • ศརͳׂΕ૭ • Universal ੑΛഁյ͠ίʔυͷϞδϡϥϦςΟ͕௿Լ • ωΠςΟϒͷ ES Modules Ͱ૬ରతʹॏཁੑ͕௿Լ δϯΫεతʹ͸ɺDHH͕બΜͩϑϩϯτͷπʔϧ͸ࢮ͵
28. ଈࢮ͠ͳ͍ Webpack ͷ࢖͍ํ • ES Modules ΁ͷܨ͗ͱׂΓ੾ͬͯ࢖͏ • ಠࣗͳtransformΛՄೳͳݶΓ babelଆ΁ಀ͕͢ • css-modules => styled-jsx • resolve.alias => babel-plugin-module-resolver
29. ୈࡾ෦: ͜ͷઌ10೥ੜ ͖࢒ΔͨΊ
30. JavaScriptք Ϣʔβʔ਺: ΊͬͪΌଟ͍ ϢʔβʔͷόοΫΤϯυ: ଟ༷ JSͷฏۉ࿅౓: ௿͍ (ยखؒ໰୊)
31. ίϯηϯαεͱΔͷϚδͰແཧ
32. Easy > Simple Ͱ࠷ѱ
33. ϥΠϒϥϦઃܭऀͷؾ࣋ͪ • Easy ͰϢʔβʔΛὃͯ͠ɺSimple ΁ • npmքͰ͸ɺྲྀߦͬͨػೳ͸୯ػೳʹϒϨʔΫμ΢ϯ͞ΕΔ
34. Webpacker ͷ scaffold ͕Ϡόͦ͏ • ίϯηϯαεऔΕͳ͍؀ڥͰ, ୭΋͕ೲಘͰ͖ΔϘΠϥʔϓϨ ʔτΛߏங͢Δͷ͸ແཧ • ԼճΓΛࢧ͑Δͷʹ͸Αͦ͞͏͕ͩɺׂΕ૭…
35. ຊ࣭͚ͩݟ͍͍ͯͨ… • Agnostic ʹ Universal ͰϏδωεϩδοΫΛॻ͘ • Domain => UI State => View => Event Handler ...
36. ϑϨʔϜϫʔΫͷ໾ׂ • ͳΜ͔Ͱ͔͍JSONΛ࡞Δ • ͳΜ͔Ͱ͔͍JSONΛViewʹ഑Δ • ͳΜ͔Ͱ͔͍JSONΛ࡞Δ΍ͭʹΠϕϯτΛૹΔ
37. ͦ΋ͦ΋ແݶͷύϑΥʔϚϯε͕͋Ε͹… const mainloop = () => { requestAnimationFrame(mainloop) document.body.innerHTML = render(getState()) } mainloop()
38. UIϥΠϒϥϦ͸ࢮ͵ͷ͔ • Ϩϯμϥͷ຤୺͸ WebComponents ΁ • ঢ়ଶͷ؅ཧ૚͸࢒Δ
39. ϑϩϯτͷྑ͍ઃܭͱ͸ • x ίʔυ͕௕೥෗Βͳ͍ • ◦ ϞδϡʔϧΛ୅ँͰ͖Δ GUIͷਏ͞͸ɺઃܭ΍࢓༷͕ίʔυʹ࢒Γʹ͍͘ͱ͜Ζ ໨ࢦ͢΂͖͸ɺݎ࿚ͳઃܭΑΓɺࣜ೥ભٶͰ͸ʁͱ͍͏ఏҊ
40. ͓ΘΓ