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.

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