Debugging and Refactoring JavaScript codes for robustness

Francois MUGOROZI — Sat, 16 May 2020 19:49:20 +0000

In this world of technology, programming has became necessary in every field. People are changing carriers to becoming programmers. However, knowing how to code is not enough. You need to know how to write robust codes and be able to fix bugs.

Why debugging?

Debugging is a programming concept used to identify bugs and errors in code and fix them.

Now you can understand that every programmer must be able to debug his code.
Let's talk about it.

You probably know that you can write any program using just notepad or any note writer you have. That's true. However, it will be hard for you to figure out the problems when your code breaks or does not give what you expected. The solution is to use a code editor designed specifically for programming like VS Code, and Sublime Text

function power(base, exponent) {
  var result = 1;
  for (var count = ; count < exponent; count++)
    result *= base;
  return result;
}

power(12,'h');

Now we can identify some errors just with code editor together with some linting extensions like ESLint and from the above code, we can see the errors now

What about errors not found here like Run time errors as the one where we passed 'h' instead of a number. Well, you need to debug.
Here you simply try to execute your code line by line to check whether your expectations are met.
For this purpose, you can use dev tools found in the browser (chrome) or your code editor and set a breakpoint where you want the execution to stop and take control.

Now you feel at ease because your codes are free of errors. Think about it, what if someone comes a year later and change your code?
The solution to this is to protect your code by writing tests so that anyone who changes your code will have to face the tests. More about Testing

From here, we are good to go. One thing more to make your code clean is Refactoring

Why Refactoring?

Refactoring is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior.
There are a lot of tools that can help you refactor the code like JS Refactor. However, they don't do anything for you.

Looking at the code snippet below, is there a better way to write it? The answer is yes. here I use a simple example of changing names to capital letters.

Before Refactoring:

var names = ["JOhn","Mark","Andre","Alice","Munana"];
var newNames = [];
 for (var i= 0;i< names.length;i++){
   var capitalized = names[i].toUpperCase();
   newNames.push(capitalized);
 }

 console.log('Capitalized',newNames,'Original',names);

After Refactoring:

var names = ["JOhn","Mark","Andre","Alice","Munana"];
var newNames = names.map(name=>name.toUpperCase());
console.log('Capitalized',newNames,'Original',names);

Look that, only three lines. Much better.

There are a lot of technics for refactoring codes like Composing Methods Refactoring, Simplifying Conditional Expressions Refactoring, and Others.

Conclusion

It's essential to know how to debug and fix codes. Refactoring should be added to your skills to make clean, robust, and understandable code

Test-Driven Development (TDDF) For API

Francois MUGOROZI — Thu, 30 Apr 2020 00:20:00 +0000

TDD

Test-driven development (TDD) is a software development process that relies on the repetition of a very short development cycle: requirements are turned into very specific test cases, then the code is improved so that the tests pass. This is opposed to software development that allows code to be added that is not proven to meet requirements.Wkipedia

Why TDD

You can't imagine how TDD is very useful in software development industries. Most individuals programmers usually do not use this approach. However, the trusted and scalable product has to be tested for any expected cases. Hare are some of the benefits of TDD:

Test-driven development offers more than just simple validation of correctness, but can also drive the design of a program
It allows a programmer to focus on the task at hand as the first goal is to make the test pass
TDD can lead to more modularized, flexible, and extensible code.

You can not talk about TDD without talking about CI/CD

CI is a coding philosophy and set of practices that drive development teams to implement small changes and check-in code to version control repositories frequently. Because most modern applications require developing code in different platforms and tools, the team needs a mechanism to integrate and validate its changes.Read more

Without talking to much, let see this in practice. For this demo, I am going to create a simple contacts book API.

Prerequisites:
- Node js and Express
- Creating API.
- Git and Github

Now I will start

Step 1:
- Create Repository on Github mine is "tdd-demo-ass" and clone it to your computer.
- Create an account on Travis and connect your repository with Travis, after connecting it you have to copy the markdown and add it to your README file.Read more here
- Create account on coveralls.io and connect your repo.Coveralls
Step 2:

Now that we have Travis, it will help us for CI and then we need where to deploy our app after a successful build, here we can use Heroku.

To be able to perform in continuous delivery, we create pipelines which help to deploy our codes to the codebase automatically when all test pass.

Go to Heroku, create an account, and then create a new pipeline and connect it with your GitHub repo. From there, you can have a review app (where you can test every pull request before merging into the base branch), staging app which you can use whole testing and production app where the final app gets deployed when everything is ready.

Step 3:

Now we have everything set up, we will start by writing our test cases, which by now will fail.
This is the structure of mocha and chai testing



```
const chai = require('chai');
const { expect } = require('chai');
const { describe, it } = require('mocha');
const chaiHttp = require('chai-http');
const { app } = require('../app');

chai.should();
chai.use(chaiHttp);

describe('Route test', () => {
  it('Should return 404 not found route', (done) => {
    chai
      .request(app)
      .get('/api/notfound')
      .end((err, res) => {
        expect(res).to.have.status(404);
        done();
      });
  });

  it('Should return 200 on / request route', (done) => {
    chai
      .request(app)
      .get('/')
      .end((err, res) => {
        expect(res).to.have.status(200);
        done();
      });
  });
});
```

Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cuyh9bbwpbcemekfxcs4.JPG)

From here when we create a pull request of our first branch to merge it into our base branch, the Travis tests fail and the code can not be deployed

It may sound reckless to start with writing tests, but believe me this will save us from a lot of troubles and also keep our codes maintainable so that none can mess with it in the future.

Step 4:

No, it's time to write codes that pass the test. I will create contacts book API with basic CRUD operations and authentication. when I am done, this is what I get when I run the test again!
And now when the PR is merged, my app automatically get deployed through the pipeline we created on Heroku. and Travis and Coverage get 100%

Conclusion

Now that we have an idea of what happens in CI/CD and TDD development, I believe that this is a required skill for every developer for creating effective and maintainable codes.

DEV Community: Francois MUGOROZI

Debugging and Refactoring JavaScript codes for robustness

Why debugging?

Why Refactoring?

Conclusion

Test-Driven Development (TDDF) For API

TDD

Why TDD

You can not talk about TDD without talking about CI/CD

Conclusion

Remember, every API needs documentation, you can get this demo API doc Here.

You can also get the codes for this demo on GitHub.