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

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

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;
  }…

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

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

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

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