Further design and thinking about remote components

A remote component, a Genesis concept, is a component that invokes another service through an interface. It can be a button, a module, or a page.

Embedded call

In addition to embedding pictures, videos and so on, in daily development, the most called embedding is iframe. Remote components, on the other hand, allow you to seamlessly embed the pages of another service on both the server and the client. The diagram below:

<template>
    <remote-view :id="1000" @myEvent="onMyEvent" :fetch="fetch" />
</template>
<script>
export default {
    methods: {
        fetch() {// Component that calls other services const res = await axios.get()'/ API/SSR - service name /render? url=/demo');
            if (res.status === 200) {
                return res.data;
            }
            return null
        },
        onMyEvent() {// handle remote component events}}} </script>Copy the code

API form call

Suppose you have a popbox like this:


const res = await Popup.show(options);
switch (res) {
    case 'cancel':
        // What does the user do when he clicks Cancel
        break;
    case 'confirm':
        // What does the user do when he clicks OK
        break;
}
Copy the code

If you look at the above, it looks a lot like the way our interface is called, except instead of an interface, we call a UI component.

The remote component, on the other hand, abstracts this UI component for us out of a component that really looks like an interface, so its call might look something like this

const res = await remote.get('/ API/SSR - service name /render? url=/popup');
switch (res) {
    case 'cancel':
        // What does the user do when he clicks Cancel
        break;
    case 'confirm':
        // What does the user do when he clicks OK
        break;
}
Copy the code

Micro service

The core capability of Genesis is that it can truly implement the front-end version of the microservices architecture, independently deployed, independently run, service to service invocation, through the form of API communication, it will greatly enhance the creativity of the front-end. The concept of a micro front end is just a function it incidentally supports.

Why is it needed? With the development of front-end SPA applications and the increasing size of the project, we need a very flexible service separation scheme. Using the idea of divide and conquer, we can continuously disassemble a large application into a small application. Through the form of interfaces, we can make the application separation more flexible.

The last

Genesis has been promoted so many times without attracting any attention from the community, and I would love to see the concept and design philosophy spread and lead to more mature microservices architecture solutions. Personal writing ability is a little poor, if you have any questions, welcome to discuss in issues. If you are interested in this project, welcome Star’s Vue SSR based micro front-end, micro service, lightweight solution

Transfer gate

  • The article source