Real world es201x and future

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

1. ݱ৔ͷES201xͱະདྷͷΞʔΩςΫνϟ @mizchi / InsideFrontend 2
2. ࣗݾ঺հ • @mizchi • ॴଐ: ϑϦʔϥϯε • ઐ໳: Node.js / SPA৬ਓ
3. CAUTION!!! • ྺ࢙ͷ࿩ͰɺѻͬͯΔൣғ͕޿͘ͳͬͨͷͰɺݴٴൣғ͕ҙਤ తʹߜ͍ͬͯ·͢ • ͋Β͔͡Ίྃ͝ঝ͍ͩ͘͞
4. ϑϩϯτΤϯυͷΈͳ͞Μ
5. ফ໣ͯ͠·͔͢ʁ
7. ຊൃදͷΰʔϧ • ΞʔΩςΫνϟͷมભΛ੔ཧ • มԽʹڧ͍ઃܭͷͨΊͷಎ࡯Λಘͯɺࣗ෼ͷίʔυʹඞཁͳ΋ ͷɺ෗Δ෦෼ɺ෗Βͳ͍෦෼ͷ໨ར͖͕Ͱ͖ΔΑ͏ʹͳͬͯ΄ ͍͠
8. ΍͍͖ͬͯ·͠ΐ͏
9. ࠓ೔ͷ͓୊ 1.ϑϨʔϜϫʔΫৼΓฦΓ 1.աڈ 2.ݱࡏ 3.ະདྷ 2.ݱࡏ͔Βະདྷ΁ࢸΔಓ
10. ϑϨʔϜϫʔΫৼΓฦΓ
13. ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌୅ • खͰ໦Λॻ͖׵͍͑ͯͨ࣌୅ • ෆ҆ఆͳ DOM API Λ jQuery ͕ٵऩ • IE6͕ࢮͶͣ௕ظԽ
15. ςϯϓϨʔςΟϯάͷ࣌୅ • HTMLͷॳظੜ੒͕ΫϥΠΞϯτଆ΁ • ೋॏςϯϓϨʔτ໰୊ | SEO໰୊ Ex. mustache, handlebars, underscore.template
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
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 ʹΑΔόοϑΝϦϯά) • ϒϥ΢βͷػೳΛΑΓݡ࣮͘૷͢Δ(ྫ: ࣗલͷϨϯμϥʔ) • ෋߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
27. Webͷ։ൃݴޠͷมԽ
29. ։ൃݴޠ • JavaScript • TC39Ͱຖ೥ਐԽ / ϓϦίϯύΠϥͰ interop • ଞݴޠ͔ΒͷτϥϯεύΠϥܥ • ϊ΢ϋ΢ͷӽڥ • WebAssemblyܥ • ࢼߦࡨޡஈ֊
30. AltJS ͕Ռͨͨ͠໾ׂ • ES2015 ΁ͷจ๏௥Ճ/ػೳఏҊ • ClassɺArrow Function, etc... • ࢓༷͕௥͍͔ͭͳ͍΋ͷ͸ϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
31. ۙ೥੝Γ্͕Δݴޠ͸… • ੩తͳܕ؀ڥ͕͋Δ͜ͱ • ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ • ܕਪ࿦͕͋Δ͜ͱ • ͱʹ͔͘ܕɺܕɺܕ
32. ϑϩϯτΤϯυͷ੩తܕ෇͚ͷधཁ • ͱʹ͔͘ςετ͕ॻ͖ͮΒ͍ͷͰ੩తݕࠪͰࡁ·͍ͤͨ • Observable ΍ Immutable Λલఏʹ͢Δͱ੩తݕ͕ࠪͳ͍ ͱίʔυ͕ॻ͚ͳ͍
35. ͳͥJSʹܕ͕ඞཁͳͷ͔ • ʮςετ͕೉͍͠GUI؀ڥͰͷʯ৺ཧత҆શੑͷͨΊ • ҠΓมΘΓ͕଎͍ΤίγεςϜͰɺ੩తղੳͰίʔυΛࣺͯΔ ͨΊ ※ ͜ΕҎ্͸୯ͳΔݴޠؒͷରཱἤΓʹͳΔͷͰ΍Ί·͢…
36. ະདྷͷ࿩
37. WebComponents
40. WebComponents ͷޙͷੈք • View ͷ຤୺͸ Custom Elements ΁ • ঢ়ଶ؅ཧ૚ͱͯ͠ͷϑϨʔϜϫʔΫ͸(ͨͿΜ)࢒Δ • ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫ΋ग़ͯ͘Δ͸ͣ • SkateJSͱ͔ʁ
41. WebComponents Ͱࢮ͵΋ͷ • ʙσβΠϯͷʙ࣮૷ • ϚςϦΞϧσβΠϯ • ϑϥοτσβΠϯ • Bootstrap
42. Έͳ͞Μߴ·͖ͬͯ·͔ͨ͠ʁ
43. Ұ౓མͪண͍ͯߟ͑Δ
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. ϑϩϯτΤϯυΤϯδχΞͱ͸Կ͔
55. ͦΕͧΕͷΰʔϧͷઃఆ • εϐʔυΛಥ͖٧ΊΔUXͳͷ͔ • ܧଓͯ͠Ձ஋Λಧ͚ΔͨΊͷίʔυ඼࣭ͳͷ͔
56. ϑϩϯτΤϯυΞʔΩςΫνϟ: ·ͱΊ • Webಛ༗ͷΞʔΩςΫνϟ͔ΒɺීวతͳGUIઃܭͷ߹ྲྀ • ࠓͷϑϩϯτΤϯυ͸ OOP, FP, GUIઃܭ࿦ͷ஌ݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥ૝ΛͿ͚ͭ߹͏ઓ৔ • ࣗ෼ʹඞཁͳந৅ΛબͿ
57. ͓ΘΓ