Frontend microservices: architectures and solutions
•
4 j'aime•1,207 vues
Microservices Modern frontend apps Solutions Summary
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Frontend microservices: architectures and solutions
Similaire à Frontend microservices: architectures and solutions (20)
Dernier
Dernier (20)
Frontend microservices: architectures and solutions
- 1. Mikhail Kuznetcov, ING 2018 Amsterdam Microservices in frontend: architectures and solutions
- 2. About me Mikhail Kuznetcov Dev engineer at ING Twitter: @legkoletat Github: github.com/shershen08
- 3. Agenga ● Microservices ● Modern frontend apps ● Solutions ● Summary @legkoletat
- 5. Microservices approach ● Single Responsibility Principle ● Onboarding and adding features is faster ● Ease of deployment ● Freedom to choose technology ● High scalability @legkoletat
- 7. @legkoletat Modern frontend architecture ● Complexity ● Size of the teams ● Technological diversity ● Constant upgrades and migrations Typical large scale frontend app: ● 100s of files, ● 100s of KLOC, ● 10s developers
- 9. Facebook’s BigPipe (2010) https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-w eb-pages-for-high-performance/389414033919/ <script> big_pipe.onPageletArrive({id: “pagelet_composer”, content=<HTML>, css=[..], js=[..], …}) </script> @legkoletat
- 10. #1 Single-spa https://github.com/CanopyTax/single-spa @legkoletat ● In browser ● Lazy load ● Parts of one page & separate routes ● Share utils, data, events etc.
- 11. Configure app // vue-main.js export function bootstrap(props) { return Promise .resolve() .then(() => { // one-time app initialization code }); } // TODO: add mount, unmount callbacks @legkoletat
- 12. Start app // single-spa-config.js import {declareChildApplication, start} from 'single-spa'; declareChildApplication('vue', () => import('PATH_TO/vue.app.js'),pathPrefix('/vue')); // … start(); App called on events: hashchange,pushState/replaceState, special triggerAppChange
- 13. All of them!
- 14. Single-spa https://github.com/CanopyTax/single-spa-examples UtahJS 2018 talk by Justin McMurdie @legkoletat
- 15. #2 Tailor https://github.com/zalando/tailor @legkoletat ● Backend powered ● Serves parts of one page ● Part of Mosaic toolset
- 16. Tailor server @legkoletat const http = require('http'); const Tailor = require('node-tailor'); const tailor = new Tailor({ templatesPath: '/built-apps' }); const server = http.createServer((req, res) => { // custom server logic tailor.requestHandler(req, res) }) server.listen(process.env.PORT);
- 17. VueJS + Tailor https://github.com/shershen08/tailor-vue-demo Header app Widget app Dashboard app SPA Tailor + Webserver @legkoletat
- 18. 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" }, @legkoletat App1 app1.min .js assets1Build Serve to tailor Case: single repo per app Case: monorepo
- 19. Connecting fragments <body> <!-- header --> <div id="header"><span class="fragment-error">Header failed to load</span> </div> <fragment src="https://abs123.company.internal.com"></fragment> <!-- dashboard --> <div id="dashboard"><span class="fragment-error">Dashboard failed to load</span></div> <fragment src="https://dashb22.company.internal.com" primary></fragment> @legkoletat
- 20. Combining multiple Vue instances ● Main app (Vuetify) ● Item details ● Stats app ● Console terminal app
- 21. Other approaches @legkoletat ● App per route ● Iframes ● SSI ● Custom solutions following micro frontens idea (1, 2) ● opencomponents Image from Elisabeth Engel: Break Up With Your Frontend Monolith https://micro-frontends.org/
- 22. Other approaches: Web components ● Well supported standard ● Isolated DOM, styles ● Components not apps @legkoletat https://github.com/karol-f/vue-custom-element
- 23. Summary @legkoletat ● Single Responsibility Principle ● Fast onboarding and adding features ● Ease of testing, deployment ● Freedom to choose technology
- 24. Challenges ● Managing state and passing events ● Predictable and reusable styles ● Page code size (TTI, loading, debugging) @legkoletat
- 25. Practial @legkoletat Migration path 1. Check applicable approach 2. Select and cut the app fragment 3. Setup e2e for selected fragment 4. Optimize 5. Repeat 2-4 Do you really need this? 1. App user profile 2. Size of codebase 3. Size and maturity of team
- 26. Links ● Micro frontends—a microservice approach to front-end web development ● https://www.mosaic9.org/ ● https://github.com/CanopyTax/single-spa ● https://micro-frontends.org/ @legkoletat
- 27. Questions @legkoletat Follow me Presentation PDF on Slideshare