JSON to UI with React

In 2017, I wrote an article that demonstrated generating a user interface from JSON or a Javascript object representation. I presented the concept in VueJs (2.x). At the core of the solution is a recursive function that takes a set of nodes and produces HTML components. This idea is useful for implementing tools such as content management systems. I did use the concept to hydrate custom pages for a no-code platform.

I love VueJs there is a bit of elegance in it. ReactJs is another remarkable framework. ReactJs has a very similar architecture (DOM diffing and patching) to VueJs. …

GSLV-F08 liftoff © https://www.isro.gov.in/

Many developers and architects jump into NodeJS after hearing stories of incredible speeds and its asynchronous IO. Most of them do not have a clear understanding of how NodeJS works. Understanding how the event loop works significantly helps in producing better NodeJS solutions.

I am not going to deep dive into the event loop. A simple search should provide abundant resources. For our discussion, let us assume that the event loop is responsible for handling async I/O in NodeJS. The event loop makes the single-threaded NodeJS runtime handle concurrency.

For the rest of this article, we will take a simple…

Flow Engine
Flow Engine

Anyone who has written software platforms would appreciate the need for configurable business logic. The most common business logic is series of operations. For example, before placing an order, the order processing business logic checks the stock at hand. Reorder is initiated after the order based on the stock threshold. Hold your thoughts on these keywords ‘business logic’, ‘before’ and, ‘after’ we will revisit them soon.

Flow-based programming is a very natural means of expressing business logic flow. We can imagine flows like a network of interconnected nodes. …

Have some good ideas, and want to see how these ideas might work out? But do not want to go into a full fledged UI/UX design, what would you do?

We generally start with paper sketches, and move to a low fidelity design before embarking upon a grand UI/UX exercise. There are times when one may need something better than paper prototypes, to bring our the life in the prototype.

Microsoft PowerPoint is a wonderful tool for creating rapid UI/UX prototypes.


First thing to do is to avoid the default transition in PowerPoint, i.e. …

At times we need the ability to store a document structure and re-create it. For instance when we create WYSIWYG designer or a rich text editor, we may have to store the document structure in server and re-create the same for editing.

Let us look into the render method of the Vue.js component and use the interface the render method exposes (createElement), to build components from JSON or JavaScript object.

The render function

The Vue.js component provides a low level “render” property. The property is actually a function frequently referred to as createElement. The createElement function takes three arguments

  • A tag name
  • Properties…

Grid components are notoriously complex to build. There are so many aspects and it takes forever to build a perfect one. Having said that, building a grid for your specific needs should not be that difficult.

In this article, we will explore how to build a grid component “Griddy” in Vue.js. The overall idea is to explore ways of building this component, so that people can look at their specific use cases and extent it.


The component is by no means production ready, this is strictly for educational purpose only.

Concepts we will explore.

We will explore the following concepts, they are just a…

Embrace Automation

Why program by hand in five days what you can spend five years of your life automating? — Dr Terence Parr

There is a huge sense of anxiety amongst people from IT industry these days. Everyday we hear news of people made redundant, potential job cuts and intelligent machines taking over jobs. While I am not sure how many have lost their jobs, or will in the near future. I am certain that it will happen and we have to be prepared.

What’s happening around us is nothing new, it is just the proof that humanity is evolving continuously. Just…

Multi-tenancy is all about supporting multiple tenants or customers for a single application. The core concept is that we attach a context to an in-coming request, which helps in identifying the tenant and respond accordingly. There are three patterns for multi-tenancy, which are based on how infrastructure such as application servers and database servers and other components are shared. The three patterns are 1) Nothing Shared 2) Partially Shared 3) Everything shared In the nothing shared model, each tenant have their own application server and database server. It is not the most efficient model since application server and database servers…

Hari Narasimhan

Inspired by interesting things around me!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store