Universal JavaScript

Universal JavaScript

Roppongi.rb #3 Rails x Frontend-Tech

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

May 31, 2017
Tweet

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. ͓ΘΓ