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

#roppongirb

Transcript

1. ࣾ಺ͰॳSPAΛAngularͰ ׬੒ͤ͞Δ·Ͱͱͦͷޙ by hatappi @Roppongi.rb #3 "Rails x Frontend-Tech" 1
2. ࣗݾ঺հ • ໊લ: ാத ༔࡞ • hatappi: hatappi1225: • ձࣾ: גࣜձࣾSpeee 2
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ͳΜͰ࠷ॳͷϩʔσΟϯά ͸࣌ؒ͸͔͔Γ·͢ʁ
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