How to make your app’s front-end architecture scalable and resilient to inevitable changes with time

diagram of 3 programming approaches: big ball of mud, layered, and modular
diagram of 3 programming approaches: big ball of mud, layered, and modular
A few ways of organising our dependencies (Image credit: Author)

Front-end architectural patterns are something that I feel almost every front-end engineer would be familiar with. But one important learning about architecture from my work experience is how to make your app’s front-end architecture scalable and resilient to inevitable changes with time, and that’s what I’ll be talking about in this article.

Rewriting code is the inescapable reality of our job. Statistically speaking, according to a survey[2] by the Association for Computing Machinery (ACM), on average, every software engineer in product organizations across the world spends at least 50% of their time in a year rewriting existing functionalities.

Many times…


The battle of the bundlers

Image for post
Image for post
Rollup vs. Parcel vs. webpack: Who wins as the best choice for a bundler?

Recently I was publishing a library to npm and I thought of experimenting with the bundler I was going to package my code in. While webpack has always been my standard choice, I decided to put it up against two other popular bundlers — Rollup and Parcel.

For those coming from a non-JavaScript background, a bundler is a tool that recursively follows all imports from the entry point of your app and bundles them up into a single file. Bundlers can also minify your files by removing unnecessary white spaces, new lines, comments, and block delimiters without affecting their functionality.


Here’s a simple solution to a very common issue faced when one embeds a native or 3rd party video in content oriented scripts such as sliders, tabs/icon tabs and modals — if you play the video and choose to collapse/slide or toggle or close the containing tag (slider/tab/modal), the video would continue to play.

I saw many solutions on stack exchange that would require you to modify the src of the element containing and call postMessage function. Well, all of that is an overkill for such a simple problem.

The following snippet will allow you to stop videos embedded in…

Manisha Sharma

Javascript Enthusiast and Senior Software Engineer at Freshworks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store