DEV Community: Mohamed Shadab

Building a Chatroom Web App with Hasura

Mohamed Shadab — Fri, 15 May 2020 00:00:00 +0000

You will be learning how to set up Hasura and will learn how to write specific GraphQL queries which help you build this Web App.

Most of the react code is already written and the tutorial branch has only the GraphQL logic/code missing from it. However you can choose to build from scratch while taking reference from https://github.com/statebait/hasura-chatroom-demo.git

Setting up Hasura & the Database

To follow the tutorial you will need the tutorial branch of the repository; clone the repository like this:

  git clone --single-branch --branch tutorial https://github.com/statebait/hasura-chatroom-demo.git

Next, you need to start the docker containers for the PostgreSQL database and Hasura GraphQL Engine. Run the following for that inside the repo:

  docker-compose up -d

This will spin up both the containers and now the Hasura console should be available at:

  http://localhost:8080/console

If for some reason nothing appears, try running the docker command again.

Get familiar with the console 😃. Navigate to the "DATA" tab and here we will create all the tables we need for the Chatroom Web App.
Go ahead and click on 'Create Table' next to the Schema heading.
The first table we will be creating is the 'users' table. Name the table 'users', add a column called username with column_type as Text. Add this column as the primary key. Finally, click "Add Table" below.

  table_name: users
  Columns:
  column_name: username (Primary Key)
  column_type: Text

Next, we need a table for chatrooms. Create this:

  table_name: chatrooms
  Columns:
  #1
  column_name: id (Primary Key)
  column_type: Integer Auto-Increment
  #2
  column_name: name (Unique)
  column_type: Text

Finally, we need to create a table for the messages, here we'll need to add 2 Foreign Keys for the chatroom and user.

Create this:

  table_name: messages
  Columns:
  #1
  column_name: id (Primary Key)
  column_type: Integer Auto-Increment
  #2
  column_name: text
  column_type: Text
  #3
  column_name: chatroom_id (Foreign Key)
  column_type: Integer
  #4
  column_name: user (Foreign Key)
  column_type: Text

Now navigate below to the Foreign Key section and add the first foreign key from the table chatrooms:

  messages.chatroom_id -> chatrooms.id

And not the second foreign key from the table users:

  messages.user -> users.username

Great! Now you are done with adding the tables!

Go ahead and click on the chatrooms table and go to the 'Insert Rows' tab. Here add one chatroom with any name you like. (You can add multiple too 😇).
Now go to the "GRAPHIQL" tab. This is a GraphQL playground where you can play and test different queries before adding them to your Apps. In this demo, we will deal with all the 3 types of queries available in GraphQL - Query, Mutation, Subscription.
In the 'Explorer' (If you can't see there should be a button to named 'Explorer' to open it up) you will see a bunch of queries already there which you can just click on and add. In the bottom part of the Explorer, you can add (switch) to Mutations/Subscriptions.

Building the Web App

The React app consist of three views:

Login
Chatroom List
Chatroom

The tutorial branch has all the code for the working demo except all the GraphQL related logic, which is the main focus of this tutorial.

So let's begin!

Install dependencies by running the following:

yarn

Apollo Setup

We will be using the Apollo Client (React) for querying the GraphQL API generated by Hasura

Start by creating a file called apollo.js inside of the src folder.

The file should have this:

import { ApolloClient } from "apollo-client"
import { WebSocketLink } from "apollo-link-ws"
import { HttpLink } from "apollo-link-http"
import { split } from "apollo-link"
import { getMainDefinition } from "apollo-utilities"
import { InMemoryCache } from "apollo-cache-inmemory"

const wsLink = new WebSocketLink({
  uri: "ws://localhost:8080/v1/graphql",
  options: {
    reconnect: true,
  },
})

const httpLink = new HttpLink({
  uri: "http://localhost:8080/v1/graphql",
})

const link = split(
  ({ query }) => {
    const definition = getMainDefinition(query)
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    )
  },
  wsLink,
  httpLink
)

const cache = new InMemoryCache()

export const client = new ApolloClient({
  cache: cache,
  link,
  name: "react-web-client",
  version: "1.3",
  queryDeduplication: false,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
    },
  },
})

In the above code, we use 2 links and a split method which dynamically switches the link depending on the type of operation. We need this functionality because we will be using subscriptions which don't use the regular http connection and instead use a web socket connection.

Login View

The Login View has a simple input box where one can enter their name; on entering the name a mutation to create a user is made in the database, the 'USER' key is added to local storage for future use and finally, the user is navigated to the chatrooms view.

In src/components/Login.js

Add the following imports:

import gql from "graphql-tag"
import { useMutation } from "@apollo/react-hooks"

Next, we need a mutation to add the user to the database:

const ADD_USER = gql`
  mutation addUser($user: String) {
    insert_users(objects: { username: $user }) {
      affected_rows
    }
  }
`

Then add this hook to the Login component that uses the mutation:

const [addUser, { error }] = useMutation(ADD_USER)

The addUser in the above code is a promise given to you. We need to execute it on submit so add this to the onSubmit function inside the if block:

addUser({
  variables: {
    user: value,
  },
})
  .then((data) => {
    window.localStorage.setItem("USER", value)
    handleLogin()
  })
  .catch((err) => console.log(err))

Chatroom List View

The Chatroom List View is a simple list of clickable chatrooms available. It requires a simple query to fetch the chatrooms.

In src/components/ChatroomList.js

Add the following imports:

import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag"

Next, we need a query to fetch the chatrooms from the database:

const GET_CHATROOMS = gql`
  {
    chatrooms {
      name
      id
    }
  }
`

Then add this hook to the ChatroomList component that uses the query:

const { loading, error, data } = useQuery(GET_CHATROOMS)

Chatroom view

The Chatroom View is the crux of the Web App, it displays the list of messages sent in the chatroom and an input field to send more messages.

In src/components/Chatroom.js

Add the following imports:

import { useSubscription, useMutation } from "@apollo/react-hooks"
import gql from "graphql-tag"

We need a subscription for the messages and a mutation to add a message to the database;

const MESSAGE_SUBSCRIPTION = gql`
  subscription messageSubscription($chatroomId: Int!) {
    messages(where: { chatroom_id: { _eq: $chatroomId } }) {
      id
      text
      user
    }
  }
`

const SEND_MESSAGE = gql`
  mutation sendMessage($chatroomId: Int, $text: String, $user: String) {
    insert_messages(
      objects: { chatroom_id: $chatroomId, text: $text, user: $user }
    ) {
      affected_rows
    }
  }
`

Add the following hooks to use the above subscription and mutation:

const { loading, error, data } = useSubscription(MESSAGE_SUBSCRIPTION, {
  variables: {
    chatroomId,
  },
})
const [sendMessage] = useMutation(SEND_MESSAGE)

Vola! You should have a working application!

Yoctosehns Software Architecture

Mohamed Shadab — Sun, 26 Apr 2020 00:00:00 +0000

The early platform of Yoctosehns can be divided into 4 services; 2 independent micro frontends one used for statistical calculation and the other for general monitoring built with ReactJS and AngularJS respectively. The other 2 services were a Python Flask based REST API which crudely inserted data on to the final service that is the MySQL Database.

The Flask service had multiple APIs (mostly CRUD) baked into it for fetching data from the database and one rather important API which handled all the HTTP requests from the Hardware nodes to make entries into the database.

Redesigning this was important as having 2 different frontends which easily could have been the same module was difficult to manage. Other than that, since the data was used to perform statistics and advanced monitoring, there was a lot of varied data fetching involved. Creating separate APIs for each of these was difficult.

The new software architecture of Yoctosehns utilizes Microservices architecture. In this architecture, each process is isolated into a different service that that is independent of each other. They communicate with each other through the help of the REST API (Application Programming Interface) and GraphQL API which both leverage the HTTP protocol under the hood.

An architecture diagram to explain it better:

Python Flask Server

Tools/Technologies used: Python Flask, Flask CORS, Flask SQLAlchemy, Arrow, Flask JWT Extended, Gunicorn

This is the heart/core of the entire system. It handles authentication, requests from the hardware components and inserting the data coming from the hardware nodes into the database. The Arrow library for python is used to manage timestamps and dates in the computations and data storage in the database. Gunicorn is used as the production server for the Flask App and its powerful logging system is leveraged to monitor the different requests coming in from the Hardware nodes.

Its sub-components are:

REST API

A very small set of APIs used to handle incoming requests from the Hardware Nodes. REST which stands for Representational state transfer is a software architectural style that defines a set of constraints to be used for creating Web services. Web services that conform to the REST architectural style, called RESTful Web services, provide interoperability between computer systems on the Internet. We use the REST API which is built on top of the HTTP protocol to communicate with the Hardware nodes.

Authentication system

The Authentication system facilitates all the authorization processes throughout the platform. It is
a simple JWT (JSON Web Token) based authentication system which handles auth based requests from the frontend and has a shared secret with the Hasura GraphQL Engine. It functions with the use of an access token which is generated using the HS256 encryption algorithm with a secret only known to the backend. The communication happens through a single endpoint based on the REST API explained below leveraging the HTTP protocol.

SQLAlchemy ORM

SQLAlchemy ORM (Object-Relationship Mapping) is used to have a well-defined schema using different models corresponding to the tables in the Database. This ORM is also used to handle inserting the monitoring data from the Hardware nodes into the database.

Hasura GraphQL Engine

Tools/Technologies used: Hasura

The Hasura GraphQL Engine coupled with the database form the brain of the system. Hasura is an open-source engine that connects to your databases & microservices and auto-generates a production-ready GraphQL backend. It generates a thorough GraphQL API for all the different tables present in the PostgreSQL database. We can query, mutate, or subscribe to any part of the database using this and it makes fetching varying data a breeze on the frontend. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. It also uses the HTTP protocol for communication under the hood.

PostgreSQL Database

Tools/Technologies used: PostgreSQL

Contains all of the data we store from the Hardware Nodes and also computed data of the different statistics we perform on that data in a multitude of different tables. It is connected to the GraphQL Engine using the HTTP and to the Flask based server using the SQLAlchemy ORM.

Frontend

Tools/Technologies used: NextJS, Apollo GraphQL

The Frontend handles interface processes, visualization, and interaction with users. It contains a well-organized dashboard with useful insights and monitoring data for the users. The technology used to build this is NextJS (which uses ReactJSs rendering engine) as the main framework and using the sophisticated GraphQL API exposed by Hasura allows for detailed data throughput between the systems.

Containerization

Tools/Technologies used: Docker

We have used Docker to containerize the entire software stack into multiple different containers i.e one for the database, one for the flask server etc. This allows us with a predictable and safe production environment which is highly scalable.

Next Steps

The next steps involved adding NGINX to the mix. NGINX is a load balancer that accelerates content and application delivery, improves security, facilitates availability and scalability. Therefore integrating this would be a big win.

GSoC 2019 Documented

Mohamed Shadab — Sat, 09 Nov 2019 00:00:00 +0000

Project Info

Project: Web Pipeline For Kinetic (ODE-Based) Models

Description: Ordinary differential equations are widely used for modelling biological networks and processes of kinetics. The idea of the project is to create a web application that allows a user to submit an SBML model and select methods of analysis and receive results. The different kind of analysis methods that will be available for use are Steady State Analysis, Parameter Fitting, Simulation.

Organization: Computational Biology @ University of Nebraska-Lincoln

Mentors: Achilles Rasquinha, Robert Moore

Phase 1

The objectives for my phase one were:

Create a project boilerplate
Setup SBML parser API (SBML abbr. for Systems Biology Markup Language)
Create Canvas and Render Model using ccNetViz
Decrease memory footprint of Docker Images
Create a simulation tab with appropriate panels

Create a project boilerplate

Tools/Technologies used: Create React App, ReactJS, NodeJS, ExpressJS

The project was to be developed with ReactJS for the frontend and NodeJS for the backend. My mentor had suggested some boilerplates to begin with but honestly, I am not a fan of boilerplate and love to go vanilla and then build upon that. So what did I do, well what anybody would do - used create react app for the React part and copied the code of some other Node (express) project I had done before. And there you go, easy right, well not really, things got complex over time as we needed to integrate python and docker into the project.

Setup a SBML parser API

Tools/Technologies used: Python, Python API for libsbml, python-shell, express-formidable

For this task, the idea was that the user would upload a SBML file and the application would return all the information present in the SBML file. For this, we had to research the different SBML parser libraries available and in which language was their API written. We finally decided to go with python-libsbml as it was developed by the team which developed SBML itself and was actively maintained, had a comprehensive API along with good docs.

Using the python parser entailed a python integration with NodeJS (as the parsing would happen in the backend) and I initially thought this would be troublesome but it turned out to be as easy as importing an npm package and calling its API, namely python-shell.

The code for the above:

PythonShell.run("sbmlParser.py", options, function (err, data) {
  if (err) {
    console.error(err)
    res.status(500).send("Something went wrong.")
  } else {
    fs.unlinkSync("./uploads/" + file.name)
    res.status(200).send(data)
  }
})

Create Canvas and Render Model using ccNetViz

Tools/Technologies used: ccNetViz, reactstrap

The objective of this task was to create an acceptable visualisation of the SBML model that was parsed by the backend so that the user can understand the model better. Now to understand how the model would be visualised we need to understand what constitutes a model. Each model has multiple reactions. Each reaction is reversible or irreversible and has products and reactants. Each product/reactant is a specie. All of this information needed to be adequately represented by a graph. It took some time but the Mentors figured out a way and well only the implementation was remaining.

The toughest part of this task was to get ccNetViz work with React. Once I figured that (it was trial and error 😪), figuring out the logic of how to create the nodes and edges for the graph was also kind of a challenge, mostly because ccNetViz has an API caveat, i.e. you need to give references of the nodes when you are defining edges.

As for other details, I developed a bare minimum interface (with reactstrap) for the app which displayed information of each reaction, specie and the model info.

Decrease memory footprint of Docker Images

Proceed only if you know what docker is and how it works

Tools/Technologies used: Docker, Docker Python libSBML, Docker Official Alpine Image

All the docker images we used were around 1gb each and having a 3 container system (which later became to 2) that is a lot of memory and therefore the need to reduce the memory footprint of the Docker Images came up.

Now, if you have the question that, how does one do that? Yeah, my mind raced through the same question. Mentor, to the rescue; "Use an alpine image". 🙌

"A minimal Docker image based on Alpine Linux with a complete package index and only 5 MB in size!"

Alpine images are great. If you aren't using them you should. I made my own base image for python-libsbml and got the memory footprint down a lot.

Create a simulation tab with appropriate panels

Tools/Technologies used: React-Grid-Layout

For this task, I was to create 4 different panels which contain configuration required for the simulation. The difficult part of this task was figuring out a sustainable/scalable state and manipulating it as each panel intercommunicated with each other in the effort to create a viable configuration. To use easy-peasy for global state management was a great choice and helped a lot in this task but more on that in 'Extras'.

As for the panels, used react-grid-layout which makes it super easy to create draggable and resizeable layouts.

Phase 2

As most of the basis of the project was laid down, now all of the logic for the kinetic laws was to be implemented. This phase involved a deep dive into biochemistry, understanding the bio models we were dealing with and the kind of kinetic laws that exist and how they work.

Choosing a simulation library

I had to finalize which library I was going to use to form the system of differential equations and solve them to receive the concentration values. This honestly took a lot of time as there were many libraries which did this with each having some trade-off. We finally decided to go with stimator because of the simple API it provided.

Example of the API it provided:

from stimator import read_model

model_description = """
title A two-reaction chemical system
r1: A -> B, rate = k1 * A
r2: B -> C, rate = k2 * B - k3 * C
k1 = 0.1
k2 = 2
k3 = 1
init: (A = 1)
"""

m = read_model(model_description)

The only problem with this library was...well it didn't work out of the box. What I did was that I downloaded the source files, found the bug that was causing it not to work, fixed it, repackaged the source files into a wheel file and now I ship the custom fixed library in the app itself. If you need to learn how to package your own wheel file to install using pip see this.

Building the plot panel

Tools/Technologies used: Apex Charts

The plot that displayed the simulation which was a timeline of the change in concentration values of the species taking part in the simulation needed to have a configurable API because the species could be toggled in/out of the plot. Apex Charts provided the perfect API for the same.

Kinetic Laws

The simulations performed are basically applying a particular Kinetic Law to a reaction and devising a rate for the reaction.

There are 3 Kinetic Laws currently available to use in the application:

Law of Mass Action
Michaelis-Menten Kinetics
Hill Kinetics

Other than this you can define your own Custom Rate in the application.

You can learn more in the wiki.

Phase 3

Phase 3 was mostly refactoring the code, commenting, documentation and finally testing.

Refactoring, Commenting and Documentation

Tools/Technologies used: prop-types

Refactoring involved visiting all files and cleaning up unnecessary code, breaking down bigger components into smaller ones and finally adding Prop-Types to each component for better runtime assertions and to increase code readability. Further, writing comments on any function which did not straight out make sense was done to increase code readability. Finally, the documentation involved writing development related instructions in the README and all docs related to usage, application architecture, kinetic laws and references were written in the GitHub repository wiki.

Testing

Tools/Technologies used: cypress

For testing, we used cypress, a E2E testing framework. Cypress is hands down amazing 🤩. The kind of automation you can achieve with this framework is phenomenal. Its API is relatively easy and the features it provides complements the entire testing process. Further, it helps you write code which is easier to test and also helps you keep test cases in mind while coding. Tests are simple, for eg:

it("Reactions populated", () => {
  cy.get('[data-test="reactions-table"]').find("tbody").find("tr")
})

The above code gets the reaction table and checks if the reactions were properly loading into the model.

Extras

Docker

To achieve consistent behaviour across different Operating Systems and to simplify the deployment process, docker was integrated into the project. 3 different containers were used - Server, Client and the database. All of them are launched together using docker-compose.

Database

The database used was PostgreSQL and the ORM in NodeJS was Sequelize. The App contains 3 models - Model, Reactions and Species. Honestly, I changed the models a bunch of times until I was satisfied with the structure and with that said I am sure they ought to change a few times as the application grows. Other than that currently 2 API's integrate the Database with the application; 'save model' and 'load model' API.

easy-peasy

Initially, I used Redux for the state management of the react app. If you are accustomed to Redux then you would know the boilerplate it entails which started becoming an issue. Just then I came across this new library easy-peasy. A state management library built on top of Redux which takes away all the boilerplate of Redux and makes state management extremely easy(as the name suggests 😁). It features a hook based API which gave me the incentive to migrate the entire react app to use react hooks(and now all the code looks really clean).

Final thoughts

Learned a ton of things during my Google Summer of Code 2019 and it is a must-do if you are a student and want to pursue software engineering.

With that said I also started contributing to the ccNetViz library (with over 5 PRs merged!) and I must say the entire HelikarLab team is amazing, super supportive, helpful and resourceful.

Finally, I would like to thank my mentors greatly for all their support.

Web Development on Windows

Mohamed Shadab — Sun, 24 Mar 2019 00:00:00 +0000

In popular belief, Windows is not preferred to do web development on and for that matter any kind of development. But honestly, this has changed over the years as Windows has matured into what it is today.

This article assumes you are using Windows 10, however since Windows offers a decent amount of
backwards compatibility, you should be able to pull this off with an older version of Windows too.

Terminal

Lets get started with the terminal. The terminal will be extensively used as you will be using a wholesome of different CLIs (Command Line Interfaces, like npm). Primarily you should be using PowerShell and bash (I’ll get to this) with a wrapper like hyper. Hyper is electron-based terminal built on HTML/CSS/JS. It has loads of extensions to add utility and themes to lavish your experience.

I’ve mentioned the use of bash. Yes, you can install bash on windows and no it’s not a gimmick or some half-baked thing, its the real deal. Meet the Windows Subsystem for Linux (This feature was added to one of the later versions of Windows 10). Here is how to install it. You should use bash whenever PowerShell is giving you unheeded trouble. Remember that when you run bash, its a completely different OS running somewhere on your windows and therefore you need to make fresh installations of all your CLIs using the appropriate commands(depends on which Linux installation you choose).

Handy Tools

Moving on let’s install a command-line installer. This is quite handy for doing quick installs of different tools. The 2 most popular options on windows are Scoop and Chocolatey. I personally prefer Scoop, because of its more minimal operation, but you couldn’t go wrong with either(installing both is also an option). These let you install things like Node, Python etc. in the blink of an eye.

Next, we need to pick a good web package manager. Again the 2 most popular ones are npm and yarn. npm will be installed by default when you install Node.js. You can install yarn here. Yarn uses npm’s package repository, the only difference being is the way it handles dependencies and its performance (You can read more about the differences on its website). I personally use yarn, but you cannot go wrong with either. There is one more package manager which is not used anymore (but is maintained), but I think I’ll mention it anyway; bower.

Also having Git installed is kind of necessary as it serve as the backbone of most modern web projects and for that matter any development project 😜(Here is a guide on Git and GitHub by Hemant Jain). Finally, you might come across a few errors due to missing build tools. These are the windows-build-tools, which are some modules necessary for compiling, running and building different stuff. While I’m not clear on exactly what modules this package contains, it has helped me avoid a lot of errors when I was trying out new stuff and is mandatory for a lot of different projects. You can simply install them by running:

npm install --global windows-build-tools

Or, if you are using Yarn:

yarn global add windows-build-tools

Code Editor

The Code Editor is one of the most important things in web development and as a matter of fact in any kind of development (yes, I have a habit of repeating phrases). Having a seamless experience during coding, debugging can help with all the frustration that comes along with it. Personally, I have used a lot of different code editors, some that come loaded with a plethora of features and some that just have the bare minimum. However, there was only one that stuck; VS Code (abbr. for Visual Studio Code). VS Code comes with a handful features out of the box which should be enough to get you started and as you proceed you can explore its vast extensions marketplace to enhance your experience. VS Code with a good set of extensions can easily replicate a modern full-fledged IDE and all that with exceptional performance. Currently, its the most popular code editor for a lot of different categories of developers and receives new updates and features every month.

Enough VS Code, moving on we have other options like Atom, Sublime, Brackets and WebStorm etc. Atom is very similar to VS Code but the place it lacks mainly is performance, as you load new extensions in Atom, it slows down significantly. WebStorm is an industry level IDE with all the important features out of the box but it is not free (unless you are a student enrolled in a school).

Alternatively, you could also use a Cloud IDE which basically are code editors running on the browsers. They come with a lot of handy features. Some of them are Code Sandbox, GitPod and Coder etc.

API Tester

Having an API Tester (for REST and GraphQL API’s)is really important as when you develop different API’s for your application in your back-end, the easiest way to test them are these. The 2 most popular ones are Postman and Insomnia, the latter also has GraphQL support. I personally use Insomnia due to its easier to use interface and the free themes available. Postman on the other hands has a lot of different team features which are helpful when you are working on large projects with larger teams. You couldn’t go wrong with either of them.

UI/UX Design

Whether you like it or not, User Interfaces and User experiences are an integral part of web development. When developing the front-end of any web project it some times it helps a lot to start with creating mockups & prototypes of the interface. Some easy (and free) to use tools for this are Figma and Adobe XD. I prefer using Figma, mainly because it has an option to easily export the CSS of any object created. Other than that you couldn’t go wrong with either.

Conclusion

Developing the Web on Windows has never been as easy as it is today, so let go of the myth that only Mac’s and Linux PC’s can do it and start developing on Windows today. 😃

Mistakes I Made in My First React App

Mohamed Shadab — Thu, 24 Jan 2019 00:00:00 +0000

I decided to write this article for all the people starting out with new React projects, in hope that it helps them in some way.
Why React? Its pretty simple, at this point in my life I was just stepping into the cosmos of Web, and React was the most popular front-end framework.

The app I built is used for the Elections of the Student Body Government in my College and it took me approximately 2 months to complete it. Link to the GitHub repository: https://github.com/shadxx7/elections-frontend. So let’s begin:

State Management

If you’ve learned React enough and for that matter any good JS front-end framework, you would know the importance of state management. Good state management is key to a scalable and flexible application.

React allows you to use different state managing libraries, the most popular being Redux and as expected I also used it in this project but let me be clear, Redux is not always the answer. Now don’t get me wrong, Redux is great, but yes the infamous but its not meant for all projects. Redux, as it defines itself, is a “Predictable State Container”, which basically means that it enables you to maintain a global state throughout your React app and you can plug this state into any component you wish. All sounding great? The problem comes in when you realize the amount of overhead code you need to write to achieve this. Some would argue that what is the problem? The problem is that sometimes its just not necessary to maintain a global state and this, of course, varies with your use case, but I can’t tell how much time I would have saved if I decided to do things differently.

So conclusion; don’t use Redux? No, its more like before deciding on a state library, its better to assess the needs of the app, study the different libraries like MobX or maybe even use React Context API and then finalize on what you want to use and where.

Testing

Testing, this single word is able to spring hateful emotions in millions of developers around the world. However you feel, I made the terrible mistake of avoiding it until I finished most of the application. At first, it never seems apparent to write tests for every little UI/function you add in your application, but when you are finalizing your application and need to perform full tests, it is painful to do them manually and also humanly impossible to cover all the different test cases, especially when it comes to UI testing. This is when you realize writing tests alongside writing your components comes in really handy. Currently, to write my tests, I’m using the react-testing-library and I found it great so far. Other libraries also exist, like Airbnb’s enzyme.

Class and Functional Components

When starting out in React, everyone usually prefers class components over functional ones. I
initially also used class components everywhere. Then again, it only makes sense to, as React
life-cycle methods are only available to class components (this is assuming Hooks haven’t released),
but the use of functional components is very important. This is because they are just faster in terms
of performance as compared to class components. They can make quite the difference when your pages
get component heavy and additionally they look more cleaner in terms of code, hence increasing code
readability.

Nitty-gritties

Now with the smaller problems and mistakes;

a. Trying to render empty functions

This mistake wasted hours of my life. Basically, when you try to render a class function like this:

renderFields = () => {
    const currentCommittee = this.props.poll.currentCommittee;
    return <div>{currrentCommittee}</div>;
  };

render {
 return (
        <div>
              {this.renderFields()}
        </div>
      );
}

It will return an error if the props haven’t loaded on the first render, meaning that if you are loading props with any kind of delay (for example — from your back-end) the above code, breaks. The quick fix for this is to use the lodash library’s ‘get’ function and make a quick check if the prop has loaded or not, like this:

render {
  return (
    <div>{_.get(currentCommittee, "candidates") && this.renderFields()}</div>
)

b. Folder structure and Naming Scheme

It’s necessary to have a good folder structure but wasting too much time on it is unnecessary. Simply deciding on the popular choices and then tweaking it a little according to your needs should do the job. The one I finally followed was:

/src
  /assets
  /components
  /store
  /style
  /tests
/utils

/assets for images, icons etc. /components for all my components, /store for my Redux store and actions, /style for all css files, /tests for all the tests and /utils for some extra utility function files.

I recommend not to put css files in an independent style folder, instead just drop them in their respective component folder.

For naming component files and folders, I initially followed the Snake case (hello_world) naming method owing to the redundant python projects I’ve done. The problem in using this naming scheme in React projects is that it doesn’t sit well with the strict Pascal case (HelloWorld) used in naming React components in JSX. Therefore to avoid further confusion and to satisfy my OCD, I switched back all my component files and folders to Pascal case.

c. Using Modern React

React is being frequently updated with new features and improvements and this shouldn’t be news as it is currently the most popular JavaScript front-end framework. Although the core React team rarely introduces breaking changes, its imperative to keep up with the newest changes as to have the best performing applications. On just the course of this project, there were over 10 releases of React. At this point in time, what I would call modern React would be the React Context API, React Suspense, React Hooks, React Concurrent etc. Primarily, I felt that I could’ve used the React Context API to replace most of the Redux I’ve used which would have saved a lot of my time.

d. Should’ve used Typescript? Maybe.

So, at the time of writing this article, I’ve already learnt typescript and I see it’s importance clearly. There isn’t too much I can explain directly from the project, but here’s what I have to say; Typescript definitely helps a lot especially with larger projects. Yes, it does add a little bit of overhead code but writing that extra code is what you’ll prefer over a stream of errors related to types on which you’ll waste hours debugging.

Wrapping Up

Are these all the mistakes I made? No, of course not, there were many others, but I don’t think they are worth mentioning, mostly because they were either caused by my stupidity or were unavoidable.