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.
Top comments (0)