Micro Frontends with React and Redux

Alexandra, Matthias, and Prasanna have been working on a project with micro frontend architecture for the past year.

This project involves 4 teams distributed over two countries - Germany and India, each of the teams delivering one or several micro frontends that are consolidated into one product in the browser. This talk is based on our practical insights into micro frontends using React and Redux. We will discuss the differences between this technique and micro-services, our approaches to solving the common issues, the advantages it offers and the challenges it brings.

Transcript

1. MICRO FRONTENDS with React and Redux DevDay 26.05.2018 Matthias @MatthiasLaug Alexandra @astrekalova Prasanna @pvenk
2. AGENDA •Why micro frontends? •Project •UI integration •Sharing data between services •Achieving consistent design •Testing
3. Preface : A plea for the Monolith • Monolith are not a bad design choice • Micro Services constraint you to do what is optional* while creating a monolith * but should have done nonetheless
4. Don’t do Micro Services if you haven’t build successfully a monolith
5. The monolithic path
6. - One Repo for the entire application - You ship either all or none - It either scales or it doesn’t - Technology Lock In E - A - O - N
8. Limitation of scaling teams n(n-1)/2 https://en.wikipedia.org/wiki/Channel_capacity
10. Evolution
11. - Work autonomously - Choose the technology suitable for the problem - Release as you please Promises
12. The Frontend Monolith
13. Promises - Work autonomously - Choose the technology suitable for the problem - Release as you please
14. One Codebase
15. Promises - Work autonomously - Choose the technology suitable for the problem - Release as you please
16. One Tech Stack
17. Promises - Work autonomously - Choose the technology suitable for the problem - Release as you please
18. One Release
19. What we need!
20. Micro Frontend? “Do one thing well and own the complete value stream!”
21. Project
24. TECH STACK Postcss / Less Webpack create-react-app Jest Enzyme
25. ARCHITECTURE frame.js search.js financing.js order.js
26. FRAME Routing Redux store React application Fonts, min CSS service.js
27. SERVICES Routes Components Reducers Middleware frame.js
28. UI integration
29. UI INTEGRATION frame.js search.js financing.js order.js browser On loading the app
30. UI INTEGRATION frame.js search.js financing.js order.js browser On loading the app ...
31. EXPORTING DATA IN A SERVICE
32. EXPORTING DATA IN A SERVICE Webpack config UMD export
33. LOADING SERVICE DATA INTO FRAME
34. INTEGRATION OF COMPONENTS
35. Sharing data between services
36. The React Way
38. THE REACT WAY
39. THE REACT WAY
40. The Redux Way
41. THE REDUX WAY One store for the application. Store setup Services have their own sub-store.
42. THE REDUX WAY Namespaced actions app/service-name/action
43. THE REDUX WAY Services listen to key events from frame
44. The Backend Way aka Old school way
45. THE BACKEND WAY
46. THE BACKEND WAY Consumer Driven Contracts
47. Design consistency
48. DESIGN CONSISTENCY - UI search.css order.css
49. DESIGN CONSISTENCY - UI search.css order.css
50. DESIGN CONSISTENCY - UX Design Guild #0078bf 0,120,191 #00bccd 0,188,205 #7dced5 125,206,213 #00aa5b 0,170,91 #85b880 133,184,128 #bdbd32 189,189,50 #fff350 255,243,80 #fbe0ce 251,224,206 #f2ba97 242,186,151 #a17861 161,120,97 #808184 128,129,132 #eeeeee 238,238,238 #ee5ba0 238,91,160 #702269 112,34,105 #b51b58 181,27,88 #ed312f 237,49,47 #f58a33 245,138,51 #5f3c25 95,60,37 Styleguide
51. Testing strategy
52. TESTING STRATEGY Unit tests Unit Testing is a practice where the smallest testable parts of an application (units) are individually and independently tested
53. TESTING STRATEGY Integration Tests CD C Contract D B API
54. TESTING STRATEGY Functional Tests
55. TESTING STRATEGY Service level testing Application Smoke Test
56. Sustain the pace...
57. Happy to talk more !!! Matthias @MatthiasLaug Alexandra @astrekalova Prasanna @pvenk