Learn how to build a micro frontend with Vue.js and some vanilla JavaScript to bring modern microservices to your project.<\/b>
\nJoin the DZone community and get the full member experience. In the process of building new or modernizing older applications, backend functionality is often broken down into multiple microservices. Without modular frontends though, applications often don\u2019t gain the benefits of modern cloud-native architectures like continuous deliveries and the abilities to update components separately from each other. In my previous article Using Micro Frontends in Microservices based Architectures, I explained how to modularize a sample e-commerce web application. This allows, for example, to add rating functionality to the catalog user experience without impacting other parts of the user interface. The web application contains four user interface components (implemented with Vue.js) and two non-visible components. Single-spa (which stands for single page application) is a nice framework to build these modular web applications using a technique called micro frontends. JavaScript has had the ability to build modules in the backend for a long time. Node.js developers use this capability on a daily basis. Recently modern browsers have picked up the same capability for web applications. This allows building \u2018microservices\u2019 in the frontend by pulling together modules from potentially different sources in browsers. As always some browsers are faster than others to support new features. For browsers that don\u2019t support JavaScript modules yet, there are polyfills, for example, SystemJS, which is used by single-spa. Single-spa is a rather lightweight framework. Let\u2019s take a look at how it works. In the index.html file, three essential things are done: Additionally, the different user interface components of the application are registered. The micro frontends can be implemented with basically all common web frameworks, vanilla JS or web components. Here is an example of how the navigator micro frontend has been built with Vue.js. Definition of the public path: Main.js file of the Vue.js application: Single-spa comes with a built-in development tool. By default single-spa loads all components from the location defined in the index.html file. With the tool, you can also overwrite these locations. This allows, for example, to load most parts of the application from object storage, file servers or web servers. The modules of the application developers are working on can be served locally via mechanisms like webpack. The screenshot shows the development tool in the browser with which locations of modules can be overwritten. In my next article, I\u2019ll describe how modules in a Single-spa application can communicate via events. To learn more about application modernization, check out my blog series in the GitHub repo. Published at DZone with permission of Niklas Heidloff, DZone MVB. See the original article here. Opinions expressed by DZone contributors are their own.<\/p>\n