Sign in

Software Engineer | Tech Enthusiast | Co-Founder — 22UponTwo

Get to know the benefits of using the BFF pattern in practice

Imagine a scenario where you need to build an e-Commerce application using microservices. You may have microservices for Customers, Orders, Products, Shopping carts, etc. The microservices expose APIs to be used by the frontend.

However, the data returned to the frontend by the Microservices may not be formatted or filtered according to the exact way the frontend needs to represent them.

In that case, the frontend needs to have some logic on its own to re-format these data. Having such logic in the frontend will use up more browser resources.

In a situation like this, we can use a BFF…


Selecting the right bundler for your frontend

If you are a frontend developer, you may be familiar with WebPack as a bundler for your project. Most developers and teams use WebPack as their primary JavaScript bundler. I used WebPack in most of my projects too. However, once I came across Parcel, I took the liberty of testing it out.

In this article, I will share my experience of using Parcel and compare it with WebPack.

Before we dive in, let me give a small spoiler about why Parcel was attractive to me.

Parcel requires zero configurations to get it up and running as opposed to other bundlers…


Easily manage your Monorepo with these tools

A Monorepo is a single repository where you store all the code that belongs to a project. For example, a Monorepo will include the website code and mobile app code in one place. However, it differs from a monolithic application as the modules are placed with clear boundaries within the repository.

And, for anyone starting with Monorepos, proper tooling is the key to avoid known pitfalls. So let’s take a look at some of these tools to find the best for your use case.

1. Bit


Different patterns for implementing Web Sockets

WebSockets are used for real-time communication between the browser and a server. These communications are bi-directional. Therefore it fits low latency applications such as chat, real-time multiplayer gaming, in-app notifications.

If you are new to WebSockets, I suggest you look at the below article I’ve written to understand better how it works.

However, in this article, I will be looking at 4 key patterns when using WebSockets in practice.

  • Sending messages directly.
  • Triggers only.
  • Single publisher and multiple subscribers.
  • Multiple publishers and subscribers.

1. Sending Messages Directly

When a WebSocket connection is open between a client and a server, it is considered a full-duplex…


Test whether any characteristics of your application have changed.

There are many types of software testing. Among these, one of the unique types of testing methods is Snapshot testing.

Snapshot tests assert that the current output is same as the output before.

The main difference between snapshot testing and functional/unit tests is, snapshot tests never assert the correct behavior of the application functionality but does an output comparison instead.

There are two types of tools that support frontend snapshot testing.

Tools that take snapshots of serializable data

Jest is a tool that has built-in support for snapshot testing. Testing React components are highly supported through this. Further, Cypress supports snapshot testing via plugins (@cypress/snapshot)

Tools that take visual snapshots

Intern (via…


How to Style Your React Native Application with Tailwind CSS

Tailwind CSS is an open-source utility-first CSS framework. It redefines the way you style applications by providing a variety of CSS classes.

Using Tailwind CSS, you can style your applications without a single custom class name or a stylesheet.

Furthermore, I found that it works exceptionally well with mobile applications based on React Native.

So, in this article, I’m going to discuss why Tailwind CSS is the best solution for React Native applications.

1. Customized Packages for Better Integration

There are many Tailwind packages designed explicitly for React Native. …


Should we use Thunk, Promises, or Sagas?

Proper state management is vital for any React application. And still, Redux is dominating this space.

However, if you use Redux alone, you will feel a gap when using it for asynchronous operations.

And that’s where the Redux middleware comes into play. In this article, I will explore these middleware options in detail to understand their capabilities.

Async Operations in Redux

As you all know, state changes in the Redux store are performed by triggering the actions provided by the store.

The middleware that we use will intercept the action. It can also delay the actions if necessary, supporting asynchronous operations. And, once the…


How to Secure Your Web Applications Using Sub Resource Integrity (SRI)

Using <script> tags to load JavaScript files is pretty straightforward for any developer. But have you ever wondered what happens if any of these scripts are tempered before loading into the browser?

The answer is obvious. It could lead to a severe security breach exposing sensitive data.

Therefore, we need to have safety measures to verify the integrity of these scripts to prevent it from happening. And one of the most popular solutions is Sub Resource Integrity (SRI) in modern browsers.

What is Sub Resource Integrity (SRI)?

SRI is a security feature that allows browsers to check the resources they fetch. …


A guide to writing clean and readable React components

React has re-defined the way we build user interfaces. Since its first release in 2013 by Facebook, it has grown rapidly over the past 7 years. According to NPM trends, out of the topmost JavaScript front-end libraries and frameworks, React has managed to secure first place for many many years.

If you have been writing your front-end applications in React for a while, ask yourself this question:

Have I been writing clean React components in a readable and performant manner?

I believe that best practices to write a component may vary based on the application requirement. There are no clear-cut…


The correct way of utilizing a backend-for-frontend

With microservices, a backend-for-frontend (aka BFF) is used as an interface for request handling, data manipulation, and formatting, etc. Having a BFF gives many advantages and a few disadvantages as well.

However, in order to achieve the highest potential of this pattern, you should know how to use this pattern correctly. In this article, I’ll focus on dos and don’ts when using the BFF pattern in practice.

New to the BFF pattern?

Refer this article for more in-depth knowledge about what a BFF is.

Now that you have an idea about what a BFF is and when it should be used, let’s have a look…

Viduni Wickramarachchi

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