So you decided to still read? Yeaaahh I am excited that you are going to read even the minute detail now…let’s get started!

Challenge 1 : Scoping/Closure/Asynchronous Javascript

var div = document.querySelector('.foo')
   div.addEventListener('click', function() {
    this.innerHTML = 'Foo';
   });


   var div2 = document.querySelector('.foo2')
   div2.addEventListener('click', () => {
    this.innerHTML = 'Foo';
   });

Result: The first event handler correctly changes the text of the div, whereas the second doesn’t.

Task 1 : Explain why the code is returning an incorrect result.

Here, there are some JavaScript concepts that we need to understand to answer the “why” for this output.

1. Scoping

“Scope” refers to availability of variables/functions in certain parts of the code.

Variables declared using the “var” keyword can have a function scope or global scope.

In the above scenario, the variable “i” is not declared inside any function and hence it has a global scope, which means that it is also accessible outside the for loop block.

// i is accessible here
for (var i = 0; i < arr.length; i++) {
….
}
// i is accessible here also

Conclusion from here => variable “i” is in the global scope in the above program.

2. Closure

A closure is formed when a function tries to access variables outside of its scope.

With the concept of closure, we have a function binded with its lexical environment(/scope).

In the above program, a closure is formed by the below callback function given in setTimeout:

function() {
  console.log('Index: ' + i + ', element: ' + arr[i]);
}

This is formed because the callback function tries to access variables “i” and “arr” which are outside of its own scope.

Hence, there is a closure with the statements inside this function which is the console.log statement here, along with variables it needs which is “i” & “arr” from its lexical parent.

If we are to draw it for understanding purpose, it would be like the below :

Closure {

// statements

console.log(‘Index: ‘ + i + ‘, element: ‘ + arr[i]);

// lexical environment variables

i (ex: Reference to memory location 0x123)

arr (ex: Reference to memory location 0x124)

}

Conclusion from here => There is a closure formed by the Callback function with variables “i” and “arr” (having memory references of them). Note that here all callback functions have same memory reference of “i”

3. Asynchronous Javascript

Timer is not a feature provided by Javascript Engine but a feature of the browser which we are using in the program above using the “setTimeout” function provided by web apis (that are part of the Javascript runtime environment)

(In the context of running javascript outside the browser i.e., using node.js in the backend, this timer feature would be accessible via setTimeout function provided by C++ APIs which are present in Node js runtime environment)

Similar to timer, we have other features like window console, DOM APIs to access the DOM, fetch apis etc provided by this web apis.

When the loop runs above, the javascript interpreter does not wait for the setTimeout to complete, instead moves callback function of setTimeout during each iteration to another area (part of Javascript runtime environment)

In JAVASCRIPT RUNTIME ENVIRONMENT

CB1 with it’s closure referencing “i” and “arr”

CB2 with it’s closure referencing “i” and “arr”

CB3 with it’s closure referencing “i” and “arr”

CB4 with it’s closure referencing “i” and “arr”

And, execution continues in the main thread for the non blocking part of code.

As a result, the value of variable “i” in memory becomes “4” at the end of the for loop.

Now after 3 seconds, the callback function is moved to the callback queue. As the callstack is empty, the event loop takes the first item from the callback queue and places it in the callstack.

From the closure the callback function had formed with memory reference of “i” and “arr”, Javascript tries to read the values and replaces “i” and “arr[i]” in the console.log statement.

While doing so, it understands that the value of “i” is 4. And the value of arr is [10,12,15,21].

Hence, it prints Index: 4, element: undefined to the screen as “i” is 4 and arr[4] is “undefined”.
As this continues (even loop taking next statement from callback queue and placing in callstack), the same statement gets printed.

Therefore it prints Index: 4, element: undefined four times to the screen.

Task 2 : Update the code to achieve the desired output

METHOD 1 (prior to ES6)

This can be solved by creating a local copy of the global scope variable inside the callback function and returning a function from this (this step is needed because setTimeout expects a function as first argument), so that closure is created with that variable instead of global scope variable.

There are two closures created here

1. One is with global scope variable “arr”
2. Another is with the variable “x” from outer scope — i.e., from function “printMe”

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  function printMe(x) {
    return function (){
    // Here, a closure is created with parent's variable "x" instead of the global scope variable "i" as earlier. And closure is also created with global scope variable "arr"
    console.log('Index: ' + x + ', element: ' + arr[x]);
    }
  }
setTimeout(printMe(i), 3000)
}

Hence, we get the desired output as below

Index: 0, element: 10

Index: 1, element: 12

Index: 2, element: 15

Index: 3, element: 21

METHOD 2

With es6 “let” which has block scope , hence at each iteration of the loop, a new memory location is created for “i” allowing it to hold the current value for that iteration. This ensures that each iteration of the loop operates with a separate and distinct value of i. And, the callback function forms a closure with those new copies and “arr” each time during loop iteration.

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 3000);
}

And, as a result javascript environment has the below:

CB1 with referencing for i’s value during iteration 1 and referencing for “arr”

CB2 with referencing for i’s value during iteration 2 and referencing for “arr”

CB3 with referencing for i’s value during iteration 3 and referencing for “arr”

CB4 with referencing for i’s value during iteration 4 and referencing for “arr”

Hence, when event loop takes each of these from callback queue which are in first in first out order and places them to call stack one by one and while they get executed, we get the below output:

Index: 0, element: 10

Index: 1, element: 12

Index: 2, element: 15

Index: 3, element: 21

Challenge 2: Function Context

var div = document.querySelector('.foo')
   div.addEventListener('click', function() {
    this.innerHTML = 'Foo';
   });


 var div2 = document.querySelector('.foo2')
   div2.addEventListener('click', () => {
    this.innerHTML = 'Foo';
   });

Result: The first event handler correctly changes the text of the div, whereas the second doesn’t.

Task 1 : Explain why first works and second doesn’t

Inside a normal function, the value of “this” is based on how this function is called, not on how this function is defined.

Arrow functions create a closure over the “this” value of the enclosing execution context, “this” is set to what it was when the function was created.

Event Handlers

Whenever we attach a handler function to an element using addEventListener(), the value of “this” inside the function will be a reference to the element or in other words, when we add an event handler to an element via Javascript code, “this” refers to the DOM element that generated that event.

Default binding for a callback function (if it is a normal function) in addEventListener is the html element.

Above case stands true for normal functions. Hence this is the reason the first event handler works. As the value of “this” — is the HTML element with id as “foo”. Hence on click of the element, it changes the element’s text to “Foo”.

“This” keyword when used inside the arrow function takes its value from the outer scope, in this code snippet, “this” inside click handler arrow function is referring to the “window” object instead of the div element.

This is the reason why, on clicking the div with id as “foo2”, we do not see any text change in the UI.

Task 2 : Does the second actually do anything? If so, what is it modifying?

On the click of the div element with id “foo2”, the second code snippet is modifying the “window” object.

var div2 = document.querySelector('.foo2')
div2.addEventListener('click', () => {
this.innerHTML = 'Foo';
console.log(this) //Notice below that "innerHTML" is attached to 'window' object
});

Here, line 3 this.innerHTML = ‘Foo’ is modifying the “window” object. It is attaching the key “innerHTML” with value ‘Foo’ in the “window” object.

For security reasons, backend apis would have an authorization check added from their end for all their apis.
There are different ways of authorizing the requests, if it is a basic method chosen, then it would be a username & password based authentication performed while calling these apis.

From postman, we can initiate basic auth in a request as below (once we have the username and password in hand).

If you notice using the ‘code’ option, the Authorization parameter passes a ‘Basic <encodedtext>’ instead of username and password as we expected.
That’s confusing?!

So, what happens is that username:password is base-64 encoded and then passed as authorization header in request. This encoded item is what we call “token” usually.

Steps to be followed for UI dev :

a) First check with backend dev what kind of request authorization method are they following for their apis.
If it is confirm as “Basic Auth”, get the ‘username’ and ‘password’ from them.
b) Encode ‘username:password’ to base-64 format and save it as (for example: BACKEND_API_AUTH_TOKEN) in the config file.
c) While making the backend api call, add to the headers parameter this token.

// helper file

import { set } from 'lodash';

const addApiHeaders = () => {
  const headers = {}
  if(process.env.BACKEND_API_AUTH_TOKEN) {
    set(headers,'Authorization',`Basic ${process.env.BACKEND_API_AUTH_TOKEN}`);
  }
  return ({
  ...headers,
  'Content-Type': 'application/json',
  })
}

So the fetch call would look like :

//.........
fetch(url, {
  headers : addApiHeaders(),
  //........
})

While configuring api authorization in front end web application, it is better to avoid having username and password exposed in config files and then encode it run-time to pass in header param. This is because, this is directly exposing the username and password.
As per the method followed in this demo, since it is already base64 encoded we only save an encoded text in config.

This token can also be encrypted further with a secret that only frontend & backend team is aware of for more security.

This is inspired from https://jsramblings.com/creating-a-react-app-with-webpack/ post which helped me understand how to create a simple react (v18) application from scratch without using CRA and using webpack (v5), babel etc.

Though ‘create-react-app’ does everything for us, with lot of encapsulated information, we would not understand what’s happening under the hood.
Many of us would then want to start using webpack to setup react application from scratch.
So, this is a good way to get started.

The steps would be as below :
a) Create a basic project and serve HTML.
b) Adding webpack to the project and bundle a simple JS file.
c) Adding Babel for ES6 support.
d) Adding React to the project.

Step 1 : Basic setup

Here we are going to create a basic project and add the html file.
To create the project and initialize the ‘package.json’ run the below commands:

mkdir react-app-with-webpack
cd react-app-with-webpack
npm init -y

Then, let’s add the main html file. We can add it inside anywhere but usually it is inside the ‘public’ folder so let us add it under the same.

mkdir public
cd public

‘index.html’ will contain basic HTML5 boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React + Webpack</title>
</head>
<body>
<h1>Hello React + Webpack!</h1>
</body>
</html>

Let’s check if this is running by serving this static html using npm serve.

npx serve public

Now if you navigate to http://localhost:3000/, you should be able to view the hello message we added in index.html file.

Step 2 : Adding Webpack

Firstly, install webpack

npm install webpack webpack-cli --save-dev

Now we are going to create a simple javascript file (index.js inside “src” folder) which we will bundle using webpack.

// src/index.js
const newH2Element = document.createElement('h2');
newH2Element.innerHTML = 'This heading is added via code';
document.body.append(newH2Element);

Then, we need to configure webpack by creating it’s configuration file ‘webpack.config.js’ in the root of the project.

const path = require('path');

module.exports = {
    entry:'./src/index.js',
    output : {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    }
}

Here, ‘entry’ specifies which javascript file to bundle. And, ‘output’ specifies where should the bundled JS file be saved and the file name.

In ‘package.json’, add the below script.

//...
"scripts" : {
  "build":"webpack"
},

Now run ‘npm run build’ in terminal. You would be able to see ‘bundle.js’ file inside a new folder ‘build’!

Next step is to move the static assets to bundle. That is, we want to also include ‘index.html’ file in the ‘build’ folder.

Easiest way to do this is by using a plugin called HtmlWebpackPlugin.

npm install html-webpack-plugin --save-dev

Update the ‘webpack.config.js’ as below :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:'./src/index.js',
    output : {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname,"public","index.html"),
        })
    ]
}

This will copy the public/index.html to ‘build’ folder and inject a link to the bundled JS (bundle.js).

Let’s try it out then!

npm run build
npx serve build

The ‘index.html’ in ‘build’ folder has the <script defer=”defer” src=”bundle.js”></script> added now.

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>React + Webpack</title><script defer="defer" src="bundle.js"></script></head><body><h1>Hello React + Webpack!</h1></body></html>

And now you would be able to see the message ‘This heading is added via code’ added to the page.

So far we have used npx serve to check if everything works, but in actual scenarios we use ‘webpack-dev-server’.

npm install --save-dev webpack-dev-server

Then it needs to be configured in ‘webpack.config.js’

//... 
devServer : {
        static : {
            directory: path.join(__dirname,'build'),
        },
        port: 3000,
    },

Now, add the script in ‘package.json’

//...
"scripts" : {
  //...
  "build": "webpack --mode production",
  "start": "webpack serve --mode development",
},

Check by running ‘npm run start’ if app is still running as before.

Step 3 : Adding Babel

Why this is useful is because, using Babel we can keep using all ES6 features and Babel will take care to transpile it down to respective javascript versions that all browsers can understand (Here is an amazing article to read more on Babel which is really helpful)

First step is to install the required packages.

npm i @babel/core @babel/preset-env babel-loader --save-dev

Next we need to tell webpack to pass the files through Babel when bundling (Add below config in ‘webpack.config.js’) :

//...
module : {
        //exclude node_modules
        rules : [
            {
                test : /\.(.js)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            }
        ]
    },
    //pass all js files through Babel
    resolve: {
        extensions: ["*",".js"]
    }

Now we need to create the .babelrc file, this is where we apply the ‘preset-env’ transform.

// .babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

Optionally, update index.js with some ES6 features which would not work without Babel (Honestly, most of them work without Babel in many browsers but for example IE browser does not support Array.fill)

/ Use a feature that needs Babel to work in all browsers :)
// arrow functions + Array fill

const sayHelloXTimes = (times) => new Array(times).fill(1).map((a,i)=>`Hello : ${i}`)

const newH2Element = document.createElement('h2');
newH2Element.innerHTML = sayHelloXTimes(10).join(`<br/>`);
document.body.append(newH2Element);

Let’s check if it is working by running ‘npm run start’

Step 4 : Adding React

Finally, we can add react now :)

First step is to install it.

npm install react react-dom --save-dev
npm install @babel/preset-react --save-dev

Then update the ‘.babelrc’ file also to apply the ‘preset-react’ transform, which is needed to support JSX.

// .babelrc

{
    "presets": [
      "@babel/preset-env",
      ["@babel/preset-react", {
         "runtime": "automatic"
      }]
    ]
}

Note: specifying “runtime”:”automatic” enables a features of not needing to import React in all the files.

Also, we need to update webpack.config.js to pass ‘JSX’ through Babel.

// webpack.config.js

{
  // ...,
  module: {
    // exclude node_modules
    rules: [
      {
        test: /\.(js|jsx)$/,         // <-- added `|jsx` here
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  // pass all js files through Babel
  resolve: {
    extensions: ["*", ".js", ".jsx"],    // <-- added `.jsx` here
  },
}

Let’s create a React component and add it inside index.js to see if eveything works.

// src/Welcome.jsx

const Welcome = () => <h3>Welcome From React bundled using Webpack+Babel</h3>

export default Welcome;

//--------------------------------------
//Using React
import { React } from 'react';
import { createRoot } from 'react-dom/client';

import Welcome from './Welcome';

const root = document.getElementById('root')
createRoot(root).render(<Welcome/>)

We also need to create a root node in the index.html of the app.

// index.html
// ......
<body>
    <!-- <h1>Hello React + Webpack!</h1> -->
    <div id="root"></div>
</body>

Now let’s execute ‘npm run start’ to check if everything is working.

Voila! All good then.

You can also check that the app correctly runs in production, by running ‘npm run build’ and then ‘npx serve build’

See the full code here : https://github.com/priyankajakob/react-webpack-setup.