A distributed micro frontend engine which helps building application with remote elements (UI / business / logic / app. sub tree / ...etc.). MondrianJS is the microservices architecture but for frontend.
A good analogy would be this Mondrian painting (Discover Piet Mondrian)
Where the black outter frame is your main application that will act as a host and each colored square is a subpart of you app (UI+business) that can be either part of your main bundle or a remotely stored (not part of your core app).
MondrianJS has been designed for ReactJS application but you can also use it with other lib/frameworks.
At the moment MondrianJS only supports amd modules format. (cjs and umd are in the roadmap)
In a sense, yes. Remote element can be generated on the fly / when requested by your application.
Not really. Using Iframes implies there is no shared resources between the loaded element. If 2 remotes content used lib. X, then the library will be loaded twice. With MonrianJS approach dependencies, communications, styles are shared and controlled by your main application.
Of course you have to control what your application is executing, but since MondrianJS will provide all the required dependencies you have quite a good control over what your application is doing.
Yep, even if it has been created to distribute a ReactJS application, it also works for plain JS modules.
Sure ! but that's not the real goal of MondrianJS. If you want to reduce your bundle and/or reduce your application loading time, you should have a look to code spliting.
MondrianJS provides a caching system so your remote dependency will be fetched only once.
¯_(ツ)_/¯ Actually I never really used and look at RequireJS implementation.
MondrianJS: The core engineMondrianJS-React: The declarative React wrapper that can be used to load up remote components. (https://github.com/GuillaumeNachury/MondrianJS-React)MondiranJS-Transformer: A node command line tool that generate a ready to be served remote element. (https://github.com/GuillaumeNachury/MondrianJS-transformer)
yarn add mondrianjs
real basic usage
import React from 'react';
import {Mondrian} from 'mondrianjs';
const mdr = new Mondrian({
endpoints : [{name:'local', url:'http://127.0.0.1:2601'}],
depsMap : {"react":React}
});
mdr.load({identifier:'bundle.js', endpointName:'local'})
.then(comp => console.log('My remote module ', comps))
.catch(err => console.log(err));
Starts the engine and define some settings.
config.endpoints : An array that defines a conveniente map of endpoints, and then only use aliases. Format [{name:'xxx', url:'https://aaaaa.zzz.ee'}];
config.depsMap : A map used to resolve remote loaded component depensencies. Format {'import name from the remote module': {The object to inject} }
consfig.verbose : A flag used to get console logs from the engine. Default false.
Loads a remote module from an endpoint and returns it thru a Promise
params.endpointURL : The base URL where MondrianJS will fetch the module from.
params.endpointName : If the engine is initialized with the endpoints paramater you can simply use an endpoint alias.
params.identifier : Name of the file to load from the endpoint.
params.selector : If the remote module has a multi export, this parameter specify what should be grabed from the module.
Preload some remote modules. The target can either be an object or an Array. Target format is the same as the load() params except for the selector.
target.endpointURL : The base URL where MondrianJS will fetch the module from.
target.endpointName : If the engine is initialized with the endpoints paramater you can simply use an endpoint alias.
target.identifier : Name of the file to load from the endpoint.
see (MondrianJS-React Wrapper) or MondrianJS-ReactAppExample