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