There is no doubt that one of the most emerging terms in today Tech Community is MicroFront end Architecture, in this Lecture, we will go through the Basics of Micro-FrontEnd Architecture Concept, and will discuss with Examples, How some techniques to implement it, Also will discuss if its suitable for you to migrate from old single Front-End App to Micro-FrontEnd Architecture.

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

4. The Story (illustration )

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