DEV Community

itzsrikanth
itzsrikanth

Posted on

1

Generic list of dev features required to bootstrap a great frontend project

Bootstrapping a new project from scratch or creating a generic boilerplate code is not an easy task when seen from a long time duration standpoint. The perspective and requirements might change rapidly if not analyzed minutely. I am listing here few of the implementations that I have included in many of my official and pet-projects:

CSS implementations

There are a variety of solutions available for adding stylings to your project including the new way of CSS-in-JS. But each has their own pros and cons. They must chosen based on the type of project. I will include more elaboration on my next post but in short, as an example, the requirements of a website is very different from that of a WebApp or a hybrid mobile application.

In websites, the metrics like TTFB, FCP, CLS etc plays a vital role (source) in not only in enhancing the user experience but also is a big contributor towards the terms like SEO, marketing expenditure, churn rate and ultimately in overall revenue. So, JS executions might take a lot of time to reflect the styles when compared to CSS counterparts. We might not benefit from CSS-in-JS solutions here unless it is extracted as separate stylesheet using some plugins like MiniCssExtractPlugin.

The same metrics are important for WebApp as well but no web-crawler is going to penalize your SEO value or others. But once your app warms up, you need to have reactive performance and a great frame rate, silky smooth navigations etc similar to a native app.

CSS Modules

This brings in best of both worlds and could be very subjective. But I am happy that I do not have to spend effort in thinking of a long class name based on BEM, SMACSS etc.

JS implementations

A global loader for all API/Ajax calls

It should be initialized as a singleton and a counter should be provisioned in such a way that when no of pending calls is zero, it is hidden. In other cases it should be visible

Common Modals / Drawer widgets

Project configuration

Linters
  • Code linting
  • Commit message linting like commitizen
In case of multi-package project usage of tools

like:

Managing environment configs using
Compiling a Node.js module into a single file

This is not a mandatory process, but for some cases this can help avoid the npm modules installation step by converting all the node_modules dependencies into a single JS file.

Project automation packages

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)