My top 5 choicest practices for clean code in UI
During the journey of working through various enterprise projects, I learned that keeping code maintainable is a challenging thing. Often the reason is that we as developers and gatekeepers of quality pay ample attention to attributes like defect control and timelines but failed to keep a right check on the quality of code and maintainability. Especially in today’s fast-changing UI development world, it has become more important than ever to keep the right checks with appropriate tools and processes.
Is it a ticking time bomb?
With the advent of JS frameworks and Javascript itself, the volume of client-side code is growing by leaps and bounds. If not managed well with the right set of practices, it is bound to get messy and trust me, at one stage it would be really difficult to understand and debug as well. It may cost a fortune to fix issues in such code bases.
Clean code practices
Although a lot has been available over the internet related to clean code, I wanted to pitch a few good ones that helped (at least me) to keep the code in a better state. Always go by the ‘boy-scout rule’ that says ‘Always leave the code better than you found it.’
Let’s begin to delve into them here!
Refactoring
Constant review of the code and a conscious effort to avoid duplication of code helps a lot in keeping the codebase cleaner. In component-based development, it is quite beneficial to get your component to obey the single responsibility (from SOLID) principle.
Adopting TDD in practice makes it way easier to refactor your code without impacting existing functionalities.
Modular code
With ES6 coming up with cleaner syntax, segregating code into multiple logical modules has helped a lot in a clean codebase. With a clear division of functionality between modules, it’s easier for developers to navigate the code based on features and make it easier to debug as well.
For example, the below structure depicts a good logical separation of different modules which makes it easier to understand the complex code from a high-level structure point of view.
- dashboard
dashboard.js
- components
issues.js
user-profile.js
users.js
- layouts
header.js
sidebar.js
index.html
index.js ( entry point )Not only do modules promote the reusability of the code, but it also helps modern bundlers to optimize the javascript payload using code splitting techniques. So modular code helps keep performance in check as well.
Live Documentation
For any UI development, a faster way to get to visuals of your views and components helps a lot with quicker feedback and catching aesthetic issues early in the lifecycle. Defining a layer of most basic interactions/views with granular components has been tremendously helpful. In practice, this is also known as a design system library component.
Tools like storybook are popular as live documentation of these components. It helps your designers, POs and developers to get a visual feel of interactions as well as provide a playground to test components according to the defined interface. Gone are the days of bloating your code with a lot of comments!
Meaningful Naming
Although it is the most basic one, however sticking to meaningful variables and function names is the best way to describe your code. In the UI development world, all 3 important constructs (i.e. Html, CSS and JS) must follow clearly defined guidelines for proper naming. I would suggest going through Google’s styleguide to set up ground rules for your team.
For HTML, the practice of use of semantic elements provides a clear description of a particular segment of your code.
In CSS styling, following a standard class name pattern like BEM helps define a clear understanding of element styling and promotes reusability as well.
Adoption of type checking
Adopting a type-checking system helps alleviate many issues at compile time only. This also allows the code to be more readable and maintainable.
A good way is to go with Typescript which is a superset of ES6 and has built-in support for types. Most of the UI frameworks are now supporting typescript. React also allows for static type checking by including packages like flow.
To Summarize
More often than not, we already knew many things mentioned here. However, the question to ask is if we’re paying enough attention to adopt it in practice. My idea is to choose the above points to share a few good starting practices and one can surely be built upon them.
UI development practices are getting evolved and changing at a fast pace. Staying relevant to these practices is important now.
