Forem: Suraj Jadhav

Web Developer Checklist

Suraj Jadhav — Wed, 15 Jan 2020 12:26:55 +0000

Note: This post considers that you have some background knowledge about web development ecosystem, also some common terminologies used in the web community

First, set up a strong git process. Two fixed branches master(prod) and develop and other closable features and release branches. You can refer for a more detailed explanation in this link.
Nicely broken down tasks according to the business requirement and priority and use a platform like JIRA/Trello/Asana to manage it.
Building and maintaining proper design templates using tools like InVision/Zeplin/Figma for UI standards.
One-step build, test and deploy probably using Jenkins. Refer Point 2 in Joel Test
Tests should include unit tests, integration tests, and end-to-end tests. Possibly automate testing cross-browser. Make sure your build fails if any important tests fail. Also, do take care of implementation details while testing your code refer to this link for more.
The codebase should be properly formated which can be done through Linters using recommended linting rules like Airbnb or Prettier.
Setting up web servers, if its an SPA, set it up using s3. If not then set it up behind a load balancer.
Setup error reports using tools like Sentry to capture errors happening at the user's end. Setup notifiers on email/slack to notify if something went wrong.
Use tracking tools to track user activity. Later can be used to study user behavior and maybe change UX accordingly. Examples: Google Analytics, Clevertap, etc.
Automate using the Lighthouse tool to get scores on app performance and study the impact of new features on those scores each time a production deploy happens. More info
Start with code splitting from the word go to avoid any hassle later. More info
To avoid Dev, Staging and Prod environment mismatch and all the problems that come with it, use Docker and club it with better tools like AWS ECS to manage docker clusters. More Info

Conclusion

I may have missed something that you may have learned through experience and I would like you to put it down in the comments down below. Do leave compliments too if you liked it. :)

How should we structure our React code? (2/2)

Suraj Jadhav — Thu, 09 Jan 2020 11:44:45 +0000

Note: This post doesn't portray that this is the only way to structure the code. There are many other great ways to do it. This method might have already been followed by most of you. This post also considers that you have some background knowledge about React and its ecosystem, also some common terminologies used in the web community

This is the second post of two post series. If you haven't read PART-1 yet then go ahead.

I apologize for being late to post this. I binge-watched The Office series and wasn't able to resist to finish it before writing this down.

Let's continue our journey to learn how to build a well-defined file structure for your Reac SPA or any of your favorite web-stack.

Continued...

So if you remember this is what our App component looks like,

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import './App.css';
import routeConstants from 'shared/constants/routes';

const {
  LOGIN,
  DASHBOARD,
  LISTING,
  PROFILE,
} = routeConstants;

function App() {
  return (
    <Router>
      <div className="App">
        <h1>App Component</h1>
        <ul className="App-nav-list">
          <li className="App-nav-item">
            <Link to={LOGIN.route}>{LOGIN.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={DASHBOARD.route}>{DASHBOARD.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={LISTING.route}>{LISTING.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={PROFILE.route}>{PROFILE.name}</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path={LOGIN.route}>
            <h1>{LOGIN.name}</h1>
          </Route>
          <Route path={DASHBOARD.route}>
            <h1>{DASHBOARD.name}</h1>
          </Route>
          <Route path={LISTING.route}>
            <h1>{LISTING.name}</h1>
          </Route>
          <Route path={PROFILE.route}>
            <h1>{PROFILE.name}</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

I will create a Navbar component that will render the nav links in our App component. So let's create a file Navbar.js in src/screens/App/components directory.

Also making subsequent changes in App component file as well to import Navbar and use it,

// Other import statements

import Navbar from "./Navbar";

const {
  LOGIN,
  DASHBOARD,
  LISTING,
  PROFILE,
} = routeConstants;

const navItems = [LOGIN, DASHBOARD, LISTING, PROFILE];

/* Inside return statement */

        <h1>App Component</h1>
        <Navbar navItems={navItems} />

/* other jsx code */

export default App;

The next thing we should do is give each route component their own space in our file structure. For that, I will create a directory named screens under src/screens/App directory.

I used the word screens here in my file structure is because our Application is a set of things that we see on our screens, it is easier for me or anyone to relate/understand that word. You can use any word you want like routes/children/views

I didn't use views because our views can differ. :P Nope that's not the reason. Maybe because I am taking Micheal Scott a bit too seriously.

So now the src/screens/App directory contains two folders components and screens. The newly created screens contain 4 directories for all our routes, the Login, Dashboard, Listing, and Profile routes. Now, let's create a folder named components and a file index.js in each of the newly created folders.

Then, I went ahead and create a component file for each route and fill it will a header tag and then exported that component in index.js as given below,

This is the component file contents

import React from 'react';

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default Dashboard;

This is the index.js to export the above component,

import Dashboard from './components/Dashboard';

export default Dashboard;

I am considering you did this for Login, Listing and Profile too.

Now I will import these route components in the App component and use them in rendering.

/* Other imports */
import Login from '../screens/Login';
import Dashboard from '../screens/Dashboard';
import Listing from '../screens/Listing';
import Profile from '../screens/Profile';

/* Other App component code */

<Route exact path={LOGIN.route}>
    <Login />
</Route>
<Route path={DASHBOARD.route}>
    <Dashboard />
</Route>
<Route path={LISTING.route}>
    <Listing />
</Route>
<Route path={PROFILE.route}>
    <Profile />
</Route>

/* Other code */

export default App;

Okay now let's move router, routes and routing configuration into a separate space of itself. This will make sure our component files remain clean and lean. Okay, both words rhymed. :P

I will create a file route.js in each route folders which will export a route configuration. An example is given below,

I did the above for other routes and also created a route.js file in the src/screens/App directory to import all those routes as given below.

The next thing would be to make changes to our App component for incorporating these route config additions.

Just so that you know, I am referring to the react-router-dom DOC for doing all these changes required for the route-config to work.

Moving on, I am going to create a folder in the src/shared directory, which will hold those components that can be shared across all our applications. For now, I am going to add one component in it which will be used for rendering route components.

This component will receive an object containing the path to route and component to render. Let's export the above-shared component with an index.js file in src/shared/components

export { default as RouteWithSubRoutes } from './RouteWithSubRoutes.js';

export default {};

Next thing, we will make changes in the App and Navbar component. Pasting the code here.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom';

import { RouteWithSubRoutes } from 'shared/components';

import './App.css';
import routes from '../route';
import Navbar from './Navbar';

function App() {
  return (
    <Router>
      <div className="App">
        <h1>App Component</h1>
        <Navbar />
        <Switch>
          {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route} />
          ))}
        </Switch>
      </div>
    </Router>
  );
}

export default App;

import React from 'react';
import { Link } from 'react-router-dom';

import { routeConstants } from 'shared/constants';

const {
    LOGIN,
    DASHBOARD,
    LISTING,
    PROFILE,
} = routeConstants;

const navItems = [LOGIN, DASHBOARD, LISTING, PROFILE];

function Navbar() {
    return <ul className="App-nav-list">
        {
            navItems.map((navItem, i) => (
                <li key={i} className="App-nav-item">
                    <Link to={navItem.route}>{navItem.name}</Link>
                </li>
            ))
        }
    </ul>
}

export default Navbar;

So now the concerns are separated. We import route objects from individual Login, Dashboard, Listing, and Profile directories and form it into a single route array in src/screens/App directory. This way each screen is responsible for its existence.

Now, if you have to change anything about any particular screen or add a new feature to a particular screen, the developer needs to just go to that folder, make changes in that sub-directory and that's it.

Adding a new route

Let's go through the steps to add a new route. We will name it About.

First, we will add a new entry in src/shared/constant/route.js

export default Object.freeze({
    LOGIN: {
        name: 'Login',
        route: '/'
    },
    DASHBOARD: {
        name: 'Dashboard',
        route: '/home'
    },
    LISTING: {
        name: 'Listing',
        route: '/list'
    },
    PROFILE: {
        name: 'Profile',
        route: '/me'
    },
    ABOUT: {
        name: 'About',
        route: '/about'
    }
});

Second, we will make changes to Navbar to add the newly added route. But wait a minute, I don't want to do that. Let's make some changes to the Navbar component so that we don't need to keep changing it next time we add a new route.

import React from 'react';
import { Link } from 'react-router-dom';

import { routeConstants } from 'shared/constants';

const navItems = Object.values(routeConstants);

function Navbar() {
    return <ul className="App-nav-list">
        {
            navItems.map((navItem, i) => (
                <li key={i} className="App-nav-item">
                    <Link to={navItem.route}>{navItem.name}</Link>
                </li>
            ))
        }
    </ul>
}

export default Navbar;

Third, we will create a new folder named About under src/screens/App/screens. Also, quickly add a components folder, index.js, route.js, and add About.js file to the newly created components folder which will contain our route component.

src/screens/App/screens/About/components/About.js

import React from 'react';

function About() {
  return <h1>About</h1>;
}

export default About;

src/screens/App/screens/About/route.js

import { routeConstants } from 'shared/constants';
import About from "./";

export default {
    path: routeConstants.ABOUT.route,
    component: About
};

src/screens/App/screens/About/index.js

import About from './components/About';

export default About;

Lastly, we will need to import and add About route in src/screens/App/route.js

import LoginRoute from "./screens/Login/route";
import DashboardRoute from "./screens/Dashboard/route";
import ListingRoute from "./screens/Listing/route";
import ProfileRoute from "./screens/Profile/route";
import AboutRoute from "./screens/About/route";

export default [
    LoginRoute,
    DashboardRoute,
    ListingRoute,
    ProfileRoute,
    AboutRoute
];

And we are up with a new About route

Sub routes

Let's imagine a scenario where you need to add new sub-routes as child routes to an already existing one. I will pick up the Profile route to do that. We will have an index route Details which shows Profile details and another route Settings to show a list of profile settings.

So localhost:3000/me will render Details and localhost:3000/me/settings will render Settings

First, create a screens folder in Profile sub-directory.

Second, we will add the following detail under PROFILE key in src/shared/constants/route.js

    PROFILE: {
        name: 'Profile',
        route: '/me',
        subroutes: {
            SETTINGS: {
                name: 'Settings',
                route: '/me/settings'
            }
        }
    },

Third, we will create two new folders named Details and Settings under following path src/screens/App/screens/Profile/screens. Also, quickly add a components folder, index.js, route.js, and add the component file to the newly created components folder which will contain our route component. Make sure you perform this for both Details as well as Settings subroutes. Following snippets show what needs to be done.

File content - Details.js

import React from 'react';

function Details() {
  return <h1>Details</h1>;
}

export default Details;

File content - Settings.js

import React from 'react';

function Settings() {
  return <h1>Settings</h1>;
}

export default Settings;

src/screens/App/screens/Profile/screens/Settings/route.js

import { routeConstants } from 'shared/constants';
import Settings from "./";

export default {
    path: routeConstants.PROFILE.subroutes.SETTINGS.route,
    component: Settings
};

src/screens/App/screens/Profile/screens/Details/route.js

import { routeConstants } from 'shared/constants';
import Details from "./";

export default {
    exact: true,
    path: routeConstants.PROFILE.route,
    component: Details
};

src/screens/App/screens/Profile/screens/Settings/index.js

import Settings from './components/Settings';

export default Settings;

Note: Do this with Details subroute too.

Next step would be to update our Profile route config

Lastly, we will need to add a navigation link to the Profile screen. For that, we will make changes in the Profile component.

src/screens/App/screens/Profile/components/Profile.js

import React from 'react';
import { Switch, Link } from 'react-router-dom';
import { RouteWithSubRoutes } from 'shared/components';
import { routeConstants } from 'shared/constants';

const { PROFILE } = routeConstants;
const { SETTINGS } = PROFILE.subroutes;

function Profile({ routes }) {
  return <>
    <h2>Profile</h2>
    <ul className="App-nav-list">
      <li className="App-nav-item">
        <Link to={PROFILE.route}>Details</Link>
      </li>
      <li className="App-nav-item">
        <Link to={SETTINGS.route}>{SETTINGS.name}</Link>
      </li>
    </ul>
    <Switch>
      {routes.map((route, i) => (
        <RouteWithSubRoutes key={i} {...route} />
      ))}
    </Switch>
  </>;
}

export default Profile;

The File structure looks like this now.

I know you guessed it right, it's a fractal structure which I implemented here. It is basically to repeat a structure when you zoom in to a particular folder. Of course, it is meant for the screens directory.

Things that I left

Test files - I have not included writing tests in this post but make sure to keep it as close to the file that you are testing as possible.
CSS - I am a fan of a CSS-preprocessor but you can go ahead and use CSS-IN-JS or JSS which compliments this approach.
A pat on my back for writing this down. :P

Benefits

Few to none git merge conflicts.
Separation of concerns
Easy to grasp at first glance
If you want to take out a particular route and move into its repository it is easy because we have built it to sustain itself.
Scaling is easy as steps to add new route or sub-routes is easy.

Final App,

surajhell88 / react-spa-file-structure

Code for dev.to blog article https://dev.to/surajjadhav/how-should-we-structure-our-react-code-1-2-1ecm

Conclusion

I know both posts were long enough to bore you down. But this is a very important time to invest in the file structure. Because as the product grows, we face more difficulties in managing our code files. We don't want to land on our wrong foot if a new feature compels us to redesign our whole app code.

Make sure each route contains all the code that it needs to run on, also keep an index.js file to export your main code file from a folder. Keep test files as closer to the code as possible. And most importantly do let me know if you have any questions in the comments section below.

Thanks for reading

How should we structure our React code? (1/2)

Suraj Jadhav — Mon, 30 Dec 2019 11:33:18 +0000

Note: This post doesn't portray that this is the only way to structure the code. There are many other great ways to do it. In fact, this method might have already been followed by most of you. This post also considers that you have some background knowledge about React and its ecosystem, also some common terminologies used in the web community

This is a two-part series, the next part will be posted soon.

Only to React?

Although the title says React code but this method can be applied across other front-end stacks too. I have used this method to build a Vue application too and it worked like a charm for me. I used React for this post because that's where I started for the first time.

How this will help?

I have worked in multiple teams and products. The major problems faced by a lot of new joiners is to understand the code structure. The first impression you make on your new joiners could be the last impression you make of the capabilities of your tech team. This method will help new joiners understand the code structure with the utmost simplicity.

Also, by following this way of code structuring, you would be able to avoid a lot of merge conflicts. Adding new features would be a cakewalk for any web-dev on your team. Also if you want to extract some code out to create a library out of it, you can do that too in very less time.

More in detail in the next part of this post series.

Why not use already built boilerplates?

We did start with cloning the best boilerplates out there but eventually had to tweak them accordingly to fit into our team's vision. So we ended up deleting a lot of code from that boilerplate code. The most common problem we faced while using some boilerplate code is to dump all the unnecessary code and configuration that isn't needed and while doing that, most of the time the code breaks, so we had to fix all the problems instead of building new features.

So we created our own boilerplate, just in case we need to kickstart a new front-end project in the future. I am saying that you should also stop using boilerplates created by well-known devs but this is just our strong opinion about what we want in our day-to-day coding sessions.

Creating your own boilerplate can also help you incrementally add libraries that you might later need while writing your production code. We like to keep our boilerplate code as lean(fewer libraries from the start) as possible because we don't want our bundle size to be high from the onset of our project.

Get started

First, let's use create-react-app to scaffold our react app. We all know what does it do(if not that read it here). I am using it because I don't want this post to be longer than 2 posts, not deviating from our main topic and I am very lethargic too(truth revealed).

So after executing following command in the terminal in your workspace

npx create-react-app my-app

It creates a folder my-app with the following file structure,

Listing each directory and its uses,

node_modules for your npm dependencies.
public directory contains all your static assets such as favicon, images, robots.txt, and your index.html which will get exported with right bundle names when you build your app.
src directory contains all your application code.
build directory will get created once you build the app. It contains all the transpiled js bundles, css, index.html, images, and favicons in it.

For the sake of this post, we will focus our attention on src directory.

Let's look at what files the src folder contains.

The first file that loads into action is index.js which imports every other needed file to bootstrap this application.
index.css contains global css styles.
App.js, App.css and App.text.js are all related to the App component which is our root component. Everything that renders on our screen when we run yarn start command is in the App component.
Rest of the files you can ignore for now especially serviceWorker.js

We can add all our Application code in our App Component file but it would give you nightmares later on. Also, we would want our SPA to have routes for our application to react to URL changes.

Let's consider we want to build an application which has 4 routes

Login
Dashboard
Listing
Profile

When the user first lands on our application, he/she sees the login screen first, after login we redirect our app to Dashboard where the user can navigate to Listing and Profile. Don't want to overdose you with what features each route will have. This post is already quite long for you and I don't want you to get bored.

Moving on, we will need some kind of routing logic for our routes. I am using react-router-dom for representational purposes. First I add it as a dependency using the command yarn add react-router-dom. Make sure it has been added to your package.json dependencies.

I don't like to keep the App component lingering around in the src folder like that, I will create a screens folder. I will come back to why I named it like that. Inside that screens folder, create another folder named App. Inside the App folder create a file named index.js, this we will use for exporting App code to whoever wants to consume it.

Now you create a components folder under src/screens/App folder. Move App.js, App.css and App.test.js files to recently created components folder. Now your file structure will look like this.

I will now export the App component from src/screens/App/index.js file.

I will now delete the entire jsx code from App component to make things easier for us.

We will make file location changes for App component import in the src/index.js file. Also, removing the references to index.css and serviceWorker.js files which we don't need in our context. The src/index.js file looks like this.

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'screens/App';

ReactDOM.render(<App />, document.getElementById('root'));

Now if you save and look at the application, it will be just a white screen with text - App component written in the top center of the screen.

Now let's create another folder under src directory named shared. This directory will contain all the shared utilities, constants, components, and other stuff that needs to be shared with your entire Application code. Right now I am creating constants for our routes.

Now we go ahead and create route links in our App component. We import our constants and create some anchor tags to those routes.

Before we do that, we need to solve add a file .env at the root. Some of you must have seen a discrepancy in one of the changes I made above while editing src/index.js. I had referenced App component like this,

import App from 'screens/App';

And not like this,

import App from './screens/App';

It's because I added the .env file at the root folder which helps us resolve modules in the src/ folder without having to reference files using ../../../ from deep inside the file directory. Create a file .env at the root and paste the following content in it and then restart our application using yarn start.

NODE_PATH='src/'

As a direct result of this, we can now reference shared constants(also any future shared utility) from anywhere our application like following,

import routeConstants from 'shared/constants/routes';

Without worrying about those ../../../

After this, we import routeConstants into our App component and add 4 Link tags from the react-router-dom library just below the App title. I also added a bunch of other components required for our routes to work.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import './App.css';
import routeConstants from 'shared/constants/routes';

const {
  LOGIN,
  DASHBOARD,
  LISTING,
  PROFILE,
} = routeConstants;

function App() {
  return (
    <Router>
      <div className="App">
        <h1>App Component</h1>
        <ul className="App-nav-list">
          <li className="App-nav-item">
            <Link to={LOGIN.route}>{LOGIN.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={DASHBOARD.route}>{DASHBOARD.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={LISTING.route}>{LISTING.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={PROFILE.route}>{PROFILE.name}</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path={LOGIN.route}>
            <h1>{LOGIN.name}</h1>
          </Route>
          <Route path={DASHBOARD.route}>
            <h1>{DASHBOARD.name}</h1>
          </Route>
          <Route path={LISTING.route}>
            <h1>{LISTING.name}</h1>
          </Route>
          <Route path={PROFILE.route}>
            <h1>{PROFILE.name}</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Now our App looks like this,

Although I dumped everything inside the App component here. In the next post, I will start distributing each route component code into its own separate space so that you get the gist how the final file structure actually works.

Please do leave comments about the pace, language as well as contents of this post. This is my first post and I might have been grammatically incorrect. Also please do comment if you are eagerly waiting for the next post, it will encourage me to post the next one early. :)

Forem: Suraj Jadhav

Web Developer Checklist

Conclusion

How should we structure our React code? (2/2)

This is the second post of two post series. If you haven't read PART-1 yet then go ahead.

Continued...

Adding a new route

Sub routes

Things that I left

Benefits

Final App,

surajhell88 / react-spa-file-structure

Code for dev.to blog article https://dev.to/surajjadhav/how-should-we-structure-our-react-code-1-2-1ecm

Conclusion

Thanks for reading

How should we structure our React code? (1/2)

This is a two-part series, the next part will be posted soon.

Only to React?

How this will help?

Why not use already built boilerplates?

Get started

To be continued...