Why you should (always) have a backend for frontend

Alright, alright — always doesn’t mean always. But really, the backend for front end pattern is one that everyone should be using and can be tempting to skip. But having a backend for frontend should mean little upfront work that allows a range of future benefits.

What is a BFF?

A Backend for frontend (BFF) is a server that exists to server a client application. In a sense every web application needs something like this simply as a starting point for assets, but the pattern is not limited to web apps.


DOM APIs, Partial mocks, and fun

Recently, I’ve been working to add more unit tests to front end code. Using Kent C. Dodds’ great react-testing-library (if you haven’t checked it out, it’s seriously 🔥) alongside Jest. Testing small components is usually pretty straightforward. Pass them mocked functions as props, fire some events, and validate things look like you expect. Most of my fun has been when I’ve need to mock dependencies.

A brief plea to write unit tests like production code

Before I get into details of mocking, I just want to write a brief petition to treat the code you write in unit tests like code you write for…


JSON value ‘<null>’ of type NSNull cannot be converted to NSString 🙃

A while back I read about some of the metaprogramming features that were added in ES6. While I use some extensively, like Symbols, others I’ve had a hard time finding a use for. Like Proxies. They seem so cool (and now you know my idea of cool 😎).

I’ll explain briefly what a Proxy is and then what I used it to actually solve recently.

The Proxy Object

Before going too far, I need to give credit to Keith Cirkel who wrote an incredible set of posts on all the metaprogramming additions to ES6. …


The other day I was reviewing a piece of code that looked something like this:

handleForm = async event => {
this.setState({ isProcessing: true });
const response = await client.sendApiRequest({
value1: event.target.elements.field1.value,
value2: event.target.elements.field2.value,
});
if (response.ok)
this.setState({ isProcessing: false });
}

Now, depending on your familiarity with events in React, that code might seem totally fine. But the async event handler stood out to me and made me wonder if those lines where we’re accessing elements will work as expected. before I get into whether or not that works, let’s hit some background points here.

React Events and the Browser Event Loop

If you already know…


Using AVAudioEngine to make cool things

While working on a React Native app recently, I discovered a need to drop down and write some native code for audio processing. I had what I thought was a straightforward goal: layer two audio tracks over each other.

Having roughly zero familiarity with iOS development, I had no idea where to start. I tried a lot of things before I discovered AVAudioEngine — but it’s what I was looking for all along. This elegant interface turned a lot of time looking at dated and complicated sample code into a few lines of what felt like magic.

I’ll be using…


You may know that it’s good to not check your database credentials into Git. Good! Knowing is half the battle right? I’ve found that deploying secure configurations using Docker is actually a straightforward process. (You just search through the 5,000 Docker CLI flags until you find one that looks right?)

Before we get to Docker though, let’s start at the beginning.

Encrypting Data

When storing production for my Node.js server, I like to use a simple file like configuration.js. Some people prefer a json file. It’s really up to you.

//config.js
export const config = {
username: "DarkHelmet",
password: "12345"
};

If…


Update May 2019: Consider looking at the for await … of syntax as well.

I was writing some API code recently using Node 8, and came across a place where I needed to use Array.prototype.map with an async function on each item. Async/Await is one of my favorite new features in javascript as it makes asynchronous javascript code much more readable. Now I was briefly surprised when my map call did not work. Look at the code below and see what you expect it to log:

const arr = [ { key: 1 }, { key: 2 }, { key…

Or how I changed my routing solution 4 times

After watching a talk on React Router v4 at React Conference, I was interested in trying their native router. I had experience already using it for web development and loved the small api surface it provided. At the time, I was using React Native Router Flux but didn’t feel tied to it.

I didn’t end up choosing to stick with React Router, but it led me to playing with a few different routing libraries.

TL;DR — I personally decided to go with React Navigation

React Native Router Flux

First off, React Native Router Flux has…


Hack your way to glory

I’ve spent a decent amount of time writing server code with Node.js but despite that I’ve somehow never written a simple script before. I mean, I knew they were easy and useful, but I’d never got around to using one.

Writing one off scripts was basically my entire college education — so I love stuff like this. Let’s get into what I learned!

Setting things up

npm init

💥 You’re done!

Okay not really, but it’s just about that easy to get started. …


Or wrong ways I was thinking about React

If you’ve read the React docs, you probably have seen that React is declarative. This is normally the type of thing I skip over — a not so good habit of mine. (Give me the code samples already!) But as someone who started learning React soon out of college, I was often thinking about problems incorrectly.

This isn’t surprising. College CS can be an exercise is writing hacky scripts to solve one off problems. That was great for my coding interviews, but not so great for web development at scale. And that’s not a knock on my education — it…

Ian Mundy

Software Engineer at Google. Fan of all things Javascript — especially React Native.

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