@js-factory/onejs-react

onejs

A Javascript framework for building a high-performance web application.

Motivation

Onejs provides an abstract layer over a javascript library. It enables developer/organization to write a vanilla javascript code and bind it with the framework you choose to build your application with.

It's hard to switch between frameworks if your performance budget does not meet with one

Considering all top javascript library adds a considerable amount of initial javascript chunk into your application bundle i.e. react size is ~30kb. For any larger application, switching from one framework to another is a relatively complex task and requires a lot of effort and time. onejs try to solve this problem and reduce the time and effort require in switching frameworks.

Classical component go polluted over time and becomes hard to maintain

This has been a common problem that after certain amount of time your class component gets complex and a lot of business logic being written into a single javascript file. With the functional programming approach, we are trying to solve some of these problems. A developer needs to create small functions and attach those to your component. This allows you to maximize the usage of vanilla javascript.

Installation

npm i -S @js-factory/onejs

Dependency

You need to install preact in the host application.

npm i -S preact

APIs

Onejs offers the following APIs.

• Component
• withStore
• createStore
• actionCreator

Component

Component is a higher-level component. It creates a react or preact component and binds all given properties and methods to it.

Please read hoc documentation for further details.

A typical component declaration looks like this.

// FooComponent.js

import { Component } from '@js-factory/onejs';
import componentDidMount from './hooks/componentDidMount';
import onClickHandler from './handlers/onClickHandler';
import someOtherHandler from './util/someOtherHandler';
import FooTmpl from './FooTmpl';

@Component({
   componentDidMount,
   someOtherHandler,
   onClickHandler,
   state: {
       x: 0
   },
   instanceProps: {
       y: 0
   },
   template: FooTmpl
})
export default class FooComponent { }

withStore

Every frontend application (read SPA) needs a persistent data store. The application should be able to maintain its state during back & forth page transitions. withStore connects the component with application's data store.

Configuring withStore is very simple. It has two options. 1) watcher , 2) action

watcher

Data store of an application is a big JavaScript objects. It holds the application state. watcher represents the keys in applications store (read a big javascript object). When you define watcher in withStore, onejs connects your component with the application store and any changes to these properties will update (re-render) the component.

// App data store

const appDataStore = {
   todos: [
       // todo
   ],
   counter: 0 // initial value
};

action

The only way to connect to the store is an action. Actions allow you to modify the application state.

Complete Example

// ToDoContainer.js
import { Component, withStore } from '@js-factory/onejs';
import componentDidMount from './hooks/componentDidMount';
import increment from './actions/increment';
import fetchToDoList from './actions/fetchToDoList';
import onClickHandler from './handlers/onClickHandler';
import TodoTmpl from './ToDoTmpl';

@withStore({
   watcher: ['counter', 'todos'],
   actions: {
       increment,
       fetchToDoList
   }
})
@Component({
   componentDidMount,
   onClickHandler,
   state: {
       x: 0,
   },
   instanceProps: {
       y: 0
   },
   template: TodoTmpl
})
export default class ToDoContainer { }

// increment.js
import { actionCreator } from '@js-factory/onejs';

export default actionCreator('INCREMENT', {
   key: 'counter',
   format({ count }) {     // `reducer` middleware setting
       return {
           count: count + 1
       };
   }
});

// fetchTodoList.js

import { actionCreator } from '@js-factory/onejs';

export default actionCreator('FETCH_TODO_LIST', {
   key: 'todos',   // store property
   url: 'https://jsonplaceholder.typicode.com/todos'
});

createStore

createStore initializes application store. It takes 2 arguments to build the store. 1) initial state of an application, and 2) middleware(s) to execute before updating the store properties.

// bootstrap.js

import { createStore } from '@js-factory/onejs';
import middleware from './middleware'

const store = createStore({} , /* optional */ middleware);

export default store;

actionCreator

action refers to store handler. The only way to modify a store property is to trigger and action. And action must be created by using actionCreator.

// fetchTodoList.js
import { actionCreator } from '@js-factory/onejs';

export default actionCreator('FETCH_TODO_LIST', {
   key: 'todos',   // store property
   url: 'https://jsonplaceholder.typicode.com/todos'
});

**Advance features (Add-ons) Onejs offers some cool feaures out-of-the-box.

***Lazy Lazy enables you to implment component level code splitting. Using Lazy would defer the the loading of the component to later.

import { h } from 'preact';
import Lazy from '@js-factory/onejs/package/addon/Lazy';

const (props) => {
    const {increment} = props;
    ...
    ...
    ...

    return (
        <div>
            <SomeOtherComponent1 />
            <SomeOtherComponent2 />
            <Lazy getComponent={() => import('./path/to/module')} />
            <SomeOtherComponent3 />
        <div>
    )
}