4

I have a project which requires various developers to build components / modules for an app at any given time.

However, each component can be written in a different framework or library e.g. URI/app1 is a search component written in React, and URI/app2 is a results component written in AngularJS.

I'm trying to find a way so that given a URI if URI/subdomain is served I can serve a module which is fully encapsulated (technology wise) from other sub paths & the URI.

Does something along these lines exist? Is there a methodology or approach which will allow an app to holistically serve sub-modules (not fragments of a single page, but rather full pages under a unique path) and remain isolated to other front-end code, but still allow data to be passed across the technologies used, so that a developer could essentially come in and create a component / page / module under a subpath using the technology of their choice and have it be accepted cohesively across the existing app written in potentially varying technologies?

Kyle G
  • 4,347
  • 4
  • 26
  • 39
  • 2
    There is a tool called [single-spa](https://github.com/CanopyTax/single-spa) (some of my co-workers built), that might work. It allows a mixture of different types of frameworks. – KevBot Nov 30 '16 at 04:43
  • iframes, I suppose. I understand this is how the Spotify desktop application works: each UI widget is a separate Chromium "window" so each widget can have its own dependencies - which means the playlist editor could use a different jQuery version than the account details editor, for example - the downside is utterly reprehensible memory-usage and overhead. A media player should not need 300MB RAM just to open-up. – Dai Nov 30 '16 at 04:43
  • 1
    Angular allows for isolation between controllers. – tom redfern Nov 30 '16 at 10:00

1 Answers1

4

The answer for your question is yes! Microservices - composite UI is quite new in frontend world. Many big companies are dropping big monolithics apps and starting development in microservices way - so colled composite UI.

[Tailor Mosaic]

Each application can be built in different frameworks React, Angular, Vuejs by separate teams. You can base your concept application on Zalando stack - Mosaic Framework or just grab one part witch is Tailor.js with MIT licence and build your own one on top of that. It will definitely require from you additional parts like reverse proxy and communication bus/pipe.

[Polymer]

This is not microservices aproach but everything depends on scale of your project. Sometimes web components are more than enough. To face problem of reusable components built in different technologies you can use Polymer framework - Web Components.

[React way]

React is grate library for building complicated user interfaces. You can do almost everything – build generic components or whole apps that will be injected in some kind react common frame. Writing special mechanism for injecting applications in runtime from different origins as app bundle files is possible.

[Communication & styles]

For sure you will face problems with communication between application / components. There is few possibilities to make sure that you're components/apps will talk with each other. Basic solution is to use some kind of API like RxJs to build your own communication bus with custom functions or just use existing one pubs/sub event bus. If you will have different react apps with their own stors (the best solution is to have one store but nothing is stopping you from having many) you can think about some mechanisms like redux modules or dynamically loaded reducers to marge them together and unplug them when no more needed.

Building composite ui will also cause a lot problems with styling so it is a good idea to think about some kind of strategy like BEM/SMACSS or library like react css modules to avoid css redundancy.

Useful links:

Project Mosaic | Microservices for the Frontend

Zalando Tailor

Micro frontends—a microservice approach to front-end web development

Designing a microservice-oriented application

Working example

React frontend microservices architecture

Example communication bus

Postaljs

Krzysztof Lach
  • 1,280
  • 1
  • 12
  • 19