DEV Community: Harshita Kanal

JavaScript Module Bundlers and all that Jazz ✨

Harshita Kanal — Sun, 26 Mar 2023 15:57:57 +0000

So, what is a bundler?

A bundler is a tool that brings all your code organized into multiple files, together (bundled up!), ready to be loaded into the browser. While doing so, it generates a dependency graph of all your source code, and third-party libraries and ensures that the dependencies could be easily updated and the code is error-free. Along with this, some bundlers also come with features that help you in optimizing the performance of your app, helping you implement things like tree-shaking, lazy loading, code splitting, hot module replacement, etc.

How was the world like before bundlers?

Before bundlers - for a large part of the old web, people would link the JavaScript files served through a CDN directly. Let's consider jQuery as an example -

<script src="//code.jquery.com/jquery-2.13.0.min.js"></script>
<script>
// `$` global variable available here
</script>

This began to change when NPM came in and running npm install became a quick and easy way to install dependencies. Browserify became the first JavaScript bundler. As its documentation says -

"Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node."

Also, the require() node method was synchronous, if we need a file that hasn't been loaded, we need to do an HTTP request, but that's asynchronous. The solution is to put all dependencies together and have the code ready in memory so that it could be used whenever needed with the require()\ method. Also, say you only use a single function from lodash, you have to add the entire library and then squish it together. How do you tree shake the dependencies on your code? Lazy loading chunks of code can be hard to do at scale and requires a lot of manual work from the developer. JavaScript bundler would help implement exactly that.

Browserify was great at bundling scripts, but what if we need to transform code - Say compile CoffeeScript to JavaScript, for this, a new group of tools for the web was born, which focussed on running code transforms. These are usually called task runners, and the most popular ones are Grunt and Gulp.

And then came Webpack, which attempted to give the best of both worlds and much more. It also supported bundling and transforming non-JavaScript assets, like HTML, CSS, and images. Many popular tools today like create-react-app use Webpack.

Some popular bundlers today

Webpack

Webpack is a static module bundler for modern JavaScript applications. On processing your application - Webpack internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets from which content is served.

Some of its features include -

Hot module replacement - exchanges, adds, or removes modules while an application is running, without a full reload. Thus, saving you time 😁
Code Splitting - allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.
Tree-shaking - A term commonly used in JavaScript for dead code elimination, The webpack 2 release came with built-in support for ES2015 modules as well as unused module export detection.

Parcel

Parcel is a popular zero configuration build tool for the web. Some of its popular features include -

Native performance - Parcel's JavaScript compiler, CSS transformer, and source maps implementation are written in Rust for maximum performance. It builds the code in parallel using worker threads, utilizing all of the cores on the machine. Everything is cached - ensuring that the same code isn't built multiple times.
Lazy dev builds - In development, Parcel can defer building files until they are requested in the browser.

Other popular build tools include Vite.js, Browserify, Rollup - The bundler behind vite.

TL: DR;

In this article, we learned about bundlers, their background, the world before them and got introduced to some popular bundlers. So, dive deep in and explore what works for your projects the best ✨

Decoding JS: Polyfills and Transpilers

Harshita Kanal — Sat, 11 Feb 2023 20:28:18 +0000

Polyfills

A polyfill is a piece of code, in JavaScript that is used to provide some functionality in a browser, that does not natively support it. They are written to replicate an API that is available in some browsers, for those who don't have it or don't have it completely working.

Sometimes, they are also used to solve the issue of different browsers implementing the same feature in different ways and giving JavaScript a standard-compliant way of accessing the feature - this reason for poly-filling was prevalent in the old IE6 and Netscape days, where each browser used to implement different features differently.

Simply put, one can imagine a polyfill as a common paste which can be used to fill holes and cracks to smooth out any defects in a wall. In the UK there is a popular brand name for this paste which is called “Polyfilla”. The JavaScript Polyfill fills in for the same pieces of missing functionality across browsers. Interesting stuff!

Some Examples

Modern language features, not only include operators or syntactic constructs but also functions or methods. Consider the String.prototype.startsWith() method - It is used to determine if a string begins with the characters of a specified string, returning true or false as appropriate. Example -

// startsWith(searchString)
// startsWith(searchString, position)
const myString = 'I am learning polyfill';

console.log(myString.startsWith('I am'));
// Expected output: true
console.log(myString.startsWith('hello', 3));
// Expected output: false

Say there exists some super legacy browser, which doesn't support this method, and it would not perform as expected in this browser - to make up for it, we need to write a polyfill for this method. It would look something like this -

// If the method doesn't exist - 
if (!String.prototype.startsWith) {

 // Use a function that takes the same params, with position defaulting to 0 if not supplied and perform the same functionality as the original method, using the substr method.

 String.prototype.startsWith = function (searchString, position) {
    position = position || 0;
    return this.substr(position, searchString.length) === searchString;
  };
}

Let's take another example -

Math.trunc(n) is a function that “cuts off” the decimal part of a number, e.g Math.trunc(1.11) returns 1.

If this function is not supported in some browsers, this function may fail there.

A polyfill for it may look like this -

if (!Math.trunc) { // if no such function implement it
    Math.trunc = function(number) {
    // Use the Math.ceil and Math.floor methods supported in legacy browsers to implement it
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

The Number.isNaN feature earlier had limited support in several browsers. A popular polyfill for it looks like -

// NaN !== NaN returns a true, and hence this logic and exception :) 
if (!Number.isNaN) {
    Number.isNaN = function isNaN(x) {
        return x !== x;
    };
}

Also, remember - Not all new features are fully polyfillable. Sometimes most of the behaviour can be polyfilled, but there are still small deviations. You should be really, really careful in implementing a polyfill yourself, make sure you are adhering to the specification as strictly as possible. Or better yet, use an already vetted set of polyfills that you can trust, such as those provided by ES5-Shim and ES6-Shim.

Packages like Core-js can help here.

Transpilers

A transpiler is software that would translate one piece of code to another.

It can read modern source code and rewrite it for legacy browser engines, using older syntactic constructs.

A popular example is the nullish coalescing operator (??), JavaScript before 2020 didn't have this operator, so older browser engines would fail to understand something like name = name ?? "No name" .

A transpiler would understand this and rewrite it to -

// before transpiling
name = name ?? "No name";

// after transpiling
name = (name !== undefined && name !== null) ? name : "No Name";

This code could be understood by older browsers.

Developers run the transpiler on their computers and deploy this code to the servers. Some popular transpilers include - Babel.

Build systems or bundlers such as webpack, provide a means to run a transpiler automatically on every code change. So, they could be integrated into development processes.

TL: DR;

In this article, we learned about ways to fill in missing syntactic or functional holes in JavaScript. Polyfills provide a way to fill in functional holes. So you have a way to fill in for that new shiny, blazing-fast feature in your oldie browsers.

However, syntactic gaps are hard to fill, since they are just unrecognizable symbols for older engines. Transpilers provide a way to fill in just that.

Micro Frontends - An exploration

Harshita Kanal — Mon, 23 Jan 2023 20:46:41 +0000

Micro Frontends extend the concept of Microservices to the frontend world.

Just like each Microservice can be an independent world of its own where it can run on separate operating systems, query different databases, and have its own processes, Each Microfrontend could be made up of multiple browser-based components, having its own feature to manage, could be built and deployed separately ensuring that they are independent of each other.

The basic idea behind micro frontends is to think of a web app as a Composition of features and each micro frontend - the frontend for an independent feature often built and managed by different teams.

In the past, these systems were sometimes referred to as Frontend Integration for Verticalised Systems. But Micro Frontends is clearly - a more friendly name 😅

Advantages

Some of the advantages of micro frontends include -

More maintainable, decoupled, smaller codebases.
The ability to update, upgrade and incrementally rewrite parts of the application, which wasn't easily possible earlier.

Trade-offs

However, micro-frontends come with a lot of baggage to handle as well -

Redundant Dependencies - A micro-frontend architecture consists of a set of applications that should be able to work with each other as well, each application has its own set of dependencies, and in the long run each application may have multiple different versions of the same dependency, defeating the entire purpose of using package managers. To avoid this, the architecture must incorporate a way of managing common dependencies and minimising redundancies.
Overriding styles, inconsistent designs - Since the micro-frontends by design cannot have their own set of styles, because the overall web application UI cannot look different in patches, there should be a way of enforcing consistency across the web UI. One way to do that could be - integrating styled components, or enforcing a hard-to-deviate-from design system.
Communication and performance issues - While developing each part of the application as an independent unit, there should be a way for these parts to interact and communicate with each other, also ensuring that the same set of redundant operations isn't repeated to eventually lead to performance issues is also important.

Implementation of Micro-Frontends

One of the major things to accomplish in Micro-frontend architecture is to establish a way between the host application and the micro-frontends to communicate and integrate.

Build-Time Integration

In this case, the host application or container installs the micro-frontends as dependencies or libraries. This however leads to tight dependency between the host application and each of the micro-frontends, whenever a component gets updated, it needs to be updated in the application as well. The size of the production bundle of the application also increases as a result of incorporated dependencies.

Run-Time Integration

In the Run-Time integration, the server takes the micro-frontends, composes them and renders them as a single web application. The backend would decide which route to request, and it renders the micro-frontend corresponding to the respective route. Nginx Reverse proxy and AWS CDNs are some ways to implement them.

Client Side Composition

In the client-side composition method, the host can be deployed and built separately and the micro-frontends are exposed separately as packages which do not share the same build and deployment processes. Local modules and Remote modules are distinguished. Local modules are regular modules that are part of the current build. Remote modules are modules that are not part of the current build but are loaded at runtime from a remote container.

Loading remote modules are considered an asynchronous operation.

The Webpack 5 Module Federation Plugin is the one of trending ways of implementing this approach.

References

TL: DR;

In this article, we discussed one of the trending paradigms in the frontend world - Micro Frontends, their implementation, tradeoffs and advantages. Try diving into these and relating them to the architectural principles used at your org and in your applications to make informed decisions - In the end, enable a paradigm for building scalable frontends capable of adapting to rapidly changing systems.

CSS In JS - The what, why and How's

Harshita Kanal — Mon, 23 Jan 2023 20:41:43 +0000

CSS In JS is a practice that allows one to write CSS properties for components in JavaScript. In Runtime CSS In JS, the styles are interpreted and applied at the runtime. It involves using JavaScript libraries to combine styles with component code without needing to use external stylesheets, i.e. writing CSS in .js files, so that they can work as JS modules. This approach aims to tackle some known issues while working with CSS stylesheets like Scoping, Extensibility, Portability, Specificity, Maintenance etc.

How is it done?

There are different ways to implement CSS In JS, most commonly using either framework-dependent or framework-agnostic libraries. Styled components are among the most popular of them with over 30,000+ stars on GitHub.

This is how CSS In JS using styled components in React looks like -

import styled from "styled-components";

// Defining the styles for the element
const Title = styled.h1`
  color: red;
  border: 1px solid blue;
  padding: 10px;
`;

// Using the styled component
const App = () => <Title>Hello World!</Title>;

Another popular library for writing CSS styles with JavaScript is @emotion/css. It is framework-agnostic and needs no additional setup, babel plugin, or other config changes for primitive use.

import { css } from '@emotion/css'

const color = 'white';

const CSSInJs = () => {
  return (
    <div
      className={css`
        background-color: red;
        font-size: 40px;
        &:hover {
          color: ${color};
        }
      `}
    >
      Hello CSS!
    </div>
  );
};

Some popular CSS-In-JS libraries are - Styled JSX, styled-components, Emotion, Treat, TypeStyle, Fela, Stitches, JSS, Goober, and Compiled.

Some Pros of using CSS-In-JS

Maintenance

Large enterprise projects sometimes require hundreds of stylesheets needed to be maintained on a per-component basis, maintaining them and ensuring that there is minimal repetition to avoid having to deal with large bundle sizes is a task. CSS-In-JS simplifies that by eliminating the need for external stylesheets. A developer however needs to be well-versed in both CSS and JS to be able to seamlessly maintain projects with in-component CSS-In-JS.

Minimal Scoping and Specificity problems

Since all the styles are maintained in local scope, there is no need of using stricter selectors or preventing name clashes.

Styles could be written specifically for one component, without introducing specificity issues.

Dynamic Styling

The ability to apply conditional CSS, ease of theming, and adding styles based on certain conditions, states or prop values can all be achieved using CSS-In-JS.

Some Cons of CSS-In-JS

Increase in Bundle Size

It is understandable, the JavaScript for your CSS-In-JS library will also be included in your application bundle. Emotion is 7.9 kB min-zipped and styled components is 12.7 kB. So neither library is huge, but it all adds up :) (react + react-dom is 44.5 kB for comparison.)

Server-Side Rendering Support

When it comes to supporting server-side-rendering, there may be many unknown issues that could pop up using CSS-In-JS. Using external component libraries may also not be easy enough. Many CSS-In-JS libraries receive issues related to SSR support. It could be that multiple instances of the library get loaded at once.

While integrating component libraries, they may not give you full control over the order in which styles are inserted. (Example issue).

Performance Considerations

CSS-In-JS uses JavaScript to process CSS from JavaScript components, this CSS is then injected into DOM. The more the number of components, the more time it would take to make the first paint by the browser.

CSS caching is used to improve successive page loading time, there is no caching involved in CSS-In-JS. Dynamically generated class names make this more complicated.

TL: DR;

In this post, we discussed at length the philosophy of CSS-In-JS, the ways to implement it and the pros and cons of using it.

There are different advantages and disadvantages associated with both CSS modules and CSS-In-JS, at the end, it depends on your use case, the external component libraries, design systems, and developer skill sets to determine which approach would be more appropriate for your app :)

Building Chrome Extensions

Harshita Kanal — Mon, 26 Apr 2021 08:16:42 +0000

What are chrome extensions?

Chrome extensions can be considered as small programs which add functionality to your chrome browser.

They can help you achieve a variety of tasks, right from manipulating the DOM of your webpage, modifiying the content as per your choice, or providing some tools like screen recorders, all of these can be achieved with the help of chrome extensions. They are visible on the right of the address bar in chrome browser.

Pre-requisites of building a chrome extension

You need just the basic knowledge of HTML, CSS and Javascript to get started with your first chrome extension.

A hello world extension

The big picture of the process of building a chrome extension could be:

Writing the Manifest, HTML, CSS and JS files.
Packaging them into a .crx zipped file.
Publishing them to the chrome webstore. The chrome web store is the place from where the users can install the extension.

Types of Extensions

Browser Action: These extensions stay in the toolbar, right next to the address bar and stay there at all the times. They remain accessible everytime. Our hello world extension comes in this category.
Page Action: These extensions also stay in the toolbar but remain grayed out or inactive. They become active only on certain pages.
Neither browser action nor Page action: These extensions run in the background and achieve certain tasks.

The Manifest file

This file is a special file. It contains the information about the chrome extension. It is a .json type file.

It must mandatorily contain:

The Manifest version
The name of the extension.
The version of the extension.

Let's get started!

Now that we understand the basics, lets get started buiding the chrome extension.

Create a new folder

Make a new folder and create a file named Manifest.json in it.
The following are the contents of the Manifest.json file. Put these contents in the file.

{
    "manifest_version": 2,
    "name": "Hello World Extension",
    "version": "1.0",
    "description": "This is my first extension!",
    "icons": {
        "128": "icon128.png",
        "48": "icon48.png",
        "16": "icon16.png"
    },
    "browser_action": {
        "default_icon": "icon16.png",
        "default_popup": "pop.html"
    }
}

The manifest_version represents the version of the manifest file. The name field in the manifest file specifies the name of the extension. The version specifies the version of the extension. This is the first version of our extension, later versions will have higher numbers. The description is the description of the extension.
The icons object specifies the file names of the icons to be used while publishing the extension. They need to be in 3 sizes, 128 X 128, 48 X 48 and 16 X 16 to be saved in the same folder, with the corresponding names.

Next we specify that the extension is a browser based extension. The default_icon represents the icon on the address bar. The default popup represents the popup which would be seen when we click on the icon. It is an html file which we have named as pop.html.

Write the html file

Let's create an html file named pop.html, out contents of the popup go here.

Put the following contents in it.

<!DOCTYPE html>
<html>
    <head>
        <title> First Extension </title>
    </head>
    <body>
        <h2> Hello, welcome to my first chrome extension! </h2>
    </body>
</html>

Trying our extension

Go to your chrome browser and type chrome://extensions
Turn the developer mode on by toggling the switch.
Click on load unpacked button
Select the folder where you have made the extension.
That's it! Your extension should now be visible on the page.
If you click on the puzzle icon in the corner, our h2 should be visible.

We just created a basic chrome extension! Congrats!

Exercise

<!DOCTYPE html>
<html>
    <head>
        <title> First Extension </title>
    </head>
    <body>
        <h2> Hello, welcome to my first chrome extension! </h2>
    </body>
</html>

This is our static html file, as an exercise, try tweaking with this file and see the changes on the popup.

CSS Selectors: A Primer

Harshita Kanal — Sun, 15 Nov 2020 19:36:30 +0000

CSS Selectors

CSS or Cascading Style Sheets is used to style HTML elements.
Element styling typically involves:

Selecting the element
Applying the specific styles.

A Typical example of an HTML element could be:

<h1> hello </h1>

Here the h1 is an HTML element.
Now we need to select this specific element in our CSS file, this would be done by using
a selector.

A simple selector

The simplest CSS selector could be, an Element selector.

h1{
color: red;
}

The above is an example of an element selector, it would do exactly what its name says, select all specified elements on the page and apply the said styles,in this case it would select all h1 elements and make it red.

Let's get more specific!

Element selectors are good, but we may not need to apply the same styles to all instances of the selected element on the page,
i.e. All h1 elements may not be red!

There could be situations when only some h1 elements need to be red, here we use more specific Selectors.

Class selectors

A class selector looks like this:

.myColoredTag{
color: red;
}

We apply a class to an HTML element as:

<h1 class="myColoredTag"> hello </h1>

In this case, the same set of styles would be applied to all the elements having the same class name.
This could be considered as one of the most used tags, as it can later help you to use various CSS frameworks, example: bootstrap and apply framework specific styles.

ID Selectors

An ID selector looks like this:

#myColoredTag{
color: red;
}

We can apply an ID to an HTML element as:

<h1 id="myColoredTag"> hello </h1>

Each page can have only one element with same id, an id is thus unique.