Large react product with 20+ frontend engineers in Rakuten Travel

Slide 1

Slide 1 text

Large react product with 20+ FrontEnd Engineers in Rakuten Travel June 26, 2019 Takashi Yokomichi / Takahiro Fujii / Cristian Carlesso Travel UI Section. Rakuten, Inc.

Slide 2

Slide 2 text

2 Yokomichi, Takashi SRE Cristian, Carlesso Application Reliability Fujii, Takahiro Service Development

Slide 3

Slide 3 text

3 Background / Construct Foundation Service Implement / Learn Improve Application Today’s Agenda

Slide 4

Slide 4 text

4 We have many booking services! Bus, Air, etc Domestic Hotel In-bound Hotel Rent-a-Car

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 Mission Rakuten Travel aim to be No1 Travel Platform in the world

Slide 7

Slide 7 text

7 Hotel Car Bus We needed a new platform so business could operate on it Travel Platform ( Generalize data schema, i18n ) …

Slide 8

Slide 8 text

8 SPA API Gateway Microservices We design a new architecture

Slide 9

Slide 9 text

9 Fortunately, we had time while all the requirements were defined!

Slide 10

Slide 10 text

10 So, we made full-stack framework. developers could focus on service development There was no de-facto standard at the time

Slide 11

Slide 11 text

11 What are the features ?

Slide 12

Slide 12 text

12 Everything except service features requirement fetch API module webpack hell server process stub i18n tracking For analytics / monitoring blueprint library dependency hell

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 stub

Slide 15

Slide 15 text

15 As a contract development / debug For review snapshot, stub, code review in single PR UI Automation test stub is used...

Slide 16

Slide 16 text

16 stubs are used as contract UI Developer API Developer Spec / Stub

Slide 17

Slide 17 text

17 Proceed development using stubs UI Developer Stub Component Component

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 Want to try more automatic / systematic way like a CDC in the future CDC: Consumer-Driven-Contract

Slide 20

Slide 20 text

20 i18n

Slide 21

Slide 21 text

21 yarn start App Instance Translation files been made during Build process df731176…. : Hello {Name}! 44922ae2…: Good night {Name}! … en ja Starting App

Slide 22

Slide 22 text

22 Hello Cris! props and Accept-Language Request header to be… df731176…: Hello {Name}!

Slide 23

Slide 23 text

23 We are now ready for development!

Slide 24

Slide 24 text

24 Let’s develop $%

Slide 25

Slide 25 text

25 Case Study Light & Dark Things we learned though development Takahiro Fujii

Slide 26

Slide 26 text

26 What kind of products we are developing

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 Consumer APP Admin APP

Slide 30

Slide 30 text

30 Consumer Admin Booking Search Previously we lead each domain

Slide 31

Slide 31 text

31 UI components Monolith / Microservices Organization Testing

Slide 32

Slide 32 text

35 UI components Monolith Microservice Organization Testing

Slide 33

Slide 33 text

36 About 75 components Storybook + Jest(Storyshots) UI components library UI components Monolith Microservice Organization Testing

Slide 34

Slide 34 text

37 Benefits we got UI components Monolith Microservice Organization Testing

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Benefit to consider UI components • Component oriented UI becomes ingrained in our minds

Implementing UI components lib forces us to do component oriented UI eliminating the need for duplicated code

Slide 37

Slide 37 text

40 Benefits • Prepare snippets beforehand • Component oriented UI becomes ingrained in our minds • Re-usable components assets UI components Monolith Microservice Organization Testing

Slide 38

Slide 38 text

41 Benefit to consider UI components • Re-usable component assets Consumer Admin Other

Slide 39

Slide 39 text

42 Issues we faced UI components Monolith Microservice Organization Testing

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

46 • 2PR required most of the time • Injecting domain logic in component library • Misunderstandings between designer & engineer Issues UI components Monolith Microservice Organization Testing

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

48 Countermeasures UI components Monolith Microservice Organization Testing

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

50 Testing

Slide 48

Slide 48 text

51 UT : Jest + Enzyme Scenario Test : UI components Monolith Microservice Organization Testing Ref : https://github.com/cypress-io/cypress

Slide 49

Slide 49 text

52 Beneﬁt 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

Slide 50

Slide 50 text

53 Scenario Test Every component has data-locator-id to identify component (Blueprint automatically generate, or manually define) Continue 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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

57 Monolith / Microservices

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

60 Monolith? • Code consistency • Velocity(Development from scratch) • Consider to future separation UI components Monolith Microservice Organization Testing (Kind of generalization)

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

62 • Consider to future separation Important to develop monolith product with many engineers (loose coupling) … …

Slide 60

Slide 60 text

64 Organization

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

66 Issue we faced once we developed UI components Monolith Microservice Organization Testing

Slide 63

Slide 63 text

67 Performance issue Bundle size getting bigger Component become complicated Fix issue Develop feature UI components Monolith Microservice Organization Testing

Slide 64

Slide 64 text

68 Why does this happen? UI components Monolith Microservice Organization Testing

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

70 AS IS & TO BE Domain / Product base TEAMS Role / Responsibility base TEAMS Search Booking Admin Service Development Site Reliability Application Reliability

Slide 67

Slide 67 text

71 Complex applications comes with tradeoffs Developer experience User experience

Slide 68

Slide 68 text

72 Measure KPI

Slide 69

Slide 69 text

73 Improve build time - Parallelize for faster build language files - Run tests and lints only for changed files

Slide 70

Slide 70 text

74 Impact! 20 devs, run 3 times per day - Before change: 2 hours! - After change: half an hour!

Slide 71

Slide 71 text

75 Improve build time - Parallelize for faster build language files - Run tests and lints only for changed files

Slide 72

Slide 72 text

76 Better User Experience - Use optimized images - Optimize css - Optimize bundle file - Better perceived performance

Slide 73

Slide 73 text

77 We are hiring! https://talent.rakuten.careers/jobs/senior-front-end-engineer-travel-%EF%BC%9Atsdd-9568 Please feel free to contact us [email protected] [email protected] [email protected]

Slide 74

Slide 74 text

No content