Achieving Micro Front-end using Web Components or Angular Elements

1. MICRO-FRONTEND
Manasa Ramanarayan

2. What is Micro-Frontend
1. Closely Mimics the architecture pattern of Microservice
• Independent development
• Independent testing
• Independent deployment
• Independent technology
2. Can the advantages of Microservices be applied to the front end development?

3. Deployment Architecture

4. Typical Use Case of Micro-frontend
• Acquisitions
• Quick prototypes of customers

5. TechniquesTo Achieve Micr0-Frontend
• iframe
• Using API Gateway
• Web Components (Angular Elements)

6. Using API Gateway

7. Web Components
• Allow us to write modular, reusable and encapsulated HTML elements.
• No external framework or library
• Three main technologies
 Custom elements
 Shadow DOM
 HTML templates

8. Custom Elements
• User defined Elements – Create and inform the parser how to properly
construct that element and how elements of that class should react to
changes.
• Extends HTML Element Class.
• CustomElementRegistry in the browser.
• Syntax to register a custom element
customElements.define(‘cust-ele-name’, CustomEleClasss);

9. Shadow-DOMTree
 Shadow host: The regular DOM node that the shadow DOM is attached to.
 Shadow root: The root node of the shadow tree.
 Shadow tree: The DOM tree inside the shadow DOM.
 Shadow boundary: the place where the shadow DOM ends, and the regular DOM
begins.

10. Advantages of Shadow DOM
• Hide Presentation Details
• Separating Content from Presentation
• Polymer provides a declarative mechanism for adding a shadow tree using
a DOM template.

11. HTMLTemplates
• HTML <template> tag allows us to write reusable chunks of DOM
• document.importNode(fragment.content, true);

12. Angular Elements
• Introduces in Angular 6
• Web Components in nature
• Shipped as a single JS file
• Utilizes Shadow-DOM Concept

13. DEMO
1. Shadow Dom
2. Angular element and Web Components
3. HTML Templates
4. Micro-frontend Application

14. Advantages And Disadvantages of Angular Elements
Advantages
• Promotes Code Reusability
• Independent development, testing and deployment
Disadvantages
• Bundles entire angular library in each web
component
• Bulky in nature.
• Performance Hit

15. Any Questions ?
Manasa
Slides :
GitHub : https://github.com/mansams500
LinkedIn : https://www.linkedin.com/in/manasa-ramanarayan-7a58825a/