DEV Community: Samiullah Khan

You might not need lodash

Samiullah Khan — Sat, 04 Jul 2026 18:05:59 +0000

I found a year old issue for my personal project that is to

Remove lodash dependency

I scanned the code to find following instances

import forIn from 'lodash-es/forIn';
import groupBy from 'lodash-es/groupBy';
import reduce from 'lodash-es/reduce';
import { sortBy, take } from 'lodash-es';

I am even using the es modules that are much more performant that common js and what not is out there.

Let’s see how it’s used in our code base and what is the native alternative

groupBy

const grouped = groupBy(values, (item) =>
  item.category.title ? item.category.title : item.category
);

JavaScrip has it’s own static method with same name of groupBy. Relatively same api, I wonder how much it’s inspired from lodash

Let’s see how we can replace it with built it solution

const grouped = Object.groupBy(values, (v => v.category?.title ?? v.category ))

We have even shortened it with optional chaining and nullish coalescing which also the readability but I think little sprinkles of it are okay

forIn

forIn(grouped, (value, key, item) => {
  this.chartLabels.push(key.toUpperCase());
  this.chartData.push(reduce(value, (sum, n) => sum + Number(n.price), 0));
});

So we are looping over object keys and pushing to dedicated array. I don’t how I went with forIn because for In was for ever supported. May by lodash version is less verbose and might have better ergonomics

Let’s replace it

for (const key in grouped) {
  const element = grouped[key];
  this.chartLabels.push(key.toUpperCase());
  this.chartData.push(reduce(element, (sum, n) => sum + Number(n.price), 0));
}

reduce

this.chartData.push(reduce(value, (sum, n) => sum + Number(n.price), 0));

We have already seen the reduce in previous section of groupBy. Again Arrays has reduce for years and it’s very intuitive api.

//...
if(element) {
  this.chartData.push(element.reduce((sum, n) => sum + Number(n.price), 0));
}
//...

take

take(values, 3).map(item => {
  chartLabels.push(item.key.toUpperCase());
  chartData.push(item.value);
})

Again here take, how different it could be from slice that ideally returns new array. But it doesn’t matter for array of object they are passed by references

slice(0, 3).map(item => {
  chartLabels.push(item.key.toUpperCase());
  chartData.push(item.value);
})

Any way the replaced solution is slice(start, end) where end is not included. So starting from 0 it goes till 2.

sortBy

map(values => sortBy(values, 'key')),

So this one has very nice ergonomics as well, all we have to is provide a key as string like key here or and array of strings as ['age', 'name'] as well as function. It also consider the Stable Sort that preserves the original sort order of equal elements.

map(values => values.toSorted((a, b) => a.key.localeCompare(b.key))),

The toSorted take care of stable sort by default but it gets a bit bloated and we always has to provide the function that decides how to sort, it a bit weird to define the logic.

We have found all those alternatives to loadash. Lodash has it place and it’s perfect tool if you need a lot of such manipulation with Array and object. As it’s already well tested, we can simply use it as utility library as tailwind for CSS has found it’s place

Fun fact why JavaScript array has includes a much common name is contains but they couldn’t go with name as it could broke the web as it was already taken by underscore.js

The post You might not need lodash appeared first on Technbuzz.com.

Component Immutability and RequiredArray

Samiullah Khan — Tue, 18 Apr 2023 11:41:29 +0000

While reading through component design, one of the recommended tip is to never mutate the input properties.

Let's look at the example below. (I am using Angular but same can apply to other frameworks)

@Component({...})
class MyComponent {
    @Input() status: Status[];
    get sortedStatus() {
        return this.status.sort();
    }
}

Here sort is a mutable operation. This not only sort the array but also mutates the array.

I have prepared the stackblitz. Here we have status array of type string. It's passed down to child component. It's displayed both in parent and child component. In the child component I have a button Sort Array that basically sorts the status that is received via @Input().

Sort Array from child component sort array and it is reflected in parent component.

We can prevent this behavior by using the ReadonlyArray

This interface strips away all the mutable operations like push, pop, shift, unshift along with sort.

Getting Started with Angular and Nx

Samiullah Khan — Wed, 18 Jan 2023 16:27:37 +0000

This is a series of post which will cover array of topics. The application in question needs a component library (Angular Components aka Angular Material). A CSS Utility Library to take care of adding styles (Tailwind). A way to develop, document and test components (Storybook). Last but not least, move the load off to the Libs (Nx).

Create Nx Angular Workspace

Typing the following command in terminal will greet us with

npx create-nx-workspace@latest

We have chosen integrated monorepo. If all the projects and libs in a workspace share same dependencies, that Integrated Monorepo is way to go.

Next, I have chosen Angular. We can also choose the apps (first option) to create empty repo. We can then use @nrwl/angular Plugin to add new Angular project.

In next follow up screen we need to provide name to the Repo and Application while SCSS is chosen as flavor of CSS.

This will install all the dependencies. After installation, we can serve our app as

cd weather
nx serve weather

Add Angular Material

Now we have created a workspace along with one angular application. We will utilize the Nx cli to add Angular Material.

ng add @angular/material

I have followed Angular Material Getting Started guide.

Although this schematic is intended for Angular Cli, but here Nx suggests how to make it work with Nx cli. We will just run the command by saying yes.

The command will first install the @angular/material package and then run the add schematics. I will choose setup the Theme, Typography and Animation in subsequent prompts.

The add schematics expects Angular project which can be configured for styles and fonts.

We can re-run the second command with --project flag

npx nx g @angular/material:ng-add --project=weather

This time around our command succeeded.

The Schematic made some changes to our project.

Now we have installed enough tools. We can add some UI Elements to make our app interesting.

Adding Sidenav and Toolbar

Photo by Carlos Muza on Unsplash

In this section I will show you how easy it is to add a Side Nav a Toolbar (that you see in the Admin Dashboard) with yet another schematic.

npx nx g @angular/material:navigation nav --project=weather

This command will make following change to our code base.

In order to see the result, we just need to modify the content of app.component.ts

<nx-angular-weather-nav></nx-angular-weather-nav>

Note: The Selector might be different base on your configuration.

After making above changes our app looks like the following:

We have now Sidenav with some dummy links and Toolbar. The Sidenav collapses if screen size is matches mobile device. That can be revealed by hamburger menu on Toolbar.

Adding Dashboard

In the last section of the app, we will fill the Sidenav Content with some cards.

npx nx g @angular/material:dashboard home --project=weather
Next, we need to modify the app.component.html file.

<mat-sidenav-content>
  <mat-toolbar color="primary">
    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()"
      *ngIf="isHandset$ | async">
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>
    <span>weather</span>
  </mat-toolbar>
  <!-- Add Content Here -->
  <nx-angular-weather-home></nx-angular-weather-home>
</mat-sidenav-content>

Right after the <!- Add Content Here --> comment, we have added the newly created Home Component.

Summary

We will end this post here and continue other pieces in future. To wrap up, we have managed to create Nx workspace, added angular app. We used schematics to add Angular Material, and some of its components.

Edit