Practical case of using network graphs

Photo by JJ Ying on Unsplash

The Twitch API allows you to develop applications using some of the data made available by the streaming platform. I suggest you use this powerful API to see the links between streamer communities.

A demo of the final project is available at splitviewer.com. The sources are accessible on my github repository.

The principle is as follows:

  • a streamer connects, the application is notified thanks to the twitch API.


Create your first hook and reuse it in your React apps

Photo by Milada Vigerova on Unsplash

Goals

  • Find out how to add hooks to our React components

You can test the application and see the sources of this tutorial.

Context

The hooks were introduced by the developers of React to allow a better organization of the code by exporting certain elements of component logic. Several hooks are developed and used within a project, and the simplicity with which they can be re-used make it a tool staple of the React ecosystem.

A bit of theory

We are going to set up a hook step by step to manage a system of favorites. Our application…


Améliorez l’expérience utilisateur et la réactivité de vos applications React avec un peu d’optimisme !

Objectifs

  • Découvrir le principe de l’optimistic UI

Contexte

Le temps de réponse entre le backend et le frontend est un des facteurs limitants l’expérience utilisateur. C’est encore plus vrai lorsque l’application ou le site web est destiné aux mobiles qui peuvent avoir une connexion dégradée.

Dès qu’un utilisateur effectue une action d’envoi de données au serveur, ce qu’on appelle une mutation, l’application cliente attend le retour du serveur pour mettre à jour l’interface. Si le temps de réponse du serveur est important, l’expérience utilisateur est mauvaise.

Image de l’auteur

Un peu de théorie

L’application gère une liste de personnages, on…


Improve the user experience and responsiveness of your React applications with optimism !

Goals

  • Discover the principle of optimistic UI

Context

The response time between the backend and the frontend is one of the factors limiting the user experience. This is even more true when the application or the website is intended for mobiles which may have a degraded connection.

As soon as a user performs an action to send data to the server, this is called a mutation, the client application waits for the return of the server to update the interface. If the server response time is importantly, the user experience is bad.

Image by Author

A bit of theory


Start the machine learning adventure with Tensorflowjs and React, tutorial with demo and sources

Photo by h heyerlein on Unsplash

Goals

  • Discover some api’s function of Tensorflowjs

Demo of application is available and sources are on my github.

Context

React is one of the most used javascript libraries to build a rich and powerful user interface. Tensorflowjs is the implementation of Tensorflow for NodeJS and to allow developers to use client-side machine learning models created on the server side.

Environment setup

Node.js must be installed to generate the project and manage dependencies.

The application is developped with React library, we will use Create React App to…


Commencez l'aventure ‘machine learning’ avec Tensorflowjs et React, tutoriel avec démo et sources

Objectifs

  • Utiliser l’api de base de Tensorflowjs

Une démo de l’application et les sources sont disponibles sur github.

Contexte

React est une des librairies javascript la plus utilisée pour construire une interface utilisateur riche et performante. Tensorflowjs est l’implémentation de Tensorflow pour NodeJS et pour permettre aux développeurs d’utiliser côté client des modèles de machine learning créés côté serveur.

Préparation de l’environnement

Node.js doit être installé pour générer le projet et gérer les dépendances.

L’application est développée grâce à la librairie React, nous allons…

Amichaud Romain

French independant developer.

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