[{"data":1,"prerenderedAt":388},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fmicro-frontends-a-modern-approach-to-front-end-development":266,"\u002Fblog\u002Fmicro-frontends-a-modern-approach-to-front-end-development-surround":381},[4],{"title":5,"path":6,"stem":7,"children":8,"page":265},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261],{"title":10,"path":11,"stem":12},"2020 - The best Javascript Frameworks","\u002Fblog\u002F2020-the-best-javascript-frameworks","blog\u002F2020 - The best Javascript Frameworks",{"title":14,"path":15,"stem":16},"5 Essential Reasons for E2E Testing","\u002Fblog\u002F5-essential-reasons-for-e2e-testing","blog\u002F5 Essential Reasons for E2E Testing",{"title":18,"path":19,"stem":20},"5 Mistakes Front-end Developers should Avoid","\u002Fblog\u002F5-mistakes-front-end-developers-should-avoid","blog\u002F5 Mistakes Front-end Developers should Avoid",{"title":22,"path":23,"stem":24},"5 Things to motivate you to perform Unit Testing","\u002Fblog\u002F5-things-to-motivate-you-to-perform-unit-testing","blog\u002F5 Things to motivate you to perform Unit Testing",{"title":26,"path":27,"stem":28},"52 Articles, 7 Books and a Pandemic","\u002Fblog\u002F52-articles-7-books-and-a-pandemic","blog\u002F52 Articles, 7 Books and a Pandemic",{"title":30,"path":31,"stem":32},"6 Levels of Autonomous Vehicles","\u002Fblog\u002F6-levels-of-autonomous-vehicles","blog\u002F6 Levels of Autonomous Vehicles",{"title":34,"path":35,"stem":36},"ADAS","\u002Fblog\u002Fadas","blog\u002FADAS",{"title":38,"path":39,"stem":40},"Ambient Intelligence","\u002Fblog\u002Fambient-intelligence","blog\u002FAmbient Intelligence",{"title":42,"path":43,"stem":44},"Best 5 Hybrid Mobile App Development Frameworks","\u002Fblog\u002Fbest-5-hybrid-mobile-app-development-frameworks","blog\u002FBest 5 Hybrid Mobile App Development Frameworks",{"title":46,"path":47,"stem":48},"Blockchains - How and Why?","\u002Fblog\u002Fblockchains-how-and-why","blog\u002FBlockchains - How and Why",{"title":50,"path":51,"stem":52},"Brain Computer Interfaces","\u002Fblog\u002Fbrain-computer-interfaces","blog\u002FBrain Computer Interfaces",{"title":54,"path":55,"stem":56},"Computational Fluid Dynamics","\u002Fblog\u002Fcomputational-fluid-dynamics","blog\u002FComputational Fluid Dynamics",{"title":58,"path":59,"stem":60},"Computer Vision","\u002Fblog\u002Fcomputer-vision","blog\u002FComputer Vision",{"title":62,"path":63,"stem":64},"Cryptography","\u002Fblog\u002Fcryptography","blog\u002FCryptography",{"title":66,"path":67,"stem":68},"Design Patterns - Why and How?","\u002Fblog\u002Fdesign-patterns-why-and-how","blog\u002FDesign Patterns - Why and How",{"title":70,"path":71,"stem":72},"Edge Computing","\u002Fblog\u002Fedge-computing","blog\u002FEdge Computing",{"title":74,"path":75,"stem":76},"Embracing Decentralized Development","\u002Fblog\u002Fembracing-decentralized-development","blog\u002FEmbracing Decentralized Development",{"title":78,"path":79,"stem":80},"Extended Reality Simplified","\u002Fblog\u002Fextended-reality-simplified","blog\u002FExtended Reality Simplified",{"title":82,"path":83,"stem":84},"Good practices for Git","\u002Fblog\u002Fgood-practices-for-git","blog\u002FGood practices for Git",{"title":86,"path":87,"stem":88},"How do browsers work","\u002Fblog\u002Fhow-do-browsers-work","blog\u002FHow do browsers work",{"title":90,"path":91,"stem":92},"How to be a Full Stack Engineer","\u002Fblog\u002Fhow-to-be-a-full-stack-engineer","blog\u002FHow to be a Full Stack Engineer",{"title":94,"path":95,"stem":96},"How to be an effective Engineer?","\u002Fblog\u002Fhow-to-be-an-effective-engineer","blog\u002FHow to be an effective Engineer",{"title":98,"path":99,"stem":100},"How to choose components for a desktop PC on your own","\u002Fblog\u002Fhow-to-choose-components-for-a-desktop-pc-on-your-own","blog\u002FHow to choose components for a desktop PC on your own",{"title":102,"path":103,"stem":104},"Industry 4.0","\u002Fblog\u002Findustry-4","blog\u002FIndustry 4",{"title":106,"path":107,"stem":108},"Industry 4.0 & Mixed Reality","\u002Fblog\u002Findustry-4-and-mixed-reality","blog\u002FIndustry 4 & Mixed Reality",{"title":110,"path":111,"stem":112},"Internet of Behaviours","\u002Fblog\u002Finternet-of-behaviours","blog\u002FInternet of Behaviours",{"title":114,"path":115,"stem":116},"Internet of Things","\u002Fblog\u002Finternet-of-things","blog\u002FInternet of Things",{"title":118,"path":119,"stem":120},"Let's talk about SOLID Principles","\u002Fblog\u002Flets-talk-about-solid-principles","blog\u002FLets talk about SOLID Principles",{"title":122,"path":123,"stem":124},"LiDAR","\u002Fblog\u002Flidar","blog\u002FLiDAR",{"title":126,"path":127,"stem":128},"Machine Vision -Transforming Industries AI","\u002Fblog\u002Fmachine-vision-transforming-industries-ai","blog\u002FMachine Vision -Transforming Industries AI",{"title":130,"path":131,"stem":132},"Mathematics in Software Engineering","\u002Fblog\u002Fmathematics-in-software-engineering","blog\u002FMathematics in Software Engineering",{"title":134,"path":135,"stem":136},"Micro Frontends - A Modern Approach to Front-End Development","\u002Fblog\u002Fmicro-frontends-a-modern-approach-to-front-end-development","blog\u002FMicro Frontends - A Modern Approach to Front-End Development",{"title":138,"path":139,"stem":140},"Optimizing for Search Engines","\u002Fblog\u002Foptimizing-for-search-engines","blog\u002FOptimizing for Search Engines",{"title":142,"path":143,"stem":144},"Physics Engine","\u002Fblog\u002Fphysics-engine","blog\u002FPhysics Engine",{"title":146,"path":147,"stem":148},"Point cloud","\u002Fblog\u002Fpoint-cloud","blog\u002FPoint cloud",{"title":150,"path":151,"stem":152},"Processes for Better Software Volume 1","\u002Fblog\u002Fprocesses-for-better-software-volume-1","blog\u002FProcesses for Better Software Volume 1",{"title":154,"path":155,"stem":156},"Processes for Better Software Volume 2","\u002Fblog\u002Fprocesses-for-better-software-volume-2","blog\u002FProcesses for Better Software Volume 2",{"title":158,"path":159,"stem":160},"Processes for Better Software Volume 3","\u002Fblog\u002Fprocesses-for-better-software-volume-3","blog\u002FProcesses for Better Software Volume 3",{"title":162,"path":163,"stem":164},"Quantum Computers","\u002Fblog\u002Fquantum-computers","blog\u002FQuantum Computers",{"title":166,"path":167,"stem":168},"Quantum Computing and its Potential Impact on Software Development","\u002Fblog\u002Fquantum-computing-and-its-potential-impact-on-software-development","blog\u002FQuantum Computing and its Potential Impact on Software Development",{"title":170,"path":171,"stem":172},"Quantum Cryptography","\u002Fblog\u002Fquantum-cryptography","blog\u002FQuantum Cryptography",{"title":174,"path":175,"stem":176},"Ray tracing - What you need to know","\u002Fblog\u002Fray-tracing-what-you-need-to-know","blog\u002FRay tracing - What you need to know",{"title":178,"path":179,"stem":180},"Reflections on how we code","\u002Fblog\u002Freflections-on-how-we-code","blog\u002FReflections on how we code",{"title":182,"path":183,"stem":184},"Robotic Process Automation","\u002Fblog\u002Frobotic-process-automation","blog\u002FRobotic Process Automation",{"title":186,"path":187,"stem":188},"Self Driving Cars - A Better Tomorrow","\u002Fblog\u002Fself-driving-cars-a-better-tomorrow","blog\u002FSelf Driving Cars - A Better Tomorrow",{"title":190,"path":191,"stem":192},"Semantic Web - A Smarter Future","\u002Fblog\u002Fsemantic-web-a-smarter-future","blog\u002FSemantic Web A Smarter Future",{"title":194,"path":195,"stem":196},"Sensor Fusion","\u002Fblog\u002Fsensor-fusion","blog\u002FSensor Fusion",{"title":198,"path":199,"stem":200},"Serverless Computing and the Future","\u002Fblog\u002Fserverless-computing-and-the-future","blog\u002FServerless Computing and the Future",{"title":202,"path":203,"stem":204},"Shaders","\u002Fblog\u002Fshaders","blog\u002FShaders",{"title":206,"path":207,"stem":208},"Smart Home Automation","\u002Fblog\u002Fsmart-home-automation","blog\u002FSmart Home Automation",{"title":210,"path":211,"stem":212},"The Perils of Ray-Tracing","\u002Fblog\u002Fthe-perils-of-ray-tracing","blog\u002FThe Perils of Ray-Tracing",{"title":214,"path":215,"stem":216},"The Psychology of Software Bugs Understanding and Preventing Common Mistakes","\u002Fblog\u002Fthe-psychology-of-software-bugs-understanding-and-preventing-common-mistakes","blog\u002FThe Psychology of Software Bugs - Understanding and Preventing Common Mistakes",{"title":218,"path":219,"stem":220},"Top 5 Advantages of MongoDB","\u002Fblog\u002Ftop-5-advantages-of-mongodb","blog\u002FTop 5 Advantages of MongoDB",{"title":222,"path":223,"stem":224},"Top Trends in Augmented Reality","\u002Fblog\u002Ftop-trends-in-augmented-reality","blog\u002FTop Trends in Augmented Reality",{"title":226,"path":227,"stem":228},"Top features of Unreal Engine","\u002Fblog\u002Ftop-features-of-unreal-engine","blog\u002FTop features of Unreal Engine",{"title":230,"path":231,"stem":232},"Unity 3D - Why to go with it?","\u002Fblog\u002Funity-3d-why-to-go-with-it","blog\u002FUnity 3D - Why to go with it",{"title":234,"path":235,"stem":236},"Virtual Reality Advantages","\u002Fblog\u002Fvirtual-reality-advantages","blog\u002FVirtual Reality Advantages",{"title":238,"path":239,"stem":240},"Virtual Test Drive & Autonomous Driving","\u002Fblog\u002Fvirtual-test-drive-and-autonomous-driving","blog\u002FVirtual Test Drive & Autonomous Driving",{"title":242,"path":243,"stem":244},"WebAssembly and Progressive Web Apps","\u002Fblog\u002Fwebassembly-and-progressive-web-apps","blog\u002FWebAssembly and Progressive Web Apps",{"title":246,"path":247,"stem":248},"What are Best Practices?","\u002Fblog\u002Fwhat-are-best-practices","blog\u002FWhat are Best Practices",{"title":250,"path":251,"stem":252},"What are Digital Twins?","\u002Fblog\u002Fwhat-are-digital-twins","blog\u002FWhat are Digital Twins",{"title":254,"path":255,"stem":256},"What makes Mixed Reality the next big thing?","\u002Fblog\u002Fwhat-makes-mixed-reality-the-next-big-thing","blog\u002FWhat makes Mixed Reality the next big thing",{"title":258,"path":259,"stem":260},"Why Game Engines?","\u002Fblog\u002Fwhy-game-engines","blog\u002FWhy Game Engines",{"title":262,"path":263,"stem":264},"Why we need User Experience Design?","\u002Fblog\u002Fwhy-we-need-user-experience-design","blog\u002FWhy we need User Experience Design",false,{"id":267,"title":134,"author":268,"body":272,"date":372,"description":373,"extension":374,"image":375,"meta":376,"minRead":377,"navigation":378,"path":135,"seo":379,"stem":136,"__hash__":380},"blog\u002Fblog\u002FMicro Frontends - A Modern Approach to Front-End Development.md",{"name":269,"avatar":270},"Aghil Jose",{"src":271,"alt":269},"\u002Fassets\u002Fimages\u002Fabout.jpg",{"type":273,"value":274,"toc":363},"minimark",[275,279,282,285,290,293,297,300,304,307,311,314,317,320,323,336,339,342,353,357,360],[276,277,278],"p",{},"Micro frontends is a software development approach that splits a front-end application into smaller, independent\npieces. These pieces or micro frontends, can be developed and deployed independently and can be combined to create\nthe complete front-end application.",[276,280,281],{},"Micro frontends are inspired by microservices, a software development approach that splits a back-end application\ninto smaller, independent services. Microservices have been shown to offer a number of benefits, including\nscalability, resilience and ease of development and deployment. Micro frontends bring the same benefits to the\nfront-end development world.",[276,283,284],{},"Here are some of the key benefits of micro frontends:",[286,287,289],"h2",{"id":288},"scalability","Scalability",[276,291,292],{},"Micro frontends can be scaled independently, which means that the overall application can be scaled more easily and\nefficiently.",[286,294,296],{"id":295},"resilience","Resilience",[276,298,299],{},"If one micro frontend fails, the other micro frontends can continue to operate. This makes the overall application\nmore resilient to failures.",[286,301,303],{"id":302},"ease-of-development-and-deployment","Ease of development and deployment",[276,305,306],{},"Micro frontends can be developed and deployed independently, which makes the development process more agile and\nefficient.",[286,308,310],{"id":309},"team-autonomy","Team autonomy",[276,312,313],{},"Micro frontends can be owned and developed by different teams, which gives teams more autonomy and flexibility.",[276,315,316],{},"Micro frontends can be implemented in a number of ways. One common approach is to use a container orchestration\nplatform such as Kubernetes to deploy and manage micro frontends. Another approach is to use a micro frontend\nframework such as single-SPA or Module Federation to bundle micro frontends together and load them into a single web\napplication.",[276,318,319],{},"Micro frontends are a relatively new approach to front-end development, but they have quickly gained popularity\namong large companies such as Amazon, Netflix and eBay. These companies have found that micro frontends offer a\nnumber of benefits, including scalability, resilience and ease of development and deployment.",[276,321,322],{},"Here are some examples of how micro frontends can be used:",[324,325,326,330,333],"ul",{},[327,328,329],"li",{},"A large e-commerce website could use micro frontends to split the front-end application into separate micro\nfrontends for each product category. This would make the application more scalable and easier to maintain.",[327,331,332],{},"A news website could use micro frontends to split the front-end application into separate micro frontends for\neach section of the website, such as news, sports and entertainment. This would make it easier to develop and\ndeploy new features for each section of the website.",[327,334,335],{},"A SaaS application could use micro frontends to split the front-end application into separate micro frontends\nfor each customer. This would make it easier to customize the front-end application for each customer.",[276,337,338],{},"Micro frontends are not a silver bullet and they are not right for every front-end application. However, they offer\na number of benefits that can make them a good choice for large and complex front-end applications.",[276,340,341],{},"If you are considering using micro frontends in your next front-end project, here are a few things to keep in mind:",[324,343,344,347,350],{},[327,345,346],{},"Micro frontends are more complex to implement than a traditional monolithic front-end application.",[327,348,349],{},"Micro frontends can introduce additional overhead in terms of performance and debugging..",[327,351,352],{},"Micro frontends require careful planning and coordination between teams.",[286,354,356],{"id":355},"micro-frontends-are-a-promising-new-approach-to-front-end-development-that-can-offer-a-number-of-benefits-for-large","Micro frontends are a promising new approach to front-end development that can offer a number of benefits for large",[276,358,359],{},"and complex applications.",[276,361,362],{},"Disclaimer : The views and opinions expressed in the article belong solely to the author, and not necessarily to the\nauthor's employer, organisation, committee or other group or individual.",{"title":364,"searchDepth":365,"depth":365,"links":366},"",2,[367,368,369,370,371],{"id":288,"depth":365,"text":289},{"id":295,"depth":365,"text":296},{"id":302,"depth":365,"text":303},{"id":309,"depth":365,"text":310},{"id":355,"depth":365,"text":356},"2023-09-24","A peep into the world of micro front-ends","md","\u002Fassets\u002Fimages\u002Fblog\u002F240923\u002Ftitle.jpg",{},4,true,{"title":134,"description":373},"NqRhvIcArKmJFc7M0pFU1Jd1m61Pf4kcpsSjweLjvbU",[382,385],{"path":75,"title":74,"description":383,"date":384},"The advantages of using decentralised development","2023-10-01",{"path":243,"title":242,"description":386,"date":387},"Progressive Web Apps (PWAs) and WebAssembly","2023-09-17",1790369317819]