UI development concepts explained with food.

With pictures!

5 min readOct 15, 2020

Sorry if any of the pictures are too small to read on mobile. They are only supplementary (and mostly for my own amusement). Inspired by XKCD.

Many programming concepts exist beyond the libraries that implement them. It can be confusing. Sometimes I feel like I don’t know about a subject because people are talking about a specific library, or using convoluted terminology, even though I know the concept well.

I’ve compiled this list so that — like me — you can see that you know a lot more than you realise. When you know the concept learning the implementations is easy.

State management

Imagine you sit down at a tapas restaurant with some friends. You’re each taking a turn to order a starter for the table from the menu. The menu defines what food you can request.

The state is in the kitchen. The waiter is the state management, and you and your friends are the component parts of your application. The menu is there to stop you conjuring up a sardine ice cream that will cause all your friends to crash (or stop talking to you).

In Redux terminology the menu is a set of Actions you can trigger. The waiter is a Reducer who can only perform a set of repeatable tasks (pure functions). You can ask for chocolate ice cream, but you can’t ask for random-flavoured ice cream, because they won’t always return with the same flavour. The waiter is not allowed to think for themself. You have to do your random choice on the menu, then request the resulting flavour from the waiter.

Components

Components are like a buffet. Each dish is a complete self-contained meal. You can put any dish on your plate, and you can put any dish inside any other dish. Ice cream in a spring roll? Absolutely. Curry on a pizza? Sure why not. You can put anything you want together with confidence that it will still work, because all the parts are completely self-contained.

Server Side Rendering (SSR)

Instead of serving you a deconstructed cheesecake, the waiter assembles the ingredients for you in the kitchen before they bring it out. This is more complicated for the waiter, but it can be useful for people who don’t know how to assemble a cheesecake.

The cheesecake is your site, the waiter is SSR, and you are the browser (or a search engine crawler that doesn’t know how to assemble a cheesecake).

Virtual DOM

You’re at a restaurant, and you order some rice. Your waiter runs back and forth between you and the kitchen with your plate, adding each grain of rice as it becomes ready. This makes it difficult to enjoy your rice.

You suggest that they do all the serving in the kitchen, and only bring the food out to you at a sensible frequency. Congratulations, you just created the virtual food plate!

The chefs are everything going on in your application, the plate in the kitchen is the virtual DOM, the plate in front of you is the real DOM.

Transpiling

Sometimes when you’re creating a meal it’s easier to put your food in a pan, rather than holding it in your hands in the oven while you wait for it to cook. When it comes to eating it your guests can’t eat the pan though. You should take the food out of the pan with a ladle.

You are the chef, the pan is any non-standard code you write, the transpiler is the ladle, and your guests are web browsers.

Mobile-first development

You’re deciding what to serve at a dinner party. All your guests should be able to enjoy your food, no matter how big or small they are. Often your guests are smaller than you realise. First prepare the most important part of your meal to serve to all your guests, then decide if there are any extras you want to add on for your bigger guests. Don’t only serve your smallest guest an ice cream, or force them to eat a seven course meal.

Microservices vs Monolith

You construct a sandwich by stacking a slice of bread, some butter, ham, cheese, tomato, lettuce, and another slice of bread. Each ingredient is separate, and can be replaced or removed, but they work together. This is a microservice sandwich.

Alternatively, you chuck the bread, butter, ham, cheese, tomato, and lettuce in a blender, and have a monolith smoothie.

Serverless

You’ve decided to go kitchenless. You remove the kitchen from your house. Sometimes you rent a kitchen to cook your food in pay-as-you-go. Sometimes you order a complete takeaway with all the food included. It’s not that there is no kitchen, it’s just that it’s not in your house, and you don’t have to look after it.