Large react product with 20+ frontend engineers in Rakuten Travel

Co-Writer
Takashi Yokomichi / Carlesso Cristian

Presentation
https://www.meetup.com/ja-JP/ReactJS-Tokyo/events/262199021/

Careers
https://talent.rakuten.careers/jobs/senior-front-end-engineer-travel-%EF%BC%9Atsdd-9568

Transcript

1. Large react product with 20+ FrontEnd Engineers in Rakuten Travel June 26, 2019 Takashi Yokomichi / Takahiro Fujii / Cristian Carlesso Travel UI Section. Rakuten, Inc.
2. 2 Yokomichi, Takashi SRE Cristian, Carlesso Application Reliability Fujii, Takahiro Service Development
3. 3 Background / Construct Foundation Service Implement / Learn Improve Application Today’s Agenda
4. 4 We have many booking services! Bus, Air, etc Domestic Hotel In-bound Hotel Rent-a-Car
5. 5 But different architectures makes it difficult to expand to the global market Bus, Air, etc Monolithic architecture Spring, …etc Layered architecture Spring, React, …etc Monolithic architecture Struts, …etc
6. 6 Mission Rakuten Travel aim to be No1 Travel Platform in the world
7. 7 Hotel Car Bus We needed a new platform so business could operate on it Travel Platform ( Generalize data schema, i18n ) …
8. 8 SPA API Gateway Microservices We design a new architecture
9. 9 Fortunately, we had time while all the requirements were defined!
10. 10 So, we made full-stack framework. developers could focus on service development There was no de-facto standard at the time
11. 11 What are the features ?
12. 12 Everything except service features requirement fetch API module webpack hell server process stub i18n tracking For analytics / monitoring blueprint library dependency hell
13. 13 Today, let’s focus on fetch API module webpack hell server process stub i18n tracking For analytics / monitoring blueprint library dependency hell
14. 14 stub
15. 15 As a contract development / debug For review snapshot, stub, code review in single PR UI Automation test stub is used...
16. 16 stubs are used as contract UI Developer API Developer Spec / Stub
17. 17 Proceed development using stubs UI Developer Stub Component Component
18. 18 Stub API Instance ( json-server ) yarn with-stub App Instance API Module API GW Inject variable to override API GW domain to switch to use local stub domain Overview
19. 19 Want to try more automatic / systematic way like a CDC in the future CDC: Consumer-Driven-Contract
20. 20 i18n
21. 21 yarn start App Instance Translation files been made during Build process df731176…. : Hello {Name}! 44922ae2…: Good night {Name}! … en ja Starting App
22. 22 <I18n id=“df731176…” data={{ Name: “Cris” }} /> <span>Hello Cris!</span> props and Accept-Language Request header to be… df731176…: Hello {Name}!
23. 23 We are now ready for development!
24. 24 Let’s develop $%
25. 25 Case Study Light & Dark Things we learned though development Takahiro Fujii
26. 26 What kind of products we are developing
27. 27 consumer admin ui-components framework/library others ※Excerpt Service for Rakuten Member Travel Booking Application Service for Provider(e.g Hotel Staff) And internal staff ui component lib Framework, i18n, l10n, scripts, config api client, and so on pdf(receipt, voucher) email(html mail) and so on Products we are developing
28. 28 consumer admin ui-components framework/library others ※Excerpt Service for Rakuten Member Travel Booking Application Service for Provider(e.g Hotel Staff) And internal staff ui component lib Framework, i18n, l10n, scripts, config api client, and so on pdf(receipt, voucher) email(html mail) and so on Mainly we are developing
29. 29 Consumer APP Admin APP
30. 30 Consumer Admin Booking Search Previously we lead each domain
31. 31 UI components Monolith / Microservices Organization Testing
32. 35 UI components Monolith Microservice Organization Testing
33. 36 About 75 components Storybook + Jest(Storyshots) UI components library UI components Monolith Microservice Organization Testing
34. 37 Benefits we got UI components Monolith Microservice Organization Testing
35. 38 Benefit to consider UI components • Prepare snippets beforehand (NOT Generic) Define Product Requirement Clarify essential components Implement UI Components Implement Product (Admin, Consumer) Based on UI components Timeline
36. 39 <div> </div> Benefit to consider UI components • Component oriented UI becomes ingrained in our minds <button> <button> <div> </div> <div> </div> <button> Implementing UI components lib forces us to do component oriented UI eliminating the need for duplicated code
37. 40 Benefits • Prepare snippets beforehand • Component oriented UI becomes ingrained in our minds • Re-usable components assets UI components Monolith Microservice Organization Testing
38. 41 Benefit to consider UI components • Re-usable component assets Consumer Admin Other
39. 42 Issues we faced UI components Monolith Microservice Organization Testing
40. 43 • 2PR required most of the time Issues takahiro.fujii$ npm link ui-components takahiro.fujii$ npm unlink ui-components When we develop application from scratch, we have to repeatably update both the ui-components and client(consumer / admin) npm link is also bit troublesome..
41. 44 • Inject domain logic in component lib Issues A : "Fixed component bug for consumer " B : ”Oh No, admin was broken " Design / Function differences for each product( consumer/admin ) Might be too early to make generic component Consumer Logic Admin Logic UI component lib
42. 45 • Misunderstanding between designer & engineer Issues Designer : “Why there are spacing, it's not necessary ” Busy Engineer : “Because this is a component, if we remove spacing, basically other place’s spacing are also removed...” Designer : “” Engineer Designer
43. 46 • 2PR required most of the time • Injecting domain logic in component library • Misunderstandings between designer & engineer Issues UI components Monolith Microservice Organization Testing
44. 47 Well-generalized is not easy We might then be able to make a library again with well-generalized components UI components Monolith Microservice Organization Testing
45. 48 Countermeasures UI components Monolith Microservice Organization Testing
46. 49 • Gave up using a library for a time being • Making consensus with designer Admin product gave up on using ui-component library due to issues Cris implemented parser to migrate using library code into admin product , Regular mtg with designer to discuss component definition ✏ Re-defining Atomic design components (atoms and molecules and organisms) UI components Monolith Microservice Organization Testing
47. 50 Testing
48. 51 UT : Jest + Enzyme Scenario Test : UI components Monolith Microservice Organization Testing Ref : https://github.com/cypress-io/cypress
49. 52 Benefit Make sure your UI does not change unexpectedly https://jestjs.io/docs/en/snapshot-testing Issue(Improvement) UT and snapshot testing is not enough to ensure quality UI components Monolith Microservice Organization Testing ※Especially integration with API, but its difficult to make Scenario Testing initially when we build application from scratch
50. 53 Scenario Test Every component has data-locator-id to identify component (Blueprint automatically generate, or manually define) <button data-locator-id="93160e56-e769-4a50-85b0-07d95149b13a"> Continue </button> UI components Monolith Microservice Organization Testing it('Checks hotel is added to step1', () => { cy.get(`[data-locator-id=" 93160e56-e769-4a50-85b0-07d95149b13a "]`).should('have.length', 1); }); test code component
51. 54 Implement scenario testing with cypress https://github.com/cypress-io/cypress Consumer App Stub Api(Testing Env) Can switch Integrate with Jenkins - UI Automation Test
52. 55 Visual testing with cypress image snapshot(POC) https://github.com/cypress-io/cypress https://github.com/palmerhq/cypress-image-snapshot Text Color is Different Develop feature branch UI components Monolith Microservice Organization Testing https://github.com/americanexpress/jest-image-snapshot
53. 56 Visual testing with cypress image snapshot(POC) https://github.com/cypress-io/cypress https://github.com/palmerhq/cypress-image-snapshot Button Color is Different Develop feature branch UI components Monolith Microservice Organization Testing https://github.com/americanexpress/jest-image-snapshot
54. 57 Monolith / Microservices
55. 58 Micro to monolith? review hotel search booking mypage top consumer Current App(Java) UI components Monolith Microservice Organization Testing
56. 59 Micro to monolith? review hotel search booking mypage top consumer Current App(Java) UI components Monolith Microservice Organization Testing
57. 60 Monolith? • Code consistency • Velocity(Development from scratch) • Consider to future separation UI components Monolith Microservice Organization Testing (Kind of generalization)
58. 61 • Consider to future separation Directory is separated by product domain Blueprint support this structure redux generate dumb xxx --domain=booking redux generate smart xxxxPage --domain=booking redux generate dumb xxx --domain=search redux generate smart xxxxPage --domain=search
59. 62 • Consider to future separation Important to develop monolith product with many engineers (loose coupling) … …
60. 64 Organization
61. 65 AS IS & TO BE Domain / Product base TEAMS Role / Responsibility base TEAMS Search Booking Admin Service Development Site Reliability Application Reliability UI components Monolith Microservice Organization Testing
62. 66 Issue we faced once we developed UI components Monolith Microservice Organization Testing
63. 67 Performance issue Bundle size getting bigger Component become complicated Fix issue Develop feature UI components Monolith Microservice Organization Testing
64. 68 Why does this happen? UI components Monolith Microservice Organization Testing
65. 69 • No SLI/SLO target • No Development efficiency target • Difficult to catch up impact for other teams feature, development with this scale No target, no requirement for.. UI components Monolith Microservice Organization Testing
66. 70 AS IS & TO BE Domain / Product base TEAMS Role / Responsibility base TEAMS Search Booking Admin Service Development Site Reliability Application Reliability
67. 71 Complex applications comes with tradeoffs Developer experience User experience
68. 72 Measure KPI
69. 73 Improve build time - Parallelize for faster build language files - Run tests and lints only for changed files
70. 74 Impact! 20 devs, run 3 times per day - Before change: 2 hours! - After change: half an hour!
71. 75 Improve build time - Parallelize for faster build language files - Run tests and lints only for changed files
72. 76 Better User Experience - Use optimized images - Optimize css - Optimize bundle file - Better perceived performance
73. 77 We are hiring! https://talent.rakuten.careers/jobs/senior-front-end-engineer-travel-%EF%BC%9Atsdd-9568 Please feel free to contact us takashi.yokomichi@rakuten.com takahiro.fujii@rakuten.com cristian.carlesso@rakuten.com