Setting and enforcing coding standards is crucial. They are a key element to ensuring an application’s quality and maintainability. Adhering to standards can help reduce bugs and create a consistent codebase. JavaScript coding standards are no different.
While many languages have elements built in, such as formatters in the standard library, that will adjust and reformat the code to meet the language’s specific standards, JavaScript does not include such a function. There are several ways to complete a task within JavaScript. Thus creating and using coding standards is even more vital to ensure a codebase is free of bugs.
JavaScript Coding Standards
Coding standards address various levels of questions. At a high level, you can choose to use a module pattern or a commenting style. At the lowest level, you can choose between using spaces and tabs or single and double quotes. While it is definitely important to address the high level issues to ensure consistency, setting standards for the low level and what may seem to be insignificant issues will save many headaches down the road.
If your team follows additional coding patterns, like Clean Code, then you can set your JavaScript coding standards to meet those requirements as well. While Clean Code focuses on Java applications, its best practices are also valid in JavaScript. For instance, in Clean Code, we use clear and concise naming conventions and limit function arguments to a minimum. This is a valuable pattern to follow for JavaScript applications. It can inform your decisions when developing a team style guide.
Once you’ve decided on the JavaScript coding standards for your application, write them down. A written style guide is a great resource to use during development. It can help resolve issues before they become a problem. Unsure where to start? There are helpful JavaScript coding standards style guides online. The Airbnb JavaScript style guide is a great resource for both ES5 and ES6 projects. If you are using Angular 1 or 2, the most popular style guide is from John Papa. By using these guides as a reference, your team can set coding standards for your own application. As well as, use the best practices from the wider JavaScript community.
JavaScript Code Reviews
Once you’ve set JavaScript coding standards, how do you enforce them? For most of the lower level settings, there are tools that can automatically check files to ensure compliance. We will talk about these tools in an upcoming blog post. For higher level choices, such as design patterns and overall style, frequent code reviews are a great way to ensure that each developer is following the team’s JavaScript coding standards. Code reviews can be regular in person meetings. Or if that’s a challenge for your team, there are electronic ways to perform code reviews as well.
Tools such as Github and Gitlab allow other users to leave comments and approve or reject commits and pull requests. During these meetings, you can review the code by walking through each pull request or commit. Or you can focus on what each developer has been working on since the last meeting. Code reviews are a great checkpoint. Many times, simply having other people review your code will allow a developer to catch potential issues before they are pushed out to users.
Modularity in JavaScript
While it’s technically possible to write an entire JavaScript application inside a script tag on an HTML page, it’s not a maintainable design. Using a module system however, can provide some much needed structure for a JavaScript application.
Modules in JavaScript are like packages in Java and modules in Python. Most module loaders provide a way to export objects from JavaScript files that can then be imported into other files. By dividing your application into modules, you help enforce the Single Responsibility principle of Object Oriented Design.
Here are some module examples that are helpful in JavaScript:
- ES6 Modules are the module system from the newest JavaScript specification, ECMAScript 2015 (formerly known as ES6). ES6 modules borrow some of the concepts from several of the following module systems. They have the potential to become the standard for JavaScript modules in the future. You can use ES6 modules through transpilers such as Babel.
- SystemJS is a module loader for all types of files, including JavaScript, CSS, fonts and images. SystemJS provides a way to dynamically load files at runtime in the browser as needed. By loading files this way instead of up front, memory use, network overhead, and the time to initial page load are all reduced.
- CommonJS and RequireJS are other common module systems. CommonJS modules are used primarily in Node.JS applications. But they can also be used in browser applications through build tools such as Browserify. RequireJS is an early module system that is supported by some of the newest browsers. It uses the Asynchronous Module Definition (AMD) pattern to load dependencies..
The module pattern you choose for your application may be influenced by other choices. These include server languages and frameworks. If you are developing a Node application or a UI with a Node backend, it may be helpful to use CommonJS to maintain consistency between back and front ends. But if you are developing a TypeScript or Angular2 application, SystemJS may make more sense as that is the default module loader for both. Regardless of the module loader chosen, it is important to divide a large application into smaller modules of functionality as you follow the single responsibility design pattern.
JavaScript Testing
When you are setting coding standards, especially in JavaScript, it’s important to include testing. There has been a tendency in JavaScript development to ignore unit testing and focus on user testing. User testing is certainly a valuable tool to catch behavior that the developer did not expect. Though it is challenging to test every element of your application on each iteration. There is no way to cover every possible scenario without automated testing.
A team’s JavaScript coding standards should dictate the use and extent of both JavaScript unit testing and end-to-end testing. Proper standards should enable easier maintenance of your application. They do this by guaranteeing that any changes to the codebase work as expected. At BTI360, we encourage the practices of test driven development. We extensively use tools like Karma with Jasmine and Protractor for JavaScript testing.
JavaScript Unit Testing
The lowest level of testing is the unit test. Just as with JUnit in Java or RSpec in Ruby, there are several testing tools that you can use in JavaScript unit testing. By adding unit tests to your application, you can verify that both new features and refactoring of existing code will work as expected. Several libraries and tools, such as Karma, Jasmine, Mocha and QUnit, enable unit testing in JavaScript.
End-to-End JavaScript Testing
At a higher level, you can use end-to-end testing. This type of JavaScript testing simulates the actions of a user. By clicking on the actual elements on your pages in a virtual browser, this type of testing verifies events trigger as expected. The most popular tools for end-to-end JavaScript testing are Selenium and Protractor. Both of which you can use to automate user interactions in a browser. By using a headless browser, such as Phantom or Slimer, it is possible to perform JavaScript testing on a server using only a command line.
JavaScript Best Practices, What’s Next?
You can see how the implementation of JavaScript coding standards is essential at every step of development, from creation to review and testing. Stay tuned for our next blog post, which will highlight how to use JavaScript frameworks and libraries to address common issues.