Download as PDF, PPTX
![Glimpse of future: Portals <portal id="myPortal" src="https://www.example.com/"></portal> github.com/WICG/ Secure and seamless navigation Portal can be activated myPortal.activate({ data: [...] }); Other document (portal) listens to activation, loads data and react window.addEventListener('portalactivate', e => { let predecessor = e.adoptPredecessor(document); //etc](https://image.slidesharecdn.com/frontendmicroservices-oct2019m-new-191003175254/75/Front-end-microservices-architectures-and-solution-30-2048.jpg)
Uploaded byMikhail Kuznetcov
Front end microservices: architectures and solution
The document discusses the use of microservices in frontend architectures, highlighting the advantages such as better scalability, faster onboarding, and deployment. It explores modern frontend solutions including in-browser frameworks like single-spa and backend-powered solutions like tailor, while also addressing the technical and non-technical challenges involved in implementing these architectures. The presentation concludes with considerations for businesses on whether to adopt microservices based on their specific needs and team capabilities.
In this document
Powered by AI
Introduction to microservices and agenda including modern frontend solutions and challenges.
Explains microservices principles: single responsibility, developer onboarding, feature addition, deployment ease, tech freedom, and scalability.
Identifies complexities in modern frontend including size, team structure, technology diversity, and frequent upgrades.
Historical milestones in microservices and frontend development from 2010 to 2019, highlighting significant projects.
Illustrates the architecture of microservices in frontend and backend integration.
Overview of solutions for implementing microservices in frontend including single-spa and various app frameworks.
Detailed breakdown of the single-spa framework including lazy loading, routing, and lifecycle management.
Introduction to Tailor for backend microservices, highlighting its server-side rendering capabilities and setup.
Additional setup instructions for Tailor, including template structure and deployment process.
Outlines different application deployment strategies including per-route applications and usage of iFrames.
Discusses integration of web components with frameworks like Vue, mentioned as a trend in 2019.
Speculates on future directions with portals for seamless navigation and enhanced user experience.
Discusses the technical and non-technical challenges of implementing microservices, along with their advantages and considerations.
Front end microservices: architectures and solution
- 1. Microservices in frontend: architecturesand solutions Mikhail Kuznetcov, ING
- 2. Mikhail Kuznetcov Dev engineerat ING Twitter: @legkoletat Github: github.com/shershen08 Agenda
- 3. Agenda ● Microservices ● Modernfrontend ● Microservice-oriented frontend solutions ● Challenges and conclusion
- 4.
- 6. Microservices ● Single responsibilityprinciple - “granularity” ● Faster developers onboarding ● Faster adding features ● Ease of deployment* ● Freedom to choose technology* ● High scalability
- 8.
- 9. ● Complexity ● Size(100s of files, 100s of KLOC) ● Size of the teams (10s developers) ● Technological diversity ● Constant upgrades and migrations
- 11. History 2010 BigPipe by Facebook 2016 Micro-frontends.org Mosaicproject 2017 Adoption of Web components
- 12.
- 13. Architectures FRONTEND BACKEND App1 App2 App3 Infra(BE4FE, NGNIX, etc) MS1 MS2 MS3 MS5 MS4 MS6 FRONTEND + BACKEND
- 14.
- 15. Solutions overview ● In-browser:single-spa ● Server-side: tailor ● iFrames & per-route apps ● Web components as wrapper
- 16. In-browser: Single-spa github.com/CanopyTax/single-spa ● Inbrowser ● Lazy load ● Parts of one page & separate routes ● Share styles, utils, data, events etc. ● Unified lifecycle @legkoletat | Microservices in frontend: architectures and solutions
- 17. Schema #1: Single-spa Widget app1 Widget app 2 Dashboard app Single-spa + config Header app index.html
- 18. Single-spa: root config //single-spa-config.js import{declareChildApplication, start} from 'single-spa'; declareChildApplication('app-user-profile', () => import('PATH_TO/app.user.profile.js'),pathPrefix('/profile’)); declareChildApplication('app-transactions', () => import('PATH_TO/app.transactions.js'),pathPrefix('/transactions’)); //etc start();
- 19. Single-spa: configure app //app-user-profile.js export function bootstrap(props) { return Promise .resolve() .then(() => { // one-time app initialization code }); } //mount callback //unmount callback
- 20. Stitching fragments github.com/zalando/tailor ● Backendpowered (NodeJS) ● Serves parts of one page ● Provides complete toolset - Mosaic
- 21. Widget app 1 Schema #2:Tailor github.com/shershen08/tailor-vue-demo Widget app 2 Dashboard app Tailor + Webserver Header app HTML-like template @legkoletat | Microservices in frontend: architectures and solutions
- 22. Tailor server const Tailor= require('node-tailor'); const tailor = new Tailor({ templatesPath: '/built-apps-folder' }); const server = http.createServer((req, res) => { // custom server logic tailor.requestHandler(req, res) }) server.listen(process.env.PORT);
- 23. Tailor template <body> <!-- header--> <div id="header"> <span class="fragment-error">Header failed to load</span> </div> <fragment src="https://abs123.company.internal.com"></fragment> <!-- dashboard --> <fragment src="https://dashb22.company.internal.com" primary> </fragment>
- 24. Tailor app setup "scripts":{ "start": "npm run start-fragments & node tailor.js", "install-fragment-dependencies": "lerna bootstrap", "build-fragments": "lerna run build", "start-fragments": "lerna run --parallel start", "watch-fragments": "lerna run --parallel dev" }, App1 app1.min.js assets/ Serve to tailor Single repo per app: Or in monorepo: Pipeline
- 25. Single app perroute ● Easy to setup ● No direct interaction ● Transfer state ● Control styles Image from Elisabeth Engel: Break Up With Your Frontend Monolith
- 26. iFrames ● Security ● Contentadjustment - size, scroll ● Data exchange (via postMessage) ● Control styles //app 1 window.addEventListener("message", receiveMessage, false); //app 2 window.postMessage("hello there!", "http://example.com");
- 27. Widget app 1 Schema #3:App per route & iframe Widget app 2 Dashboard app Header app Separate repos, pipelines, etc Header No SPA State: via server or request params
- 28. Framework + Webcomponents ● WCs in 2019 are widespread and supported ● DOM & styles can be isolated ● From apps to single components
- 29. Framework + Webcomponents github.com/vuejs/vue-web-component-wrapper Example for Vue, same can be for Angular, React, Svelte, etc
- 30. Glimpse of future:Portals <portal id="myPortal" src="https://www.example.com/"></portal> github.com/WICG/ Secure and seamless navigation Portal can be activated myPortal.activate({ data: [...] }); Other document (portal) listens to activation, loads data and react window.addEventListener('portalactivate', e => { let predecessor = e.adoptPredecessor(document); //etc
- 31.
- 33. Technical challenges ● Morecomplex setup ● Managing state and passing data & events ● Predictable and reusable styles ● Page code size (TTI, loading, debugging) var bus = new EventBus(); bus.on('someEvent', function (data) { console.log('got ' + data); }); bus.on('someEvent', function foo () { bus.off('someEvent', foo); });
- 34. Non-technical challenges ● Onboardingnew developers ● Team composition ● Knowledge transfer ● More moving parts (compatibility, upgrades)
- 35. Pros Single Responsibility Principle Fastonboarding and adding features Ease of testing, deployment Freedom to choose technology @legkoletat | Microservices in frontend: architectures and solutions
- 36. Do you reallyneed this? 1. Business profile 2. Application usage profile 3. Size of codebase 4. Infrastructure 5. Size, stablity and maturity of team
- 37. Thank you! Questions? PresentationPDF on Slideshare