isomor-example v0.4.0

Isomor

npx isomor

isomor give the possibility to develop a web application in a single project by abstracting the layers between frontend and backend. Instead to implement an API, using REST or graphql, isomor will allow you to call the server functions directly from the UI code, without to think about the communication protocol. Isomor will take care to generate automatically those layers for you.

Since there is no more separation between the backend and the frontend, there is much more consistency and a better overview of the project. It remove lot of overhead and let you focus on implementing features.

See following example:

./src-isomor/server/uptime.ts - function executed on server

export async function getServerUptime(): Promise<number> {
    return process.uptime();
}

./src-isomor/Uptime.tsx - UI components

import React from 'react';
import { getServerUptime } from './server/uptime';

export const Uptime = () => {
    const [uptime, setUptime] = React.useState<number>();
    const call = async () => setUptime(await getServerUptime());
    React.useEffect(() => { call(); }, []);
    return (
        <p><b>Server uptime:</b> { uptime || 'loading...' }</p>
    );
};

As you can see, when the component mount, the app is calling directly getServerUptime located on the server. During build process, isomor transpile getServerUptime to a query function that will call the backend through an http request.

This tool has been implemented for TypeScript, since types bring lot of value to this concept. Since it is minimalistic and very generic, this tool can work with any kind of library, you can find some examples with React, Vue and Angular in the repository.

>> Online documentation <<

Example

git clone https://github.com/apiel/isomor.git
cd packages/examples/react
# for VueJs
# cd packages/examples/vue
yarn
yarn demo

Open http://127.0.0.1:3005/

or in dev mode:

yarn dev

Note: yarn dev is using the npm library run-screen to start processes in parallel

Find lot of different example in the folder packages/examples, for React, VueJS and as well Angular + NestJs.

Getting started

To install isomor with React, Vue or Angular just run the following command:

npx isomor

Getting started with React

Click here to see how to use isomor with React.

Getting started with Vue

Click here to see how to use isomor with VueJs.

Getting started with Angular and NestJs

Click here to see how to use isomor with Angular and NestJs.

Advanced guides

• Request / Response context
• Shared class
• TypeORM
• Server
• Config
• Babel