Download as PDF, PPTX
Uploaded byPrasanna Venkatesan
Micro frontends with react and redux dev day
The document discusses the implementation of micro frontends using React and Redux, highlighting the advantages of micro service architecture over monolithic designs. It provides an overview of the project agenda, tech stack, data sharing, UI integration, and testing strategies. The authors emphasize the importance of achieving consistent design and successful integration while maintaining autonomy in technology choice.
Micro frontends with react and redux dev day
- 1. MICRO FRONTENDS with Reactand Redux DevDay 26.05.2018 Matthias @MatthiasLaug Alexandra @astrekalova Prasanna @pvenk
- 2. AGENDA •Why micro frontends? •Project •UIintegration •Sharing data between services •Achieving consistent design •Testing
- 3. Preface : Aplea 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 MicroServices if you haven’t build successfully a monolith
- 5.
- 6. - One Repofor 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 scalingteams n(n-1)/2 https://en.wikipedia.org/wiki/Channel_capacity
- 10.
- 11. - Work autonomously -Choose the technology suitable for the problem - Release as you please Promises
- 12.
- 13. Promises - Work autonomously -Choose the technology suitable for the problem - Release as you please
- 14.
- 15. Promises - Work autonomously -Choose the technology suitable for the problem - Release as you please
- 16.
- 17. Promises - Work autonomously -Choose the technology suitable for the problem - Release as you please
- 18.
- 19.
- 20. Micro Frontend? “Do onething well and own the complete value stream!”
- 21.
- 24. TECH STACK Postcss /Less Webpack create-react-app Jest Enzyme
- 25.
- 26. FRAME Routing Redux store React application Fonts,min CSS service.js
- 27.
- 28.
- 29.
- 30.
- 31. EXPORTING DATA INA SERVICE
- 32. EXPORTING DATA INA SERVICE Webpack config UMD export
- 33. LOADING SERVICE DATAINTO FRAME
- 34.
- 35.
- 36.
- 38.
- 39.
- 40.
- 41. THE REDUX WAY Onestore for the application. Store setup Services have their own sub-store.
- 42. THE REDUX WAY Namespacedactions app/service-name/action
- 43. THE REDUX WAY Serviceslisten to key events from frame
- 44. The Backend Way akaOld school way
- 45.
- 46.
- 47.
- 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.
- 52. TESTING STRATEGY Unit tests UnitTesting is a practice where the smallest testable parts of an application (units) are individually and independently tested
- 53.
- 54.
- 55. TESTING STRATEGY Service leveltesting Application Smoke Test
- 56.
- 57. Happy to talkmore !!! Matthias @MatthiasLaug Alexandra @astrekalova Prasanna @pvenk