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

by hatappi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5 ·ͣ͸͡Ίʹ

Slide 6

Slide 6 text

6 Angular2 ??? Angular4 ???

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

γεςϜߏ੒ • Rails5͔ΒೖͬͨAPI ModeΛ ࢖༻ͨ͠APIαʔόʔ • JSϑΝΠϧ܈Λ഑෍͢ΔΠϯ ελϯε • ͢΂ͯhttpsԽࡁΈ  (GCS͕httpsʹରԠ͍ͯͨ͠JS ϑΝΠϧ܈͸͔ͦ͜Β഑෍͠ ͔ͨͬͨ) 9

Slide 10

Slide 10 text

Angularͷར༻ཧ༝ • جװγεςϜͱͳΔͷͰଞͷαʔϏε͔Β΋ࢀর͞ ΕΔલఏ͕͋ΔͷͰAPIͱϑϩϯτΛ෼཭͢Δઃܭ ʹͨ͠ͷͰϑϩϯτͰಠཱͨ͠΋ͷ͕ඞཁͩͬͨ • AngularΛ΍ͬͯΈ͔ͨͬͨ 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

AngularΛ࠾༻ͯ͠ྑ͔ͬͨ఺ 12 ΄͍͠΋ͷ͸΄ͱΜͲ "OHVMBS͕ఏڙͯ͘͠Εͨ

Slide 13

Slide 13 text

13 ։ൃ࣌ͷۤ࿑

Slide 14

Slide 14 text

։ൃ࣌ͷۤ࿑ • ֶशίετͷ૿Ճ • Rails͚ͩͰͳ͘Angularͱ͍͏Framework • Railsͷศརͳhelper͸࢖༻Ͱ͖ͳ͍ • form_for,link_toͳͲ͸࢖͑ͳ͍ͷͰࣗ෼Ͱhtml Λॻ͘ • I18nʹؔͯ͠͸APIͱFrontͰͷ2ॏͰ؅ཧ 14

Slide 15

Slide 15 text

15 ϦϦʔεޙͷۤ࿑

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Slide 19

Slide 19 text

ྲྀೖͷେ൒͸Chatwork 19 Google Analytics

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

23 ·ͱΊ

Slide 24

Slide 24 text

·ͱΊ • Ϣʔβʔʹ͸৽͍͠Ϣʔβʔମݧ͕༩͑ΒΕͨ • ൓ڹ͕͋ͬͨͱ͸ݴΘͳ͍ • RailsͱAngularͱ͍͏૊Έ߹ΘͤΛߟ͑ΔͳΒݸਓతʹ͸ webpackerΛ࢖ΘͣʹCLIΛ࢖ͬͨ΄͏͕ྑ͍ • ࢀߟ:Rails+webpackerͰAngularΛ͞ΘͬͯΈΔ  http://hatappi.hateblo.jp/entry/2017/05/20/180706 • AngularΛ΍Δ্Ͱ͸ng-japanͱ͍͏slackνʔϜʹೖΔͱ ͸͔ͲΔ 24