Real world es201x and future

Transcript

1. 1.

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

2. 2.

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

   SPA৬ਓ
3. 3.

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

4. 4.

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

5. 5.

   ফ໣ͯ͠·͔͢ʁ

6. 6.

   None
7. 7.

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

8. 8.

   ΍͍͖ͬͯ·͠ΐ͏

9. 9.

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

10. 10.

    ϑϨʔϜϫʔΫৼΓฦΓ

11. 11.

    None
12. 12.

    None
13. 13.

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

    ͕ٵऩ • IE6͕ࢮͶͣ௕ظԽ
14. 14.

    None
15. 15.

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

    underscore.template
16. 16.

    None
17. 17.

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

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

    ݱ୅

19. 19.

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

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

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

    EventSource ͱ subscribe ͷܗଶ • FRPͷ֓೦Λ༌ೖ ex: Rx / Elm / Redux
21. 21.

    None
22. 22.

    None
23. 23.

    ߟ͑ํ • Component ͷ಺ଆʹӅΕͨ State ͷଘࡏ͸جຊతʹѱ • Event ͷετϦʔϜ͔Β State

    ͷεφοϓγϣοτΛੜ੒
24. 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. 25.

    ϑϨʔϜϫʔΫͷτϨϯυ • ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ… • ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: Ծ૝DOM ʹΑΔόοϑΝϦϯά) • ϒϥ΢βͷػೳΛΑΓݡ࣮͘૷͢Δ(ྫ: ࣗલͷϨϯμϥʔ)

    • ෋߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
26. 26.

    None
27. 27.

    Webͷ։ൃݴޠͷมԽ

28. 28.

    None
29. 29.

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

    • ϊ΢ϋ΢ͷӽڥ • WebAssemblyܥ • ࢼߦࡨޡஈ֊
30. 30.

    AltJS ͕Ռͨͨ͠໾ׂ • ES2015 ΁ͷจ๏௥Ճ/ػೳఏҊ • ClassɺArrow Function, etc... •

    ࢓༷͕௥͍͔ͭͳ͍΋ͷ͸ϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
31. 31.

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

32. 32.

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

33. 33.

    None
34. 34.

    None
35. 35.

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

36. 36.

    ະདྷͷ࿩

37. 37.

    WebComponents

38. 38.

    None
39. 39.

    None
40. 40.

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

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

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

42. 42.

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

43. 43.

    Ұ౓མͪண͍ͯߟ͑Δ

44. 44.

    None
45. 45.

    ະདྷ΁ͷಓΛ࡞Δ

46. 46.

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

47. 47.

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

    => ES Modules • Ϗϧυ࣌ʹґଘղੳ • ςετΛॻ͘
48. 48.

    ྑ͍ίʔυͱѱ͍ίʔυ • ྑ͍ίʔυ • ੩తݕࠪͰ͖Δ • ΠϯλʔϑΣʔε͕໌Β͔ • ؆୯ʹࣺͯΒΕΔ •

    ѱ͍ίʔυ • Ϟδϡʔϧڥք͕໌Β͔Ͱ͸ͳ͍
49. 49.

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

    ESM ʹ • Backbone.View => React • View૚ ͱ State૚ Λ෼཭(Flux)
50. 50.

    ྫ: freeeࣾͰࣗ෼͕΍ͬͯΔ͜ͱ • Rails Sprockets => Webpacker • άϩʔόϧม਺౉͠ΛESMʹ •

    Backbone.Router Λղମ • ݹ͍ίʔυʹ flow ͷܕΛ෇͚ͯճΔ
51. 51.

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

52. 52.

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

53. 53.

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

54. 54.

    None
55. 55.

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

56. 56.

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

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

    ͓ΘΓ