Angular, React, Vue and Co. – Web Components and Micro Apps

Angular, React, Vue and Co. – Web Components and Micro Apps

Angular, React, Vue and Co. – Web Components and Micro Apps. How to use Web Component to build a Micro App architecture. Web Development is exciting nowadays! We get new innovative technologies on a regular basis. While this is awesome it can also be overwhelming, especially when you have to maintain a product for the long term. Web Components and Micro Apps provide a remedy for this dilemma. How to use it to mix different technologies. How to implement overreaching routing, messaging and authentication

Web Development is exciting nowadays! We get new innovative technologies on a regular basis. While this is awesome it can also be overwhelming, especially when you have to maintain a product for the long term.

Web Components and Micro Apps provide a remedy for this dilemma. They allow for decomposing a big solution into small self-contained parts that can be maintained by different teams using the best technology for the requirements in question. Come to this session and find out how this idea helps with writing applications that can evolve over a decade and more.

Let’s peacefully unite the best technologies for the different parts of our big enterprise applications!

What are the key takeaways from this talk?

  • How to use Web Component to build a micro-app architecture
  • How to use it to mix different technologies
  • How to implement overreaching routing, messaging and authentication

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Why use Flatlogic React, Angular and Vue templates?

Why use Flatlogic React, Angular and Vue templates?

Flatlogic accumulated and extracted its web development knowledge into Vue, Angular and React templates!

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

React, Angular, Vue, Ember, Backbone, Stencil, Preact…. in fact there’s probably another one being released right now. Microfrontends — bringing JavaScript frameworks together (React, Angular, Vue etc)

Like most things in life, a variety of choices informs a toxic culture of mine is better than yours and you’re wrong and I’m right.

Since technology advancements have got us in this mess, is there any chance it could get us out of it as well?

Enter Microfrontends…

Introduction to Microfrontends

Modern UI development regardless of your framework has became all about component composition: You adapt to a framework’s way of doing things by following their patterns and conventions to create components usually underpinned by some sort of data model usually in the form of a service or state object.

For example: Angular has a strong opinion on how everything should be architected in the frontend. React although it only deals with components has a huge ecosystem backing it driven by a community of React-centric developers.

**Microfrontends **have gathered huge momentum recently as away of allowing multiple teams to work on a single UI using multiple frameworks, but could it really change the landscape of UI development?

In this article, I am going to spend some time looking at the SDLC (software development lifecycle) and the advantages of adopting such an architecture.

Where’s the problem?

The current trend in UI development, is to build a feature-rich and powerful browser application (single page application) using a chosen framework.

Development results in building lots of little components which are then bundled together in some sort of build process using something like webpack or rollup.

Over time the UI layer often developed by separate or multiple teams, grows and gets more difficult to maintain creating a huge monolithic frontend.

Monolithic frontend SDLC

Monolithic frontends deployment architecture

Reversing the microservice anti-pattern:

Microfrontends looks at removing that monolithic build step, and results in completely decoupled services that can be independently built and deployed:

Microfrontend SDLC

Microfrontend deployment architecture

Now our UI architecture has all the qualities of traditional microservices:

  • Highly maintainable and testable
  • Loosely coupled
  • Independently deployable
  • Organised around business capabilities
How could this bring the big frameworks together?

Since we have decoupled our UI components into many microfrontends, we no longer have to dictate which framework each component uses.

The below illustration shows how we could potentially have different application teams using different technologies to create their independently built and released microfrontend:

SDLC using multiple frameworks

There are **several ways **to solve this using technologies but let me illustrate one example:

  1. **Develop: **Three teams using a different JavaScript framework for each microfrontend
  2. Build: Wrapping their microfrontend components as web components*** ***and building their project as a JavaScript file
  3. Release: A single JavaScript file is released inside a docker container served using Ngnix

Once we have released our microfrontends, we should compose them together in a single UI layer. The communication between the microfrontends should be handled by the composition layer which should have a well defined contract.

Deployment architecture using multiple frameworks

From a user perspective they access a single application, but the developer’s ability to solve a problem is no longer limited by what single framework the application uses.

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

New ES2019 Features Every JavaScript Developer Should Know

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Top 50 Interview Questions for JavaScript Developer

Vue.js Tutorial: Zero to Sixty

React vs Angular vs Vue.js by Example

Build a Basic CRUD App with Vue.js and Node

Vue vs. React: Why I choose Vue.js

Vue vs. React: Why I choose Vue.js

Vue.js is a great framework but so is React. So why did I choose to go to Vue.js rather than React? In this video I discuss why I think Vue.js is the better option over React.

Vue.js is a great framework but so is React. So why did I choose to go to Vue rather than React? In this video I discuss why I think Vue.js is the better option over React.