Real world es201x and future

Real world es201x and future

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

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

February 11, 2018
Tweet

Transcript

  1. 6.
  2. 11.
  3. 12.
  4. 14.
  5. 16.
  6. 18.
  7. 19.

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

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

    Flux/Obvervable ͷ࣌୅ • Event ͱ State ͱ View Λ׬શʹ෼཭ •

    EventSource ͱ subscribe ͷܗଶ • FRPͷ֓೦Λ༌ೖ ex: Rx / Elm / Redux
  9. 21.
  10. 22.
  11. 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
  12. 26.
  13. 28.
  14. 30.
  15. 33.
  16. 34.
  17. 38.
  18. 39.
  19. 40.

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

    • ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫ΋ग़ͯ͘Δ͸ͣ • SkateJSͱ͔ʁ
  20. 44.
  21. 49.

    ྫ: Qiita Ͱࣗ෼͕΍ͬͨ͜ͱ • Rails Sprockets => Browserify • άϩʔόϧม਺౉͠Λ

    ESM ʹ • Backbone.View => React • View૚ ͱ State૚ Λ෼཭(Flux)
  22. 50.
  23. 54.
  24. 57.