Forem: SHAHAB MALIK

Understanding the JavaScript Event Loop 🚀

SHAHAB MALIK — Sun, 09 Jun 2024 09:12:41 +0000

Event Loop is another important concept in JavaScript that often comes up in technical interviews

JavaScript is single-threaded, meaning it can only perform one task at a time. This might make you wonder how JavaScript handles asynchronous operations like fetching data from an API, setTimeout, or event listeners. The magic lies in the Event Loop!

Let's delve a bit deeper into the components and behavior of the event loop

How the Event Loop Works

Call Stack :

The call stack is where JavaScript keeps track of function execution. When a function is called, it gets pushed onto the stack. When the function completes, it is popped off the stack.

Web APIs :

Certain operations, like asynchronous network requests (XHR, fetch), timers (setTimeout, setInterval), and DOM events, are handled by the browser's Web APIs. When such an operation completes, the Web API pushes a callback function to the task queue.

Task Queue (Callback Queue) :

The task queue holds the callback functions that are ready to be executed. This includes callbacks from Web APIs and promises that have been resolved.

Event Loop :

The event loop constantly monitors the call stack and the task queue. If the call stack is empty, the event loop pushes the first task from the task queue onto the call stack, allowing it to be executed. This process ensures that tasks are executed in a non-blocking manner, allowing the JavaScript engine to perform other operations while waiting for asynchronous operations to complete.

Example of Event Loop

Let's understand Event Loop with help of an Example.

console.log('Start');

setTimeout(() => {
    console.log('Timeout callback');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise callback');
});

console.log('End');

Execution Steps:

Call Stack :

console.log('Start') is called and logs "Start".
setTimeout is called, which sets up a timer in the Web API and registers a callback to be executed after 0 milliseconds.
Promise.resolve().then is called, which registers a callback to be executed when the promise resolves.
console.log('End') is called and logs "End".

Web API :

The timer for setTimeout completes almost immediately (after 0 milliseconds) and its callback is pushed to the task queue.

Microtask Queue :

The "then" callback from the promise is pushed to the microtask queue.

Event Loop:

The call stack is empty after executing the synchronous code.
The event loop first processes the microtask queue before the task queue. Therefore, the promise callback is executed and logs "Promise callback".
Then, the event loop processes the task queue. The setTimeout callback is executed and logs "Timeout callback".

Output

Start
End
Promise callback
Timeout callback

Key Points

Microtask Queue: This queue includes tasks such as resolved promise callbacks and process.nextTick in Node.js. It has higher priority than the task queue.
Task Queue: This queue includes tasks such as setTimeout, setInterval, and other callback functions. It is processed after the microtask queue.

Conclusion

The event loop enables JavaScript to handle asynchronous operations in a non-blocking manner, ensuring smooth execution of code without interruptions. Understanding the event loop is crucial for writing efficient and effective JavaScript code, especially when dealing with asynchronous operations.

So, next time you're working with JavaScript, remember the Event Loop and its role in asynchronous operations!

Want to learn about Web Development, Follow Shahab Malik 😀

Getting Started with Firebase Authentication: A Comprehensive Guide

SHAHAB MALIK — Sun, 16 Apr 2023 01:12:50 +0000

Start using Firebase today and thank me later 😃

Firebase Authentication is a service provided by Google that allows you to add user authentication to your app with ease. It provides a range of authentication methods and features that make it easy to manage user authentication, protect user data, and build secure and scalable apps.

Why You Should go for Firebase Authentication 🤔 ?

Easy to use:

Firebase Authentication provides a simple and easy-to-use interface for authentication. The Firebase SDKs offer a range of APIs and libraries for various platforms, making it easy to integrate authentication into your app.

Security:

Firebase Authentication offers a range of security features, including multi-factor authentication, custom claims, OAuth2 integration, and more. This ensures that your app and user data remain secure.

Multiple sign-in methods:

Firebase Authentication supports multiple sign-in methods, including email and password, Google, Facebook, Twitter, GitHub, and more. This allows you to offer your users a range of sign-in options.

Customization:

Firebase Authentication offers a range of customization options, such as custom email templates, that allow you to tailor the authentication experience to your app's needs.

Overall, Firebase Authentication is a reliable and secure authentication solution that can save you time and effort in implementing authentication in your app.

Here's a step-by-step guide to help you get started with Firebase Authentication:

Step 1: Set up your Firebase project

To get started with Firebase Authentication, you'll need to create a Firebase project. Go to the Firebase console, create a new project, and enable Firebase Authentication in the Authentication tab.

Step 2: Choose an authentication method

Firebase Authentication supports a range of authentication methods, including email and password, Google, Facebook, Twitter, GitHub, and more. Choose the authentication method that best suits your app's needs.

Let's Create a Login SignUp Form :

Create a Signup.Html File

HTML CODE :

<div class="card-container">
    <div class="box">
      <h1 class="form-heading">Signup</h1>
      <form action="" class="form" method="post">
        <div class="input-cotainer">
          <input type="text" name="fname" placeholder="Enter First Name" id="fname">
          <input type="text" name="lname" placeholder="Enter Last Name" id="lname">

        </div>
        <input type="email" name="email" placeholder="Enter your Email" id="email">
        <input type="password" name="password" placeholder="Enter your Password" id="password">
        <button type="submit" id="signUpbutton">Signup</button>
        <p>Already Have Account <a href="login.html" class="link">Login</a></p>
      </form>

    </div>
  </div>

JS CODE For Signing up New Users :

<script type="module">
  import { app } from './index.js'

  import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";

  const auth = getAuth()

  import { set, ref, push, child, } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-database.js";

  const signUpButton = document.getElementById('signUpbutton')


  signUpButton.addEventListener('click', (e) => {
    e.preventDefault()
    const fname = document.getElementById('fname').value
    const lname = document.getElementById('lname').value
    const email = document.getElementById('email').value
    const password = document.getElementById('password').value

    console.log(email)
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        console.log(user)
        const userId = push(child(ref(database), 'users')).key
        set(ref(database, 'users/' + userId), {
          fname: fname,
          lname: lname,
          email: email,
          password: password
        }).then(() => {

          console.log('Data saved')
          // window.location.href = 'login.html'
        }).catch((error) => {
          console.log(error)
        })
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        alert(errorMessage)
        // ..
      });

  })


</script>

Create a LogIn.Html File

HTML CODE :

<div class="card-container">
    <div class="box">
      <h1 class="form-heading">Login</h1>
      <form action="" class="form">
        <input type="email" name="email" placeholder="Enter your Email" id="email">
        <input type="password" name="password" placeholder="Enter your Password" id="password">
        <button type="submit" id="logInbutton">Log In</button>
        <p>Create New Account <a href="index.html" class="link">Signup</a></p>
      </form>

    </div>
  </div>

JS CODE for Logging In User:

<script type="module">
  import { database} from './index.js'
  import { ref, update } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-database.js";
  import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";
  const auth = getAuth();
  const logInButton = document.getElementById('logInbutton')

  logInButton.addEventListener('click', (e) => {
    e.preventDefault()
    const email = document.getElementById('email').value
    const password = document.getElementById('password').value
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 

        const user = userCredential.user;
        update(ref(database, 'loggedIn/' + user.uid), {
          email: email,
          password: password,
          lastLogin: new Date().toLocaleString()

        }).then(() => {
          alert('Login Successful')
          console.log('Data saved')
          window.location.href = 'home.html'

        }).catch((error) => {
          console.log(error)
        })

        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        alert(errorMessage)
      });


  })

</script>

If you have implemented above steps
Congratulations🎉 You are done with Firebase Authentication

You can download Source Code from here Authentication in Firebase

Want to learn about Web Development Follow me 😀

LinkedIn : Shahab Malik
Twitter : Shahab Malik