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

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