Real world es201x and future

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. ফ໣ͯ͠·͔͢ʁ
   

   View Slide

6. View Slide

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

   View Slide

8. ΍͍͖ͬͯ·͠ΐ͏
   

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

12. View Slide

13. ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌୅
    • खͰ໦Λॻ͖׵͍͑ͯͨ࣌୅
    • ෆ҆ఆͳ DOM API Λ jQuery ͕ٵऩ
    • IE6͕ࢮͶͣ௕ظԽ
    

    View Slide

14. View Slide

15. ςϯϓϨʔςΟϯάͷ࣌୅
    • HTMLͷॳظੜ੒͕ΫϥΠΞϯτଆ΁
    • ೋॏςϯϓϨʔτ໰୊ | SEO໰୊
    Ex. mustache, handlebars, underscore.template
    

    View Slide

16. View Slide

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

    View Slide

18. ݱ୅
    

    View Slide

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

    View Slide

20. Flux/Obvervable ͷ࣌୅
    • Event ͱ State ͱ View Λ׬શʹ෼཭
    • EventSource ͱ subscribe ͷܗଶ
    • FRPͷ֓೦Λ༌ೖ
    ex: Rx / Elm / Redux
    

    View Slide

21. View Slide

22. View Slide

23. ߟ͑ํ
    • Component ͷ಺ଆʹӅΕͨ State ͷଘࡏ͸جຊతʹѱ
    • Event ͷετϦʔϜ͔Β State ͷεφοϓγϣοτΛੜ੒
    

    View Slide

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
    

    View Slide

25. ϑϨʔϜϫʔΫͷτϨϯυ
    • ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ…
    • ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: Ծ૝DOM
    ʹΑΔόοϑΝϦϯά)
    • ϒϥ΢βͷػೳΛΑΓݡ࣮͘૷͢Δ(ྫ: ࣗલͷϨϯμϥʔ)
    • ෋߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
    

    View Slide

26. View Slide

27. Webͷ։ൃݴޠͷมԽ
    

    View Slide

28. View Slide

29. ։ൃݴޠ
    • JavaScript
    • TC39Ͱຖ೥ਐԽ / ϓϦίϯύΠϥͰ interop
    • ଞݴޠ͔ΒͷτϥϯεύΠϥܥ
    • ϊ΢ϋ΢ͷӽڥ
    • WebAssemblyܥ
    • ࢼߦࡨޡஈ֊
    

    View Slide

30. AltJS ͕Ռͨͨ͠໾ׂ
    • ES2015 ΁ͷจ๏௥Ճ/ػೳఏҊ
    • ClassɺArrow Function, etc...
    • ࢓༷͕௥͍͔ͭͳ͍΋ͷ͸ϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
    

    View Slide

31. ۙ೥੝Γ্͕Δݴޠ͸…
    • ੩తͳܕ؀ڥ͕͋Δ͜ͱ
    • ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ
    • ܕਪ࿦͕͋Δ͜ͱ
    • ͱʹ͔͘ܕɺܕɺܕ
    

    View Slide

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

    View Slide

33. View Slide

34. View Slide

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

    View Slide

36. ະདྷͷ࿩
    

    View Slide

37. WebComponents
    

    View Slide

38. View Slide

39. View Slide

40. WebComponents ͷޙͷੈք
    • View ͷ຤୺͸ Custom Elements ΁
    • ঢ়ଶ؅ཧ૚ͱͯ͠ͷϑϨʔϜϫʔΫ͸(ͨͿΜ)࢒Δ
    • ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫ΋ग़ͯ͘Δ͸ͣ
    • SkateJSͱ͔ʁ
    

    View Slide

41. WebComponents Ͱࢮ͵΋ͷ
    • ʙσβΠϯͷʙ࣮૷
    • ϚςϦΞϧσβΠϯ
    • ϑϥοτσβΠϯ
    • Bootstrap
    

    View Slide

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

    View Slide

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

    View Slide

44. View Slide

45. ະདྷ΁ͷಓΛ࡞Δ
    

    View Slide

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

    View Slide

47. ݹ͍ίʔυΛखջ͚Δ
    • lint Λॻ͘
    • ܕΛॻ͘
    • ͋Δ͍͸ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘
    • άϩʔόϧม਺౉͠ => ES Modules
    • Ϗϧυ࣌ʹґଘղੳ
    • ςετΛॻ͘
    

    View Slide

48. ྑ͍ίʔυͱѱ͍ίʔυ
    • ྑ͍ίʔυ
    • ੩తݕࠪͰ͖Δ
    • ΠϯλʔϑΣʔε͕໌Β͔
    • ؆୯ʹࣺͯΒΕΔ
    • ѱ͍ίʔυ
    • Ϟδϡʔϧڥք͕໌Β͔Ͱ͸ͳ͍
    

    View Slide

49. ྫ: Qiita Ͱࣗ෼͕΍ͬͨ͜ͱ
    • Rails Sprockets => Browserify
    • άϩʔόϧม਺౉͠Λ ESM ʹ
    • Backbone.View => React
    • View૚ ͱ State૚ Λ෼཭(Flux)
    

    View Slide

50. ྫ: freeeࣾͰࣗ෼͕΍ͬͯΔ͜ͱ
    • Rails Sprockets => Webpacker
    • άϩʔόϧม਺౉͠ΛESMʹ
    • Backbone.Router Λղମ
    • ݹ͍ίʔυʹ flow ͷܕΛ෇͚ͯճΔ
    

    View Slide

51. ͱΓ͋͑ͣ΍ͬͱ͚
    • prettier
    • eslint: no-unused-vars
    • eslint: prefer-const
    

    View Slide

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

    View Slide

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

    View Slide

54. View Slide

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

    View Slide

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

    View Slide

57. ͓ΘΓ
    

    View Slide