Large react product with 20+ frontend engineers in Rakuten Travel

Large react product with 20+ frontend engineers in Rakuten Travel

476e7a02d660b5dd640cb020ec0a9085?s=128

Takahiro Fujii

June 26, 2019
Tweet

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
  74. None