AngularJS 勉強会 #4 - 実戦！AngularJS

Transcript

1. ࣮ઓ! AngularJS AngularJS ͷϓϩμΫτద༻ܦݧ͔ΒֶΜͩ͜ͱ
2. ࣗݾ঺հ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform Inc. ! લ৬: Gilt Groupe Japan!
3. ࣗݾ঺հ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform Inc. ! લ৬: Gilt Groupe Japan!
4. ΞδΣϯμ ❖ ϓϩδΣΫτʹ͍ͭͯ! ❖ γεςϜߏ੒ˍਓһߏ੒! ❖ ͳΜͰAngularJSʁ (vs. Backbone.js)! ❖ ։ൃϑϩʔ! ❖ ࣮ઓ౤ೖ࣌ͷTips
5. ϓϩδΣΫτʹ͍ͭͯ
6. ϓϩδΣΫτʹ͍ͭͯ • ։ൃظؒ: ͓Αͦ3ϲ݄ؒ (2013೥5݄ʙ7݄)! • EίϚʔεαΠτ(νέοςΟϯάɾαʔϏε)
 ͷϦχϡʔΞϧ! • Mobile First Ξϓϩʔν! • ͍ͭͰʹ AngularJS
7. ❖ ݁Ռ! ❖ https://m.giltcity.jp ϓϩδΣΫτʹ͍ͭͯ
8. ❖ ݁Ռ! ❖ https://m.giltcity.jp! ❖ ͱͬͯ΋্ख͍͖͘·ͨ͠ɻ ϓϩδΣΫτʹ͍ͭͯ
9. γεςϜˍਓһߏ੒ ❖ چߏ੒ - ϨΨγʔSOA jsp! java servlet Legacy API (RPC) DB
10. γεςϜˍਓһߏ੒ ❖ ৽ߏ੒ - ϞμϯSOA jsp! java servlet Legacy API (RPC) DB AngularJS App Node.js (REST) Legacy API (RPC) DB
11. γεςϜˍਓһߏ੒ ❖ ਓһ AngularJS App Node.js (REST) Legacy API (RPC) DB UX σβΠφʔ Frontend JS ΤϯδχΞ Backend JS ΤϯδχΞ
12. ͳΜͰAngularJSʁ (vs. Backbone.js)
13. ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ GiltͷϝΠϯϓϩμΫτ͸Backbone.js੡
14. ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ Backbone.js͸! ❖ ॊೈੑ͕ߴ͍! ❖ ͦͷ൓໘ɺ։ൃऀͷྗྔͰίʔυ඼࣭͕͹Β͖ͭ΍͍͢! ❖ ίʔυͷϞδϡʔϧԽ΋։ൃऀ࣍ୈ

15. ͳΜͰAngularJSʁ (vs. Backbone.js) → ։ൃମ੍ͷεέʔϦϯά͕Ή͔͍ͣ͠ ❖ Backbone.js͸! ❖ ॊೈੑ͕ߴ͍! ❖ ͦͷ൓໘ɺ։ൃऀͷྗྔͰίʔυ඼࣭͕͹Β͖ͭ΍͍͢! ❖ ίʔυͷϞδϡʔϧԽ΋։ൃऀ࣍ୈ

16. ❖ AngularJS͸! ❖ ॊೈੑͰ͸Backbone.jsʹྼΔ͕…! ❖ Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͠΍͢͞)! ❖ DI/Module! ❖ APIϨεϙϯε΋mockՄೳ → B/E։ൃ΁ͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦඼Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ ͳΜͰAngularJSʁ (vs. Backbone.js)
17. ͳΜͰAngularJSʁ (vs. Backbone.js) → ։ൃମ੍ͷεέʔϦϯά͕؆୯ ❖ AngularJS͸! ❖ ॊೈੑͰ͸Backbone.jsʹྼΔ͕…! ❖ Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͠΍͢͞)! ❖ DI/Module! ❖ APIϨεϙϯε΋mockՄೳ → B/E։ൃ΁ͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦඼Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ
18. ։ൃϑϩʔ
19. ❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5: νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν
20. ❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5: νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → ج൫ͮ͘Γʹ࣌ؒΛ͔͚ͨͷ͕૗ޭͨ͠! ɾϑΝΠϧߏ੒ɾϏϧυϓϩηε
 ɾAPIΫϥΠΞϯτͳͲͷجఈΫϥε
21. ❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5: νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → FrontendΤϯδχΞʹ͔ͬ͠ΓೃΕͯ΋Β͏
 ɾDI / Ϟδϡʔϧࢤ޲ / ςετϑΝʔετͷ֓೦ཧղ
 ɾͪΐͬͱͨ͠DirectiveΛ࡞ͬͯΈΔ
22. ❖ ։ൃΠςϨʔγϣϯ! ❖ Ұൠతͳ΢Σϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά / Unit Test / Viewεέϧτϯ࣮૷! ❖ CSSελΠϦϯά ։ൃϑϩʔ
23. ։ൃϑϩʔ → ʮී௨ʹʯςετɾϑΝʔετͰ͖Δʂ
 ɹ͜ͷϓϩδΣΫτͰ͸! ɹɾUnit Test ͸ඞਢ! ɹɾEnd to End Test ͸ΫϦςΟΧϧɾύε֬ೝ༻ ❖ ։ൃΠςϨʔγϣϯ! ❖ Ұൠతͳ΢Σϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά / Unit Test / Viewεέϧτϯ࣮૷! ❖ CSSελΠϦϯά
24. AngularJS ࣮ઓ౤ೖͷTips
25. ❖ ֊૚Խ͞ΕͨϞσϧɾσʔλͷঢ়ଶ؅ཧ! ❖ viewͱ௚݁͠ͳ͍Ϟσϧͷঢ়ଶΛͲ͏؅ཧ͢Δ͔ʁ! ❖ = AngularJSͷ௕ॴʮγϯϓϧͳϞσϧʯͷ෭࡞༻! ❖ ຊՈGoogle GroupsͰ΋ٞ࿦ʹͳ͍͕ͬͯͨɺ໌֬ͳ౴ ͑͸ແ͠ (http://goo.gl/j0BqM1)! ❖ ͜ͷϓϩδΣΫτͰ͸ɺϞσϧΛઙͯ͘͠໰୊ճආ AngularJS ࣮ઓ౤ೖͷTips
26. ❖ $rootScope.$broadcast! ❖ ≒ େҬδϟϯϓ! ❖ ศརͳ͚ͩʹதಟੑ͕͋Δ! ❖ ࢖͍͗͢ΔͱDIͷҙຯ͕ͳ͘ͳΔͷͰ஫ҙʂ AngularJS ࣮ઓ౤ೖͷTips
27. ❖ ԾҾ਺ͷMinifyରԠ! ❖ Minify͞Εͯಈ͔ͳ͘ͳΔͷΛ๷͙ AngularJS ࣮ઓ౤ೖͷTips
28. ❖ ϦΫΤετ਺ͷංେԽ! ❖ ΞϓϦຊମˍϏϡʔ! ❖ httpͷίετ͕ߴ͍ϞόΠϧ޲͚αΠτ͸ཁ஫ҙ! ❖ Ϗϧυ࣌ʹόϯυϧ͢Δ! ❖ webmake ͰΞϓϦέʔγϣϯΛ·ͱΊΔ! ❖ angular-template Ͱ view Λόϯυϧ! ❖ APIͷઃܭΛ޻෉͢Δ AngularJS ࣮ઓ౤ೖͷTips
29. ❖ SEO/Crawlerରࡦ! ❖ single-page appશൠͷ໰୊Ͱ͕͢! ❖ User-Agent൑ผͯ͠ɺPhantomJSͰ
 αʔόαΠυϨϯμϦϯά͢Δͷָ͕ AngularJS ࣮ઓ౤ೖͷTips
30. ❖ ᐜ༕ͩͬͨ͜ͱ! ❖ Two-way Binding ʹΑΔϨεϙϯεѱԽ! ❖ ஗ԆϩʔυʹΑΔϨΠΞ΢τͣ͘Ε! ❖ AngularJSຊମͷαΠζ (minifyͯ͠΋໿100KB) AngularJS ࣮ઓ౤ೖͷTips → ܕམͪAndroid୺຤Ͱ΋αΫαΫ
31. ❖ ΄ͲΑ੍͍໿ɾϞδϡʔϧԽͷڧ੍! ❖ FrontendΤϯδχΞͷఈ্͛΋! ❖ AngularJS͸νʔϜ։ൃ޲͖
 ΨϯΨϯ࣮ઓ౤ೖ͍ͯͩ͘͠͞ʂ
 (ͨͩ͠ࣄલ४උ͸೦ೖΓʹ) ·ͱΊ
32. ❖ ʮ೔ຊͰ௨͑ΔγϦίϯόϨʔͷελʔτΞοϓʯ! ❖ ΤϯδχΞืूதͰ͢ (Frontend & Backend)! ❖ Rails / Node.js / CoffeeScript! ❖ ࣍ظϑϩϯτΤϯυ͸AngularJSΛ࠾༻༧ఆ! ❖ http://kaizenplatform.in/ KAIZEN Platform Inc.
33. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ