DEV Community: Deepak Sisodiya

5 best practices for clean coding in JavaScript

Deepak Sisodiya — Thu, 10 Sep 2020 12:40:29 +0000

“Even bad code can function. But if the code isn’t clean, it can bring a development organisation to its knees.” — Robert C. Martin (Uncle Bob)

Clean coding means that you write code for your later self and your co-workers and not for the machine. Your code must be easily understandable for humans.

Here are some of the clean coding practices which I follow while writing Javascript code. These are not framework-specific practices and can be used with any framework.

1. Write simple code
Code should be simple enough to understand. For example, if we have to write a method that takes an array of number and return the new array with each number in array double its value. This can be implemented as.

Instead of the above code, we should do it like this.

2. Write linear code
Nested code is hard to understand. Always write the linear code as much as possible. It makes our code simple, clean, easy to read and easy to maintain thus makes developer life easier.

For Example, let’s write a function which sends the email to the issue owner.

Now let’s look at the same code implemented with async/await

Let’s look at another example

Now let’s look at the same code implemented with the fail-fast approach.

3. Better naming of variables and methods
It improves code readability and code become easier to maintain. Names should be meaningful and have context. By reading the name of function or variable one should understand its purpose. Example

Always make affirmative names. So instead of isNotActive use !isActive

4. Functions should do one thing
Function should not be larger than 20–25 lines. Smaller the function is better. Function should either modify or query something but not both. Consider the following code.

The same thing can be done in a cleaner way

5. Use ESLint, Prettier and latest JavaScript
Always use ESLint and Prettier to make common coding style across developers, find syntax error and code formatting. Use JavaScript latest features to write code, like de-structuring, spread operator, async-await, template literals, optional chaining and more. Some Examples are

I hope this post has been helpful and thanks for reading. The feedbacks are always welcome.

Working with Dynamic Components in Vue.js

Deepak Sisodiya — Sat, 19 Oct 2019 13:33:42 +0000

To understand what is a dynamic component, let's consider an example. Suppose we are developing a commenting platform where user can come and post a comment on the article. Posting of comment for the logged-in and logged-out user is different.

Logged-in user

Logged-out user

In the case of the logged-in user, we want to load CommentBoxLoggedIn component and for the logged-out user, we want to load CommentBoxLoggedOut component. Here we are mounting the component dynamically depending on if the user is logged-in or logged-out, that's where we want to use the dynamic component concept.

<Component 
  :is="dynamicComponent" 
  v-bind="dynamicComponentProps" 
/>

is attribute is a reference to the dynamic component and the v-bind attribute is used to pass dynamic component props. Let's see the example.

Using a dynamic component

In the example above we are calculating the dynamic component and dynamic component props as a computed prop. Notice the parentId is always 0 in case of the top-level comment.

This looks like a simple if/else solution. But using this approach we can make our code more scalable and readable moving the logic out of the template. We can also add animation with a dynamic component using Vue.js Transition https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Components

This approach has one more advantage. Suppose we have reply action in each comment of the article. On click of reply action, we want to load the same dynamic component CommentBoxLoggedIn and CommentBoxLoggedOut depending on if the user logged-in or logged-out but with modified/different props.

For this, we can pass the computed props commentBoxComponentName and commentBoxComponentProps to a child component, let say to CommentItem component which renders single comment. Now CommentItem component receiving the commentBoxComponentProperties and commentBoxComponentName as a props. Let's see the example

Extending the dynamic component props and using in the template

In the example above we are extending commentBoxComponentProperties with parentId because in case of reply parentId is different for each comment. and at the same time, we are using dynamic components in the template. This way we are making our code more structured and manageable.

Top VS Code Extensions For Vue.js Development

Deepak Sisodiya — Fri, 11 Oct 2019 07:52:03 +0000

I have beeing using VS Code from last around 2 years. Before that, I was using webstorm for JavaScript development. But I found the VS Code more useful. Now it is my primary editor for any JavaScript development. The most important feature of VS Code is that it has a lot of plugins for your specific requirement. This makes it easy to use for everyone whether he/she is an experienced developer or new developer. Today I am sharing some useful extension for Vue.js development.

Vetur
This is the most useful plugins for Vue.js development. This plugin is specific to vue.js development. It has Syntax-highlighting, Snippet support, Formatting, lots of Framework Support and more. checkout https://vuejs.github.io/vetur/
Quokka.js
This one is my favourite. Generally, when we want to do some stuff in JavaScript we will go to either jsbin or jsfiddle or codepan. But this plugin gives the same thing in VS Code itself. Like
Auto Close Tag
This plugins automatically add HTML/XML close tag. From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.
Auto Import
Automatically finds, parses and provides code actions and code completion for all available imports.
Bracket Pair Colorizer
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. Like
ESLint
Integrates ESLint JavaScript into VS Code.
Prettier
It is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
GitLens
This is a very useful plugin. It adds Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code len and many more things.
Better Comments
The Better Comments extension will help you create more human-friendly comments in your code. It highlights your comments with colour. Like
Plastic
Plastic is my favourite theme for VS Code. Try it, you will love its simplicity.