楽天トラベルのフロントエンドについて(React Meetup)

presentation for https://reactjs-meetup.connpass.com/event/130682/

reference
https://corp.rakuten.co.jp/careers/interview/takahiro/
https://speakerdeck.com/taka66/microservices-at-microservice-meetup-vol-dot-6

Transcript

1. Rakuten Travel の フロントエンドについて(LT) May 27, 2019 Takahiro Fujii UI Platform Section. Rakuten, Inc.
2. 2 5SBWFM
   1SPEVDU
   %FWFMPQNFOU
   %FQBSUNFOU 6*
   1MBUGPSN
   4FDUJPO 4FSWJDF
   %FWFMPQNFOU
   (SPVQ &OHJOFFSJOH
   .BOBHFS UI Section Service Development Group SRE Group Front-End Native App (Android/iOS) ٥'SPOU&OEך倜鋉فٗتؙزꟚ涪鿇꥘ ٥傈劤➂כ_ⶴ 
   ؔؿءّ،ろ׭גせ䓲 8FC
   'SPOU&OE ؿآ؎ ةؕؼٗ Microservices@microservice Meetup vol.6 ٍؗٔ،הַך鑧כֿֿ׵鴟ח㼰׃ך׏גתׅկ https://corp.rakuten.co.jp/careers/interview/takahiro/
3. 3 !"#$%&'()*+ FUDʜ ͍ΖΜͳॴ͔Βདྷͨਓͱ࢓ࣄ͍ͯ͠·͢
4. 4 React ͔ͭͬͯΔͷʁ Ͱ
5. 5 Microservices@microservice Meetup vol.6 ※ react logo license https://github.com/reactjs/reactjs.org/blob/master/LICENSE-DOCS.md トラベルのarchitectureの変化の流れについては、下記のスライドで触れています ͸͍ɺ࢖ͬͯ·͢
6. 6 React Ͱ৽نϓϩμΫτΛ։ൃ͍ͯ͠·͢ɻ  ೥ࠒΛػʹ
7. 7 ࠓ೔͸ɺ๻Β͕ ͲͷΑ͏ͳ΋ͷΛ ։ൃ͍ͯ͠Δ͔
8. 8 ໼ܧ͗ૣʹ঺հ͠·͢ ˞࢒ΓεϥΠυ
9. 9 ࣍ੈ୅ָఱτϥϕϧΛ໨ࢦ͍ͯ͠Δ ✈ ϓϩμΫτ܈
10. 10 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU
    WPVDIFS ΍ FNBJM IUNM
    NBJM ͳͲ
11. 11 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU
    WPVDIFS ΍ FNBJM IUNM
    NBJM ͳͲ
12. 12 ձһ޲͚ DPOTVNFS 1SPWJEFS޲͚ FYUSBOFU ࠓ͸ඇެ։ʹͳ͍ͬͯ·͢
13. 13 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU
    WPVDIFS ΍ FNBJM IUNM
    NBJM ͳͲ
14. 14 7JB
    4UPSZCPPL
15. 15 ๻Βͷ 6*
    DPNQPOFOUT ࣗ࡞ͷυϝΠϯϨεͳڞ௨VJίϯϙʔωϯτϥΠϒϥϦ 4UPSZCPPL DPOTVNFS FYUSBOFU OFX
    BQQ ྑ͍͜ͱ΋ѱ͍͜ͱ΋৭ʑ͋ͬͨ
16. 16 VJ DPNQPOFOUT DPOTVNFS FYUSBOFU OFX
    BQQ ɾ5 $POTVNFS։ൃ଎౓ͷՃ଎ɾ6*ͷڞ௨Խ ɾ5 5FBNશମͷ$PNQPOFOUࢥߟͷਪਐ ɾ5 ΈΜͳ͕$PNQPOFOUͷ૊Έ߹ΘͤͰQBHFΛߟ͑ΒΕΔΑ͏ʹ ɾ5 ৽نϓϩμΫτ࡞Γ΍͍͢
17. 17 VJ DPNQPOFOUT ɾ VJDPNQPOFOUϥΠϒϥϦͱɺ औΓࠐΉଆͷϓϩμΫτͷ13͕݁ߏͳස౓Ͱ͋ΔͷͰɺSFWJFXνϣοτਏ͍ ɾ6 &YUSBOFUͱ$POTVNFSؒͷσβΠϯػೳࠩ෼͕͋Γɺ $POTVNFS޲͚ʹϥΠϒϥϦ௚ͨ͠Β &YUSBOFUόάΔΈ͍ͨͳ͜ͱ΋͋ͬͨ υϝΠϯϨε ɾ6 %FWFMPQFS%FTJHOFSͷDPNQPOFOUఆٛࠩ෼ ඍົͳσβΠϯͷࠩ෼΍ɺHSJEσβΠϯ΍Γ͍ͨʂͬͯͳͬͨΒͣΕͨΓ͢Δ ɾ6 Ұ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ
18. 18 VJ DPNQPOFOUT ɾ7ࠓͷঢ়ଶͰͷ׬શͳϥΠϒϥϦԽΛҰ୴ఘΊΔ à &YUSBOFU͸VJ DPNQPOFOUT͔ΒҰ୴཭୤ à Ұ୴཭୤͢Δ΋ɺকདྷతʹ·ͨ࢖͏͔΋ దٓݕ౼ ɾ 7%FTJHOFSͱDPNQPOFOUఆٛͷڞ௨ೝࣝΛ࡞ΔͨΊͷ ϨϏϡʔɾٞ࿦ɾ.5(Λ࣮ࢪத վΊͯBUPNJD
    EFTJHOΛ΍Δ߹ҙΛͱͬͨΓ BUPN΍NPMFDVMFTͷ੹೚ൣғͷఆٛͨ͠Γ ɾҰ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ à ཁ݅ͷݟ௚͠ɺγϯϓϧʹͰ͖ͨΓɺ࡟ΕΔෆཁͳ΋ͷ͸ੵۃతʹ࡟Δ &BTZ
    UP
    DPPSEJOBUF
    DIBOHFT
    GPS
    6* 4JOHMF
    13 *NQSPWF
    DPEF
    SFWJFX
    RVBMJUZ
19. 19 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU
    WPVDIFS ΍ FNBJM IUNM
    NBJM ͳͲ
20. 20 TQB
    GSBNFXPSL
21. 21 ɾDSFBUFSFBDUBQQ͕ϕʔε ɾSFBDUVOJWFSTBMIPUFYBNQMFʹ΋JOTQJSF ɾ3FBDU
    
    3FEVY
    
    443 ɾ'MPX͚ͩͲ5ZQFTDSJQUʹ͢Δ͔΋ ɾ3FBDU
    3PVUFSͷόʔδϣϯΞοϓେมͩͬͨ ɾKFTU
    FO[ZNF
    ࠷ۙ DZQSFTT
    Λࢼ͍ͯ͠·͢ TQB
    GSBNFXPSL
22. 22 \ʜ^
    "1*
    DMJFOU
23. 23 \ʜ^
    "1*
    DMJFOU ɾJTPNPSQIJDGFUDI ɾ5PLFO΍ڞ௨ͷIFBEFS৘ใͷऔΓѻ͍ ɾڞ௨ͷΤϥʔॲཧɺ௨஌ͳͲ import fetchApi from 'trv-fed-api-client';
24. 24 JO
    
    MO
25. 25 JO
    
    MO ɾ੩తϝοηʔδɺ೔෇ɺ͓ۚ ɾి࿩൪߸ɺ໊લɺॅॴ FUD ɾ೔෇͸NPNFOUʹͪΐͬͱखΛՃ͑ͨ͘Β͍ Ͱ΋ॏ͍ɺ஗͍ɺEBUF
    GOTʹ͔͍͑ͨ <L10nDate locale={language} value={date} format={ʻL'} /> <I18n id=”hoge“ /> // ja:こんにちは en:Hello
26. 26 CMVFQSJOUT
27. 27 CMVFQSJOUT ɾSFEVYDMJ ɾUFTU
    DPEF΋࡞ΒΕΔ redux generate duck <camelCaseActionReducerName> redux generate dumb <PascalCaseComponentName> redux generate selector <camelCaseSelectorName> redux generate smart <PascalCaseContainerName> redux generate extranet-fields <PascalCaseExtranetFieldName> redux generate extranet-widget <PascalCaseExtranetWidgetName>
28. 28 3FMJBCJMJUZ
29. 29 3FMJBCJMJUZ *TTVF ɾDPNQPOFOUͷංେԽ ΍QFSGPSNBODFྼԽ
    CVOEMF
    TJ[Fͷං େԽ FUD
    
    վળ 
    ྼԽΛ܁Γฦ͢ ɾͭ·Γɺมߋʹର͢ΔӨڹൣғ͕؅ཧͰ͖ͯͳ͍ ɾ4-0΍4-*΍։ൃޮ཰ੑʹؔ͢ΔUBSHFU͕ͳ͍ ɾकഁ཭ͷक͕Ͱ͖ͯͶʔΑʂ
30. 30 UI Section Service Development Group SRE Group Front-End Native App (Android/iOS) 'SPOU&OEͷ3FMJBCJMJUZ ʹ͍ͭͯߟ͑Δ
31. 31 3PMF
    
    3FTQPOTJCJMJUZ 3FMJBCMF
    "QQMJDBUJPO  1FSGPSNBODF 4-0  4FDVSJUZ %FWFMPQNFOU
    &GpDJFODZ  'SBNFXPSL  %FWFMPQNFOU
    &OWJSPONFOU  4VTUBJOBCMF
    $PEF  $*$%
    TVQQPSU 3FMJBCMF
    4FSWJDF  "WBJMBCJMJUZ 4-0 0QFSBUJPO  -PHHJOH  .POJUPSJOH  3FMFBTF  3FMFBTF
    .BOBHFNFOU  4JNQMJGZ
    0QFSBUJPO 4DBMBCMF
    0QFSBUJPO  $BQBDJUZ
    1MBOOJOH  4JNQMJGZ
    UP
    CF
    TDBMF
32. 32 ͦͯ͠Χλνʹ ϓϩηεʹ
33. 33 ,1*
    USBDLFS
34. 34 ,1*
    USBDLFS %BTICPBSE
    
    ௨஌
35. 35 ,1*
    USBDLFS ɾ1FSGPSNBODF
    $PWFSBHF
    $PNQMFYJUZ #VJME
    1SFDPNNJU
    CVOEMF
    TJ[FͳͲΛUSBDL͢Δ ɾMJHIUIPVTF΍36.͔ΒͱΕΔNFUSJYͳͲΛ࢖͏ Service Development Group SRE Group ‍「昨⽇のあれで遅くなってるな、、」 5「あ、多分ここのcomponentの設計⾒直せば、解消できます」 次の⽇ ‍「このページ、0.2早くなりました︕」 5 5 5
36. 36 3FWJFX
37. 37 3FWJFX ɾ࠷ۙ͸13࣌ʹ֬ೝ༻ͷ JOTUBODF΋্ཱ͕ͪΔΑ͏ʹ
38. 38 50%0 ɾ΋ͬͱൃ৴͢Δ ๻ͱ͔Α͜Έͪ͞Μ͕ ɾ3FMJBCJMJUZʹର͢ΔऔΓ૊ΈΛ΋ͬͱ ϓϩηεʹ༹͚ࠐ·ͤΔ ɾϑϨʔϜϫʔΫͷWFSTJPOΛ΋ͬͱ࠷৽ʹૣ͘ ௥͍͚ͭΔΑ͏ʹ͢Δ ࠓ
    
    ΋͏͙͢
39. 39 50%0 ɾ$PEF
    TQMJUUJOH
    
    3FMFBTF
    
    1BDLBHF
    NBOBHFNFOU
    ͜ͷن໛Ͱͷ։ൃͰͷ ՝୊͕ଟ͍ ɾ͜ͷن໛Ͱ։ൃ଎౓ΛΑΓ͋͛ΔͷʹɺNJDSP
    GSPOUFOET͸Ռͨͯ͠༗ޮ͔ɺΛݕ౼͢Δ
40. 40 8F
    BSF
    IJSJOH ೔ຊਓͷΤϯδχΞͷํ΋΋ͪΖΜืूதͰ͢