A few scenarios that we find in all projects.

Image for post
Image for post
Photo by Marvin Meyer on Unsplash

Testing the Try-Catch

The try-catch is the most commonly used statement in our projects and we must test them.

Let’s take an example that will parse JSON data and throw error, when data is invalid.

// @file validation.jsexport class InvalidDataException {
constructor() {
this.message = "invalid data";
this.name = "InvalidDataException";
}
}
export const validateData = (data) => {
try {
if (data) {
const mockData = JSON.parse(data);
return { ...mockData };
} else {
throw new InvalidDataException;
}
} catch (e) {
if (e instanceof InvalidDataException) {
throw (e);
}
return e;
}
};
  • We throw a custom error (InvalidDataException)when data is…


A POC using Preact

In medium or large applications, we build common components, precisely scoped components those are reusable and helps in faster building applications. However in this process, we end up writing code that is tightly coupled with UI, bug fixes that increases the size of the component, the number of versions published, increase testing efforts of the applications, and finally, things become unmanageable. And then we start thinking of refactoring the code, which involves cost and time and may not be possible in every project.

The component versioning hassle

The versioning hassle comes into picture when you have multiple applications and due to release or product requirements in one versus the other, you may need to update the component. In this process you do update a major or minor version to be used by a particular application (e.g., Application A) but not all. But what if the other application that is using the old version of the component need a bug fix, which requires a patch version upgrade? …


A POC on lazy loading of components, routes and reducers.

The Requirement

I would like to create a web application that:

1. has multiple navigations and sub-navigations
2. each ui-component/screen will loaded in the browser asynchronously upon user interaction
3. the component should also load its dependencies e.g., routes, reducers etc, asynchronously.

Image for post
Image for post
A representation of Routes and Sub-routes

App has 3 routes home, about and contact, where about has 2 sub-routes i.e., team and opening.

Tech Stack

Create React App
React 16
Redux
React Router 4
React Router Redux
Webpack 2

Completed POC can be found at: https://github.com/jknanda78/code-splitting-dynamic-routing/tree/master/sample-app with live-demo.

Prerequisites

One should have some basic understanding of Webpack’s code splitting and lazy loading. …

About

Jyoti K Nanda

React/React-Native & Accessibility Enthusiast

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