Image for post
Image for post
Photo by Nick Fewings on Unsplash

Some days ago I wrote about using functions and composition instead of hoarding props to define flexible React components. I would like to dig deeper into this concept outside the scope of React.

In this story we’ll make a refactoring exercise to get to a conclusion: functions and composition can help us build flexible APIs that are easy to understand, maintain and extend.

The big function approach

Let’s start coding a synthetic example: a data fetching operation. It allows us to use options to configure how the data is fetched and the response handled:

  • Define which HTTP verb will be used.
  • Prefix a base endpoint for relative paths. …

Image for post
Image for post
Photo by Tim Mossholder on Unsplash

The other day I was refactoring some tests so I made a wrapper to access some mocked information with ease. This wrapper contained some getters and one of them retrieved a value asynchronously. Unfortunately, JavasScript syntax does not support asynchronous getters.

So. Is it not possible to have async getters? Well, it is. JavaScript lacks an async get syntax but you can rely on several workarounds.

Just return a promise

As you should know by now:

Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

So, a getter that returns a Promise is an async getter. …

Image for post
Image for post
Photo by iMattSmart on Unsplash

Authorization, frontend-wise, is just showing or hidding stuff. In React apps the usual way to handle authorization is having a component that conditionally renders its children based on some authorization condition (having a specific login or having some role, for example).

Props, props, props

Let’s assume that we have some sort of authentication mechanism and using a Hook we can get the current user: a simple object with all its authorization related information.

Using this Hook we can create a Visible component that receives a prop for each condition we want to check.

And we can use it in our code:

Image for post
Image for post
Photo by Silas Köhler on Unsplash

One of our customers gives us user-by-user access to their systems through a proprietary VPN that we cannot set up on our CI infrastructure.

When we need to deploy their Rails application we rely on mina scripts that connect to the deploy machines using SSH connections (over the VPN). To work properly mina needs you to exchange SSH keys with the server. These are legacy projects, so we use Docker to run our local development environment. So, how can we deploy using Docker?

One key to rule them all

One option would be to create a new shared deploy key for the project using ssh-keygen, exchange the public part with the server, and use it in our Dockerfile. …

A story about the React lifecycle and side-effects

Image for post
Image for post
Photo by Christian Egli on Unsplash

The React docs say this about Portals:

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

This means that they are the tool to use when we need to render parts of our UI in a different layer. What makes them awesome it’s how portals behave:

Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. …

Image for post
Image for post
Photo by Mathew Schwartz on Unsplash

When you want to have real time updates on a web application, you can rely on old-fashioned periodic polling or try to use some push capable modern technology. Your first impulse may be using WebSockets. However, if you just want to receive data from the server you can use Server Sent Events.

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it’s possible for a server to send new data to a web page at any time, by pushing messages to the web page. …

Image for post
Image for post
Photo by Denny Müller on Unsplash

Some of our intranet backends use S3 storage and GraphQL APIs. It’s a common scenario nowadays. This story is about how we deal with file attachments in our schemas and how our client code can get hold of the real files.

A simple GraphQL server with JWT token based authentication

Let’s start with a very simple server:

  • We’ll use Koa to build the http server and apollo-server-koa to integrate an Apollo GraphQL server with Koa.
  • The GraphQL schema allows querying for the files of the logged user.
  • It uses jsonwebtoken to authenticate users using JWT tokens. For the sake of simplicity it uses a password instead of a digital certificate to sign the tokens. We also assume that those tokens are generated elsewhere. …

Image for post
Image for post
Photo by Yu (^^) on Unsplash

When building CLI tools I found two main sources of frustration: options parsing and managing the console I/O.

There are multiple npm packages that ease the options parsing: I’m quite fond of commander, and I’ve used it in several projects as I’ve told in other medium stories. For the console I/O, I’ve approached the problem using different libraries like chalk, inquirer or progress, or using the readline support available in node. Is far easier than tinkering with escape codes, however it always ends in a very imperative and verbose code. …

How we used some clever TCP routing to overcome the HAProxy limitations regarding SSL configuration.

Image for post
Image for post
Photo by Thomas Jensen on Unsplash

HAProxy is a free, very fast and reliable solution offering high availability, load balancing, and proxying for TCP and HTTP-based applications. It is particularly suited for very high traffic web sites and powers quite a number of the world’s most visited ones. Over the years it has become the de-facto standard opensource load balancer, is now shipped with most mainstream Linux distributions, and is often deployed by default in cloud platforms.

HAProxy, as many other proxy solutions (Pound, Apache or Nginx, to name a few), has support to handle SSL connections.

In this story we’ll see how to set up SSL with HAProxy for one or many domains listening on the same IP/port, and more specifically, when the SSL configuration differs from one domain to another. This is not for the faint of heart. …

A story about why we shouldn’t use tools to do what can be done with plain JavaScript

Image for post
Image for post
Photo by Jose Aragones on Unsplash

Every major tool in the JavaScript world allows custom configuration using either JSON or JavaScript files (Babel or ESLint are good examples). Whatever the reason you may have to choose JSON, please don’t. Use JavaScript instead.

Learning from my own mistakes

Once upon a time I was setting up a complex monorepo. It contained several packages that shared common transpilation, linting and testing configuration. Some of these packages needed to tweak this config a little.

I firmly believe that less is more, so on my first try, I used JSON config inside the package.json. The shared configuration lived in a shared package that every other package used via the extension mechanism provided by the tool we were targeting (Babel for…


David Barral

Co-founder @Trabe. Developer drowning in a sea of pointless code.

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