📝 Blog

April 2, 2020
2 min read

Vert.x et React : dev et prod

Aujourd’hui, on va faire très bref, le confinement génère son lot de soucis.

Dans le précédent épisode, nous avions mis en place une application web avec un frontend React et un backend Vert.x en Kotlin.

Pour développer, il suffit de lancer le backend qui est une application JVM, de lancer le frontend qui sera alors une application Node, et tout fonctionne.

Pour une version déployée, appelons ça pompeusement notre production, il serait bon de simplifier cela en pilotant tout depuis l'application tournant dans la JVM.

Pour se faire, il faut apporter 2 modifications.

La première sera d'indiquer à notre MainVerticle qu'il aura des ressources statiques à servir.

router.get().handler(StaticHandler.create())

Par défaut, le code que vous voyez servira les ressources statiques trouvées dans le répertoire webroot.

Reste à construire le frontend et copier ses fichiers dans ce répertoire webroot.
Modifions notre fichier de build en ajoutant quelques lignes.

node {
  version = "10.16.0"
  npmVersion = "6.9.0"
  download = true
  nodeModulesDir = File("frontend")
}

val buildFrontend by tasks.creating(NpmTask::class) {
  setArgs(listOf("run", "build"))
  dependsOn("npmInstall")
}

val copyFrontendFiles by tasks.creating(Copy::class) {
  from("frontend/build")
  destinationDir = File("${buildDir}/classes/kotlin/main/webroot")
  dependsOn(buildFrontend)
}

val processResources by tasks.getting(ProcessResources::class) {
  dependsOn(copyFrontendFiles)
}

Dorénavant, lorsque vous lancerez votre commande gradle run , vous aurez accès à l'application par http://localhost:8888/

La différence étant bien entendu qu'en phase de développement, le serveur node, qui répond dans notre cas sur le port 3000, vous permettra de travailler sans relancer toute la build à chaque modification.

Voilà, c'est court aujourd'hui.
Vous trouverez comme d'habitude le code dans le repository, dans la branche vertx3.

Je tenais à remercier au passage Thomas Segismont qui est l'auteur de l'un des articles que j'ai lu dans mon parcours de débutant.

Comme d'habitude pour toute question, pour toute remarque, pour toute critique, vous pouvez me joindre par email ou sur Twitter.

April 1, 2020
3 min read

Vert.x : des routes et des apis

Dans le précédent article, nous avons vu comment avoir une base d'application déjà capable de servir une page de base.

Il va maintenant falloir enrichir tout ça, et je sais par avance que j'ai 2 tâches devant moi :

servir un véritable frontend, de préférence une SPA avec React
fournir les API pour interagir avec les données que je ne manquerai pas de manipuler

Pour faire les choses bien, commençons par le second point :)

Ajout d'une API

Ajouter une API, ça veut d'abord dire que notre serveur devra réagir différemment s'il doit servir le frontend ou s'il doit répondre à une API.

Vert.x dispose d'un système de routing pour choisir ce qui sera executé en fonction de l’adresse qui lui est demandée.

override fun start(startPromise: Promise<Void>) {
    val router: Router = Router.router(vertx)

    // Handle <server>/api/ping
    router.get("/api/ping").handler { rc: RoutingContext ->
      rc.response().end("Pong!")
    }

    // Handle <server>/api/greetings
    router.get("/api/greetings").handler { rc: RoutingContext ->
      rc.response().end("Hello from vert.x backend api!")
    }

    vertx
      .createHttpServer()
      .requestHandler (router)
      .listen(8888) { http ->
        if (http.succeeded()) {
          startPromise.complete()
          println("HTTP server started on port 8888")
        } else {
          startPromise.fail(http.cause());
        }
      }
  }

On crée donc un Router qui sera en charge de cette gestion des routes.
On indique quelles routes sont gérées et on associe un handler.
Enfin, on crée le serveur http en lui indiquant d'utiliser le router.

Vous pouvez lancer l'application et tester les accès à ces api.
Personnellement, j'utilise la commande http du package httpie sur mon Ubuntu pour ce genre de test rapide.
Pour être précis, cela donne :

❯ http :8888/api/ping
HTTP/1.1 200 OK
content-length: 5

Pong!

Le lecteur vigilant aura remarqué que je n'ai pas créé en soit une route pour le frontend. Nous verrons dans le chapitre suivant que pour le moment, l'environnement de développement fonctionnera avec le backend d'un côté et un frontend de l'autre, servi sur un autre port.
Un article ultérieur montrera comment gérer ce point en version production.

Servir le frontend

Nous allons maintenant définir un point de départ pour notre frontend.
Pour l'instant, je conserve le code du backend dans le répertoire src.

Nous allons créer le frontend dans un répertoire subtilement nommé frontend.
Je fais le choix d'utiliser React en codant avec le langage Typescript.
Oui, c'est comme ça, je fais comme je veux :)

Pour cela, je vais suivre les explications du site React.
A la racine du projet, je lance simplement la commande :

yarn create react-app frontend --template typescript

Pour faire simple à ce stade, j'édite directement le fichier frontend/src/app.tsx

import React, {useEffect, useState} from 'react';
import logo from './logo.svg';
import './App.css';

const App = () => {
  const [greetings, setGreetings] = useState<string>('Default before call API');
  useEffect(() => {
    console.log('Component mounted');
    fetch("/api/greetings")
      .then(res => res.text())
      .then(text => setGreetings(text))
    return () => {
      console.log('Component will be unmount');
    }
  });


  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo"/>
        <p>
          {greetings}
        </p>
      </header>
    </div>
  );
};

export default App;

J'ajoute une gestion d'un hook représentant le message de bienvenue, que l'on renseigne en appelant l'API /api/greetings définie dans notre backend.
Pour que l'ensemble fonctionne, pour le moment dans l'environnement de développement, je modifie le fichier frontend/package.json en lui ajoutant une règle lui permettant d'interroger le backend.

...
},
  "proxy": "http://localhost:8888"
}

Vous pouvez alors lancer le frontend (en n'oubliant pas de relancer le backend si vous l'aviez stoppé) :

yarn start

Vous avez maintenant une application backend, servant votre API, ainsi qu'un frontend React capable de l'interroger, accessible sur http://localhost:3000/

il reste bien des choses à faire, mais vous pouvez déjà vérifier ce que je vous propose sur le repository avec la branche vertx2.

Pour toute question, pour toute remarque, pour toute critique, vous pouvez me joindre par email ou sur Twitter.

March 31, 2020
4 min read

Pourquoi pas ? Découvrez Vert.x

Je sais bien que ce blog est plutôt axé découverte du code pour les plus jeunes.

Mais où situer la frontière de ce qui peut vous intéresser ? Pourquoi limiter la complexité de ce que j'aborde ici ?

En deux mots : Pourquoi pas ?

Ce sera le nom de cette nouvelle série d'articles où je vous partagerai ce que je découvre moi même. Je pense que ça vous permettra de voir qu'on est toujours en train d'apprendre, quelque soit son âge et son niveau.

tâcherai de structurer mon avancée, mais je tiens tout de même à présenter mes hésitations et mes choix. Vous saurez tout ! :)

Vert.x

On va tâcher d'aller à l'essentiel, le site de Vert.x le dit très bien : il s'agit d'un toolkit pour construire des applications réactives dans l'univers de la JVM.

Une application est dite réactive si elle suit les principes énoncés dans The Reactive Manifesto.

La version française peut vous aider à comprendre, mais au mix de langues, le monde informatique est souvent en anglais.

Mon résumé très personnel est qu'une application réactive cherche à rester disponible en absorbant la charge en allouant les ressources nécessaires, en survivant aux erreurs au mieux, le tout en fonctionnement sur la base d'un système de messages asynchrones.

Vert.x cherche à répondre à ses problématiques en restant léger et simple. En tout cas, c'est leur objectif annoncé, nous verrons si c'est assez simple pour moi ;)

Comment démarrer

Après quelques recherches, je me dit que Vert.x ne s'aborde pas vraiment comme d'autres outils. Il n'y a pas des montagnes de tutoriels, les articles publiés abordent rapidement des fonctionnalités complexes.

Mais il me semble que c'est dû à la simplicité de cette jolie boîte à outils. Le site officiel a une documentation très bien faite.

Pour compléter, j'ai acheté un livre qui propose de présenter puis approfondir les différents concepts de la programmation asynchrone et réactive, le tout s'appuyant sur des exemples nombreux et basés sur vert.x. N'hésitez pas, Vert.x In Action est parfait pour se lancer dans le domaine, le Dr Julien Ponge sait manifestement de quoi il parle et sait l'expliquer ;)

Le projet

Parce que c'est toujours plus facile d'avoir en tête un objectif, je me suis dit qu'il était temps de mixer mes domaines d'intérêt.
Le projet au long terme sera d'avoir une simulation d'une sorte d'usine, avec des ateliers, des postes de travail.
La base sera une application web qui représentera ça, accompagné de clients représentant les différents postes, client web pour commencer, clients IoT ensuite.

Cela devrait me permettre de faire un backend vert.x, pour un site web, de concevoir une API, des clients web et des client IoT.
Par la suite, je me pencherai aussi sur l'aspect déploiement, on verra quand on en sera là.
Pousser mes connaissances Docker pour appréhender Kubernetes, continuer mon apprentissage de l'univers de la CI/CD et ainsi de suite...

Je sais, on est loin de mes articles sur l'initiation à python. Considérez que ce sera une série au long cours, ce projet servant de prétexte à l'exploration de bien des technos.

Quel point de départ ?

Après avoir tourné autour de plusieurs axes à choisir, je fais les choix suivant :

Vert.x évidemment
build avec Gradle en utilisant le DSL Kotlin
code en Kotlin
source sur Gitlab, je dois ça à mon troll favori ;)

Je complèterai ces choix au fur et à mesure qu'il faudra en prendre d'autres.

Les différents articles que j'ai lu n'utilisant pas tous ces choix à la fois, il va falloir faire une synthèse et adapter.
Mais avant tout, il faut une coquille pour commencer.
Il y a alors 2 possibilités.

Tout d'abord, le site https://start.vertx.io/
Une simple page permet de choisir les différents paramètres tel que le language, l'outil de build, les dépendances...
Pas de bol, il manque pour le moment la possibilité de générer le script gradle avec le DSL Kotlin. Une issue est en cours de résolution.
Ca reste un point de départ intéressant.

L'autre possibilité, c'est de partir d'un starter trouvé sur github.
Un simple clone du projet voir la récupération de l'archive et c'est fonctionnel.
Cette fois ci, gradle avec Kotlin DSL mais le bout de code de base est en Java.

J'ai fait le choix de partir du start.vertx.io, qui me semblait plus récent et officiel. La conversion du fichier gradle en Kotlin DSL n'a pas posé trop de souci avec l'aide de celui du projet Github.

Pour que nous soyons tous sur la même base de départ, vous trouverez l'état du projet dans le repository Gitlab que je vais utiliser tout au long de ces articles.

Vous voilà équipé d'un point de départ.
Il ne me reste plus qu'à synthétiser mes essais pour l'étape suivante et les premiers pas de l'application elle même.

Pour toute question, pour toute remarque, pour toute critique, vous pouvez me joindre par email ou sur Twitter.

March 10, 2020
1 min read

Grand rassemblement

Depuis déjà de nombreuses années, j'écris des articles, des tutoriels et autres petits textes autour de la technologie.

J'ai rassemblé ici tout ce que j'ai retrouvé depuis 2013.
S'il reste des articles ailleurs, merci de me le signaler, je vais essayer de ne rien louper.

Tout ceci est parti d'une petite pichenette, un de ces petits rien qui vous donne l'élan nécessaire à une tâche repoussée depuis bien longtemps.
Cette fois, c'est grâce à Les Pounder, suite à un de ces articles me faisant l'honneur d'une magnifique photo de moi et un sac rose de toute beauté :)

La suite devrait parler de différentes petites consoles programmables qui se sont accumulées chez moi ainsi qu'un petit retour sur la carte micro:bit parce qu'elle a une place au chaud dans mon coeur de geek.

N'hésitez pas à me laisser un petit mot en commentaire ou par email, ça me fait toujours plaisir.

February 7, 2020
3 min read

Arrivée de la 32blit

(article publié initialement sur le siteles-tontons-codeurs)

Après un délai un peu plus long que prévu, ma 32blit de Pimoroni est enfin arrivée à la maison !
Voyons voir ce qui se cache dans ce joli colis.

Je trouve que même le colis et la boîte est joli, à l’effigie de Pimoroni.

colis boite

Le contenu est riche dans cette jolie boite, à voir le contenu final, nous parlons ici de la version beta.
Nous trouvons donc :

la 32blit elle même,
une feuille avec quelques instructions, notamment l’adresse du github de la beta,
de nombreux autocollants,
une petite plaque de prototypage aux couleurs de Noël

contenu

La 32blit a une bonne finition, même si la version beta n’a pas de coque, il y a néanmoins une plaque de plexiglas protégeant les composant sous la console. Comme indiqué dans le précédent article sur la 32blit, la décoration du PCB utilise le travail de Johan Vinet.

dessus 32blit dessous 32blit

Je vous propose d’aller voir d’autres photos dans cet album dédié.

La mise en oeuvre est déjà assez bien détaillée au sein du dépôt github de la beta.
Les projets d’exemple se compilent bien, ils sont même utilisables en mode desktop.
Il est possible de compiler en utilisant les librairies SDL.

Le seul point qui m’a fait trébucher a été la confusion que j’ai eu entre dfu-tool et dfu-util. Seul ce dernier est a utiliser sous linux et à partir de là je n’ai pas eu de problème à uploader les codes compilés.

Je pense que la prochaine étape sera de vous expliquer ce que contient un projet type, mais il y a encore un peu de stabilisation en cours.
Nous verrons tout cela dès que possible.
En attendant, je vous laisse, la 32blit, la Pewpew M4 et une nouvelle carte arrivée aussi aujourd’hui m’attendent :)

N'hésitez pas à laisser un commentaire ou me joindre par email.