Hackathon#7 – Team NOT-HUB : appli front serverless

Pour cette 7ème édition, Pierre, Nico N et Marc ont repris le thème de l’affichage et du tri des notifications Github  mais cette fois en visant une appli front serverless, et si le temps le permet, un plugin Chrome et Firefox. Les technos utilisées sont RxJS et Vue.js.

Après avoir bootstrappé l’appli, l’équipe rencontre un premier écueil : auth0. Le défi était de faire du serverless complet, sans aucune application back mais personne n’a trouvé de solution d’authentification avec OAuth qui permette de faire du serverless ! Tant pis, pour contourner le problème il faudra générer des tokens personnels sur github et les rentrer sur l’appli pour s’authentifier.

Après 2 jours, nous avons une appli qui pull les notifications github et les envoie sur une appli en Vue.js en front, avec à l’arrière une logique également en pur JS. La partie programmation réactive est presque terminée, il reste de pouvoir charger entièrement la liste des notifications et il manque encore des widgets pour afficher les notifications selon leur type (PR, issue, etc.)

Voici le détail des streams en RxJS :

• Stream authentification qui détecte les connexions et déconnexions de l’utilisateur
• Stream qui écoute celui des connexions et à chaque connexion récupère l’utilisateur en cours et le stream
• Stream qui écoute le stream d’authentification et déclenche un stream qui sert d’horloge pour le pull des notifs github
• Un objet (github puller) écoute le stream d’horloge et dépose dans un autre stream (qui contient les notifs)  la promesse de l’appel d’API github, puis récupère les données de rate de github et delay un autre tic sur l’horloge
• le stream de notifications est utilisé par un autre élément qui s’occupe de la persistance des notifs dans l’IndexedDB du navigateur, qui lui-même publie un stream du contenu de la DB
• Un autre élément fait une concaténation du stream de la DB et du stream du pull github en les dédoublant

Tous les composants de la vue sont construits en temps réel sur le stream final.

Vous avez suivi ? :D

Les commentaires de la team :

Pierre : C’était cool de faire de la programmation réactive, c’est une autre façon de voir les choses. On ne travaille plus avec des événements mais des flux de données.

Nico N : Déjà, bosser avec des gens avec qui je ne bosse pas d'habitude, c'est cool ! Ensuite niveau technos, Vuejs c'est super simple et sympa. J’utilise déjà RxJS sur mon projet client habituel, mais là on l’a utilisé complètement différemment ! Et un autre tout petit truc, j’étais content de découvrir l'api Fetch de JS au lieu d'utiliser des librairies (axios ou autre) !

Marc : J’ai bien aimé découvrir Vue.js ! Et je ne connaissais pas Encore le composant de Symfony, c'était intéressant à voir. RXJS avec les observable c’est une bibliothèque très intéressante.