DEV Community: Mohan Sandesh

Creating a Simple JavaScript Render Method

Mohan Sandesh — Sat, 03 May 2025 08:54:57 +0000

Rendering HTML from data is a common task in frontend applications. In a single page application this is usually handled by libraries like React.

There will be instances where we need to render a piece of data into a HTML string, in plain Javascript, without using frontend libraries like React. The rendered template string can then be inserted into a DOM element.

Steps

Here is a way to organize data and templates using this approach.

Fetch or gather the template data.
Pass the data to render function.
render function determines which template to render and renders the data.

This approach has the following benefits -

Lightweight
Organized
Seperation of data and template
Structure similar to React components

Example data object

Here is an example of the data in the implementation.

const templateName = "hello";

const data = {
  name: "Example Name",
  location: "Example Location",
  // We can add more properties to be passed to the template
};

Render function

/*
  Main render function
*/
function render(templateName, data) {
  switch(templateName) {
    case 'hello':
      return render_hello(data);

    case 'welcome':
      return render_welcome(data);
  }
}

/*
  render hello template
*/
function render_hello(data) {
  return `
    <h2>Hello from ${data.name}</h2>
    <p>I'm from ${data.location}</p>
  `;
}

// A more concise alternative
// function render_hello({ name, location }) { ... }

/*
  render welcome template
*/
function render_welcome(data) {
  return `
    <h2>Welcome to ${data.location}</h2>
    <p>Good morning!</p>
  `;
}

// A more concise alternative
// function render_welcome({ location }) { ... }

Using the render function

When we need to render the HTML string, we can use the following.

const helloElement = document.getElementById('hello');
helloElement.innerHTML = render('hello', {
  name: 'Example Name',
  location: 'Example Location'
});

const welcomeElement = document.getElementById('welcome');
welcomeElement.innerHTML = render('welcome', {
  location: 'Example Location'
});

Conclusion

This approach gives a great way to organize the code, including seperation of data and templates. It is also small and perfect for micro-projects for adding dynamic content without a full framework.

Koa.js: A Lightweight Framework for APIs & Web Apps

Mohan Sandesh — Sat, 25 Jan 2025 10:05:43 +0000

Koa is a web framework from the Express.js team. It is a lightweight modern middleware framework that lets us use async middleware functions.

Example App

const Koa = require('koa');
const app = new Koa();

app.use(async function(ctx) {
  ctx.body = 'Hello';
});

app.listen(3000);

Here we created a Koa instance, and set a middleware that responds with "Hello" for every request.

Features

Modern syntax
Supports async/await middleware.
Lightweight, only ~570 lines of code.
- Zero bundled middlewares.
Context (ctx) object, in place of (req, res)
- Middleware signature is middleware(ctx, next)
Better error handling

What is a middleware?

A middleware is a function that receives a http request and may respond to the request, within the request/response cycle. It can also call the next middleware in the list. Here is an example.

async function exampleMiddleware(ctx, next) {
  // Read request data from ctx (context)
  // More logic
  // Set ctx.body as response

  // Call next middleware
  await next();

  // After next is called, we can do more, because of the await syntax.
  // For example log the time taken
}

// Set the middleware
app.use(exampleMiddleware);

A middleware framework lets us define multiple middleware functions and executes them in the order they are defined. As you might have noticed the next argument in the above example. It is the function, when called passes the control to the next middleware.

Using async functions lets us use await to do something after a middleware has been executed, in a stack like manner.

next does not need to be called, if further execution is not needed. For instance, think of an authentication middleware. If user is logged-in, call next, or else display login page.

// Authentication Middleware
app.use(async (ctx, next) => {
  if(user){
    // Call next middleware in the list
    await next();
  } else {
    // Display login page
  }
});

// Hello Middleware
app.use(async (ctx) => {
  ctx.body = 'Hello';
});

As you can see, order of the middleware is significant.

Koa Context (ctx)

Each middleware receives two arguments. First one is Context (shortly written as ctx) and next.

ctx contains properties from the request. Additionally it contains setters that can respond to the request.

Here is a list of common properties. You can find a complete list here.

Name	Description
ctx.method	Current request method
ctx.path	Current request path
ctx.query	Query String
ctx.body	Setter to set response body

How to do common tasks

Add a middleware

Use app.use - docs. Note that the order of the middleware is important.

app.use(middlewareFunction1);
app.use(middlewareFunction2);
app.use(middlewareFunction3);

Start the server

Use app.listen - docs.

app.listen(3000);

Set response body

Use ctx.body setter - docs.

app.use((ctx)=>{
  ctx.body = {
    'hello': 'Koa'
  };
});

Redirect

Use ctx.redirect - docs.

ctx.redirect('/login');

Error Handling

Use ctx.throw - docs.

ctx.throw(400);

How to build a complete app

Koa provides the middleware framework and ctx to use in the middlewares. It does not come bundled with any middlewares.

To build a complete app we need to use middlewares provided by the Koa community. Here is a list of common middlewares.

You can browse Koa GitHub for more available middlewares.

Conclusion

Koa is great lightweight modern web framework for building APIs and web applications. You can read more docs on the Koa website.

Faster Git Clone Using depth Option

Mohan Sandesh — Sun, 19 Jan 2025 10:23:04 +0000

When cloning open-source repositories from GitHub, especially popular ones, it can take a minute. This delay happens because Git fetches all commits in the main branch from the beginning.

Shallow Clone

A shallow clone is essentially cloning only the latest snapshot of the repository. You can do this by passing --depth option as below.

git clone --depth 1 <repository_url>

This is helpful when you need only the latest commit and don't need the full commit history. It’s particularly beneficial when working with large repositories.

After performing a shallow clone using depth, you can run git log to see the number of commits it fetched.

You can read more about git depth in Git Documentation.

A Quick Intro to React.js

Mohan Sandesh — Sat, 18 Jan 2025 07:38:13 +0000

React is used to build websites that run entirely in the browser. The core feature of React.js is JSX. JSX is closely related to HTML and XML. Below table gives the differences between the three.

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Build websites	Predefined set of tags like H1, H2, P etc.
XML	Extensible Markup Language	Build data	Custom Tags
JSX	JavaScript XML	Write HTML mixed with JavaScript	HTML Tags + Custom Tags

Examples

HTML

<html>
  <body>
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in HTML</p>
    </div>
  </body>
</html>

XML

<example>
  <title>XML Example</title>
  <note>This is a note</note>
  <data1>Example Data</data1>
  <data2>Example Data</data2>
</example>

JSX

function ExampleReactComponent() {
  return (
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  )
}

As you can see, HTML, XML and JSX are all very similar. JSX is writing HTML mixed with JavaScript. So it is called JSX - Javascript XML.

The advantage of mixing HTML with Javascript is, we can make the HTML dynamic. For example toggle a class name, when a button is clicked.

React Components

React allows us to define our own components that return JSX. A react component is just a regular JavaScript function that returns JSX.

When a root React Component renders, it automatically converts JSX into HTML and adds it the webpage.

With React you can create your own custom components (similar to custom tags) and include them in other React Components.

Here is an example component that uses the above ExampleReactComponent.

function RootReactComponent() {
  return (
    <div>
      <h1>This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  )
}

Props

Similar to how HTML tags have attributes. React components have props.

function PropsExample(props) {
  // Prints { exampleValue: "example-value" }
  console.log(props);

  return (
    <div>
      <h1>Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1>This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}

When we render the MainComponent, it calls PropsExample component with props argument being { exampleValue: "example-value" }.

As you might have noticed, displaying variables in JSX, is done using {}. Anything within the braces is treated as javascript.

State

Usually we store data in variables. We use variables to display the stored data.

In React, we use something called state to store data. state can be thought of as getter and setter for variables. The reason for using state to get and set data is when data is set using state setter, React understands that it needs to update the HTML for the component.

For example, look at the below example that automatically updates the HTML when state is set.

import { useState } from 'react';

function IncrementDecrement(){
  // use value for getting the data
  // use setValue for setting the data
  // Intial value is set to 0
  // React automatically re-renders whenever the state setter is called
  // This array syntax is called array destructoring
  const [ value, setValue ] = useState(0);

  function increment(e){
    setValue(value + 1);
  }

  function decrement(e){
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}

Writing React Apps With Vite

Tools like Vite can be used to build React components and JSX into a javascript bundle that can be executed in the browser.

Follow the instructions below to setup your first React.js project.

# Run this in your project folder, which will generate the needed files
npm create vite@latest my-react-app -- --template react

# Once the project is setup
cd my-react-app
npm install
npm run dev

Conclusion

I hope this gave you an intro of React.js. Once you setup a project using Vite, you can create more React components and play around to understand more.

You can learn more about React from the official React documentation.