My beloved React micro frontends 😍

#microfrontends #javascript #react #frontend

import React from "react";
import { unit, useUnit } from "realar";

const Ticker = unit({
  current: 0,
  after: 2,
  get next() {
    return this.current + 1;
  },
  tick() {
    this.current += 1;
  },
  synchronize() {
    this.after = this.next + 1;
  }
});

export default function App() {
  const { current, next, after, tick } = useUnit(Ticker);
  return (
    <>
      <h1>Realar ticker</h1>
      <p>Current: {current}</p>
      <p>Next: {next}</p>
      <p>After: {after}</p>
      <p>
        <button onClick={tick}>tick</button>
      </p>
    </>
  );
}

Crazy usage 😜 on codesandbox

import React from "react";
import {
  unit,
  useService,
  changed,
  service,
  action,
  inst,
  chan,
  useUnit,
  Zone,
  Service
} from "realar";

const MaxBoost = action();
const GetUser = chan();

const Config = unit({
  step: 1,
  inc() {
    this.step += 1;
  },
  [MaxBoost]() {
    console.log("x10 speed!", this.step);
    this.step *= 10;
  }
});

const Ticker = unit({
  config: service(Config),
  om: inst(Config),
  after: 0,
  current: 0,
  get next() {
    return this.current + this.step;
  },
  get step() {
    return this.config.step;
  },
  tick() {
    this.current += this.step;
  },
  construct() {},
  destruct() {},
  synchronize() {
    this.after = this.next + this.step;
    if (changed(this.after > 4)) console.log("Fire!");
    if (changed(this.after > 10)) {
      MaxBoost();
    }
  }
});

const BackendFF = unit({
  async [GetUser](id) {
    return await new Promise(r => setTimeout(() => r("John Doe " + id), 1000));
  }
});

const User = unit({
  user: "not loaded",
  concurrent: 0,
  get loading() {
    return this.concurrent > 0;
  },
  async load() {
    this.concurrent++;
    this.user = await GetUser(1);
    this.concurrent--;
  }
});

function App() {
  const { current, next, tick, step } = useService(Ticker);
  const {
    after,
    config: { inc },
    om: { step: om_step }
  } = useService(Ticker);
  const { user, load, loading } = useUnit(User);
  return (
    <div>
      <h1>Realar ticker</h1>
      <p>Current: {current}</p>
      <p>Next: {next}</p>
      <p>After: {after}</p>
      <button onClick={tick}>tick</button>
      <p>Step: {step}</p>
      <button onClick={inc}>inc</button>
      <p>Om: {om_step}</p>
      <p>User: {loading ? "loading..." : user}</p>
      <button onClick={load}>load</button>
      <Service unit={BackendFF} root />
    </div>
  );
}

export default function Root() {
  return (
    <>
      <Zone>
        <App />
      </Zone>
      <Zone>
        <App />
      </Zone>
    </>
  );
}

betula/realar on github

Top comments (2)

bitten • Jun 24 '20

What does chan, Zone, inst, and Service do?

Slava Birch • Jul 15 '20

Hi, bitten!
Thank you for your interest!
And thanks a lot for your feedback. With your help I made some several changes in library external interface:

I renamed chan to call because its interface for a remote (between zones/services) async call.
I removed inst keyword, and you can see a fresh example at realar github readme, now you can use unit as a factory now:

const todo = unit({
  items: [
    { title: 'Todo 1' },
    { title: 'Todo 2', completed: true }
  ],
  get completed() {
    return this.items.filter(i => i.completed);
  },
  get all() {
    return this.items;
  },
  add(title, completed = false) {
    this.items = [ ...this.items, { title, completed }];
  },
  toggle(i) {
    const { items } = this;
    const index = items.indexOf(i);
    this.items = [
      ...items.slice(0, index),
      { ...i, completed: !i.completed },
      ...items.slice(index+1)
    ];
  }
});

const panel = unit({
  todo: todo(),
  sidemenu: [],
  get todos() {
    return this.todo.all;
  },
// ...

What about Zone. It's a little bit difficult for answering in comment here and need some time for me, for prepare a good answer for that very important moment.

Cheers,