Cobblestones can be combined as functions can — Credits Markus Winkler on unsplash.com

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 unsplash.com

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 www.blick.ch 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

Blick.ch 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

Introduction

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.

Aside

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 Unslplash.com

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

Generalization

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 === '-'){
return…


Credits: unsplash.com

“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…


Credits: unsplash.com

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.

Aside

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.

Asynchronicity

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


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

Introduction

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. …


Credits: unsplash.com

Introduction

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