DEV Community: Snevy1

Classes vs Factory functions in Javascript

Snevy1 — Thu, 30 Nov 2023 16:12:10 +0000

Between Factory Functions and Classes which is better?

In Javascript, you can arrange your code using object oriented patterns such as factory functions, classes and constructors.Choosing the right pattern can be tricky. In this article, I will explain what classes, constructors and factory functions are and how to use them in various situations.

In my previous article, I discussed extensively how creating objects by classes and constructors is better than object literal.Check it out here.

Classes in Javascript

If you know constructors then classes shouldn't be hard to grasp. Classes are a syntactic sugar of constructors in Javascript.

The code below shows a constructor function.



function playerCreator(name, score) {
  this.name = name;
  this.score = score;
}

playerCreator.prototype.increment = function () {
  this.score++;
};
playerCreator.prototype.login = function () {
  this.login = false;
};

Notice how the increment and login functions are placed on the prototype.They are shared functions so any object created by the constructor has access to the methods. This saves memory.

This next code shows a class object.




class playerCreator{

  constructor(name,score){
   this.name = name;
  this.score = score;
  }

increment: function () {
  this.score++;
};

login:  function () {
  this.login = false;
};



}

When we create a class object we start with the keyword class then a function name. Inside of the function we add a constructor that holds the parameters to be used. Notice that instead of adding increment and login methods on the prototype explicitly, we nicely tuck them inside the class object though under the hood they are added to the prototype(implicitly)

So if constructors and classes do essentially the same thing why should we use classes instead of constructors?

Classes are easy to read.

By using classes, Javascript tries to follow the normal convention of object-oriented programming, though it is still a prototypical-based language.

Also, classes are not native to JavaScript but are widely used in other object-oriented programming languages such as C# and Java. To avoid confusion that developers from these languages face when they encounter Javascript, classes are a better solution.

Factory Functions

What are factory functions? Factory functions are functions that return a new object. They are quite similar to classes, but they utilize the power of closures in that, they don't use the new keyword.

Once you call the function, it sets up and returns a new object.

Below is how we would implement a factory function:



function playerCreator(name, score) {
  return {
    name: name,
    score: score,
    increment() {
      return (this.score += 1);
    },
    login() {
      return (this.login = false);
    },
  };
}

let player1 = playerCreator("John", 8);

player1.increment(); // 9

Benefits of using Factory Functions over Classes in javascript

There is no use of this keyword when instantiating variables. It is only used inside methods. This reduces the confusion of the this keyword.
There is no use of the new keyword which is often forgotten when creating objects using classes.
It is easier to setup since it looks quite similar to regular functions.
Simplicity - Factory functions provide a more straightforward and flexible way to create objects. They don't have the syntactic complexities that come with class declarations and prototypes, making them more approachable for developers who prefer a simpler syntax.
Encapsulation with Closures: It is easy to encapsulate private variables and objects with Factory functions since is natural to them.This enhances data privacy and abstraction.

Benefits of using Classes over Factory functions in Javascript

Classes save memory so they are suitable when creating large applications that require creation of thousands of objects.
Classes are used in many programming languages hence it is a cleaner way to follow object oriented programming paradigm.
Inheritance: Classes support the concept of inheritance, making it easier to create a hierarchy of objects. You can use the extends keyword to create a subclass that inherits from a superclass. ```Javascript

class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}

// Additional methods or overrides
}

const student1 = new Student('James', 18, 'A');




'instanceof' Operator: Classes make use of the instanceof operator, which can be useful for type-checking and determining if an object is an instance of a particular class.




console.log(student1 instanceof Student); // true
console.log(student1 instanceof Person);  // true



</code></pre></div><h2>
  <a name="conclusion" href="#conclusion">
  </a>
  Conclusion
</h2>

<p>The choice between classes and factory functions depend on your specific needs and which pattern you are comfortable with.</p>

<p>In my opinion, factory functions are great and the performance benefit of classes is minimal. Let me know your opinion in the comments below.</p>

<p>Follow me on:</p>

<p><a href="https://twitter.com/Sneviy">Twitter</a></p>

<p><a href="https://www.linkedin.com/in/nevily-simiyu/">Linkedin</a></p>

Object Oriented Programming In Javascript: A comprehensive guide

Snevy1 — Mon, 13 Nov 2023 12:37:02 +0000

What is object-oriented programming?

Object-oriented programming is a programming paradigm or concept in which we wrap our data and functionality into objects

The world is made up of objects, i.e.person, tree, car,school etc.

When we think and write code in terms of objects it is easier to understand, to reuse and to scale our code.

Object Oriented Programming is different from functional programming in that the latter emphasizes on logic that manipulates objects rather than the object itself while the former focuses on objects and adds logic to it.

A common way of object oriented programming is to create objects, add functionality and data to it. Then find a way in which these objects, their subclass objects and sibling objects relate.

For example, an animal is an object, an animal can eat, can move and can sleep.

We create an animal object. We add functionality to this object.Some of the functions are eat, move and sleep.

Notice that all animals can eat, move and sleep but not all can speak.

A person is an animal that can speak. By itself a person is an object and relates to the animal object because is a subclass of animal but is special because it can speak.

In OOP we find a way to relate the animal object and a person object.

That is to say, we relate a parent object(class) to its children(subclass) or a parent to another parent.

That is quite a mouthful introduction. Let's now focus on OOP in javascript

In javascript, data can be numbers, boolean, string, objects, arrays,functions etc

Functions inside of an object are called methods.

Actually, the term method is just a way to know that the function we are talking about is inside an object.

In javascript there are three main ways to create an object

Let us create a player object and add data and some functionality to it

The common way is using object literal. In this method we create an object then add data and functions immediately.


//First way
const player = {
      name: "John",
      score: 6,
      increment: function () {
        player.score++;
      },
    };

   // console.log(player)

When we log player:

We can also create an object by first creating an empty object then add data and functions later

In this way, javascript first asks, Is there a variable called name? if yes, it reassigns its value.If no, it creates a new variable with value and adds it to the object.

 //Second way
const player = {}; //Empty object

    player.name = "John";
    player.score = 6;
    player.increment = function () {
      player.score++;
    };

    //console.log(player)

When we log player, you will notice it looks similar to way1:

We can also create an empty object by using inbuilt method in javascript(Object.create(null)) then add data and functions.

So what the hell is this Object.create(null)? We shall answer this question later.

Notice that this third way looks suspiciously similar to the second way above except for the "Object.create()" thing.


  //Third method

const player = Object.create(null);
    player.name = "John";
    player.score = 6;
    player.increment = function () {
      player.score++;
    };

//console.log(player)

Let's log player once more:

Why would we use the third way when the first 2 ways can just do fine? We will answer this question after a few more explanations. Stay tuned.

Functions in Javascript

Functions enable us to implement logic i.e manipulate data, create data, store data etc.

Imagine you are creating a game that requres more than 100 players. Creating an object for each of the player manually is tiresome.

This is where we can use a function that when invoked creates an object for us automatically.The only thing we need to do is to give it a name of the player and a score.

Let's us create a function called playerCreator. Read the comments in the code to understand how javascript runs it.Follow the numbers to understand which code is executed first.

// 1. playerCreator in instantiated and assigned a function definition. Javascript leaves it that way because it is not yet invoked!
function playerCreator(name, score){

    //3. Javascript pairs the parameters(name and score) with arguments("John" and 6)

    // By this time name has a value of John and score has a value of 6. i.e name: "John", score: 6.

    // 4. Create a new empty object

    const newObject = {}; //Empty object

    // 5.  Add property key values to the object

    newObject.name = name;

        //To the left before (=) we are creating a property(key) called name

      //To the right we are giving that property a value that is stored in a variable called name.

    newObject.score = score;
    newObject.increment = function () {
      newObject.score++;
    };

    /* The final player object looks this way :
     newObject = {
        name = "John",
        score = 6
        increment = function(){}
      } */


    // 6.  //We return the newObject.This is the object that playerCreator function has made for us!

    return newObject;



}

// 2. playerCreator is invoked
// 7. Assign the value returned by  playerCreator() after its ivokation to a variable named player.
const player = playerCreator("John", 6)
const player2 = playerCreator("Doe", 8)

The above code is great... we have solved one problem of not creating every new object by ourselves but you notice that every time an object is created the increment function is also created.

If we log the value of player and player2 we notice that they both have the increment function:

There is nothing special about increment function. It does the same thing for all objects. It would be nice if we can have such a function in just one place from where every object can access it. This saves memory and improves perfomance.

It turns out that we can actually implement this by using Object.Create() introduced earlier.

According to MDN: The Object.create() static method creates a new object, using an existing object as the prototype of the newly created object.

Did you understand what that statement mean? If not don't feel bad, soon it will make sense.

... Creates a new object - This seems like what we initially did by creating an empty object in the playerCreator function right? But this time this method does it for us

... Using - For a function or a method to use something you must give it that thing right? We give Object.create something by passing it in the bracket i.e Object.create(somethingthat we give).

... an existing object - Where is this existing object? It must be somewhere right? It turns out that maybe there isn't and therefore the method will use null as a parameter or If there is an existing object it will use it i.e Object.create(an existing object).

...as the prototype - What is a prototype? Every object in javascript has a its own property called a prototype. What does this even mean?

First, remember that an object has property: key value pairs. These properties and keys can be created or are inbuilt.

These properties can be a name with a value of a string, an object with a value of an array or an object with a value of an object etc

Prototype - This is an inbuilt property of an object in javascript which by itself is an object and has its value as an object

Consider the code below:

object1 = {
  name: "John",

  prototype: {
    //I am an object, a value of prototype
    someFunc: function () {
      //do something...
    },
  },
};

Since a prototype is an object, and is a property of object1, object1 can access prototype's data i.e Object1.prototype.someFunc

..of the newly created object

In short, in our case Object.create(someObject or null), first creates a new object (Object1) then uses Object1's property(prototype property) to assign data of someObject to prototype. The code snippet above becomes:

object1 = {
    name: "John",

    prototype: {
        //someObject's data

        someFunc: function(){

        }
    }


}

To summarize, we can use Object.create() to pass in an object that has all functions and data that are common to all players and so each player

will have access to this object's data because there is a bond created between the prototype(the passed in object) and the newly created object.

Wow! That is alot. Consider taking a break before continuing.

In this section, let's start by creating an object that stores all of the common functions of players

const playerFunctionsStore = {
  increment: function () {
    this.score + 1;

    //Whenever you use "this" keyword inside of a method, 'this" refers to the object on which the method was called on

    // In this case, the object on which increment was called on is player, so javascript replaces "this" with player
    // hence this.score++ will be player.score++
  },

  login: function () {
    console.log("logged in");
  },
};

let's create a function that will create objects for us.

The new objects will have playerFunctionsStore's object data assigned to their prototype property(This is done automatically by Object.create())

The bond between the newObject and its prototype is fomarlly called _ _ proto_ _.

To understand more read the comments in the code

function playerCreator(name, score){


//Object.create creates a new empty object using an existing object(playerFunctionsStore) as prototype of the newly created object


let newObject = Object.create(playerFunctionsStore)
      //In addition to Object.create giving us a new object, it also creates a bond(_ _proto_ _) between the newly created object, newObjectand its prototype that we passed into the brackets.

      //By default, an object inherits functions(method) and data from its prototype thus because playerFunctionsStore is a prototype of newObject, newObject can access functions such as login and increment that are stored in playerFunctionsStore
      //To access properties of its prototype,  newObject uses the bond/link officially called _ _proto_ _

      // _ _proto_ _ is a property of objects including newObject that javascript uses to look for data in the inheritance chain

 newObject.name = name
 newObject.score = score

 return newObject
}


 let player = playerCreator("John", 9)
 let player2 = playerCreator("Doe", 8)

// The score has increased by one

You notice from the image below that increment and login function are not on the player and player2 objects.

To see these functions we expand on the _ proto _:

This is a great solution in that it saves memory however, in modern javascript we don't want to leave our information in a global store.

What if someone accidentally deletes the store? Then all of our information will be lost.

It would be nice if there is no global store for functions but rather the store is an object inside of a function. We will address this issue in the next section.

Also, what if there is a way in in which we don't need to use or write the Object.create() to create objects but this can be done for us automatically?

It turns out there is: The new keyword :)

In the next section of this article we will dive into the use of the new keyword

The new keyword

let's start by recreating the objects and functions we have used previously.

The new keyword before a function invokation does four things:

Automatically create a new object
Assign this keyword to the newObject hence this.name in the playerCreator() will be newObject.name during execution
Javascript automatically creates _ _ proto _ _ and assigns it to the prototype property of playerCreator (the function that is to the right of the new keyword)
Automatically returns the newObject out of that function

Please follow the numbers to understand the sequence in which javascript is executing the code. Also read the comments.

// 1. Javascript instantiates a variable called playerCreator and assigns a function definition as its value
function playerCreator(name, score) {
  // 7. Javascript by using the new keyword assigns "this" a value of newly created object
  this.name = name;
  this.score = score;

  // 8. Returns a newObject automatically. No manuall writing of return
}

// 2. Javascript will look for playerCreator then look for its key called prototype
// 3. Then look if the prototype key has increment function if not it will create the function and store it in the prototype key(property).
playerCreator.prototype.increment = function () {
  this.score++;
};

// 4. Javascript will do the same as in 2 and 3
playerCreator.prototype.login = function () {
  this.login = false;
};

// 5. Javascript will invoke the playerCreator function
const player = new playerCreator("Jose", 8);

console.log(player);

We realize that we get the same result as we would use Object.create()

The downside of this method is that we have to Capitalize the first letter of the creatorfunction so we know it requires the new keyword

Because of this the class syntax was introduced.

The class - Syntactic sugar

Introduced in 2015

It is cleaner but no perfomance benefit

Majorly used in modern frameworks such as React.

The main diffence in syntax is:

All the shared methods are put together in the constructor so there is no playerCreator.prototype.someFunction
the constructor replaces the this.name, this.score and removes the parameters from being passed directly in the playerCreator function

Look at the images below to understand the difference. The replaced parts have corresponding highlighted colors

This has been a long article! I think it is worth it though.

In the next article that I will be rolling out soon, we will discuss more on classes, and introduce the Factory functions

Wish you well in your programming journey!

Connect with me on:

Twitter

Open for technical writing roles.

How to Create a Tic Tac Toe Game in Javascript.

Snevy1 — Mon, 06 Nov 2023 09:53:08 +0000

A Tic Tac Toe game is a fun project to learn Frontend development and Javascript. In this tutorial, I will walk you through step by step on how to build a simple version of it.

Like most front-end development projects, your project should have an HTML file since this is the skeleton of a webpage. Then we add CSS that styles the HTML and finally we add interactivity by incorporating Javascript logic.

So let’s start by setting up HTML!

HTML

Set up your HTML file to include all the nine squares of the game.

Add classes and IDs since they will be used in CSS to style them and also in Javascript to add interactivity.

Don’t forget to link the CSS file in the title tag and the Javascript file just before the closing tag of the body element.

Below is my code for HTML:




<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Tic tac toe Project</title>
   <link rel="stylesheet" href="index.css" />
    </head>
 <body>
   <h1>Tic Tac-Toe Project</h1>

   <section class="game-board-container scroll-container">
     <article class="game-board">
       <div class="sqrs" id="1">1</div>
       <div class="sqrs" id="2">2</div>
       <div class="sqrs" id="3">3</div>
       <div class="sqrs" id="4">4</div>
       <div class="sqrs" id="5">5</div>
       <div class="sqrs" id="6">6</div>
       <div class="sqrs" id="7">7</div>
       <div class="sqrs" id="8">8</div>
       <div class="sqrs" id="9">9</div>
     </article>

     <article class="form-sect">
       <form>
         <label for="player1">Player1 Name</label>
         <input type="text" id="player1" required />
         <label for="player2">Player2 Name</label>
         <input type="text" id="player2" required />
         <input type="submit" value="Continue" id="submit" />
       </form>
     </article>

     <article class="display-info"></article>
   </section>
   <script src="index.js"></script>

 </body>
</html>

The code above has a form, that is not necessary but you may want to add it since it allows players to submit their names before the game begins and also it allows random selection of the first player to start.
Our project should look like this:

CSS

Without CSS the project would look ugly.

It is time we make our project appealing.

Just as a reminder, to style elements in CSS we use CSS selectors.

To access class elements we start with .Classname, to select elements with ids we start with #idname.

You can also just select the element directly ie body.

Here is the CSS code for my HTML above:



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  overflow-x: hidden;
  max-width: 100%;
  padding-right: 0px !important;
  padding-left: 0px !important;
}

body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 500;
  overflow-x: hidden;
  width: 100%;
}

body h1 {
  text-align: center;
  margin-top: 2rem;
}

input,
label {
  display: block;
  font-size: larger;
  margin-top: 1rem;
}

.game-board-container {
  margin: 2rem auto;

  width: 400px;
  display: grid;
}
.form-sect {
  background: green;
  padding: 1rem;
  width: 50%;
  display: none;
  height: auto;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  height: 50vh;

}

.sqrs {
  background: steelblue;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 30px;
}

.sqrs:hover {
  background: rgb(224, 220, 220);
}

.selected {
  pointer-events: none;
  background: rgb(224, 220, 220);
}

input {
  padding: 0.5rem;
  border: none;
  border-radius: 10px;
}

.display-info {
  margin: 5rem auto;
}

.display {
  width: 100%;
  height: 300px;
  padding: 2rem;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  display: grid;

  justify-content: center;
  align-items: center;
  background: green;
  color: rgb(8, 5, 5);
}

.restart {
  font-size: 50px;
  width: 200px;
  padding: 0.7rem;
  border-radius: 15px;
  border: transparent;
  background: white;
}
.display {
  width: 100%;
  height: 300px;
  padding: 2rem;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  display: grid;

  justify-content: center;
  align-items: center;
  background: green;
  color: rgb(8, 5, 5);
}

.restart {
  font-size: 50px;
  width: 200px;
  padding: 0.7rem;
  border-radius: 15px;
  border: transparent;
  background: white;
}

To make our project responsive on both desktop and mobile phones, we add media queries.

Take note of how to use max-width and min-width in media queries.

Below is how I implemented this:




@media only screen and (max-width: 500px) {
  .game-board-container {
    position: relative;
    width: 100%;
  }

  .game-board {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2rem;
    height: 30vh;
  }

  .form-sect {
    background: green;
    padding: 1rem;
    width: 100%;

    height: auto;
  }

  .form-sect form {
    padding: 2rem;
    background: red;
    width: 100%;
  }

  input {
    padding: 0.9rem;
    margin: 1rem;
    border: none;
    width: 100%;
    border-radius: 10px;
  }
}
@media only screen and (min-width: 500px) {
  .game-board-container {
    width: 100%;
    position: relative;
  }
  .game-board {
    margin-top: 8rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    height: 50vh;
    padding: 2rem;
  }

  .form-sect {
    margin: 5rem auto;
    background: green;
    padding: 1rem;
    width: 50%;

    height: auto;
  }

  .form-sect form {
    padding: 2rem;
    background: red;
    width: 100%;
  }

  input {
    padding: 0.9rem;
    margin: 1rem;
    border: none;
    width: 100%;
    border-radius: 10px;
  }
}

@media only screen and (min-width: 900px) {
  .game-board-container {
    width: 100%;
    position: relative;
  }
  .game-board {
    margin: 4rem auto;
    width: 50%;

    gap: 5px;
    padding: 2rem;
  }
}

@media only screen and (min-width: 2000px) {
  .game-board-container {
    width: 50%;
    position: relative;
  }

  .game-board {
    margin-top: 4rem;

    gap: 5px;
    padding: 4rem;
    height: 100vh;
  }

  .sqrs {
    font-size: 50px;
  }

By this time the project looks this way:

Note that we have set .form-sect element to display none.We will set it to display grid after we finish the project so that the form shows up everytime we want to start a new game. Also, we have set .game-board to display grid, we will change it to display none after we finish the project.

JAVASCRIPT

This is the hardest part of the project.
Try to write javascript code that does the following and if you fail come back we walk through together

On clicking a square, the inner text changes to either X or O
A square cannot be clicked again after initial click
Write a function that stores information about the current player and triggers relevant functions to display win, draw or a turn for another player(You can use factory functions)
Write a function that changes turn from the current player to the next player.
Track the number of squares selected(already clicked) and if no winner is found declare a draw
Write a function that tracks the winner, it should have if…else statements to take care of all the possible outcomes i.e columns or rows aligning with the same sign(X or O)
Display the winner or a draw accordingly
Lastly, you can extend this functionality to create a more complex game.
If feeling more ambitious you can create with an unbeatable AI using the min-max function.

Let’s start by fetching all the squares from the DOM so that we can add click event listener to them.

Just as reminder, to select more than two elements from the DOM we use querySelectorAll while to select only one we use querySelector.

let sqrs = document.querySelectorAll(".sqrs");

Next we select all the squares again but this time we select one by one.

We will use them in the if..else conditions to check if square one and square two and square three… were clicked by the same player and if they match we declare a win.

The code below illustrates this:



let sqr1 = document.getElementById("1");
let sqr2 = document.getElementById("2");
let sqr3 = document.getElementById("3");
let sqr4 = document.getElementById("4");
let sqr5 = document.getElementById("5");
let sqr6 = document.getElementById("6");
let sqr7 = document.getElementById("7");
let sqr8 = document.getElementById("8");
let sqr9 = document.getElementById("9");

We then select other DOM elements and also declare new variables that we may need



let player1Name = "";
let player2Name = "";
let selectedSquares = [];
let formSect = document.querySelector(".form-sect");
let gameboard = document.querySelector(".game-board");
let formEl = document.querySelector("form");
let displayInfo = document.querySelector(".display-info");

It is time we write a very important object (a factory function) that keeps track of everything that goes on in the game.

A factory function returns a new object.
This may be the hardest part but don’t worry,I will try to make you understand.
Let’s name this function Player(it is actually an object).This object is dynamic and stores data of the current and previous player i.e serves each player when their turn comes up. Hence it takes an argument of the name player. The value of player changes every time we change turn. i.e if the current player is player1 the next player will be player2 and invokes the same functions on the player2 as it did on player1.
The Player object will have a changeTurn() function that changes the value of the player argument every instance of the game.



  let playerNumber = player;

  //Change turn function changes the current player to another player after each move.

  changeTurn = function () {
    if (playerNumber == "player1") {
      playerNumber = "player2";
    } else if (playerNumber == "player2") {
      playerNumber = "player1";
    }
  };

The other most important function in Player object is the gameData() function.

This function is the one that keeps track of which squares have been clicked, changes innerText of the squares, invokes the checkwin() every time a move is made etc.

This function is returned from the Player object and is available globally so that it can be invoked when the game start (After submission of names in the form).

Refer to the code below to understand. It comprises of all the code in the Player object




  const Player = (player) => {
  //Initialize type of player so we can use later to locate the current player and change turns.
  let playerNumber = player;

  //Change turn function changes the current player to another player after each move.

  changeTurn = function () {
    if (playerNumber == "player1") {
      playerNumber = "player2";
    } else if (playerNumber == "player2") {
      playerNumber = "player1";
    }
  };

  /*     ==============form el====================
   */

  //Main function and most important
  //Keeps track of everything that goes in on the game board and responds accordingly

  gameData = function () {
    //console.log(playerNumber);

    sqrs.forEach((sqr) => {
      sqr.addEventListener("click", () => {
        sqr.classList.add("selected");
        selectedSquares.push(sqr.id);
        //Changes sign on the squares when clicked, to  either X or O
        if (playerNumber == "player1") {
          sqr.innerHTML = "X";

          if (checkWin() === "X") {
            displayInfo.style.display = "block";
            gameboard.style.display = "none";
            displayInfo.innerHTML += `
            <div class="display"><h2> ${player1Name} has won</h2>
            <button class="restart">Restart</button>
            </div>

            `;

            //Restart button

            document.querySelector(".restart").addEventListener("click", () => {
              location.reload();
            });
          } else if (selectedSquares.length == 9 && checkWin() == false) {
            displayInfo.style.display = "block";
            gameboard.style.display = "none";
            displayInfo.innerHTML += `<div class="display">
            <h2> It is a draw!</h2>
            <button class="restart">Restart</button>
            </div>`;

            //Restart button

            document.querySelector(".restart").addEventListener("click", () => {
              location.reload();
            });
          }

          changeTurn();
        } else if (playerNumber == "player2") {
          sqr.innerHTML = "O";
          if (checkWin() === "O") {
            displayInfo.style.display = "block";
            gameboard.style.display = "none";
            displayInfo.innerHTML += `<div class="display">
            <h2> ${player2Name} has won</h2>
            <button class="restart">Restart</button>
            </div>`;

            //Restart button

            document.querySelector(".restart").addEventListener("click", () => {
              location.reload();
            });
          } else if (selectedSquares.length == 9 && checkWin() == false) {
            displayInfo.style.display = "block";
            gameboard.style.display = "none";
            displayInfo.innerHTML += `<div class="display"><h2> It is a draw!</h2>
             <button class="restart">Restart</button>
            </div>`;

            //Restart button

            document.querySelector(".restart").addEventListener("click", () => {
              location.reload();
            });
          }

          changeTurn();
        }
      });
    });
  };

  return { gameData };
};

The next thing that we need to take care of is to check win.

We will create a global function and then invoke it where appropriate in the gameData().



const checkWin = () => {
  if (sqr1.innerHTML == sqr2.innerHTML && sqr2.innerHTML == sqr3.innerHTML) {
    return sqr1.innerHTML;
  }
  if (sqr1.innerHTML == sqr4.innerHTML && sqr4.innerHTML == sqr7.innerHTML) {
    return sqr1.innerHTML;
  }
  if (sqr1.innerHTML == sqr5.innerHTML && sqr5.innerHTML == sqr9.innerHTML) {
    return sqr1.innerHTML;
  }
  if (sqr2.innerHTML == sqr5.innerHTML && sqr5.innerHTML == sqr8.innerHTML) {
    return sqr2.innerHTML;
  }
  if (sqr3.innerHTML == sqr6.innerHTML && sqr6.innerHTML == sqr9.innerHTML) {
    return sqr3.innerHTML;
  }
  if (sqr3.innerHTML == sqr5.innerHTML && sqr5.innerHTML == sqr7.innerHTML) {
    return sqr3.innerHTML;
  }
  if (sqr4.innerHTML == sqr5.innerHTML && sqr5.innerHTML == sqr6.innerHTML) {
    return sqr4.innerHTML;
  }
  if (sqr7.innerHTML == sqr8.innerHTML && sqr8.innerHTML == sqr9.innerHTML) {
    return sqr7.innerHTML;
  }

  //If all of the above conditions are not met, then the game continues or a draw  is displayed

  return false;
};

The following code is optional but it will be in synchrony with the other code above if you copy pasted or used most of my code, it is just a form and what happens after its submission.



/* ==========================Form info================= */

formEl.addEventListener("submit", function (event) {
  event.preventDefault();

  player1Name = document.getElementById("player1").value;
  player2Name = document.getElementById("player2").value;
  console.log(player1Name);

  //Random player to start

  let randomNumber = Math.round(Math.random() * 1);
  let selectedPlayer = "";
  randomNumber == 0
    ? (selectedPlayer = "player1")
    : (selectedPlayer = "player2");

  formSect.style.display = "none";
  displayInfo.style.display = "block";

  selectedPlayer === "player1"
    ? (displayInfo.innerHTML = `<div class="display"><h2>${player1Name} to start</h2></div>`)
    : (displayInfo.innerHTML = `<div class="display"><h2>${player2Name} to start</h2></div>`);

  setTimeout(function () {
    displayInfo.innerHTML = "";
    displayInfo.style.display = "none";
    gameboard.style.display = "grid";
  }, 1500);

  let player = Player(selectedPlayer);
  player.gameData();
});

Congratulations!

I hope you have learnt a lot from this project.

If for some reasons you haven’t, don’t worry, it may take a while before some concepts sink in.

I wish you well in your web development journey.

Twitter
LinkedIn

How To Create a Javascript Calculator

Snevy1 — Fri, 03 Nov 2023 10:44:43 +0000

One of the basic and best ways of learning Javascript is by building a simple calculator. In this tutorial, you will learn how to build a Javascript calculator.

Prerequisites

HTML
CSS
Basic DOM manipulation with javascript.

Abilities your project should have:

Try to implement these conditions on your own, then come back to follow along

1. Your calculator is going to have html file. This is the skeleton of the project.

Set up buttons for numbers(0-9), operators(x, /, -, +), equals(=), a clear and a delete button.
Set up two display inputs. For previous values and current values.

2. It must have a CSS file to style up the buttons and the whole project so it looks nice.

3. It must have a JAVASCRIPT file to add interactivity to the calculator.

4. On Javascript, you should have the following conditions and functions in your file:

Your file is going to have functions for basic math operations i.e add, subtract, divide, and multiply
An operation will consist of the first number, the operator, and a second number ie 6(first number) x (operator) 7(second number);
Create three variables for each of the parts above
Create a function that takes in the first number, operator and second number then calls each of the basic math operations. You can call it operatorFunc
Create a function that adds the clicked button’s value and the result after computation on the display in HTML.
You should find a way to store the numbers input from the html into the first and second number variables then call operateFunc() utilizing the operator that the user selected.
Ensure to display the result of the calculation after the user clicks equals.

5. This is the hardest part of the project, you need to find a way to store values from the DOM and then call the operatorFunc with them.

These are the most basic conditions that your project should meet. Try to implement them on your own and if you feel lost come back we work through it together.

HTML

Now it is the time to get into it!
Let’s start by setting up our html file. Call it index.html
Link it to both CSS (in the header) and JavaScript files (in the body below the footer).
This is the code for that:


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascript calculator Project</title>
    <link rel="stylesheet" href="index.css" />
  </head>
<body>
  <script src="index.js"></script>
</body>
</html>

Set up the body

a. Add buttons: numbers(0-9), operators(X, /, -, +), equals(=), clear(AC) and delete button(Delete).

b. Make sure to add ids and classes appropriately as they will be used in css to style up.

c. Add two display inputs.

N/B. You are at liberty to use buttons, in our code below we used input elements with the type of button

<body>
    <h1>Javascript Calculator</h1>
    <div class="calc-container">
      <div class="display_container">
        <div id="displayPrev" class="display"></div>
        <div id="displayCurr" class="display">0</div>
      </div>
      <div class="clear-and-delete-container">
        <input type="button" value="Delete" id="delete" class="remove-btn" />
        <input type="button" value="AC" id="AC" class="remove-btn" />
      </div>

      <div class="btn-container">
        <input type="button" value="7" class="btn" id="7" />
        <input type="button" value="8" class="btn" id="8" />
        <input type="button" value="9" class="btn" id="9" />
        <input type="button" value="÷" class="operant divide" id="/" />
        <input type="button" value="4" class="btn" id="4" />
        <input type="button" value="5" class="btn" id="5" />
        <input type="button" value="6" class="btn" id="6" />
        <input type="button" value="x" class="operant multiply" id="x" />
        <input type="button" value="1" class="btn" id="1" />
        <input type="button" value="2" class="btn" id="2" />
        <input type="button" value="3" class="btn" id="3" />
        <input type="button" value="-" class="operant subtraction" id="-" />
        <input type="button" value="." class="btn period" id="period" />
        <input type="button" value="0" class="btn" id="1" />
        <input type="button" value="=" class="equals" id="equals" />
        <!-- operants -->

        <input type="button" value="+" class="operant add" id="+" />
      </div>

      <div class="operants"></div>
    </div>

    <script src="index.js"></script>
  </body>

Our project now looks like this:

CSS

It is time to style the HTML. You may want to make sure operator buttons have different colors. Also, make sure to use layout styling, that is, either implement a grid or a flexbox layout. This will make sure that the buttons are arranged well and all fit in the space available. In our code below, we used both.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background: #f0ffff;
  display: grid;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
  overflow-x: hidden;
}

.calc-container {
  width: 350px;
  height: 485px;
  margin: 2rem auto;
  background: #aaaaaa;
  padding: 0.5rem;
  border: transparent;
  border-radius: 15px;
}
.display_container {
  display: grid;
  background-color: #f0ffff;
  border: transparent;
  border-radius: 15px;

  margin: 0.2rem 0;
}
.display {
  text-align: right;
  padding: 0.5rem;
  border: 0;
  color: black;
  outline: none;
  width: 100%;
  height: 40px;
  border-style: none;
  font-size: 30px;
}
.clear-and-delete-container {
  display: flex;
}
.clear-and-delete-container input {
  width: 100%;
  border: 1px solid black;
  border-radius: 10px;
}
.btn-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.2rem;
}

.btn,
.operant {
  width: 80px;
  margin: 0.1rem;
  height: 80px;
  border: 1px solid black;
  border-radius: 10px;
  background: #ffff;
  z-index: 0;
  transition: background-color 0.25s ease-in 0.09s;
}

.remove-btn:nth-child(2) {
  height: 45px;
  background: #9999ee;
}

.remove-btn:nth-child(1) {
  background: red;
}

.btn:hover {
  background-color: transparent;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
}

.remove-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: black;
}

.equals {
  width: 80px;
  margin: 0.1rem;
  height: 80px;
  border: 1px solid black;
  border-radius: 10px;
  background: #49ca3e;
}

.equals:hover {
  background: #ffff;
}
.period {
  font-size: larger;
}

.divide {
  background: #b2b2d1;
}

.multiply {
  background: #00b1c5;
}
.subtraction {
  background: orange;
}
.add {
  background: #e15a46;
}

.operant:hover {
  background: #ffff;
}

The above code may look a lot but actually it is not. Take your time to go through and understand what it is styling.Our project now looks nice as the image below:

JAVASCRIPT

Now we come to the most important part. The logic part of the project.

To start, we will revisit the steps provided earlier.
It is good practice to put all initialized variables at the start of a javascript file.

The code below illustrates most of the variables we will need.

a. First, we initialize the first number and the second number to have a value of 0;
Then we initialize the operator to be empty so that when a user clicks on any of the operator buttons the value is updated and stored in this variable.

This is the same with the result and previousComput variables i.e. if a user clicks equals, we run the calculation, then the result is stored in the result variable and also in previousComput variable if they choose to continue with the operation.

let firstNumber = 0;
let secondNumber = 0;
let operator = "";
let previousComput = "";
let result = 0;

b. Fetch data from the DOM and store them in variables. Here we use querySelector and querySelectorAll to select elements. Below are all the variables that we may need.

const calcValues = document.querySelectorAll(".btn");
let displayPrev = document.querySelector("#displayPrev");
let displayCurr = document.querySelector("#displayCurr");
const equals = document.querySelector(".equals");
const operants = document.querySelectorAll(".operant");
const clear = document.querySelector("#AC");
const deleteEl = document.querySelector("#delete");

c. Set up functions to listen to DOM events.

The code below listens to click events on operants(X,/, -,+) buttons and responds accordingly i.e updates the display value, stores the clicked operant’s value to be used in the computation and so much more! Please take note of the if…else statements.


operants.forEach((operant) => {
  operant.addEventListener("click", () => {
    if (displayPrev.innerHTML == "") {
      firstNumber = displayCurr.innerHTML;
      displayPrev.innerHTML = `${displayCurr.innerHTML}  ${operant.value} `;
      displayCurr.innerHTML = "";
      operator = operant.value;
    } else {
      previousComput = concatFunc();
      displayPrev.innerHTML = previousComput + " " + operant.value + " ";
      operator = operant.value;
      firstNumber = previousComput;
      displayCurr.innerHTML = "";
    }
  });
});

d. Next, set up a function that listens to click events of number buttons(0-9).

Below is such a function. It takes clicked values and stores them as either firstNumber or secondNumber. Note that a secondNumber is only updated after the firstNumber has been updated and the user has clicked an operant.
It also displays the values in the displayCurr element simply because this is the current operation that is taking place. Take note of the handleClick function. It is a callback function(…it has been passed as an argument inside another function)

const handleClick = (e) => {
  displayCurr.innerHTML === "0"
    ? (displayCurr.innerHTML = e.target.value)
    : (displayCurr.innerHTML += e.target.value);
};
calcValues.forEach((button) => {
  button.addEventListener("click", handleClick);
});

It is time we set up the basic math operation functions. Add, subtract etc.
We will invoke these functions in the operateFunc later. These functions will only take two parameters, the firsNumber and the secondNumber then will do the operation depending on the operator that was chosen. The operator will be provided by operateFunc();
Please note:

The plus before a variable converts it to a number from a string
Also we want to prevent returning answers that have too long decimals.To do that we use toFixed();

//let result = 0;

const multiply = (firstNumber, secondNumber) => {
   //The plus before a number converts it to a number from being a string
   //Also We want to prevent returning answers that have too long decimals so to
  //Do that we use toFixed();
  result = +firstNumber * +secondNumber;
  if (!Number.isInteger(result)) {
    return result.toFixed(2);
  }
  return result;
};

const divide = (firstNumber, secondNumber) => {
  if (+secondNumber === 0) {
    alert("You can't divide a number by zero!");

    location.reload();
  } else {
    result = +firstNumber / +secondNumber;
    if (!Number.isInteger(result)) {
      return result.toFixed(2);
    }
    return result;
  }
};
const add = (firstNumber, secondNumber) => {
  result = +firstNumber + +secondNumber;
  if (!Number.isInteger(result)) {
    return result.toFixed(2);
  }
  return result;
};

const subtract = (firstNumber, secondNumber) => {
  result = +firstNumber - +secondNumber;

  if (!Number.isInteger(result)) {
    return result.toFixed(2);
  }
  return result;
};

We want to make sure that a user is able to delete a number or clear the screen. The code below solves this issue.

Please refer to array methods to understand why we used .slice();

clear.addEventListener("click", () => {
  displayPrev.innerHTML = "";
  displayCurr.innerHTML = "";
});

deleteEl.addEventListener("click", () => {
  if (displayCurr.innerHTML !== "") {
    displayCurr.innerHTML = displayCurr.innerHTML.slice(0, -1);
  } else {
    displayPrev.innerHTML = displayPrev.innerHTML.slice(0, -1);
    displayCurr.innerHTML += displayCurr.innerHTML;
  }

});

e. It is time to display results and make the calculator work!

Write a function that listens to a click event on the equals button and does stuff with it.

The code below does the following things:

Listens to click event and triggers the concatFunc()
The concatFunc is the heart of the project.It triggers the operateFunc which in turn invokes/calls the basic math operator functions and displays the result.
We use the if…else statements to add conditions as to when a certain function is invoked and also to issue warnings for unexpected behavior.

equals.addEventListener("click", concatFunc);

function concatFunc() {


  if (previousComput == "") {
    secondNumber = displayCurr.innerHTML;
  } else {
    secondNumber = displayCurr.innerHTML;
  }


  displayPrev.innerHTML += `${displayCurr.innerHTML} ${equals.value}`;

  const operatorFunc = (firstNumber, operator, secondNumber) => {
    if (operator == "x") {
      return multiply(firstNumber, secondNumber);

    } else if (operator == "+") {

      return add(firstNumber, secondNumber);
    } else if (operator == "-") {


      return subtract(firstNumber, secondNumber);
    } else if (operator == "÷") {
      return divide(firstNumber, secondNumber);
    }
  };
  displayCurr.innerHTML = operatorFunc(firstNumber, operator, secondNumber);

  return operatorFunc(firstNumber, operator, secondNumber);
}

Congratulations!

You have created a javascript calculator. If you didn’t complete, don’t feel bad about it.It may take a while before most of the concepts make sense.

Conclusion

By completing this project, you have learn't alot including:

How to use CSS grid and flexbox
How to do variable declaration
How to fetch elements from the DOM and general DOM manipulation.You have learnt how methods such as querySelector, querySelectorAll and getElementById are useful in DOM manipulation.
How to use event-listeners especially "click" and subsequent chaining of callback functions
How to appropriately invoke functions
Finally, you have learnt how to effectively think logically when setting up a project.

I wish you well in your web development journey.

twitter
linkedin

10 Best Web Development Stacks

Snevy1 — Thu, 02 Nov 2023 17:49:35 +0000

A Web development stack or tech stack consists of a set of web frameworks, programming languages, servers, and databases that when combined help in producing seamless, fully-fledged web applications. Choosing the right stack is crucial because this determines the speed, security, scalability, and overall efficiency of your app.

Here are the best and most popular tech stacks:

1. MERN STACK

This stack consists of:

MongoDB: NoSQL database
ExpressJs: A nodeJs backend framework
React: A frontend Javascript library
NodeJs: Javascript runtime-environment

2. MEAN STACK

This stack is quite similar to MERN except that it uses Angular instead of React.
Technologies:

MongoDB: NoSQL database;
ExpressJs: A nodeJs backend framework
Angular: A frontend Javascript library
NodeJs: Javascript runtime-environment

3. LAMP STACK

Linux: Open-source operating system
Apache: Free and open source HTTP web server
MySQL: Relational database Management System
PHP: Backend language

4. SERN STACK

SQL: Language of relational databases
ExpressJs
React
NodeJs

5. Vue.js STACK

Vuejs: A frontend javascript framework
NodeJs
MongoDB
ExpressJs

6. SERVERLESS STACK

AWS lambda: According to Amazon, is an event-driven serverless computing platform provided by Amazon
API Gateway: As per Nginx, it receives and directs client API requests, effectively routing them to the relevant Microservice using techniques such as request routing, composition, and protocol translation.
DynamoDB: NoSQL database by Amazon designed to run high performance applications at any scale
React: Frontend library

7. ASP.NET STACK

ASP.Net: Microsoft framework for building web apps with .NET and C#
C#: programming language
SQL Server: Relational database

8. JAVA STACK

Java: Programming language
Spring boot: Java framework
MySQL/PostgreSQL: Relational Databases

9.Ruby on Rails

Ruby: programming language
Rails: Ruby Framework
SQLite: C library that has a server and database

10. JAMstack

Javascript: programming language
API: Application Programming Interface
Markup: Generated by static site generators like Jekyll, Gatsby, etc

In conclusion
The choice of a tech stack really boils down to what you want to achieve. Some of the factors to consider are scalability, security, cost and availability of integration tools, and ease of solving a problem.

20 Best Web Development Frameworks in 2023

Snevy1 — Thu, 02 Nov 2023 15:20:28 +0000

Web development frameworks make the process of developing websites faster and easier. They ensure better web performance, and code reuse and produce code that is easily maintainable. As a result, frameworks do the heavy lifting and save us a lot of time. In this article, I will share some of the best and most popular frameworks in 2023 and beyond.

20 Best Frameworks you Can learn for Web Development

Frontend Frameworks

1. React

This is a popular Javascript framework that is used to develop user interfaces.

Here are some essential points to note about React:

Developed and maintained by Facebook
Simple learning curve and a flexible library
Great for single-page Applications(SPA) and mobile app development(React Native)
Uses components as its primary architecture.

2. Angular

This is another Javascript framework and is used to develop client-side dynamic webpages.

Key points to note:

Developed and maintained by Google.
It's well-suited for large-scale projects
Has features like routing, forms management, client-server communication, and much more.
Well supported

3. Ember

Ember.js is an open-source JavaScript framework distributed under the MIT license. It is an MVC(Model-View-Controller) framework and makes it possible to write organized and structured code. It is used as a model, and handlebar template as views and controllers manipulate the data in the model.

Key points to note:

Steep learning curve
Has an inspector tool for debugging

The MVC component has three layers

Controller layer - developed with a combination of routes and controllers
View layer - Has a combination of templates and views
Model layer — Built with a combination of model and ember-data.

4. Vue Js

This is an open-source javascript framework built as an alternative to heavier frameworks like React and Angular.

Key points:

Created by Evan You.
Suitable for both small and large projects.
Is a progressive framework.
Has a solid tooling system ie supports Babel and Webpack and also provides unit testing, end-to-end testing libraries, etc.

5.Jquery

This framework was first introduced in 2006. It is one of the oldest frameworks but has stayed in the tech sphere till now. Basically, JQuery made it possible to write less code and do more.

Some of JQuery’s features are:

Built-in Ajax features to access external data.
Versatile utilities. For example, you have the option to utilize the browser utility to retrieve the browser version within your code.
Document Object Model (DOM) is flexible for accumulating or eliminating the components
A lot of plugins are available

6. Backbone Js

Backbone is one of the easiest frameworks for building single-page applications quickly. It is based on the Model-view-controller pattern intended to connect an API over a Restful JSON interface.
Key points to note:

Developed by Jeremy Ashkenas
Has a lightweight framework
Easier to learn
Fastest Javascript framework
One of the cons is that the framework does not offer a handy framework

7. Svelte

Svelte is a free and open-source front-end component framework created by Rich Harris and maintained by the Svelte core team members.
It is an MIT license.
It is a compiler that generates minimal and highly optimized code.
Svelte does not require dependencies to start since instead of compilation occurring during the running stage, it occurs at the building stage. Code is compiled to vanilla Js at this stage.
Key points to note:

Reactive Components - developers can easily build components that react to changes in their internal state or external data.
Small bundle size - Due to its compilation approach, svelte generates small bundle sizes which in turn increase the speed and performance of a webpage.
Sveltekit - It is a Svelte framework that enables it to do server-side rendering, routing, etc.

8. Tailwind CSS

This is a powerful open-source CSS framework. It is a utility-first framework for rapidly developing custom user interfaces.
Key features of Tailwind:

Utility- first approach
Plugins - You can extend tailwind functionality by adding plugins for additional utilities.
Play CDN - Allows including Tailwind to your project without downloading the whole package.

9. Bootstrap

Mark Otto and Jacob Thornton, while at Twitter, created Bootstrap with the aim of promoting uniformity among internal tools, serving as a framework for this purpose. It is a sleek, mobile-first framework for developing websites. It uses HTML, CSS, and Javascript.

Features:

Mobile-first Approach
Cross-browser compatibility
Consistency- You can achieve a consistent design across your application.
Bundled javascript plugins - components such as drop-down menus

10. Foundation

The foundation is a free, open-source framework for building awesome websites, emails, and applications rapidly.

Unlike other frameworks, Foundation focuses on building prototypes instead of production code. This helps developers to move quickly from the design to a functional prototype without having to spend time writing code.

Features:

Mixins
Tools for responsive design on mobile applications
Modular structure
Powerful Grid system

Backend Frameworks

1. ASP .NET Core

This is a new version of ASP .NET by Microsoft. It is an open-source, cross-platform framework for creating applications using .NET.It can be used to create web applications and API servers with many languages including C#, NodeJs, and Visual Basic.
Key features:

Performance improvement - This makes it one of the best backend frameworks
Increased security - From authentication and authorization mechanisms to data protection and threat prevention.
Dependency injection - Handles database contexts and logging contexts which are passed into MVC controllers.
Minimal coding
Multiple Environments and Development Mode - Enables developers to effortlessly manage software codes in terms of staging, production, etc.

2. Django

This is an open-source framework written in Python. It speeds up the

development of efficient web applications. Its "batteries-included" approach means a powerful website can be built quickly by a skilled developer. Here are the essential features:

High scalability
Versatile in nature
SEO optimized
Offers integrated web app security features.

3. Flask

Flask is a microframework that does not include an Object Relation Manager or such features. It is written in Python and allows developers to write applications without worrying about low-level details such as protocol, thread management, etc.
Key features of Flask:

Supports multiple types of databases
Easy to create simple static web pages
Easy web server setup
Microframework- Designed to keep the core of the application simple and scalable.

4. Ruby on Rails

This is a server-side framework that is written in the Ruby language. It is one of the best Ruby libraries.
Key features:

Full stack development capability
Real-time updates and data synchronization
Uses Model View Controller architectural pattern
Automated testing- Runs its own set of tests on the code you write.

5.Express js

This is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is a MEAN stack component framework along with Angular and NoSQL databases.
Key points to note:

Routing Capabilities
JSON Web Token Integration
Faster Server-side Development
Templating- Allows building of HTML templates on the server side.
Middleware- Is responsible for systematic organization of different functions of Express js.

6.Laravel

Laravel is a cross-platform PHP framework for building web applications.
It uses the Object Relational Model(ORM) for simpler data access and manipulation.
Key Features:

MVC architecture support
Authentication
Route Handling - Provides straightforward and intuitive route handling
Templating- PHP uses Blades as templating engine
Libraries and Modular

7. Spring Boot

This is an open-source Java framework used to build microservices.
It is maintained by Pivotal organization.
Key features:

YAML support
Logging
Reduce Development time
Java usage
Externalized configuration- Allows developers to externalize their configuration to allow working with the same applications in different environments.

8.CakePHP

This is a rapid development framework for PHP which uses commonly known patterns like Associative data mapping, Front Controller, and MVC.
CakePHP helps you to separate business logic from the data layer and presentation layer.
Key points:

MVC pattern
Class inheritance
No configuration
Supports SEO-friendly URLs
Built-in validation

9. Play Framework

This is a web application framework for both Java and Scala.
Play saves time by directly supporting everyday tasks and hot reloading so that you can immediately view the results of your work.
Key features:

Injection
It allows you to fast connect your dependencies instead of building modules, passing your dependencies through multiple constructors, resource initialization, etc
Database handling with slick and evolution
Caching
Testing

10. Strapi

This is a headless CMS for creating javascript APIs that are easy and quick to manage. We can create our own APIs with routes & controllers. This means we can create custom endpoint URLs, and custom logic to handle each request.
Key points:

Catalog management
Customizable Branding
Document Storage
Built on NodeJS
Dashboard

Conclusion

These frameworks empower developers to build web applications faster. The Web applications are fast, secure, and highly maintainable. The choice of a framework largely depends on the specific tasks that you want to accomplish.

For more web development articles, lets connect on Twitter and LinkedIn

Happy Learning!