Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Large react product with 20+ frontend engineers...

Large react product with 20+ frontend engineers in Rakuten Travel

Takahiro Fujii

June 26, 2019
Tweet

More Decks by Takahiro Fujii

Other Decks in Technology

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. 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
  3. 7 Hotel Car Bus We needed a new platform so

    business could operate on it Travel Platform ( Generalize data schema, i18n ) …
  4. 10 So, we made full-stack framework. developers could focus on

    service development There was no de-facto standard at the time
  5. 12 Everything except service features requirement fetch API module webpack

    hell server process stub i18n tracking For analytics / monitoring blueprint library dependency hell
  6. 13 Today, let’s focus on fetch API module webpack hell

    server process stub i18n tracking For analytics / monitoring blueprint library dependency hell
  7. 15 As a contract development / debug For review snapshot,

    stub, code review in single PR UI Automation test stub is used...
  8. 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
  9. 19 Want to try more automatic / systematic way like

    a CDC in the future CDC: Consumer-Driven-Contract
  10. 21 yarn start App Instance Translation files been made during

    Build process df731176…. : Hello {Name}! 44922ae2…: Good night {Name}! … en ja Starting App
  11. 22 <I18n id=“df731176…” data={{ Name: “Cris” }} /> <span>Hello Cris!</span>

    props and Accept-Language Request header to be… df731176…: Hello {Name}!
  12. 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
  13. 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
  14. 36 About 75 components Storybook + Jest(Storyshots) UI components library

    UI components Monolith Microservice Organization Testing
  15. 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
  16. 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
  17. 40 Benefits • Prepare snippets beforehand • Component oriented UI

    becomes ingrained in our minds • Re-usable components assets UI components Monolith Microservice Organization Testing
  18. 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..
  19. 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
  20. 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
  21. 46 • 2PR required most of the time • Injecting

    domain logic in component library • Misunderstandings between designer & engineer Issues UI components Monolith Microservice Organization Testing
  22. 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
  23. 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
  24. 51 UT : Jest + Enzyme Scenario Test : UI

    components Monolith Microservice Organization Testing Ref : https://github.com/cypress-io/cypress
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 58 Micro to monolith? review hotel search booking mypage top

    consumer Current App(Java) UI components Monolith Microservice Organization Testing
  31. 59 Micro to monolith? review hotel search booking mypage top

    consumer Current App(Java) UI components Monolith Microservice Organization Testing
  32. 60 Monolith? • Code consistency • Velocity(Development from scratch) •

    Consider to future separation UI components Monolith Microservice Organization Testing (Kind of generalization)
  33. 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
  34. 62 • Consider to future separation Important to develop monolith

    product with many engineers (loose coupling) … …
  35. 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
  36. 67 Performance issue Bundle size getting bigger Component become complicated

    Fix issue Develop feature UI components Monolith Microservice Organization Testing
  37. 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
  38. 70 AS IS & TO BE Domain / Product base

    TEAMS Role / Responsibility base TEAMS Search Booking Admin Service Development Site Reliability Application Reliability
  39. 73 Improve build time - Parallelize for faster build language

    files - Run tests and lints only for changed files
  40. 74 Impact! 20 devs, run 3 times per day -

    Before change: 2 hours! - After change: half an hour!
  41. 75 Improve build time - Parallelize for faster build language

    files - Run tests and lints only for changed files
  42. 76 Better User Experience - Use optimized images - Optimize

    css - Optimize bundle file - Better perceived performance