DEV Community: Mahesh Pratap

Microfrontends and the challenges involved

Mahesh Pratap — Sat, 04 May 2024 08:31:18 +0000

Ah, Microfrontends! The talk of the town, the shiny new Invisibility Cloak in the world of frontend development. Everyone's buzzing about them, just like Fred and George Weasley with their latest prank contraption. But hold on a minute, not everyone's rushing to implement this architectural marvel. Why? Well, because just like Harry facing a three-headed dog guarding the Philosopher's Stone, there are challenges to overcome.

In this article, we'll delve into the world of Microfrontends, exploring both the glittering Galleons (benefits) and the pesky Dementors (challenges) that come with them. So, grab your Butterbeer (or a strong cup of coffee, whichever helps you focus), and let's see if Microfrontends are the magic potion your project needs.

Benefits: A Sorting Hat for Your Frontend Needs

Imagine a world where Ron Weasley isn't stuck with a broken wand his entire first year. That's the beauty of Microfrontends! They allow you to develop your frontend as independent, reusable modules, just like wands crafted by Ollivander himself.
Each module, be it the "Product Listing" or the "Shopping Cart," can be built and maintained by different teams, much like different Houses at Hogwarts specialize in different areas of magic.

This modular approach offers several benefits:

Independent Development: Different teams can work on their modules without affecting each other, just like Potions class wouldn't disrupt Defense Against the Dark Arts (unless Snape is the professor, of course).
Faster Development & Deployment: Smaller modules are easier to manage, test, and deploy, allowing you to release features quicker than a Snitch zipping across the Quidditch pitch.
Scalability & Maintainability: Need to add a new feature like a "Floo Network Integration"? No problem! Just develop a new module and integrate it seamlessly, much like adding a new ingredient to your Polyjuice Potion recipe.

Challenges: When Grindylows Lurk in the Code

Now, Microfrontends aren't all sunshine and rainbows (though a Patronus Charm can definitely help!). There are challenges to consider, just like Harry facing He-Who-Must-Not-Be-Named:

Complexity: Coordinating multiple teams and codebases can be tricky, requiring a well-defined communication strategy (think Dumbledore's Order of the Phoenix).
Integration Overhead: Making sure all the modules work together seamlessly can be complex, requiring additional effort just like setting up the intricate Weasley Wizard Wheezes shop.
Debugging: Tracking down issues across multiple modules can feel like navigating the treacherous Department of Mysteries.

So, Do You Need a Microfrontends Potion?

The decision to use Microfrontends depends on your project's needs.
If you're building a simple single-page application like Tom Riddle's diary (creepy!), a monolithic approach might suffice. But for large, complex applications like Flourish and Blotts, Microfrontends can offer significant advantages.

Ultimately, the choice is yours, brave developer. Just remember, with great power (and modularity) comes great responsibility (and potential headaches).

But fear not, like Hermione Granger facing any challenge, with careful planning and the right approach, Microfrontends can be the magic ingredient your project needs to truly shine!

Amazing resources

Top 3 Patterns to Master JavaScript Problem-Solving

Mahesh Pratap — Sun, 04 Jun 2023 08:38:57 +0000

Introduction

As a JavaScript developer, effective problem-solving techniques are crucial for overcoming challenges and writing efficient code. In this article, we'll explore a range of tailored problem-solving techniques for JavaScript.
Whether you're a beginner or an experienced developer, these techniques are not only valuable for your day-to-day coding but also highly beneficial for interviews and technical assessments. Let's dive in and discover the strategies that will elevate your JavaScript problem-solving game.

1. Frequency counter

The frequency counter technique is a powerful approach to solving problems that involve analysing the frequency of elements in an array. One common scenario is when we need to determine how many times each element appears in the given array. To illustrate this technique, let's consider some problems and their solutions.

Problem 1: Checking Frequency of Elements
Write a function checkFrequency to check frequency of each element in an array;

Solution:

const checkFrequency = (nums) => {
  const frequencyMap = {};
  nums.forEach((num) => {
    frequencyMap[num] = frequencyMap[num] + 1 || 1;
  });
  return frequencyMap;
}

const result = checkFrequency([1, 2, 2, 1, 3, 4, 3, 4, 1]);
console.log(result); // {1: 3, 2: 2, 3: 2, 4: 2}

Problem 2: Matching Squares
Write a function called squared which accepts two arrays. The function should return true if every value in the array have it's corresponding value squared in the second array. The frequency of the numbers should be same.

Solution:

const squared = (array1, array2) => {
  if(array1.length !== array2.length) return false;

  const array1Frequency = {};
  const array2Frequency = {};

  array2.forEach((num) => {
    array2Frequency[num] = array2Frequency[num] + 1 || 1;
  });

  array1.forEach((num) => {
    array1Frequency[num] = array1Frequency[num] + 1 || 1;
  });

  return array1.every((num) => {
    return array2Frequency[num*num] === array1Frequency[num];
  });
};

const result = squared([2, 3, 4, 2], [9, 16, 4]);
console.log(result); // false

2. Mulitple pointers

The multiple pointers technique is a valuable approach for solving problems that involve searching, comparing, or traversing elements in an array. By utilizing two or more pointers that move in different directions or at different speeds, we can narrow down the search space and find solutions with improved time complexity.
Let's examine a specific problem and its solution to understand how this technique can be applied in JavaScript.

Problem 1: Finding Pair with Zero Sum
Write a function sumZero to find the pair of numbers in a given array whose sum is zero.

Solution:

const sumZero = (nums) => {
  let left = 0, right = nums.length - 1;

  while(left < right) {
    const sum = nums[left] + nums[right];
    if(sum === 0) {
      return [nums[left], nums[right]];
    } else if(sum > 0) {
      right--;
    } else {
      left++;
    }
  } 
}

const result = sumZero([-3, -2, -1, 0, 1, 2, 3, 10]);
console.log(result); // [-3, 3]

Problem 2: Counting Unique Numbers
Write a function to return the number of unique numbers present in a sorted array of numbers.

Solution:

const uniqueNumbers = (nums) => {
  if(!nums.length) return 0;

  let left = 0, right = 1;
  let count = 1;

  while(right < nums.length) {
    if(nums[left] === nums[right]) {
      right++;
    } else if(nums[left] !== nums[right]) {
      count++;
      left = right;
      right++;
    }
  }

  return count;
};

const result = uniqueNumbers([1, 2, 2, 3, 3, 3, 4, 4, 5]);
console.log(result); // 5

3. Sliding Window

The sliding window technique is a powerful strategy used for solving problems that involve finding a subset or subarray within a larger array.
By maintaining a dynamic window and sliding it across the array, we can efficiently compute sums, averages, or other metrics for subarrays of fixed lengths.

Problem 1: Finding Largest Sum of Consecutive Numbers
Write a function which accepts an array of integers and a number n. The function should calculate the largest sum of n consecutive numbers.

Solution:

const getLargestSum = (arr, num) => {
  if(arr.length < num) return null;

  let largestSum = arr.slice(0, num).reduce((a, b) => a+b);
  let lastWindowSum = largestSum;

  for(let i = 0; i < arr.length - num+1; i++) {
    lastWindowSum = lastWindowSum - arr[i] + arr[i+num];

    if(largestSum < lastWindowSum) {
      largestSum = lastWindowSum;
    }
  }
  return largestSum;
};


const result = getLargestSum([1, 2, 1, 0, 0, 3, 2], 3);
console.log(result); // 5

Conclusion

In this article, we covered three powerful strategies: the frequency counter, multiple pointers, and sliding window techniques. These techniques provide valuable tools to tackle a wide range of problems efficiently and effectively.

By mastering these problem-solving techniques in JavaScript, you'll be equipped with versatile approaches to address complex programming challenges. As you encounter different problems, these techniques will serve as valuable tools to analyze, break down, and devise efficient solutions.

Please note that the solutions provided in this article represent one approach to implementing the techniques. If you have alternative or more effective methods for solving any of the problems discussed, I encourage you to share them in the comment section below.

Additional Resources

Scope in JavaScript - Behind The Scenes

Mahesh Pratap — Sat, 11 Sep 2021 11:57:20 +0000

Scope basically means " the chance or opportunity to do something". But what does it mean w.r.t JavaScript, and how do JavaScript engines interact with it to process any line of code. Let's find out-

What is Scope?

Scope collects and maintains a look-up list of all the declared identifiers (variables), and enforces a strict set of rules as to how these are accessible to currently executing code.
To understand this, let's briefly see how compilation works for a piece of code that the Engine encounters.

Steps involved in compilation

1. Tokenizing/Lexing

This involves breaking up a string of characters into small chunks, called tokens. For example, const foo = 4; may be broken into const, foo, =, 4, and ;.
A tokenizer breaks a stream of text into tokens, usually by looking for whitespace (tabs, spaces, newlines). A lexer is basically a tokenizer, but it usually attaches extra context to the tokens -- this token is a number, that token is a string literal, this other token is an equality operator.

2. Parsing

Turning a stream(array) of tokens and turning it into a tree of nested elements, which collectively represents the grammatical structure of the program. This tree is called Abstract syntax tree.
To see how an AST looks like follow this link.

3. Code generation

This involves taking an AST and turning them into executable code.

The JS engine is vastly more complex than just these three steps. For instance, there are steps to optimize the performance of the execution which we'll cover in another post. But when do scope comes to picture during these steps 🤔.

Here's when scope comes to the picture

Consider this expression const foo = 4;. Once the compiler is done with tokenizing and parsing this expression, it'll go for code generation, and proceeds as follows:

On encountering const foo compiler will ask Scope if a variable named foo already exists for that particular Scope collection. If so, the Compiler ignores this declaration and moves on. Else, It asks Scope to declare a variable named foo for that scope collection.
Compiler then produces code for the Engine to execute. To handle foo = 4 assignment, Engine asks scope if there is a variable called foo accessible in the current scope collection. If so, the Engine uses that variable. Otherwise, it looks in the scope outside of the current scope until it finds variable foo or reaches global scope.

If the Engine eventually finds a variable named foo, it assigns the value to it. Otherwise, it will raise a ReferenceError.

Consider the following program:

const a = 4;

function baz() {
  const b = 2;

  function bar() {
    console.log(b);
  }

  function fam() {
    console.log(a);
    console.log(c);
  }

  bar();
  fam();
}

baz();

Consider the functions bar() and fam() in above program.

On encountering console.log(b); in bar() Engine will ask Scope if there is a variable named a accessible in bar()'s scope collection. Scope will say "Nope, never heard of it. Go fish". Then the Engine will ask the same question to baz()'s Scope, and here is what it says "Yep, it's there. Here ya go".

The same steps are followed while running console.log(a); in fam(). The only difference is, Engine won't find the variable until it reaches the Global scope, where it'll find a.
Next, I'll try and run console.log(c); but won't be able to find it in the Global scope collection either. At last, the Engine will raise its hand and yell out a ReferenceError

Here is a representation of the flow:

Source
[1]: You Don't Know JS: Scope & Closures By Kyle Simpson

Understanding 'this'

Mahesh Pratap — Mon, 30 Nov 2020 05:28:06 +0000

One of the most confusing mechanisms in JavaScript is this keyword. Even a seasoned developer can get bewildered sometimes. So, let’s see if it's really that complicated!

this is a special keyword that’s automatically defined in the scope of every function. But how JavaScript engines decide what value should it assign to this.

Default Binding

In default binding, this refers to the global object. Any plain undecorated function call will invoke default binding if the scope in which this is used is not using strict mode. Consider:

function foo() {
  console.log(this.a);
}

var a = 2;

foo(); // 2

Variables declared in global scope as var a = 2, function foo() {…} are synonymous with global-object properties of the same name. They are not copies of each other, they are each other. In this snippet foo() is called with a plain, undecorated function reference. Hence, the default binding applies here i.e., global object.

If strict mode is in effect, the global object is not eligible for the default binding, so the this is instead set to undefined.

function foo() {
  "use strict";
  console.log(this.a);
}

var a = 2;

foo(); // TypeError: 'this' is 'undefined'

Although overall this binding rules are entirely based on the call-site, the global object is only eligible for the default binding if the contents of foo() are not running in strict mode. The strict mode state of the call-site of foo() is irrelevant.

Implicit Binding

Implicit binding is invoked if the call-site has a context object. Now, what’s a context object!
Consider:

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo
};

obj.foo(); // 2

Here the call-site uses the obj context to reference the function, so we can say obj 'owns' or 'contains' the function reference at the time function is called. Now consider this:

function foo() {
  console.log(this.a);
}

var obj = {
  a: 12,
  foo: foo
};

var obj1 = {
  a: 2,
  obj: obj
};

obj1.obj.foo(); // 12

This may look confusing but only the last level of an object property reference chain matters to the call-site. So this in foo() refers to obj for the above function call.

Gotchas

Consider the following code:

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo
}

var bar = obj.foo;

var a = 'Oops, global';

bar(); // 'Oops, global'

Even though bar appears to be a reference to obj.foo, in fact, it’s really just another reference to foo itself. Moreover, the call-site is what matters, and the call-site is bar(), which is a plain, undecorated call, and thus the default binding applies.

There is one more way to lose implicit binding i.e. when we are using callbacks. You don’t know how your passed function is being called in the callback. Trust issues 😐️

Are default and implicit binding the same?

Consider the following code:

function foo() {
  console.log(this.a);
}

var a = 2;

window.foo(); // 2

As discussed earlier variables declared in the global scope are synonymous with global-object properties of the same name. We can refer to these variables as window.a, window.foo respectively.

So whenever we are using plain, undecorated functions calls that means its context object is window and hence we get window as this in those cases.

Explicit Binding

Now let’s take the controls into our hands 😎️.

Functions have some utilities available to them (via their [[Prototype]]), which can be useful for this task. Specifically bind(…), call(…), and apply(…) methods.

call(), apply() & bind()

We can specify what we want our this to be, using these functions.
One common thing about these functions is, it takes the first parameter - an object which is assigned as this on function invocation.
call() & apply() invokes the function immediately while bind() just returns a new function.

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2
};

foo.call(obj); // 2
foo.apply(obj); // 2

var bar = foo.bind(obj);

bar(); // 2

These are very useful functions in JavaScript and can’t be covered in this post so we’ll talk about these functions in-depth in another article.

new Binding

When a function is invoked with new in front of it, the following things happen:

A brand new object is created out of thin air.
The newly constructed object is set as the this binding for that function call.

function foo(a) {
  this.a = a;
}

var bar = new foo(2);

console.log(bar.a); // 2

The new foo(2) will return {a:2} in the above snippet.

There are few other things that happen too, but that is out of scope for this topic.

Conclusion

Once you know the call-site of a function, 4 rules can be applied to the call-site, in this order of precedence to determine this binding:

Called with new? Use the newly constructed object.
Called with call(), apply(), bind() ? Use the specified object.
Called with context object owning the call? Use that context object.
Default: undefined in strict mode, global object otherwise.

For a more in-depth understanding of this I highly recommend reading this & OBJECT PROTOTYPES of YOU DON’T KNOW JS series by Kyle Simpson.

You may not know destructuring yet

Mahesh Pratap — Tue, 17 Nov 2020 04:32:48 +0000

It's been a while since ES6 introduced the destructuring assignment, which is now supported in all major browsers. It can be used in any valid assignment operation i.e., variable assignment, function parameter assignment, etc. Let's get a basic overview of what destructing is first.

The syntax before the introduction of destructuring was too verbose for assigning values of an array or object to individual variables.

const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 };

const a = array[0], b = array[1], c = array[2];
const x = obj.x, y = obj.y, z = obj.z

console.log(a, b, c); // 1 2 3
console.log(x, y, z); // 4 5 6

That's how we used to do in the pre-destructuring era. Now let's do it the ES6 way.

const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 };

const [ a, b, c ] = array;
const { x, y, z } = obj; 

console.log(a, b, c); // 1 2 3
console.log(x, y, z); // 4 5 6

Way better. Having a basic idea, let's dig deeper.

Object property assignment pattern

Let's dig into that const { x, y, z } = obj syntax from the previous snippet. It's actually shorthand for const { x: x, y: y, z: z } = obj. If the property name being matched is the same as the variable you want to declare you can shorten the syntax. Here we leave x: part of { x: x, .. }.

Usually, assignment operations follow target=source or target: source pattern but in the destructuring assignment, source: target pattern is followed. Consider:

const obj = { x: 4, y: 5, z: 6 };
const { x: X, y: Y, z: Z } = obj;

console.log(X, Y, Z); // 4, 5, 6

Here variables named X, Y, Z are declared and the values of obj.x, obj.y, obj.z is being assigned to them respectively. Hence, if the property name being matched is the same as the variable, you can use the shorthand. JS engine will do our work for us while we keep our code clean.

Assign later

As mentioned earlier destructuring can be used in any valid assignment operation. This means you don't always need to use destructuring operation while declaring variables. For already declared variable destructuring only does assignments, exactly as we have seen with other variable assignments. Consider:

let a, b, c, x, y, z;

[a, b, c] = [1, 2, 3];
({x, y, z} = { x: 4, y: 5, z: 6 });

console.log(a, b, c, x, y, z); // 1 2 3 4 5 6

We need to wrap the whole assignment expression in () for object destructuring, otherwise { .. } on the LHS will be treated as a block statement instead of an object.

The assignment expressions don't need to be just variable identifiers. Anything that's a valid assignment expression is allowed. For example:

// Object assignment
const obj = {};
const computedProp = 'z';

[obj.a, obj.b, obj.c] = [1, 2, 3];
({ x: obj.x, y: obj.y, [computedProp]: obj[computedProp] } = { x: 4, y: 5, z: 6 });

console.log(obj.a, obj.b, obj.c); // 1 2 3
console.log(obj.x, obj.y, obj.z); // 4 5 6

// Array assignment
let array = [];

({ x: array[0], y: array[1], z: array[2]  } = { x: 4, y: 5, z: 6 });

console.log(array); // [4, 5, 6]

Remember that traditional "swap two variables without temp variable" question, now we have a new solution for that:

let x = 10, y = 20;

[y, x] = [x, y];

console.log(x, y); // 20 10

Repeated Assignments

The object destructuring form allows a source property to be listed multiple times. For example:

const { a: X, a: Y } = { a: 1 };

console.log(X, Y); // 1 1

This is not possible in array destructuring, obviously 😒️.

Chaining

The return value of any destructuring assignment expression is the source object/array. Let's see what that means:

let a, b, c, x, y, z;

console.log({x, y, z } = { x: 4, y: 5, z: 6 }); // { x: 4, y: 5, z: 6 }
console.log([a, b, c] = [1, 2, 3]); // [1, 2, 3]

By carrying the object value through as the completion, you can chain destructuring assignment expressions together:

let a, b, c, x, y, z;

[a, b] = [c] = [1, 2, 3];
( {x} = {y,z} = {x: 4, y: 5, z: 6} );

console.log(a, b, c); // 1 2 1
console.log(x, y, z); // 4 5 6

[a, b] = [c] = [1, 2, 3] & ( {x} = {y,z} = {x: 4, y: 5, z: 6} ) is evaluated right to left (i.e., return value of [c] = [1, 2, 3] is assigned to [a, b] similarly, the return value of {y,z} = {x: 4, y: 5, z: 6} is assigned to {x}.

Optional Assignment

You don't have to assign all the values that are present in the source object/array in the destructuring assignment. For example:

const [,,c] = [1, 2, 3];
const { y } = { x: 4, y: 5, z: 6 };

console.log(c, y); // 3 5

You can skip the values that are not required in the current scope.

Gathering

You can use the rest syntax in a destructuring assignment to gather values in a single variable. For example:

const [a, ...b] = [1, 2, 3];
const { x, ...y } = { x: 4, y: 5, z: 6 };

console.log(a, b); // 1 [2, 3]
console.log(x, y); // 4 { y: 5, z: 6 }

It behaves similarly to the Functions Rest Parameters.

Default Value Assignment

You can provide a default value for an assignment in both object and array destructuring assignments. For example:

const { w = 7, x = 8, y, z } = { x: 4, y: 5, z: 6 };
const [ a = 9, b, c, d = 10 ] = [1, 2, 3];

console.log(w, x, y, z); // 7 4 5 6
console.log(a, b, c, d); // 1 2 3 10

Default values will be applied for missing values in the source array/object. It is similar to the Default function parameters.

You can combine the default variable assignment with alternative assignment expression syntax. For example:

const { w: WW = 10, x, y, z } = { x: 4, y: 5, z: 6 };

console.log(WW, x, y, z); // 10 4 5 6

Nested Destructuring

If the values you're destructuring have nested objects or arrays, you can destructure those values too:

const array = [ 1, [2, 3, 4], 5 ];

const obj = { 
  x: {
    y: {
      z: 6
    }   
  }
}

const [ a, [ b, c, d ], e ] = array;

const { 
  x: { 
    y: { 
      z: w 
    } 
  } 
} = obj;

console.log(a, b, c, d, e); // 1 2 3 4 5
consoel.log(x); // {y: {z: 6}}
console.log(y) // {z: 6}
console.log(w); // 6

Destructuring Parameters

All the above rules apply while destructuring function parameters too, as behind the scene the arguments are being assigned to parameters. For example:

function baz([x, y]) {
  console.log(x, y);
}

baz([1, 2]); // 1 2
baz([1]); // 1 undefined
baz([, 2]); // undefined 2

Source
[1]: You Don't Know JS: ES6 & Beyond By Kyle Simpson