React encourage users to break our applications into smaller individual building blocks through components. At some point or the other you might come across a point where you would need to communicate with the other components. There are many libraries which provide you the solution to the same, although in return they expect too much of boilerplate. Although Rootz is different. Most of the boilerplate is handled by Rootz, expecting users to just provide minimal information required to justify what you would want from the application as a behavior. Thus explains its high LOC(lines of code) to functionionality ratio.
In short it expects the users to write less overall code to get most of the application behaviour as the result.
Structure
This structural decoupling of Components and Nodes provides a more structural-functional definition for Rootz to handle the state of the components through the actions defined at Node level.
Components should solve a single purpose for what it is intended to solve. Adding conditional rendering complexities in an existing component makes it complex in terms of maintainability.
Components and Nodes
A component is the basic building block of any application. They can be created generically to extend its reusability. In Rootz they are no different. Rootz provides a definitive structure to your application, in result of which the React Components are decoupled into Components and Nodes(Not to be confused by Node JS), which forms the building blocks of Rootz.
It’s pretty straightforward than what it sounds like. A component in Rootz can be a React class or a functional component handling the rendering part of the application, while the logical definition of what happens on the events are moved to Nodes. Nodes provides a character to a component making it dynamic in nature.
In a gist Components in Rootz are dumb and are managed by the Nodes. Let’s take a look at what a component in a React-Rootz application looks like.
import React from 'react';
import { createNode } from "@rootzjs/core";
/*
* @param {state, props, actions, profile}
* @type NodeProps Object
*/
const [node, dispatchNode] = createNode("Master", function ({
state,
actions
}) {
return (
<div className="container">
<p>{state.message}</p>
<button className="btn" onClick={actions.NEW_MESSAGE}>
Add Message
</button>
</div>
);
});
// define initial state
node.state({ message: "..." });
// define actions on button clicked
node.useAction("NEW_MESSAGE", {
message: "It's just that simple !!"
});
// dispatch Node
export const Master = dispatchNode(node);In the above sample code, a node is created by using createNode function. It returns an array of two, first being the Node itself and the other being the node dispatch function.
The node takes in two parameters, first a NodeId(unique Node name, usually can be same as your file name) and the other being the Component.
Node provides inbuilt functions to define the state variables and define actions for that particular component.
You could also state the Component and Node in two different files. Something like…
./components/Message.jsx
import React from 'react';/*
* @param: { props, state, actions, profile } nodeProps
* @type: NodeProps
* @proptype: Object
*/
export const Component = (nodeProps) => {
const { props, state, actions, profile } = nodeProps;return (
<div className="container">
<p>{state.message}</p>
<button className="btn" onClick={actions.NEW_MESSAGE}>
Add Message
</button>
</div>
);
});
./node/Message.js
import { createNode } from '@rootzjs/core';
import { Component } from '../components/Message';const [node, dispatchNode] = createNode("Message", Component);// define initial state
node.state({ message: "..." });// define actions on button clicked
node.useAction("NEW_MESSAGE", {
message: "It's just that simple !!"
});export const Message = dispatchNode(node);
NodeProps
All the components in Rootz would have predefined nodeProps structure. It consists of props, state, actions and profile.
Props are similar to what we have in react components, arguments passed by the parent (callee) component.
State represents the current state of the component similar to what we have in react. The difference comes in the way it is defined and updated.
Actions are the logic which needs to be invoked while on an event. These actions are defined within Node. Every actions results into a change of state with updated state. The state can be a constant (pure) or can have a logical body to it which would derive the state based on the inputs provided.
Profiles follows the Set Anywhere Access Everywhere rule. Its one of the core strength of Rootz where you can store the app related constants at any time / hierarchy and can be accessed across the app during the runtime.
Using Rootz is beneficial when…
- Multiple components of an application has inter-component-state dependencies.
- Applications having reasonable data change / update over time.
- Scenario, where too much dependencies are imposed on a single component. Making it difficult to manage updates.
Nevertheless Rootz can be used with any React Application, adopting any use cases. It not only manages the state but also helps in structuring the application for better long term maintainability and easy debugging. With just over 2KB (including dependencies) it contributes to benefit almost any application with performance constraints.
Rootz as a community is growing fast. We are expecting like-minders Rootzies to join us on making a product which can make an impact. We have a roadmap with major destinations. And all these destinations carry a vision to change the way we look at our application today.
If you feel you can make an impact, you are welcome. Because we know you certainly will :)
Please STAR, FOLLOW and FORK us.
blogs: http://rootzjs.medium.com
github: http://github.com/rootzjs
npm: http://npmjs.com/package/@rootzjs/core
discord: http://discord.gg/RnDRtD7faF
linkedin: http://linkedin.com/company/rootzjs
Happy Coding Rootzies !!
