Setup a Micro Frontend Architecture With Vue and single-spa

A practical walkthrough on building a micro frontend architecture with multiple Vue.js apps using single-spa. Note that you can replace Vue with your framework of choice.

What are Micro Frontends?

The concept of micro frontends has been around for a while now but has been getting more attention in the past couple of years.

Evolution of the search term “Micro Frontend” on Google Trends, 2015–2020

Micro frontends extend the concept of backend micro-services: breaking down a web app (a monolith SPA) into distinct pieces. Then, through an orchestrator layer, each part is assembled (or composed) together. There are multiple ways of doing so. In our case we will do what is called client-side composition using single-spa.

When should I use this approach?

At Unbabel we currently use a micro frontend architecture for one of our new customer-facing product.

Like any technical decision, there are gains and tradeoffs. We weighted a couple of factors when deciding for this approach:

• The product to build would be comprised of at least 6 distinct areas, i.e. interfaces;
• Several multi-disciplinary teams would own and have full autonomy on delivering parts of the product;
• Have the possibility of partially changing parts of the product’s stack. Although Vue is the company’s framework of choice, we don’t know if it’ll still be what we want to use 3 years from now;

You should consider these advantages:

• Teams have a greater autonomy on delivering value into the product at different paces as their development can be largely independent from other teams;
• Ability to have totally separate repositories, test and deployment flows;
• Ability to easily override parts of an application’s interface (i.e. A/B testing, incremental rollout);
• Use different frameworks side-by-side or perform experiments without affecting other parts of your application;
• Ability to refactor parts of your product without having to change it all at once;

You should consider these caveats:

• Increased overhead to set up, deploy and maintain depending on the scope and characteristics of the product you’re building;
• More moving parts: it’s important to have a solid documentation on how everything is setup and relates as well as defining guidelines that govern how development is to be done within the architecture;
• Steeper learning for developers to understand the architecture, its lifecycle and dependencies. Hence having thorough documentation is imperative;
• Micro frontends are still relatively new and there is no one-size-fits-all methodology or well established consensus on how to achieve this. Be ready to do a fair amount of R&D depending on your case;

In my experience, this approach is best when building a relatively large web app where you want to provide flexibility to multiple teams and have enough time to dedicate to governance and documentation.

Having said that, you can definitely leverage on many of the micro frontend advantages with a team of 2-3 people or even alone.

#software-development #vuejs #micro-frontends #web-development #development #vue

What is GEEK

Buddha Community

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Setup a Micro Frontend Architecture With Vue and single-spa

A practical walkthrough on building a micro frontend architecture with multiple Vue.js apps using single-spa. Note that you can replace Vue with your framework of choice.

What are Micro Frontends?

The concept of micro frontends has been around for a while now but has been getting more attention in the past couple of years.

Evolution of the search term “Micro Frontend” on Google Trends, 2015–2020

Micro frontends extend the concept of backend micro-services: breaking down a web app (a monolith SPA) into distinct pieces. Then, through an orchestrator layer, each part is assembled (or composed) together. There are multiple ways of doing so. In our case we will do what is called client-side composition using single-spa.

When should I use this approach?

At Unbabel we currently use a micro frontend architecture for one of our new customer-facing product.

Like any technical decision, there are gains and tradeoffs. We weighted a couple of factors when deciding for this approach:

• The product to build would be comprised of at least 6 distinct areas, i.e. interfaces;
• Several multi-disciplinary teams would own and have full autonomy on delivering parts of the product;
• Have the possibility of partially changing parts of the product’s stack. Although Vue is the company’s framework of choice, we don’t know if it’ll still be what we want to use 3 years from now;

You should consider these advantages:

• Teams have a greater autonomy on delivering value into the product at different paces as their development can be largely independent from other teams;
• Ability to have totally separate repositories, test and deployment flows;
• Ability to easily override parts of an application’s interface (i.e. A/B testing, incremental rollout);
• Use different frameworks side-by-side or perform experiments without affecting other parts of your application;
• Ability to refactor parts of your product without having to change it all at once;

You should consider these caveats:

• Increased overhead to set up, deploy and maintain depending on the scope and characteristics of the product you’re building;
• More moving parts: it’s important to have a solid documentation on how everything is setup and relates as well as defining guidelines that govern how development is to be done within the architecture;
• Steeper learning for developers to understand the architecture, its lifecycle and dependencies. Hence having thorough documentation is imperative;
• Micro frontends are still relatively new and there is no one-size-fits-all methodology or well established consensus on how to achieve this. Be ready to do a fair amount of R&D depending on your case;

In my experience, this approach is best when building a relatively large web app where you want to provide flexibility to multiple teams and have enough time to dedicate to governance and documentation.

Having said that, you can definitely leverage on many of the micro frontend advantages with a team of 2-3 people or even alone.

#software-development #vuejs #micro-frontends #web-development #development #vue

How To Develop And Deploy Micro-Frontends Using Single-Spa Framework

Micro-frontends are the future of frontend web development. Inspired by microservices, which allow you to break up your backend into smaller pieces, micro-frontends allow you to build, test, and deploy pieces of your frontend app independently of each other. Depending on the micro-frontend framework you choose, you can even have multiple micro-frontend apps — written in React, Angular, Vue, or anything else — coexisting peacefully together in the same larger app!

In this article, we’re going to develop an app composed of micro-frontends using single-spa and deploy it to Heroku. We’ll set up continuous integration using Travis CI. Each CI pipeline will bundle the JavaScript for a micro-frontend app and then upload the resulting build artifacts to AWS S3. Finally, we’ll make an update to one of the micro-frontend apps and see how it can be deployed to production independently of the other micro-frontend apps.

Overview of the Demo App

Demo app — end result

Before we discuss the step-by-step instructions, let’s get a quick overview of what makes up the demo app. This app is composed of four sub-apps:

1. A container app that serves as the main page container and coordinates the mounting and unmounting of the micro-frontend apps
2. A micro-frontend navbar app that’s always present on the page
3. A micro-frontend “page 1” app that only shows when active
4. A micro-frontend “page 2” app that also only shows when active

These four apps all live in separate repos, available on GitHub, which I’ve linked to above.

The end result is fairly simple in terms of the user interface, but, to be clear, the user interface isn’t the point here. If you’re following along on your own machine, by the end of this article you too will have all the underlying infrastructure necessary to get started with your own micro-frontend app!

Alright, grab your scuba gear, because it’s time to dive in!

Creating the Container App

To generate the apps for this demo, we’re going to use a command-line interface (CLI) tool called create-single-spa. The version of create-single-spa at the time of writing is 1.10.0, and the version of single-spa installed via the CLI is 4.4.2.

We’ll follow these steps to create the container app (also sometimes called the root config):

mkdir single-spa-demo

cd single-spa-demo

mkdir single-spa-demo-root-config

cd single-spa-demo-root-config

npx create-single-spa

We’ll then follow the CLI prompts:

1. Select “single spa root config”
2. Select “yarn” or “npm” (I chose “yarn”)

3. Enter an organization name (I used “thawkin3,” but it can be whatever you want)

Great! Now, if you check out the single-spa-demo-root-config directory, you should see a skeleton root config app. We’ll customize this in a bit, but first let’s also use the CLI tool to create our other three micro-frontend apps.

Creating the Micro-Frontend Apps

To generate our first micro-frontend app, the navbar, we’ll follow these steps:

cd ..

mkdir single-spa-demo-nav

cd single-spa-demo-nav

npx create-single-spa

We’ll then follow the CLI prompts:

1. Select “single-spa application / parcel”
2. Select “react”
3. Select “yarn” or “npm” (I chose “yarn”)
4. Enter an organization name, the same one you used when creating the root config app (“thawkin3” in my case)
5. Enter a project name (I used “single-spa-demo-nav”)

Now that we’ve created the navbar app, we can follow these same steps to create our two page apps. But, we’ll replace each place we see “single-spa-demo-nav” with “single-spa-demo-page-1” the first time through and then with “single-spa-demo-page-2” the second time through.

At this point we’ve generated all four apps that we need: one container app and three micro-frontend apps. Now it’s time to hook our apps together.

#microfrontend #single-spa #javascript #architecture #microservice-architecture #web-development #microservices #hackernoon-top-story

Hire Frontend Developers

Create a new web app or revamp your existing website?

Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence. Hence, to build a visually appealing web app front-end development is required.

At HourlyDeveloper.io, you can Hire FrontEnd Developers as we have been actively working on new frontend development as well as frontend re-engineering projects from older technologies to newer.

Consult with experts: https://bit.ly/2YLhmFZ

#hire frontend developers #frontend developers #frontend development company #frontend development services #frontend development #frontend

All About Micro Frontend Architecture - Solace Infotech Pvt Ltd

Micro-frontend architecture is a lucrative approach to grow organizations as most of the time they face multiple issues at the frontend. This is understandable as it doesn’t make more sense to meddle with the codebase for frequent feature updations. Modular approach reduces the impact of upgrades and changes for one element on the rest of the codebase. Here we will discuss the micro frontend architecture and its implementation. So, let’s get started with what Micro frontend architecture is.

What Is Micro Frontend Architecture?

It is a strategy in which the traditionally monolithic frontend codebase is divided into smaller apps, ideally addressing the various business domains. These small elements creates a seamless frontend interface that delivers great user experience and is easy to scale and modify. Prior to micro-frontend architecture went mainstream, most common web app development strategy includes a frontend monolith on the top of a microservices backend. With time, data that come from various microservices made things complicated. Consider that one of the microservices went through an upgrade at the backend.

The frontend would require extensive changes, but we know developers would ignore such tasks. Convincingly, the situation would get so out of hand that a revamp would seem like just a logical solution. Micro frontend framework enables cross-functional teams to take care of end-to-end development and deployment of micro apps. Lets see the reasons to use micro frontend architecture.

Reasons To Use Micro Frontend Architecture-
1. Development Flexibility-
Micro frontend framework allows the team to select the tech stack for their microservice. This ownership improves decision making, fast track development cycles and enhances features.

2. Prefers Native Browser Over Custom APIs-
In case of web applications, there are lots of things to do to deliver great user experience. Micro-frontend principles use simple browser events for communication that are more manageable and easy to administer compared to APIs. Also it helps to attain faster rendering regardless of slow internet connections and sluggish browsers.

3. Decoupled Codebases-
Micro-frontend framework eases the management and modification of codebase. The principle of isolated team codes ensures seamless development, testing and deployment cycles. Also it strengthens the team autonomy and tech agnostic nature of micro apps.

4. Reusability-
Chatbots, payment processing are some of the common features of enterprise sites. With micro-frontend architecture, one can easily adapt existing workflow for new website. It prevents reinvention of the wheel and saves valuable resources at various instances.

5. Scalability-
Decoupled micro frontends and modular architecture allows you to easily upscale and downscale, also they lend an interactive approach to entire process. With the knowledge that new micro frontend element or change to a current one will not influence the rest of the frontend and other teams’ work, you can generally focus on continuous growth.

6. Fast Build Time-
Independent development and release cycles of different micro frontends allow parallel development, reducing the effort to manage changes and downtime. Also, a micro frontend architecture allows to do upgrades at a blistering pace and updated with the current trends.

7. Easy Maintenance-
Maintenance is an important task when frontend monoliths grow to a mammoth size. Generally developers fear making changes in the codebase because they don’t know how a small change might ripple through the system. Also, overload of dependencies may cause trouble. Micro-frontend architecture divides the complete codebase into smaller and more manageable bits with clearly defined dependencies. This becomes easy for new team members to understand and maintain the system.

How To Implement Micro Frontend Architecture?
Various strategies are used for a micro-frontend architecture approach dependent on how and where the distinctive micro frontend components are created. Let’s see the various implementation strategies.

1. Server Side Composition-
In server side composition approach, various micro rontends are composed at server level before replaying it to the browser. Sever includes the view, calls micro frontends and organizes the page before it serves. Also, you can load core content on server, preventing unnecessary loading time or blank screens for users. And they get a view of core offering, the rest of the micro apps can load in the background. For instance, Facebook divides its typical page into multiple components called ‘pagelets’, it could process and serve one pagelet at a time while the others processed in the background.

Know more at- https://solaceinfotech.com/blog/all-about-micro-frontend-architecture/

#micro #frontend #architecture #software #apps #web