Front-Micro-Services

The Front-Micro-Services library exported as a UMD module.

Installation

Using npm:

$ npm i --save @truefalse/front-micro-services

Components

import {
  Service, // for module project
  ServiceLoader, // for parent project
  MessageEmitter // for sending and receiving messages between modules
} from '@truefalse/front-micro-services';

Service init

import { Service } from '@truefalse/front-micro-services';

const config = {
  serviceId: 'my-service' // required
};

const myService = new Service(config);

myService.loadComponent(MyReactComponent); // load component as service
myService.resizeWindow(); // tell parent to resize
myService.submitMessage({ type: 'say', payload: 'hello' }); // submit custom message to parent
myService.subscribeOnMessages(handler); // subscribe on messages from parent

Service config

Service methods

ServiceLoader init

import React from 'react';
import { ServiceLoader } from '@truefalse/front-micro-services';

const componnet = () => (
  <ServiceLoader
    id="my-service"
    src="http://my-service.com"
  />
);

ServiceLoader props

MessageEmitter init

import React from 'react';
import { MessageEmitter } from '@truefalse/front-micro-services';

const config = {
  sender: 'service', // required
  receiver: 'parent', // required
};

const messageEmitter = new MessageEmitter(config);

MessageEmitter config

MessageEmitter methods

Usage:

Create Service:

// service.js
import { Service } from '@truefalse/front-micro-services';

const serviceOptions = {
  serviceId: 'service-example' // required
};

export const {
  loadComponent, // load component as service
  resizeWindow, // resizing a service window when resizing its content
  submitMessage, // send message to parent
  subscribeOnMessages // subscription to incoming messages
} = new Service({ serviceId: 'service-example' });

Load component

// service application index.jsx
import React, { Component } from 'react';
import { loadComponent } from './service.js';
import Application from './application.jsx';
import {
  ServiceApplicationWrapper
} from './style';

class FrontendMicroServiceApp extends Component {
  render() {
    return (
      <ServiceApplicationWrapper>
        <Application />
      </ServiceApplicationWrapper>
    );
  }
}

export default loadComponent(FrontendMicroService); // load component as service

Use service's methods

// application.jsx
import React, { Component } from 'react';
import { subscribeOnMessages, submitMessage, resizeWindow } from './service';
import {
  Label,
  MessageWrapper,
  IncomingMessagesList,
  SentMessagesList,
  Message,
  Row,
  Input,
  Button
} from './style';

export default class Application extends Component {
  state = {
    value: '',
    incomingMessages: [],
    sentMessages: []
  };

  componentDidMount() {
    subscribeOnMessages(this.getMessage); // subscription to incoming messages
  }

  onChange = (e) => {
    const target = e.target;
    const value = target.value;

    this.setState({
      value
    });
  };

  submitMessage = () => {
    const { value, sentMessages } = this.state;
    const message = {
      type: 'service',
      payload: { value }
    };

    submitMessage(message); // send message to parent

    this.setState({
      sentMessages: [...sentMessages, message],
      value: ''
    })
  };

  getMessage = (message) => {
    const { incomingMessages } = this.state;

    this.setState({
      incomingMessages: [...incomingMessages, message]
    })
  };

  resizeWindow = () => {
    resizeWindow(); // resizing a service window when resizing its content
  };

  renderMessages = (message, index) => {
    return (
      <Message key={index}>
        {JSON.stringify(message)}
      </Message>
    );
  };

  render() {
    const { value, incomingMessages, submitMessage } = this.state;

    return(
      <MessageWrapper>
        <Row>
          <Input onChange={this.onChange} value={value} />
          <Button onClick={this.submitMessage}>Send message to parent</Button>
          <Button onClick={this.resizeWindow}>Resize window</Button>
        </Row>
        <Row>
          <SentMessagesList>
            <Label>Отправленные сообщения:</Label>
            {sentMessages.map(this.renderMessages)}
          </SentMessagesList>
          <IncomingMessagesList>
            <Label>Полученные сообщения:</Label>
            {incomingMessages.map(this.renderMessages)}
          </IncomingMessagesList>
        </Row>
      </MessageWrapper>
    );
  }
}

Include service in parent

import React, { Component } from 'react';
import { ServiceLoader } from '@truefalse/front-micro-services'
import MessageComponent from './message-component.jsx';
import {
  Wrapper,
  Block,
  Title,
  Paragraph
} from './style';

export default class ServiceLoaderExample extends Component {
  render() {
    return (
      <Wrapper>
        <Title>
          Service Loader Example:
        </Title>
        <Block>
          <Paragraph>
            Родительский компонент
          </Paragraph>
          <MessageComponent
            serviceId="service-id"
          />
        </Block>
        <ServiceLoader
		  id="service-example"
		  src="http://service-example.com"
		/>
      </Wrapper>
    );
  }
}

Parent communication with the service

// message-component.jsx
import React, { Component } from 'react';
import { MessageEmitter, IMessageEmitter, IMessage } from 'components/core';

import {
  Label,
  MessageWrapper,
  IncomingMessagesList,
  SentMessagesList,
  Message,
  Row,
  Input,
  Button
} from './style';

const messageEmitter: IMessageEmitter = new MessageEmitter({
  sender: 'service-example',
  receiver: 'service-example'
});

export default class MessageComponent extends Component {
  state = {
    value: '',
    incomingMessages: [],
    sentMessages: []
  };

  componentDidMount() {
    messageEmitter.subscribeOnMessages(this.getMessage);
  }

  componentWillUnmount() {
    messageEmitter.destroy();
  }

  onChange = (e) => {
    const target = e.target;
    const value = target.value;

    this.setState({
      value
    });
  };

  sendMessage = () => {
    const { value, sentMessages } = this.state;
    const message: any = {
      type: 'parent',
      payload: { value }
    };

    messageEmitter.submitMessage(message);

    this.setState({
      sentMessages: [...sentMessages, message],
      value: ''
    })
  };

  getMessage = (message: IMessage) => {
    const { incomingMessages } = this.state;

    this.setState({
      incomingMessages: [...incomingMessages, message]
    });
  };

  renderMessages = (message, index) => {
    return (
      <Message key={index}>
        {JSON.stringify(message)}
      </Message>
    );
  };

  render() {
    const { value, incomingMessages, sentMessages } = this.state;

    return(
      <MessageWrapper>
        <Row>
          <Input onChange={this.onChange} value={value} />
          <Button onClick={this.sendMessage}>Отправить сообщение сервису</Button>
        </Row>
        <Row>
          <SentMessagesList>
            <Label>Отправленные сообщения:</Label>
            {sentMessages.map(this.renderMessages)}
          </SentMessagesList>
          <IncomingMessagesList>
            <Label>Полученные сообщения:</Label>
            {incomingMessages.map(this.renderMessages)}
          </IncomingMessagesList>
        </Row>
      </MessageWrapper>
    );
  }
}