Micro frontend
Download as PPTX, PDF•0 likes•1,082 views
The document discusses micro frontend architecture, which applies microservices principles to frontend development by promoting independent applications integrated into a host application. It outlines the benefits, various approaches (like backend rendering and iframes), and frameworks (such as single-spa) to implement micro frontends. Additionally, it addresses practical implementation methods, challenges, and provides references for further reading.
![Methode 2: bundles inside the host
• Steps:
1 – compress the angular apps (microfront ends) by bundling them in
one .js File
• ng build --prod --output-hashing none --single-bundle true
2 – includes: generating and adding the js files of each micro front end
to the host app manually
3 -reference those files in angular.json
ex : ,
"scripts": ["micro-component/main.js", "micro-component/main-
train.js"]](https://image.slidesharecdn.com/microfrontend-200908094934/85/Micro-frontend-16-320.jpg)
![Methode 2: bundles inside the host - continue
• Steps:
4 – add to the module.ts file of your Amgular App:
import { NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],](https://image.slidesharecdn.com/microfrontend-200908094934/85/Micro-frontend-17-320.jpg)
Micro frontend
- 1. Micro FrontEnd Approches using Angular By Amr Abd El Latief
- 2. Agenda • What is Micro FrontEnd • Micro FrontEnd Principles • Micro FrontEnd benfits • Approaches • Notes and Conclusion • Questions • Refrences
- 3. What is MicroFrontEnd Architecture • Micro-frontends is a microservice-like architecture that applies the concept of microservices to the browser side. • Instead of one single UI App, multiple Frontend Apps, and try to integrate in one host App
- 5. The Story (illustration ).. Continue
- 6. Example
- 7. MicroFrontEnd Principles • Stand-alon run • Independent Development • Stand-alone deployment
- 8. MicroFrontEnd Benefits • Many Development teams • Independent deploy • Simplify maintenance
- 9. Approaches • BackEnd Rendering • Iframe • Angular Register bundle methods • Frameworks ( Single-Spa, Mooa , luigi)
- 10. Approaches •BackEnd Rendering • Iframe • Angular Register bundle methods • Frameworks ( Single-Spa, Mooa , luigi)
- 11. BackEnd Rendering • Some techniques use nodejs app as html generator for the Front End side • This may mean that there is no Frontend separate App (layer) • Ex. const express = require('express') const app = express() const port = 4000 app.get('/', (req, res) => { res.send('<div class="row"><h1>This is the app body header</h1></div> <div class="row">This is the body Content</div>') }) app.listen(port, () => { console.log(`app listening at http://localhost:${port}`) })
- 12. Approaches • BackEnd Rendering •Iframe • Rounting(http methods) • Angular Register bundle methods • Frameworks ( Single-Spa, Mooa , luigi)
- 13. Iframe Methode • Ex. • <iframe src="http://localhost:3000" width="400" height="200"></iframe> • Advantages: 1 – simple approach 2 – content changes dynamically with the change on the hosted server 3 – suitable for the legacy large components • Disadvantages: 1 – Component Communication 2 – User experience
- 14. Approaches • BackEnd Rendering • Iframe • Rounting(http methods) •Angular Register (bundle methods) • Frameworks ( Single-Spa, Mooa , luigi)
- 15. Methode 1: bundles from Servers • Steps: 1 – compress the angular apps (microfront ends) by bundling them in one .js File • ng build --prod --output-hashing none --single-bundle true 2 - refrence the bundle .js files from the servers in the main App • <script type="text/javascript" src="http://localhost:8081/main.js"></script> • <script type="text/javascript" src="http://localhost:8082/main.js"></script> 3- we use apps with their angular registered names • <div style="margin-bottom: 10px;" id="flight-booking-container"><app-flight-booking></app-flight- booking></div> • <div id="train-booking-container"><app-train-booking></app-train-booking></div>
- 16. Methode 2: bundles inside the host • Steps: 1 – compress the angular apps (microfront ends) by bundling them in one .js File • ng build --prod --output-hashing none --single-bundle true 2 – includes: generating and adding the js files of each micro front end to the host app manually 3 -reference those files in angular.json ex : , "scripts": ["micro-component/main.js", "micro-component/main- train.js"]
- 17. Methode 2: bundles inside the host - continue • Steps: 4 – add to the module.ts file of your Amgular App: import { NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
- 18. Approaches • BackEnd Rendering • Iframe • Rounting(http methods) • Angular Register (bundle methods) •Frameworks ( Single-Spa, Mooa , Luigi)
- 19. FrameWorks • single-spa is a framework for bringing together multiple JavaScript microfrontends in a frontend application. • Use multiple frameworks on the same page (angular , react , angularjs, vue) • Deploy your microfrontends independently • Write code using a new framework, without rewriting your existing app • Lazy load code for improved initial load time • Other Frameworks (Mooa , Luigi )
- 20. Notes & Conclusion • 1 – not very simple to apply Different technologies • 2 – interconnection between microfront end isnt professionally handeled yet
- 22. References • https://dzone.com/articles/micro-frontends-benefits • https://dzone.com/articles/build-micro-front-ends-using-angular- elements-the • https://www.slideshare.net/MiguelAngelTeheranGa/micro-frontend • https://single-spa.js.org/docs/getting-started-overview