Cobblestones can be combined as functions can — Credits Markus Winkler on

Function composition and function decorator are two different techniques for combining functions.

In programming, the function is one of the most important abstraction for building application, especially as functional programming is gaining momentum.

It is thus quite important to know these two techniques and also their differences since they are two different concepts.

Function composition

Function composition has its roots in mathematics. This technique is used in different areas of mathematics, such as calculus, category theory, lambda calculus and combinatory logic.

Function composition plays such a fundamental role in development so that developers use it on a daily basis. …

A HOC does wrap a React component and decorate it — Credits Kari Shea

What is HOC ?

Higher-Order Component is a pattern in React invented by Sebastian Markbåge in early 2015.

Even though HOC was first created in the context of Class component, HOC can also be used with Functional components.

HOC started to gain traction after Andrew Clark — co-author of Redux — released the utility library recompose in 2015 for helping in using this pattern in a React project.

Why HOC ?

The idea of HOC is to reuse code. HOC is a special case of decorator.

Thus, HOC produces a new component by extending an existing component without modifying that latter.

A nice property that HOC’s have…

Blick TV streams on as of February 2020

In this article we will see how to implement a complex tracking mechanism using React Hooks. We would like to track a very specific event, namely when a piece of UI is actually viewed by users.

Use case is one of the largest online news portals based in Switzerland. Our home page is a quite long vertical sequence of teasers of different kinds. We want to track the teasers viewed by our readers. Technically speaking, this means that when a teaser — which is a React component — is inside the viewport for a certain period of time, we want to…

Credits : Wojciech Maj


React 16.3 introduced a new lifecycle function called getDerivedStateFromProps.

This new lifecycle function is meant as replacement to componentWillReceiveProps which is unsafe for async rendering when misused. componentWillReceiveProps will no longer be supported from React 17, unlike its counterpart UNSAFE_componentWillReceiveProps.


In this tutorial we’ll use the so-called class properties which is quite used in the React community (e.g. Facebook) and which will save us some bits of code. You may use the Babel plugin called class-properties on this purpose.

For the sake of simplicity we did not make use of propTypes and we put all our React components together. …

Credits: Wolfgang Rottmann on

The Strategy pattern is one of the most used design pattern in the object-oriented programming (OOP) world. It was coined by the so-called Gang of Four.

Starting point

We’d like to implement a binary function (two parameters) adding two numbers.

const a = 10;
const b = 32;
const add = (a, b) => a + b;console.log(add(a, b)); // 42


So far so good. But what if we’d like to do other operations, such as subtraction or multiplication.

const a = 10;
const b = 32;
const operation = (a, b, operator) => {
if(operator === '-'){


“Any application that can be written in JavaScript, will eventually be written in JavaScript”. — Jeff Atwood, 2007

Functional programming got a lot of attention over the last years even though it’s there for a while, since McCarthy designed LISP from 1958. As an example, Java, the ultimate OOP language, supports functional programming features, like lambda expression and stream as of Java 8.

JavaScript by supporting function as first-class citizen embraces a taste of functional programming from the very beginning of its conception. Indeed Brendan Eich, his conceiver, was inspired by Scheme — which is a LISP dialect — when…


ES2016 introduced async functions. This feature was proposed by Brian Terlson. async/await construct is inspired by .NET.

The goal of async function is to write code as if each instruction would be executed one after another (synchronously) but still having the things done asynchronously.

An async function returns a promise.


For the sake of this article we are going to use the following utility functions. The first one just render an article in the DOM. The second one just performs an HTTP request in Ajax using the XMLHttpRequest object.


JS is an asynchronous language. It means that instructions are…

GraphQL query (left hand-site) and response (right hand-side)


In this tutorial all steps for building a GraphQL API are detailed. On that purpose we are going to use mainly the following Node.js modules, Express.js, Sequelize, Apollo 2.0 server and Apollo 2.0 client. The first one is a lightweight web framework while the second one is an ORM for, as its name suggests, SQL based database. Finally Apollo 2.0 is an implementation of GraphQL in Node.js.

In a previous tutorial we implemented the same API as the one in the present tutorial but in a RESTful way. …



In this tutorial all steps for building a REST API are detailed. On that purpose we are going to use mainly two Node.js modules, namely Express.js and Sequelize. The first one is a lightweight web framework while the second one is an ORM for, as its name suggests, SQL based database.

In a separated tutorial we discuss about the implementation of the same API as the one in the present article using GraphQL.

A bit of theory

What is a REST API ? A REST API is a set of URIs performing precise actions on data.

What kind of actions ? The actions are…

Thomas Rubattel

Front-end developer based in Tokyo and Zürich

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