Micro Frontends with React and Redux

Transcript

1. MICRO FRONTENDS with React and Redux Prasanna N Venkatesan prasann@thoughtworks.com https://prasans.info/me/ Frontend Night 20.03.2018 Alexandra Strekalova astrekal@thoughtworks.com @pvenk @astrekalova
2. AGENDA •Micro frontends •Project •UI integration •Sharing data between services •Achieving consistent design •Testing 2
3. MICROSERVICE ARCHITECTURE 3 Search Financing Order Frontend Orchestration layer
4. MICRO FRONTENDS 4 Frontend Backend Frontend Backend Search Order Financing Frontend Backend
7. TECH STACK 7 Postcss / Less Webpack create-react-app Jest
8. ARCHITECTURE frame.js search.js financing.js order.js browser
9. FRAME Routing Redux store React application Fonts, min CSS service.js
10. SERVICES .js, .css routes components reducers middleware frame.js
11. •UI Integration in browser (rendering) •Communication between services •Styling consistency •Testing FRONTEND INTEGRATION 1 1
12. 1 2 UI integration
13. •During build time •During run time, at client side •During run time, at server / middleware side INTEGRATION IN BROWSER 1 3
14. BUILD TIME INTEGRATION frame.js search.js financing.js order.js npm
15. Pros: •NPM offered a very good dependency tree management •1 network call to download the entire JS •Independent development across teams INTEGRATION USING NPM 1 5 Cons: •A monolith built by different teams •Non atomic deployments
16. INTEGRATION DURING RUN TIME frame.js search.js financing.js order.js browser
17. Pros: •Independent teams •Independent deployments •No versioning issues INTEGRATION USING NPM 1 7 Cons: •Multiple network calls to load the app •Overall increase in the payload
18. Sharing data between services 1 8
19. The React Way 1 9
21. THE REACT WAY 2 1
22. THE REACT WAY 2 2
23. The Redux Way
24. THE REDUX WAY 2 4 One store for the application. Store setup Services have their own sub-store.
25. THE REDUX WAY 2 5 Namespaced actions app/service-name/action
26. THE REDUX WAY 2 6 Services listen to key events from frame
27. The Backend Way aka Old school way
28. THE BACKEND WAY
29. THE BACKEND WAY Consumer Driven Contracts
30. Design consistency
31. DESIGN CONSISTENCY - UI search.css order.css
32. DESIGN CONSISTENCY - UI search.css order.css
33. DESIGN CONSISTENCY - UX
34. DESIGN CONSISTENCY - UX Design Guild
35. 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
36. Testing strategy
37. TESTING STRATEGY 3 7 Unit tests Unit Testing is a practice where the smallest testable parts of an application (units) are individually and independently tested
38. TESTING STRATEGY 3 8 Integration Tests CD C Contract D B API
39. TESTING STRATEGY 3 9 Functional Tests
40. TESTING STRATEGY 4 0 Service level testing Application Smoke Test
41. THANK YOU