社内で初SPAをAngularで完成させるまでとその後

C582b722e015633f7900083f8ea75732?s=47 hatappi
May 31, 2017

 社内で初SPAをAngularで完成させるまでとその後

#roppongirb

C582b722e015633f7900083f8ea75732?s=128

hatappi

May 31, 2017
Tweet

Transcript

  1. ࣾ಺ͰॳSPAΛAngularͰ ׬੒ͤ͞Δ·Ͱͱͦͷޙ by hatappi @Roppongi.rb #3 "Rails x Frontend-Tech" 1

  2. ࣗݾ঺հ • ໊લ: ാத ༔࡞ • hatappi: hatappi1225: • ձࣾ:

    גࣜձࣾSpeee 2
  3. 3

  4. 4 ͜Ε͸1ϲ݄લ ·Ͱ͓࿩͠Ͱ͢

  5. 5 ·ͣ͸͡Ίʹ

  6. 6 Angular2 ??? Angular4 ???

  7. AngularͬͯݺΜͰͶ 7 IUUQTXXXZPVUVCFDPNXBUDI WB+*.P-HR6@PGFBUVSFZPVUVCFU

  8. ސ٬؅ཧγεςϜͷ࡞੒ • ݩʑӡ༻͞Ε͍ͯͨ֎෦αʔϏεΛϦϓϨΠε͢Δ ϓϩδΣΫτ • 2016೥6݄͘Β͍ʹfirst commitͯ͠10݄͘Β͍
 ʹϦϦʔε • RailsΛAPIͱͯ͠࢖༻ͯ͠ϑϩϯτ͸TypescriptͰ

    AngularΛ࢖ͬͯ·͢ 8
  9. γεςϜߏ੒ • Rails5͔ΒೖͬͨAPI ModeΛ ࢖༻ͨ͠APIαʔόʔ • JSϑΝΠϧ܈Λ഑෍͢ΔΠϯ ελϯε • ͢΂ͯhttpsԽࡁΈ


    (GCS͕httpsʹରԠ͍ͯͨ͠JS ϑΝΠϧ܈͸͔ͦ͜Β഑෍͠ ͔ͨͬͨ) 9
  10. Angularͷར༻ཧ༝ • جװγεςϜͱͳΔͷͰଞͷαʔϏε͔Β΋ࢀর͞ ΕΔલఏ͕͋ΔͷͰAPIͱϑϩϯτΛ෼཭͢Δઃܭ ʹͨ͠ͷͰϑϩϯτͰಠཱͨ͠΋ͷ͕ඞཁͩͬͨ • AngularΛ΍ͬͯΈ͔ͨͬͨ 10

  11. AngularΛ࠾༻ͯ͠ྑ͔ͬͨ఺ • webpackͷઃఆͱ͔ࣗ෼Ͱ͢Δͷ... • AngularͰఏڙ͍ͯ͠·͢ @angular/cli 11 • http clientԿ࢖͓͏…

    • AngularͰఏڙ͍ͯ͠·͢ @angular/http • routerͲ͏͠Α͏... • AngularͰఏڙ͍ͯ͠·͢ @angular/router
  12. AngularΛ࠾༻ͯ͠ྑ͔ͬͨ఺ 12 ΄͍͠΋ͷ͸΄ͱΜͲ "OHVMBS͕ఏڙͯ͘͠Εͨ

  13. 13 ։ൃ࣌ͷۤ࿑

  14. ։ൃ࣌ͷۤ࿑ • ֶशίετͷ૿Ճ • Rails͚ͩͰͳ͘Angularͱ͍͏Framework • Railsͷศརͳhelper͸࢖༻Ͱ͖ͳ͍ • form_for,link_toͳͲ͸࢖͑ͳ͍ͷͰࣗ෼Ͱhtml Λॻ͘

    • I18nʹؔͯ͠͸APIͱFrontͰͷ2ॏͰ؅ཧ 14
  15. 15 ϦϦʔεޙͷۤ࿑

  16. 16 ॳظϩʔσΟϯά͕஗͍! ͍͍ͩͨ໿8ඵڧ

  17. 17 SPAͳΜͰ࠷ॳͷϩʔσΟϯά ͸࣌ؒ͸͔͔Γ·͢ʁ

  18. 18

  19. ྲྀೖͷେ൒͸Chatwork 19 Google Analytics

  20. ղܾࡦ • ϦϦʔε౰ॳ͸ຊ൪Ͱ΋JITίϯύΠϧΛߦ͍ͬͯͨ • CLIͰAoTίϯύΠϧͰϏϧυ͢ΔΦϓγϣϯ͕͋ ΔͷͰͦΕΛ࢖༻ 20 # 1.0.0-beta.28͔Β͸--prodͰ--aot͕defaultͰtrue ng

    build --prod --aot=true
  21. ͦͷ݁Ռ • ॳظϩʔσΟϯά͸2ඵҎԼ͘Β͍ • ࣄલʹίϯύΠϧͨ͠΋ͷΛ഑෍͢ΔͷͰϑΝΠϧ αΠζ͸૿͑Δ͕gzipͰѹॖͯ͠഑෍ 21 ,# .

  22. ංେԽ͠ͳ͍ͨΊʹ • Կ΋ߟ͑ͳ͍ͱػೳΛ෇͚଍͍ͯ͘͠͝ͱʹϑΝΠ ϧαΠζ͸૿͍͑ͯ͘ • Lazy LoadingػೳΛ࢖༻ͯ͋͠·Γ࢖Θͳ͍ػೳ ͳͲ͸ΞΫηε͕͋ͬͨ࣌ʹಡΈࠐ·ΕΔΑ͏ʹ͢ Δ 22

  23. 23 ·ͱΊ

  24. ·ͱΊ • Ϣʔβʔʹ͸৽͍͠Ϣʔβʔମݧ͕༩͑ΒΕͨ • ൓ڹ͕͋ͬͨͱ͸ݴΘͳ͍ • RailsͱAngularͱ͍͏૊Έ߹ΘͤΛߟ͑ΔͳΒݸਓతʹ͸ webpackerΛ࢖ΘͣʹCLIΛ࢖ͬͨ΄͏͕ྑ͍ • ࢀߟ:Rails+webpackerͰAngularΛ͞ΘͬͯΈΔ


    http://hatappi.hateblo.jp/entry/2017/05/20/180706 • AngularΛ΍Δ্Ͱ͸ng-japanͱ͍͏slackνʔϜʹೖΔͱ ͸͔ͲΔ 24