Some things you always need to create a website like JavaScript Code, HTML markup and CSS styles. But there are other technologies and tools that are often added to improve the developer experience and the product quality. Everything that can be removed wholly without affecting the product from a user perspective is such an optimization. This post is about when it makes sense to add these techonolgies to a project.

For each technology or tool an array of attributes is evaluated.

Linting eslint

Linting avoids common errors and forces the use of a consistent coding style.

Not all rules are easy to understand and some cannot be applied in certain cases or cause an implementation overhead in some cases. The choice for a reasonable configuration is important as if the resulting code contains many // eslint-disable-next-line the code readability suffers. When learning to code or creating a throw-away product the use of a linter is discouraged. It can take considerable effort to properly get used to write code matching a certain linter configuration.

Formatting prettier

Automatic code formatting is a rather recent phenomen that has quickly gained popularity. The reasons are pretty obvious: It's super easy to install, integrates well with editors (automatic formatting on save), configuration is straight forward and it avoids manually fixing many rules previously caught by linters.

Adding an automatic formatter will make the code easier to read and can also adapt existing code to match the rules for the current project. This optimization is of only cosmetic nature and neither has en effect on the quality or makes writing code any easier.

Testing jest cypress

Testing the UI can be very difficult. Testing is handy and simple in other domains without complex interfaces. While developing a Frontend one is likely to test the code manually in the browser after each change. Writing tests that replace this human type of testing is very difficult. Therefore, tests in Frontend are usually restricted to testing important parts of the application. Testing is especially helpful if the software will be maintained and constantly improved. In this case automated tests will make sure that interactive functionality for the users will continue to work after changes.

Typing TypeScript

Typing your code can be very useful albeit often also cause mayor headaches. First, the basics for TypeScript have to be learned. When trying to just wing it one will run into a ton of issues which then lead to learning the basics through StackOverflow. When working with types it's important to note that each framework also comes with it's set of types. Here experience of working with the types for a specific framework will come in very handy.

SSR NextJS

An existing application can be ported over to Server-Side Rendering and vice versa without making huge changes. Similarly, the users will not experience big differences between a client or server rendered page. It merely optimizes the initial render speed.

Despite these minor advantages SSR comes at a relatively high cost during development as certain things have to be manually configured and other things that would work well on the client simply cannot be done on the server. Due to the popularity of Next as a React framework and development tool creating a React app with SSR isn't much more difficult anymore than creating it with Create React App which will only render on the client.

Conclusion

None of these optimization techniques are necessary to create a good application. Depending on the context of the application and the experience of the developer the appropriate optimizations should be chosen. For the customer all these shouldn't mean much, only the positive effects on quality and performace can be interesting. On the other hand, these optimizations can significantly slow down development and increase costs. Most optimizations will require additional effort even if the developer is already quite experienced with the technology.