Real world es201x and future

Real world es201x and future

現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

February 11, 2018
Tweet

Transcript

  1. ݱ৔ͷES201xͱະདྷͷΞʔΩςΫνϟ @mizchi / InsideFrontend 2

  2. ࣗݾ঺հ • @mizchi • ॴଐ: ϑϦʔϥϯε • ઐ໳: Node.js /

    SPA৬ਓ
  3. CAUTION!!! • ྺ࢙ͷ࿩ͰɺѻͬͯΔൣғ͕޿͘ͳͬͨͷͰɺݴٴൣғ͕ҙਤ తʹߜ͍ͬͯ·͢ • ͋Β͔͡Ίྃ͝ঝ͍ͩ͘͞

  4. ϑϩϯτΤϯυͷΈͳ͞Μ

  5. ফ໣ͯ͠·͔͢ʁ

  6. None
  7. ຊൃදͷΰʔϧ • ΞʔΩςΫνϟͷมભΛ੔ཧ • มԽʹڧ͍ઃܭͷͨΊͷಎ࡯Λಘͯɺࣗ෼ͷίʔυʹඞཁͳ΋ ͷɺ෗Δ෦෼ɺ෗Βͳ͍෦෼ͷ໨ར͖͕Ͱ͖ΔΑ͏ʹͳͬͯ΄ ͍͠

  8. ΍͍͖ͬͯ·͠ΐ͏

  9. ࠓ೔ͷ͓୊ 1.ϑϨʔϜϫʔΫৼΓฦΓ 1.աڈ 2.ݱࡏ 3.ະདྷ 2.ݱࡏ͔Βະདྷ΁ࢸΔಓ

  10. ϑϨʔϜϫʔΫৼΓฦΓ

  11. None
  12. None
  13. ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌୅ • खͰ໦Λॻ͖׵͍͑ͯͨ࣌୅ • ෆ҆ఆͳ DOM API Λ jQuery

    ͕ٵऩ • IE6͕ࢮͶͣ௕ظԽ
  14. None
  15. ςϯϓϨʔςΟϯάͷ࣌୅ • HTMLͷॳظੜ੒͕ΫϥΠΞϯτଆ΁ • ೋॏςϯϓϨʔτ໰୊ | SEO໰୊ Ex. mustache, handlebars,

    underscore.template
  16. None
  17. σʔλόΠϯσΟϯάͷ࣌୅ • จࣈྻΛల։͢Δ΋ͷ͔Βɺ໦ߏ଄Λग़ྗ͢Δ ΋ͷ΁ • ޮ཰తͳ෦෼ॻ͖׵͑ | Ϧετల։ • MVVMͷ༌ೖ

    ex. backbone.stickit / knockout / angularjs / vue
  18. ݱ୅

  19. Client Side MVC ͷऴᖼ • Rails ༝དྷͷ Backbone ͷ MVC

    Ϟσϧ͸ഁ୼ • ΫϥαόͰඞཁͳந৅͸ผ෺ 2 • ෼ղ & ࠶ߏங • ୯ํ޲σʔλϑϩʔ΁ 2 MVC ͱ MVC2 ʹ͍ͭͯվΊͯߟ͑ͯΈΔ http://www.s-arcana.co.jp/tech/2011/07/mvc-mvc2.html
  20. Flux/Obvervable ͷ࣌୅ • Event ͱ State ͱ View Λ׬શʹ෼཭ •

    EventSource ͱ subscribe ͷܗଶ • FRPͷ֓೦Λ༌ೖ ex: Rx / Elm / Redux
  21. None
  22. None
  23. ߟ͑ํ • Component ͷ಺ଆʹӅΕͨ State ͷଘࡏ͸جຊతʹѱ • Event ͷετϦʔϜ͔Β State

    ͷεφοϓγϣοτΛੜ੒
  24. ؓ࿩: Redux ͸ Rx ͷ֓೦తͳαϒηοτ const actions$ = Rx.Observable.from([add(1), add(2),

    add(3)]) const store = actions$.scan(rootReducer, undefined) store.subscribe(x => { console.log('subscribe', x) }) 1 1 Redux ͸ ֓೦తʹ Rx ͷαϒηοτͰ͋Δͱ͍͏࿩ - mizchi's blog http://mizchi.hatenablog.com/entry/2017/09/30/013420
  25. ϑϨʔϜϫʔΫͷτϨϯυ • ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ… • ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: Ծ૝DOM ʹΑΔόοϑΝϦϯά) • ϒϥ΢βͷػೳΛΑΓݡ࣮͘૷͢Δ(ྫ: ࣗલͷϨϯμϥʔ)

    • ෋߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
  26. None
  27. Webͷ։ൃݴޠͷมԽ

  28. None
  29. ։ൃݴޠ • JavaScript • TC39Ͱຖ೥ਐԽ / ϓϦίϯύΠϥͰ interop • ଞݴޠ͔ΒͷτϥϯεύΠϥܥ

    • ϊ΢ϋ΢ͷӽڥ • WebAssemblyܥ • ࢼߦࡨޡஈ֊
  30. AltJS ͕Ռͨͨ͠໾ׂ • ES2015 ΁ͷจ๏௥Ճ/ػೳఏҊ • ClassɺArrow Function, etc... •

    ࢓༷͕௥͍͔ͭͳ͍΋ͷ͸ϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
  31. ۙ೥੝Γ্͕Δݴޠ͸… • ੩తͳܕ؀ڥ͕͋Δ͜ͱ • ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ • ܕਪ࿦͕͋Δ͜ͱ • ͱʹ͔͘ܕɺܕɺܕ

  32. ϑϩϯτΤϯυͷ੩తܕ෇͚ͷधཁ • ͱʹ͔͘ςετ͕ॻ͖ͮΒ͍ͷͰ੩తݕࠪͰࡁ·͍ͤͨ • Observable ΍ Immutable Λલఏʹ͢Δͱ੩తݕ͕ࠪͳ͍ ͱίʔυ͕ॻ͚ͳ͍

  33. None
  34. None
  35. ͳͥJSʹܕ͕ඞཁͳͷ͔ • ʮςετ͕೉͍͠GUI؀ڥͰͷʯ৺ཧత҆શੑͷͨΊ • ҠΓมΘΓ͕଎͍ΤίγεςϜͰɺ੩తղੳͰίʔυΛࣺͯΔ ͨΊ ※ ͜ΕҎ্͸୯ͳΔݴޠؒͷରཱἤΓʹͳΔͷͰ΍Ί·͢…

  36. ະདྷͷ࿩

  37. WebComponents

  38. None
  39. None
  40. WebComponents ͷޙͷੈք • View ͷ຤୺͸ Custom Elements ΁ • ঢ়ଶ؅ཧ૚ͱͯ͠ͷϑϨʔϜϫʔΫ͸(ͨͿΜ)࢒Δ

    • ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫ΋ग़ͯ͘Δ͸ͣ • SkateJSͱ͔ʁ
  41. WebComponents Ͱࢮ͵΋ͷ • ʙσβΠϯͷʙ࣮૷ • ϚςϦΞϧσβΠϯ • ϑϥοτσβΠϯ • Bootstrap

  42. Έͳ͞Μߴ·͖ͬͯ·͔ͨ͠ʁ

  43. Ұ౓མͪண͍ͯߟ͑Δ

  44. None
  45. ະདྷ΁ͷಓΛ࡞Δ

  46. ݱ৔ • ͦ͏͸͍ͬͨͬͯݱ৔ͷฅίʔυΛΑ • Կ͔ΒखΛ෇͚Δʁ

  47. ݹ͍ίʔυΛखջ͚Δ • lint Λॻ͘ • ܕΛॻ͘ • ͋Δ͍͸ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘ • άϩʔόϧม਺౉͠

    => ES Modules • Ϗϧυ࣌ʹґଘղੳ • ςετΛॻ͘
  48. ྑ͍ίʔυͱѱ͍ίʔυ • ྑ͍ίʔυ • ੩తݕࠪͰ͖Δ • ΠϯλʔϑΣʔε͕໌Β͔ • ؆୯ʹࣺͯΒΕΔ •

    ѱ͍ίʔυ • Ϟδϡʔϧڥք͕໌Β͔Ͱ͸ͳ͍
  49. ྫ: Qiita Ͱࣗ෼͕΍ͬͨ͜ͱ • Rails Sprockets => Browserify • άϩʔόϧม਺౉͠Λ

    ESM ʹ • Backbone.View => React • View૚ ͱ State૚ Λ෼཭(Flux)
  50. ྫ: freeeࣾͰࣗ෼͕΍ͬͯΔ͜ͱ • Rails Sprockets => Webpacker • άϩʔόϧม਺౉͠ΛESMʹ •

    Backbone.Router Λղମ • ݹ͍ίʔυʹ flow ͷܕΛ෇͚ͯճΔ
  51. ͱΓ͋͑ͣ΍ͬͱ͚ • prettier • eslint: no-unused-vars • eslint: prefer-const

  52. कഁ཭ • OSSΤίγεςϜʹै͏ • Webඪ४ʹै͏ • ϨΠϠʔΛ෼ղ͢Δ

  53. ϑϩϯτΤϯυΤϯδχΞͱ͸Կ͔

  54. None
  55. ͦΕͧΕͷΰʔϧͷઃఆ • εϐʔυΛಥ͖٧ΊΔUXͳͷ͔ • ܧଓͯ͠Ձ஋Λಧ͚ΔͨΊͷίʔυ඼࣭ͳͷ͔

  56. ϑϩϯτΤϯυΞʔΩςΫνϟ: ·ͱΊ • Webಛ༗ͷΞʔΩςΫνϟ͔ΒɺීวతͳGUIઃܭͷ߹ྲྀ • ࠓͷϑϩϯτΤϯυ͸ OOP, FP, GUIઃܭ࿦ͷ஌ݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥ૝ΛͿ͚ͭ߹͏ઓ৔

    • ࣗ෼ʹඞཁͳந৅ΛબͿ
  57. ͓ΘΓ