Image for post
Image for post
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, is that they compose well with each other, in the same way you compose functions in mathematics — k(x) = f(g(x)). Composition is one of the most important concept used in functional programming and React seems to more and more go in this direction. …


Image for post
Image for post
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 notify this event to the Tag Management System (TMS). …


Image for post
Image for post
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. …


Image for post
Image for post
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 a - b;
}
else if(operator === '*') {
return a * b;
}
else {
return a + b;
}…

Image for post
Image for post
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 he designed it, back in May 1995. Function as first-class citizen means that functions can be assigned to variables, passed as argument to a function and returned from a function. …


Image for post
Image for post
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 not necessarily done one after another. Certain instructions such as network operations are indeed non-blocking. …


Image for post
Image for post
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. …


Image for post
Image for post
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 the so-called CRUD actions, namely Create, Read, Update, Delete. The main idea of REST is to associate the HTTP protocol with CRUD actions mentioned above. Indeed HTTP has distinguished kind of HTTP request, among others POST, GET, PUT, DELETE. …

About

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