現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2
ݱͷES201xͱະདྷͷΞʔΩςΫνϟ@mizchi / InsideFrontend 2
View Slide
ࣗݾհ• @mizchi• ॴଐ: ϑϦʔϥϯε• ઐ: Node.js / SPA৬ਓ
CAUTION!!!• ྺ࢙ͷͰɺѻͬͯΔൣғ͕͘ͳͬͨͷͰɺݴٴൣғ͕ҙਤతʹߜ͍ͬͯ·͢• ͋Β͔͡Ίྃ͝ঝ͍ͩ͘͞
ϑϩϯτΤϯυͷΈͳ͞Μ
ফͯ͠·͔͢ʁ
ຊൃදͷΰʔϧ• ΞʔΩςΫνϟͷมભΛཧ• มԽʹڧ͍ઃܭͷͨΊͷಎΛಘͯɺࣗͷίʔυʹඞཁͳͷɺΔ෦ɺΒͳ͍෦ͷར͖͕Ͱ͖ΔΑ͏ʹͳͬͯ΄͍͠
͍͖ͬͯ·͠ΐ͏
ࠓͷ͓1.ϑϨʔϜϫʔΫৼΓฦΓ1.աڈ2.ݱࡏ3.ະདྷ2.ݱࡏ͔ΒະདྷࢸΔಓ
ϑϨʔϜϫʔΫৼΓฦΓ
ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌• खͰΛॻ͖͍͑ͯͨ࣌• ෆ҆ఆͳ DOM API Λ jQuery ͕ٵऩ• IE6͕ࢮͶͣظԽ
ςϯϓϨʔςΟϯάͷ࣌• HTMLͷॳظੜ͕ΫϥΠΞϯτଆ• ೋॏςϯϓϨʔτ | SEOEx. mustache, handlebars, underscore.template
σʔλόΠϯσΟϯάͷ࣌• จࣈྻΛల։͢Δͷ͔ΒɺߏΛग़ྗ͢Δ ͷ• ޮతͳ෦ॻ͖͑ | Ϧετల։• MVVMͷ༌ೖex. backbone.stickit / knockout / angularjs / vue
ݱ
Client Side MVC ͷऴᖼ• Rails ༝དྷͷ Backbone ͷ MVC Ϟσϧഁ• ΫϥαόͰඞཁͳநผ 2• ղ & ࠶ߏங• ୯ํσʔλϑϩʔ2 MVC ͱ MVC2 ʹ͍ͭͯվΊͯߟ͑ͯΈΔ http://www.s-arcana.co.jp/tech/2011/07/mvc-mvc2.html
Flux/Obvervable ͷ࣌• Event ͱ State ͱ View Λશʹ• EventSource ͱ subscribe ͷܗଶ• FRPͷ֓೦Λ༌ೖex: Rx / Elm / Redux
ߟ͑ํ• Component ͷଆʹӅΕͨ State ͷଘࡏجຊతʹѱ• Event ͷετϦʔϜ͔Β State ͷεφοϓγϣοτΛੜ
ؓ: 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)})11 Redux ֓೦తʹ Rx ͷαϒηοτͰ͋Δͱ͍͏ - mizchi's bloghttp://mizchi.hatenablog.com/entry/2017/09/30/013420
ϑϨʔϜϫʔΫͷτϨϯυ• ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ…• ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: ԾDOMʹΑΔόοϑΝϦϯά)• ϒϥβͷػೳΛΑΓݡ࣮͘͢Δ(ྫ: ࣗલͷϨϯμϥʔ)• ߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
Webͷ։ൃݴޠͷมԽ
։ൃݴޠ• JavaScript• TC39ͰຖਐԽ / ϓϦίϯύΠϥͰ interop• ଞݴޠ͔ΒͷτϥϯεύΠϥܥ• ϊϋͷӽڥ• WebAssemblyܥ• ࢼߦࡨޡஈ֊
AltJS ͕Ռׂͨͨ͠• ES2015 ͷจ๏Ճ/ػೳఏҊ• ClassɺArrow Function, etc...• ༷͕͍͔ͭͳ͍ͷϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
ۙΓ্͕Δݴޠ…• ੩తͳܕڥ͕͋Δ͜ͱ• ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ• ܕਪ͕͋Δ͜ͱ• ͱʹ͔͘ܕɺܕɺܕ
ϑϩϯτΤϯυͷ੩తܕ͚ͷधཁ• ͱʹ͔͘ςετ͕ॻ͖ͮΒ͍ͷͰ੩తݕࠪͰࡁ·͍ͤͨ• Observable Immutable Λલఏʹ͢Δͱ੩తݕ͕ࠪͳ͍ͱίʔυ͕ॻ͚ͳ͍
ͳͥJSʹܕ͕ඞཁͳͷ͔• ʮςετ͕͍͠GUIڥͰͷʯ৺ཧత҆શੑͷͨΊ• ҠΓมΘΓ͕͍ΤίγεςϜͰɺ੩తղੳͰίʔυΛࣺͯΔͨΊ※ ͜ΕҎ্୯ͳΔݴޠؒͷରཱἤΓʹͳΔͷͰΊ·͢…
ະདྷͷ
WebComponents
WebComponents ͷޙͷੈք• View ͷ Custom Elements • ঢ়ଶཧͱͯ͠ͷϑϨʔϜϫʔΫ(ͨͿΜ)Δ• ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫग़ͯ͘Δͣ• SkateJSͱ͔ʁ
WebComponents Ͱࢮ͵ͷ• ʙσβΠϯͷʙ࣮• ϚςϦΞϧσβΠϯ• ϑϥοτσβΠϯ• Bootstrap
Έͳ͞Μߴ·͖ͬͯ·͔ͨ͠ʁ
Ұམͪண͍ͯߟ͑Δ
ະདྷͷಓΛ࡞Δ
ݱ• ͦ͏͍ͬͨͬͯݱͷฅίʔυΛΑ• Կ͔ΒखΛ͚Δʁ
ݹ͍ίʔυΛखջ͚Δ• lint Λॻ͘• ܕΛॻ͘• ͋Δ͍ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘• άϩʔόϧม͠ => ES Modules• Ϗϧυ࣌ʹґଘղੳ• ςετΛॻ͘
ྑ͍ίʔυͱѱ͍ίʔυ• ྑ͍ίʔυ• ੩తݕࠪͰ͖Δ• ΠϯλʔϑΣʔε͕໌Β͔• ؆୯ʹࣺͯΒΕΔ• ѱ͍ίʔυ• Ϟδϡʔϧڥք͕໌Β͔Ͱͳ͍
ྫ: Qiita Ͱ͕ࣗͬͨ͜ͱ• Rails Sprockets => Browserify• άϩʔόϧม͠Λ ESM ʹ• Backbone.View => React• View ͱ State Λ(Flux)
ྫ: freeeࣾͰ͕ࣗͬͯΔ͜ͱ• Rails Sprockets => Webpacker• άϩʔόϧม͠ΛESMʹ• Backbone.Router Λղମ• ݹ͍ίʔυʹ flow ͷܕΛ͚ͯճΔ
ͱΓ͋͑ͣͬͱ͚• prettier• eslint: no-unused-vars• eslint: prefer-const
कഁ• OSSΤίγεςϜʹै͏• Webඪ४ʹै͏• ϨΠϠʔΛղ͢Δ
ϑϩϯτΤϯυΤϯδχΞͱԿ͔
ͦΕͧΕͷΰʔϧͷઃఆ• εϐʔυΛಥ͖٧ΊΔUXͳͷ͔• ܧଓͯ͠ՁΛಧ͚ΔͨΊͷίʔυ࣭ͳͷ͔
ϑϩϯτΤϯυΞʔΩςΫνϟ: ·ͱΊ• Webಛ༗ͷΞʔΩςΫνϟ͔ΒɺීวతͳGUIઃܭͷ߹ྲྀ• ࠓͷϑϩϯτΤϯυ OOP, FP, GUIઃܭͷݟ͕ͬͨࣽ͝ͷɺ༷ʑͳࢥΛͿ͚ͭ߹͏ઓ• ࣗʹඞཁͳநΛબͿ
͓ΘΓ