AngularJS 勉強会 #4 - 実戦！AngularJS

Slide 1

Slide 1 text

࣮ઓ! AngularJS AngularJS ͷϓϩμΫτద༻ܦݧ͔ΒֶΜͩ͜ͱ

Slide 2

Slide 2 text

ࣗݾ঺հ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform Inc. ! લ৬: Gilt Groupe Japan!

Slide 3

Slide 3 text

ࣗݾ঺հ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform Inc. ! લ৬: Gilt Groupe Japan!

Slide 4

Slide 4 text

ΞδΣϯμ ❖ ϓϩδΣΫτʹ͍ͭͯ! ❖ γεςϜߏ੒ˍਓһߏ੒! ❖ ͳΜͰAngularJSʁ (vs. Backbone.js)! ❖ ։ൃϑϩʔ! ❖ ࣮ઓ౤ೖ࣌ͷTips

Slide 5

Slide 5 text

ϓϩδΣΫτʹ͍ͭͯ

Slide 6

Slide 6 text

ϓϩδΣΫτʹ͍ͭͯ • ։ൃظؒ: ͓Αͦ3ϲ݄ؒ (2013೥5݄ʙ7݄)! • EίϚʔεαΠτ(νέοςΟϯάɾαʔϏε)  ͷϦχϡʔΞϧ! • Mobile First Ξϓϩʔν! • ͍ͭͰʹ AngularJS

Slide 7

Slide 7 text

❖ ݁Ռ! ❖ https://m.giltcity.jp ϓϩδΣΫτʹ͍ͭͯ

Slide 8

Slide 8 text

❖ ݁Ռ! ❖ https://m.giltcity.jp! ❖ ͱͬͯ΋্ख͍͖͘·ͨ͠ɻ ϓϩδΣΫτʹ͍ͭͯ

Slide 9

Slide 9 text

γεςϜˍਓһߏ੒ ❖ چߏ੒ - ϨΨγʔSOA jsp! java servlet Legacy API (RPC) DB

Slide 10

Slide 10 text

γεςϜˍਓһߏ੒ ❖ ৽ߏ੒ - ϞμϯSOA jsp! java servlet Legacy API (RPC) DB AngularJS App Node.js (REST) Legacy API (RPC) DB

Slide 11

Slide 11 text

γεςϜˍਓһߏ੒ ❖ ਓһ AngularJS App Node.js (REST) Legacy API (RPC) DB UX σβΠφʔ Frontend JS ΤϯδχΞ Backend JS ΤϯδχΞ

Slide 12

Slide 12 text

ͳΜͰAngularJSʁ (vs. Backbone.js)

Slide 13

Slide 13 text

ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ GiltͷϝΠϯϓϩμΫτ͸Backbone.js੡

Slide 14

Slide 14 text

ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ Backbone.js͸! ❖ ॊೈੑ͕ߴ͍! ❖ ͦͷ൓໘ɺ։ൃऀͷྗྔͰίʔυ඼࣭͕͹Β͖ͭ΍͍͢! ❖ ίʔυͷϞδϡʔϧԽ΋։ൃऀ࣍ୈ 

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

❖ AngularJS͸! ❖ ॊೈੑͰ͸Backbone.jsʹྼΔ͕…! ❖ Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͠΍͢͞)! ❖ DI/Module! ❖ APIϨεϙϯε΋mockՄೳ → B/E։ൃ΁ͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦඼Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ ͳΜͰAngularJSʁ (vs. Backbone.js)

Slide 17

Slide 17 text

ͳΜͰAngularJSʁ (vs. Backbone.js) → ։ൃମ੍ͷεέʔϦϯά͕؆୯ ❖ AngularJS͸! ❖ ॊೈੑͰ͸Backbone.jsʹྼΔ͕…! ❖ Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͠΍͢͞)! ❖ DI/Module! ❖ APIϨεϙϯε΋mockՄೳ → B/E։ൃ΁ͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦඼Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ

Slide 18

Slide 18 text

։ൃϑϩʔ

Slide 19

Slide 19 text

❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5: νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν

Slide 20

Slide 20 text

❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5: νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → ج൫ͮ͘Γʹ࣌ؒΛ͔͚ͨͷ͕૗ޭͨ͠! ɾϑΝΠϧߏ੒ɾϏϧυϓϩηε  ɾAPIΫϥΠΞϯτͳͲͷجఈΫϥε

Slide 21

Slide 21 text

❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5: νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → FrontendΤϯδχΞʹ͔ͬ͠ΓೃΕͯ΋Β͏  ɾDI / Ϟδϡʔϧࢤ޲ / ςετϑΝʔετͷ֓೦ཧղ  ɾͪΐͬͱͨ͠DirectiveΛ࡞ͬͯΈΔ

Slide 22

Slide 22 text

❖ ։ൃΠςϨʔγϣϯ! ❖ Ұൠతͳ΢Σϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά / Unit Test / Viewεέϧτϯ࣮૷! ❖ CSSελΠϦϯά ։ൃϑϩʔ

Slide 23

Slide 23 text

։ൃϑϩʔ → ʮී௨ʹʯςετɾϑΝʔετͰ͖Δʂ  ɹ͜ͷϓϩδΣΫτͰ͸! ɹɾUnit Test ͸ඞਢ! ɹɾEnd to End Test ͸ΫϦςΟΧϧɾύε֬ೝ༻ ❖ ։ൃΠςϨʔγϣϯ! ❖ Ұൠతͳ΢Σϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά / Unit Test / Viewεέϧτϯ࣮૷! ❖ CSSελΠϦϯά

Slide 24

Slide 24 text

AngularJS ࣮ઓ౤ೖͷTips

Slide 25

Slide 25 text

❖ ֊૚Խ͞ΕͨϞσϧɾσʔλͷঢ়ଶ؅ཧ! ❖ viewͱ௚݁͠ͳ͍Ϟσϧͷঢ়ଶΛͲ͏؅ཧ͢Δ͔ʁ! ❖ = AngularJSͷ௕ॴʮγϯϓϧͳϞσϧʯͷ෭࡞༻! ❖ ຊՈGoogle GroupsͰ΋ٞ࿦ʹͳ͍͕ͬͯͨɺ໌֬ͳ౴ ͑͸ແ͠ (http://goo.gl/j0BqM1)! ❖ ͜ͷϓϩδΣΫτͰ͸ɺϞσϧΛઙͯ͘͠໰୊ճආ AngularJS ࣮ઓ౤ೖͷTips

Slide 26

Slide 26 text

❖ $rootScope.$broadcast! ❖ ≒ େҬδϟϯϓ! ❖ ศརͳ͚ͩʹதಟੑ͕͋Δ! ❖ ࢖͍͗͢ΔͱDIͷҙຯ͕ͳ͘ͳΔͷͰ஫ҙʂ AngularJS ࣮ઓ౤ೖͷTips

Slide 27

Slide 27 text

❖ ԾҾ਺ͷMinifyରԠ! ❖ Minify͞Εͯಈ͔ͳ͘ͳΔͷΛ๷͙ AngularJS ࣮ઓ౤ೖͷTips

Slide 28

Slide 28 text

❖ ϦΫΤετ਺ͷංେԽ! ❖ ΞϓϦຊମˍϏϡʔ! ❖ httpͷίετ͕ߴ͍ϞόΠϧ޲͚αΠτ͸ཁ஫ҙ! ❖ Ϗϧυ࣌ʹόϯυϧ͢Δ! ❖ webmake ͰΞϓϦέʔγϣϯΛ·ͱΊΔ! ❖ angular-template Ͱ view Λόϯυϧ! ❖ APIͷઃܭΛ޻෉͢Δ AngularJS ࣮ઓ౤ೖͷTips

Slide 29

Slide 29 text

❖ SEO/Crawlerରࡦ! ❖ single-page appશൠͷ໰୊Ͱ͕͢! ❖ User-Agent൑ผͯ͠ɺPhantomJSͰ  αʔόαΠυϨϯμϦϯά͢Δͷָ͕ AngularJS ࣮ઓ౤ೖͷTips

Slide 30

Slide 30 text

❖ ᐜ༕ͩͬͨ͜ͱ! ❖ Two-way Binding ʹΑΔϨεϙϯεѱԽ! ❖ ஗ԆϩʔυʹΑΔϨΠΞ΢τͣ͘Ε! ❖ AngularJSຊମͷαΠζ (minifyͯ͠΋໿100KB) AngularJS ࣮ઓ౤ೖͷTips → ܕམͪAndroid୺຤Ͱ΋αΫαΫ

Slide 31

Slide 31 text

❖ ΄ͲΑ੍͍໿ɾϞδϡʔϧԽͷڧ੍! ❖ FrontendΤϯδχΞͷఈ্͛΋! ❖ AngularJS͸νʔϜ։ൃ޲͖  ΨϯΨϯ࣮ઓ౤ೖ͍ͯͩ͘͠͞ʂ  (ͨͩ͠ࣄલ४උ͸೦ೖΓʹ) ·ͱΊ

Slide 32

Slide 32 text

❖ ʮ೔ຊͰ௨͑ΔγϦίϯόϨʔͷελʔτΞοϓʯ! ❖ ΤϯδχΞืूதͰ͢ (Frontend & Backend)! ❖ Rails / Node.js / CoffeeScript! ❖ ࣍ظϑϩϯτΤϯυ͸AngularJSΛ࠾༻༧ఆ! ❖ http://kaizenplatform.in/ KAIZEN Platform Inc.

Slide 33

Slide 33 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ