The main goal is to allow developers to create client applications using microservice architecture. This library aims to connect several technology-independent components into a single application in a way invisible to the end user. The finished product will be a documentation created using the library and components.
- Clear way of exposing the same mounting method from the component so that it can be mounted in another application
- Unified builder which will minimize the code and bundle it to allow it to be imported in another application
- GitHub package repository for independent components
- Hosting applicatin which would take the responsibility of mounting a specified component into a proper DOM element
- Design and implementation
This is useful when you get lost in the whole approach.
Let us start easy with React. By the final mount I mean invoking the method ReactDOM.render(component, parent), where parent is usually <div id="root"></div>. So despite what happens before the final mount, this method is what counts to us eventually.
From this we can deduce that the hosting platform needs to clearly provide a parent element to which the component should be mounted.
a) in production mode - from the hosting platform's React application
The component will be imported through a npm package, but we need to specify the element to which it should be mounted.
So this should look like so (using a Component React element) <Component src={Component} />
b) in development mode - self hosted
This is useful when you want to test how the component works when mounted using the lib.
This should work using npm link inside a component and npm link *component package* inside the host.
The component should then be imported into the hosting app.
General workflow:
- Create your component, instantiate
ComponentWrapperwith the proper mount, unmount methods andexport defaultit - Build the package
- Import the component into the hosting app and use it
From the notes above we can see that we need in fact two separate functionalities exposed from the lib.
- a
ComponentReact component, which will be responsible for rendering it into the application - a
ComponentWrapperclass, which will wrap the actual component and add themount,unmount, etc. methods
A simple React component which is only responsible for embedding the component into our React app.
This is a utility class which helps mount the component and avoid errors.
It has to be instantiated in the developer's component and export defaulted.
This is a major factor in the whole process, as it makes these components reusable.
Refer to lib/webpack.config.js for React/JS component configuration.
Angular components have their own config.
Works out of the box with ReactDOM.render
Works through a special configuration and custom build, but then uses custom elements so binding is equivalent to plan JS.
Simply parent.appendChild