Saving React Development Effort by using In-House library -JSON2React

React development has undoubtedly revolutionized the way we create dynamic and interactive user interfaces. However, as developers, we often find ourselves grappling with the challenge of making small changes in the front end and then dealing with the cumbersome process of deployment. The traditional approach involves modifying code, recompiling, and redeploying the entire application, even for minor updates. This not only consumes time but also introduces the risk of errors and disruptions.

React development

Consider a scenario where you need to update a simple text label or tweak the styling of a button. In a typical Frontend application, this seemingly minor change might trigger a chain reaction that involves updating the codebase, running the build process, and deploying the entire application. The process is not only time-consuming but can also lead to unintended consequences if not managed meticulously.

This is where JSON2React emerges as a game-changer. By enabling developers to render entire webpages dynamically using JSON, it eliminates the need for traditional deployment hassles for small updates. In this blog, we’ll explore the intricacies of traditional React development, the challenges posed by the deployment process, and how JSON2React provides a solution that aligns with the dynamic nature of front-end development.

Although there are many approaches regarding saving static websites in a JSON format with different stylings & various elements like different website builders do provide (WIX, WordPress etc.) still, there is always a need for more than just dragging & dropping components to build pages. Therefore, We tried to solve the problem of dynamic rendering and minimize development & deployment by creating this in-house library.

Why Library?

In a standard React development workflow, making even the slightest change in the frontend often triggers a series of steps that can be cumbersome:

1. Code Modification: When a small change is required, developers need to locate and modify the corresponding code in the application.
2. Recompilation: After making changes, the application must be recompiled to reflect the updates. This involves running build scripts, which can take a considerable amount of time, especially in larger projects.
3. Deployment: Once the application is recompiled, it needs to be deployed to the server or hosting platform. This process typically involves copying files, updating configurations, and ensuring that the changes are reflected in the live environment.
4. Testing: With deployment, testing becomes crucial to catch any unintended side effects. Developers need to ensure that the changes do not break existing functionality and that the application behaves as expected.

This traditional deployment process, while necessary for major updates and feature releases, becomes an overhead when dealing with minor adjustments or fixes. It can slow down development cycles and make the iterative process more cumbersome than it needs to be.

JSON2React: A Dynamic Solution

JSON2React addresses this challenge by introducing a dynamic approach to rendering webpages. Instead of making changes directly in the code, developers can leverage JSON configurations to modify the structure, content, and appearance of the webpage. This means that small updates can be achieved by simply adjusting the JSON data, eliminating the need for a full-scale deployment.

Consider the following example:

// JSON2React configuration for button 

{
  "name": "submit",
  "type": "button",
  "label": "Upload",
  "className": "bg-red-500 hover:bg-green-200 text-white font-bold py-2 px-8 rounded",
  "disabled": false
}

With JSON2React, making a small change to the label of a button is as simple as updating the corresponding JSON configuration. This change is reflected dynamically without requiring a lengthy deployment process.

Key Features of JSON2React

1. JSON-Driven Design

The cornerstone of JSON2React lies in its JSON-driven design, allowing developers to define the structure, components, and content of React pages in a clean, human-readable JSON format. This departure from traditional JSX coding introduces a level of simplicity and clarity that can significantly reduce the chances of errors. Let’s compare a traditional JSX approach with the equivalent JSON2React representation:

Traditional JSX:

<div className="flex flex-col h-full bg-gray-100 shadow-lg rounded-lg max-w-full md:mt-5 md:ml-5 md:mr-5 pb-8 pt-6">
      <div className="flex flex-row justify-center items-center">
        <div className="p-4">
          <input
            type="radio"
            name="id"
            value="companyId"
            id="companyId"
          />
          <label htmlFor="companyId">Company ID</label>
        </div>
        <div className="p-4">
          <input
            type="radio"
            name="id"
            value="groupId"
            id="groupId"
          />
          <label htmlFor="groupId">Group ID</label>
        </div>
      </div>
    </div>

JSON2React Equivalent:

{
    "type": "div",
    "className": "flex flex-col h-full bg-gray-100 shadow-lg rounded-lg max-w-full md:mt-5 md:ml-5 md:mr-5 pb-8 pt-6",
    "schema": [
      {
        "type": "div",
        "className": "flex flex-row justify-center items-center",
        "schema": [
          {
            "type": "radio",
            "options": [
              {
                "label": "Company ID",
                "value": "companyId"
              },
              {
                "label": "Group ID",
                "value": "groupId"
              }
            ],
            "label": "radioLabel",
            "className": "p-4",
            "name": "id"
          }
        ]
      }
}

The JSON format provides a concise and structured representation of React components.

2. Basic Component Library

JSON2React doesn’t just simplify; it also empowers developers with a basic library of pre-built, customizable components. From interactive forms to responsive layouts, this library covers a wide spectrum of use cases.

With JSON2React, creating sophisticated web applications becomes a breeze with reusable, customizable components.

Below are the components offered by the library —
1. Button
2. Dropdown
3. Loading
4. Number
5. Input
6. Radio
7. Text Input

All component comes with customizable styling according to your application, you can use the className key in JSON to specify CSS classes for styling all components of the JSON2React library.

3. Seamless Integration

JSON2React doesn’t disrupt your workflow; it seamlessly integrates into existing React projects or becomes an integral part of new ones. This flexibility ensures that developers can adopt JSON2React without overhauling their current practices. Here’s a simplified example of how you can integrate JSON2React into a React component:

import React, {useState} from "react";
import {Page} from "json2react";

const App = ({schema}) => {
  const [values, setValues] = useState({});
  const [schema, setSchema] = useState(schema);
  const onChange = (changedValues) => {
    setValues({
      ...changedValues
    });
  };
  
  return (
    <Page
        schema={schema}
        onChange={onChange}
        values={values}
    />
  )
}

Integration is as simple as incorporating the library into your existing components.

4. Conditional Rendering

A standout feature of JSON2React is its support for conditional rendering. By utilizing the ‘if’ key in your JSON data, you can dynamically display content based on specified conditions. This feature significantly enhances user experiences and interactivity. Let’s see it in action:

{
  "type": "div",
  "if": "values['file'] != null",
  "schema": [
    {
      "type": "div",
      "className": "flex flex-row justify-center items-center",
      "schema": [
        {
          "type": "div",
          "className": "p-4",
          "schema": [
            {
              "name": "submit",
              "type": "button",
              "label": "Upload",
              "className": "bg-red-500 hover:bg-green-200 text-white font-bold py-2 px-8 rounded",
              "disabled": false
            }
          ]
        },
        {
          "type": "div",
          "className": "p-4",
          "schema": [
            {
              "name": "remove",
              "type": "button",
              "label": "Remove",
              "className": "p-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-8 rounded"
            }
          ]
        }
      ]
    }
  ]
}

JSON2React library takes values as one of the props and based on the values object if it contains a file then only the div component would be rendered.

5. Nested HTML Elements

JSON2React allows for the easy nesting and structuring of HTML elements within your JSON data. This capability empowers developers to create complex layouts and achieve fine-grained control over webpage structures, all through an intuitive JSON format.

{
  "type": "div",
  "className": "flex flex-col h-full bg-gray-100 shadow-lg rounded-lg max-w-full md:mt-5 md:ml-5 md:mr-5 pb-8 pt-6",
  "schema": [
    {
      "type": "div",
      "className": "flex flex-row justify-center items-center",
      "schema": [
        {
          "type": "radio",
          "options": [
            {
              "label": "Company Name",
              "value": "companyName"
            },
            {
              "label": "Group Name",
              "value": "groupName"
            }
          ],
          "className": "p-4",
          "name": "id"
        }
      ]
    }
  ]
}

The structured nesting simplifies the representation of intricate webpage layouts.

6. Component Registration

JSON2React library offers components, but there is always a need for a custom touch to every application according to a designer or a developer, therefore considering the needs of everyone, the library allows you to register your components and use them on the go.
Below is the example to register your component & use it:

import { Page, registry } from "json2react/dist";
import Counter from "./Counter";


registry.register("counter", Counter)

function App() {
  const [values, setValues] = useState({});
  const onChange = (formValues) => {
    setValues({
      ...formValues,
    });
  };

  return (
    <div className="App">
        <Page
          schema={{
            type: "counter",
            name: "counter"
          }}
          values={values}
          onChange={onChange}
        />
    </div>
  );
}

export default App;

Advantages of JSON2React in Dynamic Frontend Development

1. Rapid Iteration: JSON2React allows for rapid iteration and experimentation. Developers can make adjustments in real time without the need for traditional deployment cycles, enabling faster development by storing JSON in databases.
2. Reduced Deployment Overhead: Small updates and tweaks can be implemented seamlessly by modifying JSON configurations. This eliminates the need for extensive code changes, recompilation, and deployment, reducing deployment overhead.
3. Enhanced Collaboration: JSON configurations provide a clear, human-readable representation of the webpage structure. This makes collaboration between developers, designers, and other stakeholders more straightforward, as changes can be communicated through JSON data.
4. Improved Development Experience: By streamlining the process of making small changes, JSON2React contributes to an improved development experience. Developers can focus on refining and enhancing the user interface without being bogged down by deployment complexities.

Example application with JSON2React

Conclusion

1. Library not only saved our time for the development/changes for existing pages in React but also saved us from multiple deployments regarding small changes.
2. Approximately, the build time for us can go up to 15–20 mins, first from installing dependencies to generating a build. Therefore using JSON2React library for small changes saved us from building & deploying, saving us at least 15 hours of time in a month.