大規模開発の中でbackbone.js、 marionette.jsを使う利点

大規模開発の中でbackbone.js、
marionette.jsを使う利点

Transcript

1. 大規模開ൃの中でbackbone.js、 marionette.jsを使う利点 FullSpeed　　 鈴木孝之 2017/03/08
2. "KFOEB ձࣾɾࣗݾ঺հ
   CBDLCPOFKTͷ֓ཁ
   େن໛։ൃͰͷCBDLCPOFKTͷϝϦοτɾಛ௃
   ࣄྫ
3. 0.ձࣾɾࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ 1990೥ɺਆಸ઒ݝੜ·Εɻ ओʹۀ຿γεςϜͷ։ൃΛܦݧޙɺ2015೥ʹϑϧεϐʔυʹೖࣾɻ ϑϧεϐʔυͰ͸ɺ޿ࠂ഑৴αʔϏεʮAdMatrixDSPʯͷ ։ൃΛ୲౰͠ɺ؅ཧը໘ͷϑϩϯταΠυͱ αʔόαΠυͷ։ൃʹैࣄɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϥϯχϯάɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,JavaScript,backbone.js,Angular.js,Java ʙࣗݾ঺հʙ
4. 0.ձࣾɾࣗݾ঺հ ڌ఺Ұཡ ैۀһ৘ใ DSPɺಈըΞυωοτϫʔΫɺΞϑΟϦΤΠτΛ͸͡Ίͱ͢Δ ΞυςΫϊϩδʔࣄۀɺSEOίϯαϧςΟϯάɾӡ༻ܕ޿ࠂΛ ओ࣠ͱ͢ΔΠϯλʔωοτϚʔέςΟϯάࣄۀΛల։͢Δ ΞυςΫϊϩδʔˍϚʔέςΟϯάΧϯύχʔɻ ʙձࣾ঺հʙ ࣗࣾαʔϏε
5. 0.ձࣾɾࣗݾ঺հ ʙձࣾ঺հʙ ɾ޿ࠂࣄۀΛத৺ʹల։ ɾಠࣗΞυςΫϊϩδʔɾϓϥοτ ϑΥʔϜΛ։ൃ͠ɺϚʔέςΟϯά ࣄۀͱ߹ΘͤͯҰؾ௨؏ల։ ɾ஝ੵͨ͠σʔλɾϊ΢ϋ΢Λ׆༻ ͠ɺߴਫ਼౓ͳϚʔέςΟϯά׆ಈࢧ ԉΛ࣮ݱ
6. 0.ձࣾɾࣗݾ঺հ ʙDSPͱ͸ʙ AD SSP DSP1 DSP3 DSP2 ϝσΟΞ RTB CPMΦʔΫγϣϯ DSP1 80ԁ DSP2 110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSP΁ೖࡳϦΫΤετ ᶅDSP͕৚݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇ޿ࠂ഑৴
7. 0.ձࣾɾࣗݾ঺հ ʙAdMatrixDSPͰߦ͍ͬͯΔࣄʙ AD SSP Admatrix DSP ϝσΟΞ CPMΦʔΫγϣϯ DSP1 80ԁ DSP2 110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSP΁ೖࡳϦΫΤετ ᶅDSP͕৚݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇ޿ࠂ഑৴ 䡧؅ཧը໘Ͱओʹߦ͏ૢ࡞ ɾେྔͷ޿ࠂϨϙʔτͷ֬ೝ ɾ޿ࠂͷ࡞੒ɾฤू ɾ഑৴ϢʔβͷλʔήςΟϯά ͳͲ RTB
8. 0.ձࣾɾࣗݾ঺հ ʙAdMatrixDSPͰߦ͍ͬͯΔࣄʙ
9. 1.backbone.jsͷ֓ཁ ɾ2010೥6݄ʹϦϦʔε͞ΕΔɻ ɾϑϨʔϜϫʔΫͷαΠζ͕খ͍͞ɻ AngularJs: 36KɺBackbone.js: 6.4Kɻ ɾBackbone.js͸ͦͷ໊ͷ௨Γ࿮૊Έ͔͠ͳ͘ɺ ϕετϓϥΫςΟεͱݺ΂Δ΋ͷ͕ଘࡏ͠ͳ͍ɻ ɾʮ͍ܰʯͱΑ͘ݴΘΕΔ͕ͦͷ෼ଞϥΠϒϥϦ(jQuery/ Underscore.js etc)ʹґଘ͍ͯ͠ΔͷͰɺͦ͜͸ཁ஫ҙɻ
10. 1.backbone.jsͷ֓ཁ ֶशίετߴ͍ ֶशίετ௿͍ ॏྔͰϑϧελοΫ ܰྔͰ൚༻ੑ͋Γ
11. 1.backbone.jsͷ֓ཁ ʙੈքతͳτϨϯυʙ
12. 2.ϝϦοτɾಛ௃ ʙ؅ཧը໘Ͱ࢖༻͍ͯ͠Δٕज़ʙ DB ϑϩϯταΠυ αʔόαΠυ ϏϧυɾλεΫ؅ཧ ɾAPIॲཧ ɾjob࣮ߦ ɾόον࣮ߦ ؅ཧը໘
13. ɾViewͱTemplateΛ੾Γ཭ ͢͜ͱ͕Ͱ͖ɺ͔ͭCompile ࣌ʹTemplateΛjsͷϝιου ʹม׵ͯ͘͠ΕΔͨΊɺඳ ը଎౓΋଎͍ɻ ɾ·ͨTempleteΛͷૉͷ HTMLʹۙ͘͢Δ͜ͱͰɺσ βΠφʔ͕Templateʹର͠ ͯ௚઀मਖ਼ͯ͠σβΠϯΛ मਖ਼Ͱ͖Δɻ ɾࣗ༝౓͕ߴ͍ͷͰɺΤϯδ χΞͷ࿹ʹΑͬͯ͸ݟ௨͕͠ ѱ͍ίʔυʹ΋ͳΓ΍͍͢ɻ ɾBackBone.jsΛಋೖͯ͠΋ ίʔυྔ͕େ෯ʹݮΔͱ͍͏ ҹ৅͸ͳ͘ɺ΍͸Γϝϯςφ ϯεͷ͠΍͢͞΍ɺ௕ظతͳ ੜ࢈ੑͷ޲্͕ಋೖͷϝϦο τʹͳΔɻ ɾModelɺViewɺCollection ͕͸͖ͬΓ෼͔Ε͓ͯΓɺࡉ ͔͍୯ҐͰ؅ཧͰ͖Δɻ ɾকདྷతͳ࢖͍·Θ͠Λߟ͑ ΔͳΒ͜Ε͕׆͖ͯ͘Δͷ͔ ΋͠Εͳ͍͕ɺͦ͏͢Δͱͦ ͦ͜͜େن໛Ͱͳ͍ͱׂʹ߹ Θͳ͍ɻ ߴ଎ͰԠ౴ੑ͕ߴ͍ɻ େن໛։ൃʹ޲͍͍ͯΔɻ 2.ϝϦοτɾಛ௃ ࣗ༝౓͕ߴ͍ɻ 1 3 2 ʙϝϦοτʙ
14. 2.ϝϦοτɾಛ௃ ʙ࣮ࡍʹ࢖༻͞Ε͍ͯΔαʔϏεʙ ɾݱࡏͰ͸TwitterɺPinterestɺ HuluɺFoursquareͱ͍ͬͨύϫϑ ϧͰେن໛ͳ։ൃΛߦ͍ͬͯΔ WebαʔϏεʹ࢖ΘΕ͍ͯΔɻ Compass΋backbone.jsΛ࢖ͬͯ ͍ΔͬΆ͍ɻ
15. Router Collection Model View Model Model Ajax௨৴ template /show ର৅ͷURL͕ୟ͔Εͨ ࡍʹৼΓ෼͚Δ ର৅ͷViewͱtemplate ϑΝΠϧ͕ݺ͹ΕΔ ඞཁͳCollectionΛݺͼग़͢ 2.ϝϦοτɾಛ௃ ʙ૬ؔਤʙ ωετͨ͠Viewͷ ؅ཧΛิॿ
16. 3.ࣄྫ MainView SummaryView TableView(Collection) ListView(Model) ʙ؅ཧը໘ͰͷViewͷ෼͚ํʙ
17. ʙͦΕͧΕͷॻ͖ํʙ Model 3.ࣄྫ
18. Collection ʙͦΕͧΕͷॻ͖ํʙ 3.ࣄྫ
19. View ʙͦΕͧΕͷॻ͖ํʙ 3.ࣄྫ
20. ɾMarionette͸ɺMVCͰ͍͏ɺίϯτϩʔ ϥͱϏϡʔʹରͯ͠ͷิॿΛ͢ΔػೳΛ࣋ ͭɻ ɾΞϓϦέʔγϣϯͷن໛͕େ͖͘ͳͬͯ ͘ΔͱɺBackboneͷΈͰ͸Viewͷ؅ཧ͕େ มʹͳͬͯ͘Δɻ ͦΜͳ࣌ʹmarionette.jsͷregionػೳ͕ศ རʂ ͜ͷΑ͏ʹDOMΛregionొ࿥ͯ͠ɺ ผ్؅ཧͰ͖Δɻ ʙͦΕͧΕͷॻ͖ํʙ 3.ࣄྫ
21. TVNNBSZ ɾ#BDLCPOFKT͸ܰྔ͔ͭߴ଎ͰԠ౴ੑ͕ߴ͍ͱ͍͏ͷ͸ັྗͰ͸͋Δ΋ͷɺ ࣗ༝౓͕ߴ͍ͨΊܦݧ͕ઙ͍ͱແବͳίʔυ͕ࠞೖ͠΍͍͢ͷ͕೉఺ɻ
    ɾಋೖ͢Δ৔߹͸ॻ͖ํͷϧʔϧܾΊΛ͔ͬ͠Γߦ͑Δਓ͕͍Δͱྑ͍ɻ
    ɾେྔͷσʔλΛ଎͍εϐʔυͰऔಘ͠ͳ͍ͱ͍͚ͳ͍αʔϏεʹ͓͢͢Ί
    ɾ#BDLCPOFKTΛಋೖͯ͠΋ίʔυྔ͕େ෯ʹݮΔͱ͍͏ҹ৅͸ͳ͘ɺϝϯ ςφϯεͷ͠΍͢͞΍ɺ௕ظతͳੜ࢈ੑͷ޲্͕ಋೖͷϝϦοτʹͳΔɻ