Micro_Frontend.pdf

Transcript

1. Introduction To Micro Frontends
2. It’s brought to you by : Randy Vianda Putra Hello!
3. Let’s Start
4. What are Micro Frontends ?
5. Micro Frontends Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. 5
6. What are Micro Frontends ? The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.
7. “ “Extending the microservice to frontend development.” 7
8. Core ideas behind micro frontends - Be technology agnostic - Isolate team code - Establish team prefixes - Favor Native Browser Features over Custom APIs - Build a Resilient Site
9. The concept of micro frontend ?
11. Advantages of a monolith - Easy and quick setup - Single CI/CD operation - Single codebase
12. Problem with monolith - Long development cycles - Long build time - Risk refactoring and cleanup (this works - don’t touch)
13. When they say “Micro Frontends” what do they mean? ?
14. Micro frontends aka micro apps - Breaking a web application to it’s page and / or feature - Each feature owned by a single team - Allow each feature to be developed, tested and deployed independently
15. Micro apps cons - Proprietary solution - Load time - Redudancy risk - UX consistency
17. Implementation Approaches - Iframes - Component based architecture
18. Iframes implementation
19. Iframes summary - Easy A/B testing for features - Native support on most browsers - Enables high scale delivery (similar to micro services)
20. Component based architecture implementation
21. Component based architecture summary - Each micro app is a component - Orchestrator app - Shared component are extracted and reusable
22. The Native Solution : Web Components
23. Web Components Create custom reusable HTML tags - Custom Elements - Shadow DOM - HTML Imports - HTML Templates
24. Web Components Libraries - SlimJS - Polymer - SkateJS - X-Tag - Stencil
25. Runtime components with React / Angular / Vue etc, everything is a component
26. Study Case ?
30. Custom element ?
31. this is the reference to the root DOM node of the custom element. All properties and methods of a standard DOM element like innerHTML or getAttribute() can be used.
33. Parent - child communication / DOM modification ?
36. Conclusion Micro Frontends can help big time, but they come at a cost
37. 37 Thanks Any questions? You can find me on github : @randyviandaputra