how to slice your monolithic webapp using microapps architecture
TRANSCRIPT
![Page 1: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/1.jpg)
How to slice your monolithic webapp
using
value.quality.scale
MicroApps architecture
![Page 2: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/2.jpg)
@yonatanm
value.quality.scale
![Page 3: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/3.jpg)
Outbrain
0.5B> 250BUnique Visitors
RECS PER Month
![Page 4: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/4.jpg)
once upon a time...
![Page 5: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/5.jpg)
* Multiple teams* Multiple products* More and more features
* Multiple teams* Multiple products* More and more features
A few years later
![Page 6: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/6.jpg)
What's the tech-debt level ?
Question #1
![Page 7: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/7.jpg)
Answer #1
![Page 8: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/8.jpg)
Now what ?
![Page 9: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/9.jpg)
Want to buy a MicroService?
* Hiding impl. details* Deploy independently* Robustness by isolation* Independence / Autonomy
* Hiding impl. details* Deploy independently* Robustness by isolation* Independence / Autonomy
![Page 10: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/10.jpg)
MicroServices naive Arch
app1
AuthO
APP2
AuthO
APP3
AuthO
MicroApp1
http://mysite1/**http://mysite2/**http://mysite3/**
AOTHEN
SECURITY
SESSION
AOTHEN
SECURITY
SESSION
AOTHEN
SECURITY
SESSION
![Page 11: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/11.jpg)
* Sessions
* Security
* Allow-Origin CORS
* Reuse common interceptors?
* Sessions
* Security
* Allow-Origin CORS
* Reuse common interceptors?
MicroServices naive Arch
![Page 12: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/12.jpg)
MicroApps Arch
Authentication && SECURITY && Session
app1/ /**Proxy
app2/ /**Proxy
app1
AuthO
APP2
AuthO
APP3
AuthO
app3/ /**Proxy
MicroApp1
GateWAY
Service
http://mysite/app1http://mysite/app2 http://mysite/app3
![Page 13: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/13.jpg)
How to get there?
Question #2
![Page 14: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/14.jpg)
How to get there?
Answer #2
![Page 15: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/15.jpg)
* Define your areas
* Map the areas
* Change routs if needed
* Define your areas
* Map the areas
* Change routs if neededapp1/
/**app2/
/**
Step #1 towards MicroApps
LEGACYwebapp
![Page 16: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/16.jpg)
Proxy and all that Jazzapp1
Auth
MicroApp
App1Proxy
* Routing* Handles inbound request* Handles outbound responses
* Routing* Handles inbound request* Handles outbound responses
LegaCYWeb App
app1/
/**GateWAYService
![Page 17: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/17.jpg)
The Proxy Protocol
App1Proxy
app1
Auth
MicroApp
* Session header
* Specific cookie
* User's IP
* Session header
* Specific cookie
* User's IP
* Body
* Encoding
* HTTP Status
* Body
* Encoding
* HTTP StatusLegaCYWeb App
GateWAYService
![Page 18: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/18.jpg)
Know your Proxy
* The Proxy Protocol
* Connection pool
* Performance metrics
* Failures metrics
* logs
* The Proxy Protocol
* Connection pool
* Performance metrics
* Failures metrics
* logs
![Page 19: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/19.jpg)
Infrastructure as a service
* Session as a service* SSL* Access logs* Security* Monitoring* CDN integration
* Session as a service* SSL* Access logs* Security* Monitoring* CDN integration
Authentication && SECURITY && Session
app1/ /**Proxy
app2/ /**Proxy
app3/ /**Proxy
GateWAY
Service
![Page 20: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/20.jpg)
Technology
* Custom technology stack * Reducing tech debt* Gradual upgrade* Velocity && Quality
* Custom technology stack * Reducing tech debt* Gradual upgrade* Velocity && Quality
![Page 21: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/21.jpg)
Culture
* Autonomy and Freedom
* Clear ownership
* Focus
* Responsibility <> Accountability
* Autonomy and Freedom
* Clear ownership
* Focus
* Responsibility <> Accountability
I did it my Way
Giving ppl as much as possible to do their jobGiving ppl as much as possible to do their jobfreedom
![Page 22: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/22.jpg)
* Another moving part
* Latency
* hard to compete HAProxy
* no more one CSS to rule them all
* Another moving part
* Latency
* hard to compete HAProxy
* no more one CSS to rule them all
![Page 23: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/23.jpg)
* Initiated ~ 2yrs ago* 6+ MicroApps – different teams – different technology stack* Gradual roll-out * WIP - Rewrite Gateway Service
* Initiated ~ 2yrs ago* 6+ MicroApps – different teams – different technology stack* Gradual roll-out * WIP - Rewrite Gateway Service
In MicroApps
![Page 24: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/24.jpg)
Future work
* Circuit breaker
* Reusing web resources
* Open source it ?
* Circuit breaker
* Reusing web resources
* Open source it ?
![Page 25: How to slice your monolithic webapp using MicroApps architecture](https://reader033.vdocument.in/reader033/viewer/2022051708/58808b0b1a28ab35718b693d/html5/thumbnails/25.jpg)
Thank You
Q && A
value.quality.scale
Want to know more about
Contact me
Want to know more about
Contact me
Outbrain's Architecture?