Photo by Maksim Shutov

React provides a nice API to share state globally and across components, the Context API, but while working at scale in Jira, we discovered how it can easily become a developer’s nightmare if not properly guarded.

It all starts with a simple component

Letʼs imagine we want to create a dropdown that renders a list of categories: we may use GraphQL via React-Apollo, but assuming we cannot yet, we create something with a similar API in the meantime, easy replaceable in the future. We start our first iteration by just using local state:

class CategoriesQuery extends Component {
state = { data: null, loading: false, error: null…

Original photo by Kelly Sikkema

Dependency injection and component injection for testing purposes is not a new topic. Indeed, the ability to provide a custom implementation of a component/hook while testing or writing storybooks and examples it is extremely valuable. react-magnetic-di enables it without the downsides of prop based solutions.

The dependencies problem

While coding complex components that are the result of the integration of several other units, it is quite important to be able to reduce and simplify their internals so that tests can focus on the details that matter.

Such statement is even more important given the direction that React is taking: components for both UI…

Do you want a sweet state too?

For the past months I’ve been part of the team responsible to transform Atlassian’s Jira into a modern SPA. We took this opportunity to experiment with new concepts, especially around state management.

Our first macro component to be built was the navigation app. A navigation app poses quite a few challenges, because of the way other apps have to interact with it. We were not much concerned about data fetching, which would eventually be solved by React Apollo, but more focused on how we could share generic data (like UI state) and trigger cross-app actions.

Why current solutions didn’t taste good enough

We evaluated and implemented several…

Photo by Scott Goodwill

One of the new patterns getting popular across the React community is the render props pattern and Unstated is an experiment of using that pattern to manage state across your app. An interesting approach that exposes some of the render props challenges.

First of all, this is not a critique Jamie’s inspiring work. I think his approaches are an excellent way of pushing forward the discussion around state management in React.

Using Unstated for data fetching

Most of the React developers are used to Redux (or a similar “store provider”) to handle state in a React app, but other solutions like Apollo are trying to…

Photo by Kira auf der Heide

Recently, while surfing on my laptop, I noticed the fan suddenly starting making a lot of noise and, to my surprise, I saw in “Activity Monitor” that 3 Safari processes from 2 domains were loading 100% of my CPU units each! Upon inspection, those web pages were still fully interactive so I started digging further in order to understand what was going on “under the hood”.

Opening the browser console and forcing the JavaScript debugger to pause the JavaScript execution brought me to an obfuscated script that quickly turned out to be a coin mining script.

Photo by Nathan Dumlao

How to run integration tests of frontend code when you have no control over the API service (and the service has no test environment)?

TL;DR: provide the service endpoint dynamically, so it can be changed to localhost and return fixtures during testing. Bonus: use node-replay to automatically record requests/responses.

Most articles about UI integration/E2E tests assume that you are in control of the API service, so you can customise its setup and teardown to be in “test mode”, or that the service itself provides test account/env, so you don’t need to worry about messing around with data. However that is not always the case. Recently, I had to find a way to write UI integration tests for a React frontend that was talking directly…

Photo by Geran de Klerk

Did you know that you can use the key prop to force reset a component state? Most of the times you want to prevent that, but sometimes it is particularly helpful and helps keeping your code clean.

What is the key prop?

React key prop is a special prop that can be added to any component in order to explicitly tell React its identity. The common scenario where a component requires a key prop is within a list: React needs it in order to understand which items have been added, removed or, more generically, modified. This allows for advance DOM manipulations, preventing nodes from being…

Photo by Igor Miske

HTML canvas interface implements a series of security related features that prevent cross domain manipulation unless explicitly allowed by the origin domain.

What does that mean in practice? In order to be able to read the pixels data of an image on a different domain, the hosting server must first declare the appropriate Access-Control-Allow-Origin header. Once done, the consumer will be able to load the image into a canvas:

var img = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = "";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
img.src = src;

Photo by Csabi Elter

It is no news that HTML contenteditable is a mess, however it is challenging even getting a plain text value of the user input.

Let me begin by saying that unless you have really specific needs, textarea is what you should use to get plain text input. The reason why I had to use contenteditable is because I need the box to be content aware and adapt its size dynamically (both width and height).

Getting content changed notifications

Assuming you have no other choice but using a contentEditable div as a textarea, your first problem is how to listen to user interactions. On modern browsers there is a unified event that you can subscribe to in order to get content changes: input. It will fire every time content…

Photo by Mathyas Kurmann

Required workaround to properly distribute a library built with Typescript, Babel and Webpack.

As my latest project is a standalone library, I decided to give Typescript a go in order to increase consistency and documentation. After spending some time in order to get the Typescript compiler building my files, I realised that I was missing the great Babel plugin ecosystem.

So, I decided to enhance my dev experience and my build process. I added Webpack, Babel and I’ve made all three of them working together thanks to the awesome awesome-typescript-loader. Next was about time to test the build.

There are several options when you want to distribute your library as a bundle ready…

Alberto Gasparin

Being a Frontend Developer is learning something new every day

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