Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Micro frontends with react and redux dev day

257 views

Published on

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.

Published in: Technology
  • Be the first to comment

Micro frontends with react and redux dev day

  1. 1. MICRO FRONTENDS with React and Redux DevDay 26.05.2018 Matthias @MatthiasLaug Alexandra @astrekalova Prasanna @pvenk
  2. 2. AGENDA •Why micro frontends? •Project •UI integration •Sharing data between services •Achieving consistent design •Testing
  3. 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. 4. Don’t do Micro Services if you haven’t build successfully a monolith
  5. 5. The monolithic path
  6. 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
  7. 7. Limitation of scaling teams n(n-1)/2 https://en.wikipedia.org/wiki/Channel_capacity
  8. 8. Evolution
  9. 9. - Work autonomously - Choose the technology suitable for the problem - Release as you please Promises
  10. 10. The Frontend Monolith
  11. 11. Promises - Work autonomously - Choose the technology suitable for the problem - Release as you please
  12. 12. One Codebase
  13. 13. Promises - Work autonomously - Choose the technology suitable for the problem - Release as you please
  14. 14. One Tech Stack
  15. 15. Promises - Work autonomously - Choose the technology suitable for the problem - Release as you please
  16. 16. One Release
  17. 17. What we need!
  18. 18. Micro Frontend? “Do one thing well and own the complete value stream!”
  19. 19. Project
  20. 20. TECH STACK Postcss / Less Webpack create-react-app Jest Enzyme
  21. 21. ARCHITECTURE frame.js search.js financing.js order.js
  22. 22. FRAME Routing Redux store React application Fonts, min CSS service.js
  23. 23. SERVICES Routes Components Reducers Middleware frame.js
  24. 24. UI integration
  25. 25. UI INTEGRATION frame.js search.js financing.js order.js browser On loading the app
  26. 26. UI INTEGRATION frame.js search.js financing.js order.js browser On loading the app ...
  27. 27. EXPORTING DATA IN A SERVICE
  28. 28. EXPORTING DATA IN A SERVICE Webpack config UMD export
  29. 29. LOADING SERVICE DATA INTO FRAME
  30. 30. INTEGRATION OF COMPONENTS
  31. 31. Sharing data between services
  32. 32. The React Way
  33. 33. THE REACT WAY
  34. 34. THE REACT WAY
  35. 35. The Redux Way
  36. 36. THE REDUX WAY One store for the application. Store setup Services have their own sub-store.
  37. 37. THE REDUX WAY Namespaced actions app/service-name/action
  38. 38. THE REDUX WAY Services listen to key events from frame
  39. 39. The Backend Way aka Old school way
  40. 40. THE BACKEND WAY
  41. 41. THE BACKEND WAY Consumer Driven Contracts
  42. 42. Design consistency
  43. 43. DESIGN CONSISTENCY - UI search.css order.css
  44. 44. DESIGN CONSISTENCY - UI search.css order.css
  45. 45. 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
  46. 46. Testing strategy
  47. 47. TESTING STRATEGY Unit tests Unit Testing is a practice where the smallest testable parts of an application (units) are individually and independently tested
  48. 48. TESTING STRATEGY Integration Tests CD C Contract D B API
  49. 49. TESTING STRATEGY Functional Tests
  50. 50. TESTING STRATEGY Service level testing Application Smoke Test
  51. 51. Sustain the pace...
  52. 52. Happy to talk more !!! Matthias @MatthiasLaug Alexandra @astrekalova Prasanna @pvenk

×