DEV Community: Fimber Elemuwa

Mastering Object-Oriented Programming in JavaScript

Fimber Elemuwa — Wed, 26 Apr 2023 08:29:18 +0000

Whether you’re new to JavaScript or you’ve been hacking at it for a while, you’ll definitely need to know about object-oriented programming. Object-oriented programming (OOP) is a programming paradigm that allows you to organize your code into self-contained, reusable, and modular components called "objects".

In this blog post, we'll cover the basics of object-oriented programming in JavaScript, including what objects are, how they are created, and how to use them to build complex applications. We'll also discuss the classes, and how to use inheritance and polymorphism to your advantage.

Without further ado, let’s dive right into it.

Understanding Objects in JavaScript

To understand OOP, you have to first understand what an object is. In JavaScript, an object is a collection of key-value pairs where each key is a unique identifier or property, that points to a value. Objects in JavaScript are dynamic, which means properties can be added, modified, or removed at any time.

Let’s use me as an example. If we wanted to create an object with some of my details, here’s what it would look like.

let author = {
    name: 'Fimber',
    age: 26,
    height: '6.2ft'
}

In the above example, the object is “author”, while the key or properties are name, age, and height, while the values are Fimber, 26, and 6.2ft. While we created the object using the “let” keyword, you can also create it using “const” and “var”.

The properties of the object can be accessed by simply targeting it. For instance, if I wanted to get the name property from that object, I can simply conslole.log it like this

console.log(author.name);

As I said earlier, you can also add properties to an object using either the dot notation or bracket notation, like this

author.country = 'Nigeria';
author['hobby'] = 'Writing';

The above would add a “country” and “hobby” property to the author object, and this can also be modified and removed at any time.

Now that we know what objects are, let’s dive a bit more into OOP in JavaScript.

Defining Classes in JavaScript

Now that we know what objects are, it’s time to look at classes. Classes are a vital part of OOP, and it’s something you need to understand to fully master OOP.

Classes are a way of creating reusable code templates for creating objects with similar properties and behaviors. Think of a class like a recipe for making cookies. The recipe tells you what ingredients you need and how to mix them together to make cookies.

In JavaScript, a class is like a recipe for making an object. It tells you what kinds of information, called properties, an object should have, and what things, called methods, the object should be able to do. So just like a recipe helps you make lots of cookies that are all the same, a class helps you make lots of objects that all have the same properties and methods.

Here’s an example of a class

class Calendar {
  constructor(day, date) {
    this.day = day;
    this.date = date;
  }

  sayHello() {
    console.log(`Hello, today is ${this.day} and the date ${this.date}.`);
  }
}

As you can see, we've created a “Calendar” class with a constructor method that takes two parameters, day and date. We've also defined a sayHello() method that logs a message to the console using the values of day and date. With this, you can reuse that class several times over whenever you want. Pretty simple right?

Well that’s exactly how classes work. Classes provide a powerful way to organize code and create reusable objects with their own properties and methods.

Working with Inheritance and Polymorphism

Inheritance like the name suggests, is simply the process of borrowing parts of an older object to create a new project. It's like building a new toy car that has the same wheels as an old toy car, but a different body. Instead of building everything from scratch for the new toy, we can use some of the parts from the old toy and just change the parts we need to. It's a really neat trick that saves developers a lot of time in JavaScript.

Here’s an example.

class Person {
  constructor(name) {
    this.name = name;
  }

  shoot() {
    console.log(`${this.name} shoots a ball.`);
  }
}

class Player extends Person {
  shoot() {
    console.log(`${this.name} scores!.`);
  }
}

const player = new Player('Messi');
dog.speak(); // logs "Messi scores!."

In this example, we've created a class called Person, with a constructor method that takes a name parameter and a shoot() method. We've then created another class named Player that extends Person and overrides the first shoot() method to make the Person score instead of just shooting a ball.

Finally, we created an instance of the Player class and called its shoot() method, which logs "Messi scores." to the console. By overriding the Person class, the Player class basically borrowers the name constructor and then implements it in its own shoot() method through Method Overriding.

Polymorphism, on the other hand, refers to the ability of objects to take on different forms or behaviors depending on how they are used.

In JavaScript, polymorphism is typically achieved through method overloading or method overriding. Method overloading means defining multiple methods with the same name but different parameters. When you call the method, the correct version of the method is called based on the parameters you pass in. Method overriding, on the other hand, means replacing a parent class method with a new implementation in a child class.

Think of Polymorphism as having a box with different shapes that can fit inside it. Let's say you have a circle shape, a square shape, and a star shape. Each shape is different, but they can all fit inside the box, even though they don't look the same.

That's polymorphism in programming, where you have different objects that can do something in different ways, but they are all related in some way and can be used together. Just like how the circle, square, and star shapes can fit inside the same box. It's like having a bunch of toys that can all "play" in the same way, even though they're not exactly the same toy.

Here’s an example.

class Shape {
  area() {
    console.log('Shape area undefined');
  }
}

class Square extends Shape {
  constructor(side) {
    super();
    this.side = side;
  }

  area() {
    console.log(`Square area: ${this.side * this.side}`);
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    console.log(`Circle area: ${Math.PI * this.radius * this.radius}`);
  }
}

const square = new Square(5);
const circle = new Circle(3);

const shapes = [square, circle];

shapes.forEach(shape => {
  shape.area();
});

As you can see in the above example, we've defined a Shape class with an area() method that logs a message to the console. We've then created two child classes, Square and Circle, that override the area() method to calculate and log the area of the respective shapes. We've also created instances of both classes and added them to a new array.

Finally, we've looped over the array and called the area() method on each object, which logs the correct area message for each shape. This perfectly demonstrates polymorphism, as we are using objects of different classes interchangeably based on their common interface of having an area() method. If you’d like to read more about Polymorphism, this fantastic article targets it in depth.

Conclusion

If you made it this far, then by now you can rest assured that you now have a solid idea of what object-oriented programming is in JavaScript. Mastering object-oriented programming in JavaScript can be a game-changer for developers looking to write more efficient, modular, and maintainable code.

By understanding the key concepts of OOP, such as classes, inheritance, encapsulation, and polymorphism, developers can create powerful and flexible software objects that can be reused and extended in various contexts.

I hope this article has been a great help to you. Till next time, live a life of value.

How to Write a GraphQL Query

Fimber Elemuwa — Wed, 12 Apr 2023 09:52:31 +0000

A beginner’s guide to writing your first GraphQL query

In 2015, GraphQL was introduced by Meta as an alternative to REST APIs for building web applications and it’s safe to say GraphQL has taken the world by storm. A recent report showed that 47.9% of developers use GraphQL and that number is expected to keep rising. But what is GraphQL? How do you get started with it, and write your first query?

In this article, we’re going to be discussing the fundamentals of GraphQL, its benefits, and most importantly how to write a GraphQl query. We will walk you through the GraphQL Schema, the syntax you will need to create and execute a query, and common mistakes to avoid while writing a query. By the end of this article, you'll have a great understanding of how GraphQL works and be able to write your query with confidence.

Without further ado, let's get started!

Prerequisites

While this is a beginner friendly article, it's still expected that you're familiar with javascript and Object Oriented Programming. If you do not, you can still read on and follow through without sruggling, as we'll go through everything together.

What is GraphQL

GraphQL is a query language for APIs that provides a more efficient, powerful, and flexible alternative to traditional REST-based APIs. GraphQL query language is used to access, query, and modify data in databases, as well as build APIs to access the data.

GraphQL simplifies the process of fetching and manipulating data from an API by allowing developers to specify exactly what data they need, in one request. This means fewer requests are needed to obtain the data and no over-fetching of data occurs. GraphQL also provides developers with more control over the shape of the data that is returned, so they can structure it exactly as they need.

Think of it this way. Let’s say you need to go on vacation, and you need clothes for your trip. If you’re using the RESTful approach to pack your clothes, you’d just take all your clothes with you and then sort them when you get there. Even if you had to take several trips.

However, if you had something like GraphQL to help you with the task, it would be able to fetch and pack only the specific clothes that you’d need, saving you the stress of overpacking and multiple trips. Pretty neat right?

Well, that’s exactly how GraphqL works. It helps you get specific data from a database base at once, cutting out repetitive requests and over-fetching. GraphQl shines particularly in React because it enables efficient data fetching which improves the performance of your React application, and it also helps you create more simplified state management which the complexity of your code.

Now that we know what GraphQL is, let’s talk about how to use it, and how to create your first query. The first thing we’ll be looking at is a GraphQL schema.

Understanding the GraphQL Schema

Now we know that with GraphQL we can get specific data from an API, but getting that data would not be possible without the schema. GraphQL schemas define the structure and shape of the data that can be queried in a GraphQL API. Basically a schema is essentially a blueprint that defines the types of data that can be queried by a client application.

Let’s revisit the vacation analogy. A GraphQL schema is like a shopping list that’ll contail all your clothes, along with details about them. The schema will contain the type of cloth, the color, texture, and every other detail that will enable GraphQL pick the specific clothes you’d need.

The schema has two main types of data: objects and scalars. Objects represent complex data structures with multiple fields, while scalars represent single values like strings, integers, or booleans. That may be a bit hard to understand, so let’s explain it further using an example.

Schema’s are written using schema language. Continuing wih our clothes analogy let’s draw up a schema for your wardrobe.

type Wardrobe {
  shorts: String!
  shirts: String!
  dresses: int!
  underwear: {pants: draws}!
}

In this example, Wardrobe is an object type with four fields:shorts, shirts, dresses and underwear. Shorts and shirts both have a type String, dresses has an int type, and underwear has a nested field called pants. String and int are examples of a scalar type, which represents a single value like a string of characters, while underwear is an object type with its own fields.

In addition to defining types, the schema also defines the queries and mutations that can be executed against the API. Queries are used to fetch data from the API, while mutations are used to modify data. We’re going to be focusing only on the queries part of that because, well, that’s why you’re here.

Syntax of a GraphQL Query

The syntax of a GraphQL query is designed to be human-readable and expressive, allowing clients to request exactly the data they need from a GraphQL API. It’s easy to understand, and easier to use.

Let’s use the schema above as an example. If we want to get just shorts in our wardrobe, here’s what the query would look like.

query GetClothes{
  wardrobe {
    shorts
  }
}

That’s exactly what a GraphQL query looks like. Now, let’s break down the different parts of the query.

‘query’: the query keyword basically indicates that the operation is a query operation.
‘wardrobe’: is the name of the field that is being requested. In this case, it is a custom field defined in the GraphQL schema.
‘shorts’: is a subfield of the ‘wardrobe’ field being requested.

There are other things you can add to a query, like arguments, variables, and fragments, but we’ll talk about that later.

Now that you understand the syntax of a basic GraphQL query, let’s construct a query using data from a real live GraphQL API.

Constructing a GraphQL Query

To write our first query, we’ll be using the GraphQL Rick and Morty API playground. The GraphQL Rick and Morty Playground is an online tool that allows developers to explore and interact with the GraphQL API for the TV show "Rick and Morty". It provides a web-based interface where developers can enter queries, see the corresponding responses, and experiment with the available data.

To make a query, we’ll first have to take a look at the schema for the API, which is available here. There’s a lot of information there about the character schema, the location schema, and the location schema. For our first query, we’re going to get the names and genders of characters in the TV show.

Here’s what that query would look like. Remember, we’re using this playground and just writing the query on the left-hand side. You can try it out if you’d like.

query GetInfo {
  characters {
    results {
      name
      gender
    }
  }
}

As you can see, this query basically uses the “characters” field to retrieve data on all characters in the API, and then uses the “results” field to get the name and gender of each character. The name and gender fields are scalar fields that are already defined in the GraphQL schema. The result of that query will be a JSON-like object, and here’s what that looks like.

{
  "data": {
    "characters": {
      "results": [
        {
          "name": "Rick Sanchez",
          "gender": "Male"
        },
        {
          "name": "Morty Smith",
          "gender": "Male"
        },
        {
          "name": "Summer Smith",
          "gender": "Female"
        },
        {
          "name": "Beth Smith",
          "gender": "Female"
        },
        {
          "name": "Jerry Smith",
          "gender": "Male"
        },
        {
          "name": "Abadango Cluster Princess",
          "gender": "Female"
        },
        {
          "name": "Abradolf Lincler",
          "gender": "Male"
        },
        {
          "name": "Adjudicator Rick",
          "gender": "Male"
        },
        {
          "name": "Agency Director",
          "gender": "Male"
        },
        {
          "name": "Alan Rails",
          "gender": "Male"
        },
        {
          "name": "Albert Einstein",
          "gender": "Male"
        },
        {
          "name": "Alexander",
          "gender": "Male"
        },
        {
          "name": "Alien Googah",
          "gender": "unknown"
        },
        {
          "name": "Alien Morty",
          "gender": "Male"
        },
        {
          "name": "Alien Rick",
          "gender": "Male"
        },
        {
          "name": "Amish Cyborg",
          "gender": "Male"
        },
        {
          "name": "Annie",
          "gender": "Female"
        },
        {
          "name": "Antenna Morty",
          "gender": "Male"
        },
        {
          "name": "Antenna Rick",
          "gender": "Male"
        },
        {
          "name": "Ants in my Eyes Johnson",
          "gender": "Male"
        }
      ]
    }
  }
}

Just like that, we’ve successfully written our first GraphQL query. But that’s not all there is to these queries. We can use these queries to target specific data with the use of arguments. For instance, if we only wanted to get the data of characters named “rick”, we’ll add an argument to the characters field, like this.

query GetInfo {
  characters(filter: { name: "Rick" }) {
    results {
      name
      gender
    }
  }
}

In this query, we've simply added a filter argument to the characters field that specifies a filter object with a name field set to the value "Rick". This filter then restricts the results we get to characters whose name matches "Rick". That’s the beauty of GraphQL arguments: like a surgeon’s scalpel, it enables you to cut through the data and get exactly what you want.

With that, we’ve successfully written a GraphQL query. Of course, there’s a bit more to queries like fragments, variables, and mutations, but you can read up on that later in your spare time. Next, let’s look at the best practices you should follow when writing GraphQL queries.

Best practices for writing a GraphQL query

Name all operations: In all our operations above, we gave the queries a name, i.e GetClothes, and GetInfo. The truth is, we don’t necessarily have to do so, as the queries would still work without us giving the operation a name. However, it’s best to always name your operations for clarity of purpose and to to avoid unexpected errors.
Be specific with your query: Only ask for the data you need. Avoid requesting unnecessary fields or data that you won't use. This will make your query more efficient and faster, which is the entire point of using GraphQL over the RESTful approach
Avoid nested queries: While GraphQL allows for nested queries, it's best to avoid them as much as possible. They can lead to performance issues and make queries more difficult to read and maintain.
Use the GraphiQL tool: The GraphiQL tool is a powerful development tool that allows you to interactively build and test your queries. You can set it up locally on your computer or use the online versions to experiment with different queries and ensure they return the expected data.

Common Mistakes to Avoid when writing a GraphQL query

Over-fetching or under-fetching data: Over-fetching means retrieving more data than you need, which can slow down your application. Under-fetching, on the other hand, means not retrieving enough data, which can result in multiple requests being made to the server.
Nesting too deeply: Nesting too deeply in GraphQL can make your queries difficult to read and maintain. It is best to keep your queries shallow and only nest when necessary.

Conclusion

If you’ve made it this far, then congratulations you’ve learned how to successfully write your first GraphQL query, and you’ve also learned the best practices and mistakes to avoid. If you’d like to learn more about GraphQL in general, you can check out this video. It was quite useful to me when I was starting out.

I hope this article was useful to you. See you in the next one!

3 Ways to Improve the Security of Open-Source Node Dependencies

Fimber Elemuwa — Wed, 22 Feb 2023 16:59:06 +0000

While open-source software can be extremely beneficial, some major risks come with using it. Many developers don’t know the extent of these risks, or even that they’re using open-source software at all! According to a report, the average Web application or API has 26.7 serious vulnerabilities. Most organizations often have tens of thousands of applications, which can potentially be fatal!

Thankfully, there are plenty of ways to increase your security while using open-source, and this article will explain how you can do just that.

Before we go into how to improve the security of your node.js dependencies, you must understand the severity of using compromised open-source software. Let’s look at the two biggest security breaches caused by open-source software.

The Equifax Breach

If you don’t know what Equifax is, it’s one of the credit reporting agencies that assesses the financial health of nearly everyone in the United States. This automatically means it has the personal information of over 95% of United state citizens including social security numbers, addresses, credit card numbers, birthdates, etc. In September 2017, Equifax released a statement that said hackers had stolen the sensitive information of 147 million people.

The real question is: how did the hackers do it? How did the hackers access the servers of the most important companies in the United States? The answer is; by accident.

The truth is, the hackers were crawling the web for vulnerable servers, and they accidentally came across the dispute server of Equifax. They then used a known Apache Struts vulnerability to hack into three Equifax servers.

Here’s how the Struts vulnerability worked: If attackers sent HTTP requests with malicious code tucked into the content-type header, Struts could be tricked into executing that code, potentially opening up the system Struts was running on to further intrusion.

The hackers were able to spend up to 6 months in the Equifax servers before they were discovered and eventually booted out. By then, the harm was already done. Equifax was criticized for everything from insufficient security to a bungled reaction to the incident, and top officials were accused of wrongdoing in the aftermath.

The ESlint heist

In 2018, a vulnerability was found in a module called eslint-scope, which is a dependency of several popular JavaScript packages such as babel-eslint and webpack. The module was hijacked by a hacker in an attempt to steal tokens from .npmrc. The hacker released a new patch of the module with a trojan in it, and many developers that were using the library started using the new patch.

It was a brilliantly executed plan, but it fell apart because of some poorly written code. The hacker did not have a strong background in Javascript and Node.js best practices, and this made his hack easy to fix. The npm team invalidated tokens created before the publication of the hijacked module This rendered any credentials obtained by the hijacker of the module completely useless, hence ensuring the security of additional modules.

By now, you probably know, you already understand the risk of having low security in node.js dependencies. Now, let's talk about how to mitigate those risks. First, we'll be looking at several questions you can ask which can reduce your risk substantially.

What packages am I using?

Logically, the more packages you use, the higher the chances that you'll have a malicious package. This is true not only for the packages you directly use but also for any of the dependencies those packages may have.

Finding the dependencies you use is as simple as running npm ls in your application's parent folder to see which packages you're using. You can use the —prod parameter to only see production dependencies (which have the most influence on your security), and —long to receive a brief overview of each package.

You can also use Dependency Management Services like bitHound and VersionEye to list and track the dependencies you use. Once you know all your packages, here's the next question you'll ask yourself.

Am I still using this package?

As we all grow and evolve, so does our code. Most developers tend to stop using some packages, but instead of removing them, they just add new ones. At the end of the day, most projects tend to have a lot of unused dependencies which may become a security risk.

The Depcheck tool is the best way to check for unneeded dependencies. Depcheck searches your code for requires and import commands and correlates them with the packages installed or mentioned in your package .json, and generate a report. The command can be customized in a variety of ways using command flags, making it simple to automate checking for unneeded dependencies. Next, and perhaps the most important question.

Are other developers using this package?

In this case, the more the merrier. If more people are using a particular package, the less likely it is to be hacked. And if it is eventually hacked, the chances of finding the hack fast are higher for a package that is widely used.

For instance, the eslint-scope incident. The problem was only discovered when an issue was submitted in the eslint-scope GitHub repo, pointing to an unexpected error message indicating that a specific version of the module was harmful. The GitHub issue drew immediate answers and quickly became the focal point of the incident, where all of the debate took place.

Finally, the last question you should ask yourself is

Does this package have any known vulnerabilities?

If a package has known vulnerabilities, it presents a future risk to your project or organization. Approximately 15% of packages contain a known vulnerability, either in their code or in the dependencies they bring in. According to Snyk's analysis, around 76% of Node developers employ vulnerable dependencies in their apps.

Snyk makes it simple to identify such insecure packages. You may run snyk test in your terminal or use the web UI to quickly test your GitHub repositories for insecure dependencies. Other testing alternatives can be found on Snyk's test page.

Finally, let’s look at things you can do to improve the security of your packages.

Choose a good Repository Hosting Service

By definition, launching an open-source project means the code must be publicly available to everyone, so it has to be hosted on a publicly available platform that everyone has access to. A version control system must also be utilized so that multiple developers can work on the project at the same time. Git is the most used version control system among developers today, so using that is advised.

If for some reason you don’t want to use GitHub, you can use BitBucket, GitLab, and Launchpad. Note that while these are also free, they’re far less popular, meaning there’ll be fewer eyes on your code. They also offer lesser engagement and they offer less helpful tools than GitHub. Just putting it out there.

Keep your dependencies updated

Now, this might seem obvious, but you’d be surprised by the number of developers who use outdated packages. It’s not like they do it on purpose, they just…forget. That’s a serious security breach though because there are many security bugs that are constantly unearthed and in most cases, quickly patched. It is fairly uncommon to find newly reported vulnerabilities resolved just on the most recent branch/version of a given project.

Consider the Regular Expression Denial of Service (ReDoS) vulnerability discovered in the HMAC package 'hawk' in early 2016. This hawk bug was rapidly fixed, but only in the most recent major version, 4.x. Older versions, such as 3.x, were fixed much later, despite the fact that they were equally vulnerable. As a rule, you should always use the latest version.

The npm outdated command is the quickest way to see if you're running the most recent version. This command supports the -prod flag to ignore any dev dependencies and the —json flag to simplify automation.

Inspect the packages you use on a regular basis to ensure they are up to current. You can accomplish this in two ways: through the npm UI or by executing npm view <package> time.modified.

Use security tools

There are a ton of tools that have been developed to tackle the problem of identifying security vulnerabilities in different source components. Each tool was designed to approach the matter in a different manner, but we’re going to look at three of the most popular security tools around today.

RetireJs:

RetireJS is a JavaScript-specific dependency checker that is open source. The project is largely concerned with usability. As a result, it includes a command-line scanner as well as plugins for Grunt, Gulp, Chrome, Firefox, ZAP, and Burp. RetireJS also provides a site-checking tool for JS developers who wish to discover if they're utilizing a JavaScript library with known vulnerabilities.

Hakiri:

Hakiri is a commercial application that uses static code analysis to provide dependency testing for Ruby and Rails-based GitHub projects. It provides free blueprints for open-source public projects and premium plans for private companies. It makes use of the NVD and the Ruby Advisory Database. But they’re also looking to include connections with Slack, JIRA, and Pivotal Tracker, as well as support for other platforms such as Node.js and PHP.

Dependency-check:

Dependency-check is a well-maintained open-source command-line utility from OWASP. It can be used independently as well as in build tools. Dependency-check is compatible with Java,.NET, JavaScript, and Ruby. The tool obtains its vulnerability data solely from the NIST NVD.

Conclusion

Working with open-source software is fantastic for developers. It gives us access to thousands upon thousands of pieces of code that we can easily use in our own projects and even offer improvements back to. However, with great power comes great responsibility. There are a lot of pitfalls when it comes to using open source libraries and packages in your applications, but taking precautions will keep you and your users safe.