Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS 勉強会 #4 - 実戦!AngularJS

AngularJS 勉強会 #4 - 実戦!AngularJS

Makoto Sakata

December 03, 2013
Tweet

More Decks by Makoto Sakata

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. ϓϩδΣΫτʹ͍ͭͯ

    View full-size slide

  6. ϓϩδΣΫτʹ͍ͭͯ
    • ։ൃظؒ: ͓Αͦ3ϲ݄ؒ (2013೥5݄ʙ7݄)!
    • EίϚʔεαΠτ(νέοςΟϯάɾαʔϏε)

    ͷϦχϡʔΞϧ!
    • Mobile First Ξϓϩʔν!
    • ͍ͭͰʹ AngularJS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ɾAPIΫϥΠΞϯτͳͲͷجఈΫϥε

    View full-size slide

  20. ❖ ΧϨϯμʔ (12 weeks)
    ։ൃϑϩʔ
    week 1-3: ։ൃج൫ͮ͘Γ
    week 4-5: νʔϜల։
    week 6-12: ࣮։ൃ
    ϩʔϯν
    → FrontendΤϯδχΞʹ͔ͬ͠ΓೃΕͯ΋Β͏

    ɾDI / Ϟδϡʔϧࢤ޲ / ςετϑΝʔετͷ֓೦ཧղ

    ɾͪΐͬͱͨ͠DirectiveΛ࡞ͬͯΈΔ

    View full-size slide

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

    View full-size slide

  22. ։ൃϑϩʔ
    → ʮී௨ʹʯςετɾϑΝʔετͰ͖Δʂ

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

    View full-size slide

  23. AngularJS ࣮ઓ౤ೖͷTips

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. ❖ SEO/Crawlerରࡦ!
    ❖ single-page appશൠͷ໰୊Ͱ͕͢!
    ❖ User-Agent൑ผͯ͠ɺPhantomJSͰ

    αʔόαΠυϨϯμϦϯά͢Δͷָ͕
    AngularJS ࣮ઓ౤ೖͷTips

    View full-size slide

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

    View full-size slide

  30. ❖ ΄ͲΑ੍͍໿ɾϞδϡʔϧԽͷڧ੍!
    ❖ FrontendΤϯδχΞͷఈ্͛΋!
    ❖ AngularJS͸νʔϜ։ൃ޲͖

    ΨϯΨϯ࣮ઓ౤ೖ͍ͯͩ͘͠͞ʂ

    (ͨͩ͠ࣄલ४උ͸೦ೖΓʹ)
    ·ͱΊ

    View full-size slide

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

    View full-size slide

  32. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide