Single-Page Application (SPA) is the main-stream modern frontend development approach. However, we quickly hit limitations of monolith SPA in the growing company with multiple product teams, different technologies and release cycles. In this talk we share how these limitations have been overcome by extending microservice architecture to React frontend using dependency injection and Lerna mono-repository.
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
From monolith web app to micro-frontends
1. From monolith SPA to micro-frontends
How we extended microservices architecture to frontend
Rustam Aliyev @rstml
Ivan Martynov @j_martyn
07/07/2018 OneDome
6. Frontend (SPA)
API Gateway (REST, GraphQL)
Backend
Database
Microservice A
Team A
Backend
Database
Microservice B
Team B
Backend
Database
Microservice N
Team N
…
10. Typical SPA Anatomy
• One entry point (index.js)
• SPA framework
• All components in one bundle
...
<script src="https://unpkg.com/react/dist/react.js"></script>
<script src="/index.js"></script>
...
11. Complex monolith SPA
• All-in-one SPA bundle
• Package per product with custom routings
• Shared components in separate packages
index.js
…App A
Package
App B
Package
App N
Package
Shared
Components
Package(s)
12. Ways to decompose monolith frontend
1. Strong isolation
Web Components / IFrame
Multiple SPAs / frameworks
Communication channels
2. Weak isolation
Dependency Injection
Single SPA / framework
Shared state store
13. …
App A
Package
Team A
App B
Package
Team B
App N
Package
Team N
Browser
Runtime
Dependency
Injection
Shared
Components
Package ver.A
Shared
Components
Package ver.B
Shared
Components
Package ver.N
Thin SPA (injector)
Shared Store (Redux, MobX)
17. Before: Local development workflow
1. Manual symlink or npm link to test
2. Publish components to NPM
3. Deploy whole app
cd ~/components
npm link
cd ~/application
npm link components
18. Monorepo
• A single repository holding the code of many packages
• Monorepo ≠ monolith
Thin
SPA
Package
App A
Package
App B
Package
Shared
Components
Package
…
App N
Package
Monorepo
Shared
Components
Package
26. Future work
• Applying Web Components
• Communication between modules via event bus
• Bolt as an alternative to Lerna
• Hierarchical dependency injection