Chez Zenika, durant le séminaire des nouveaux arrivants, nous participons à différents ateliers notamment un atelier “carpaccio programming”. J’ai trouvé qu’il serait intéressant de l’implémenter sur la plateforme Tech.io : voici mes premiers essais et mes retours sur cette plateforme.

La plateforme Tech.io

Tech.io est un site web propulsé par Codingame, une plateforme d’exercices de code en ligne très populaire au sein de Zenika :

• Nous faisons régulièrement des Clash Of Code via un bot Slack
• Nous hébergeons régulièrement des CodingHub lors de la sortie de leurs jeux concours
• Nous utilisons la plateforme Codingame côté RH pour déceler les talents

Revenons sur tech.io et sa description officielle :

Tech.io is a collaborative platform to discover, share and experiment technologies directly from your browser. Craft hands-on tutorials, demos or articles on topics that matter to you.

Tech.io est encore en beta et permet de créer des tutoriaux, des codelabs, des workshops, des exemples de code… Le “WHY” est très bien décrit dans un manifeste dédié.
La plateforme offre des fonctionnalités intéressantes :

• Multi langage : le créateur d’un playground peut choisir le langage qu’il souhaite car tout se passe dans des conteneurs Docker. Nous pouvons donc imaginer faire coder dans n’importe quel langage, en utilisant n’importe quel framework ou base de données derrière.
  Exemple : requête Cypher sur du neo4j, projet Reactor avec du Spring 5, s’essayer à SASS, faire du nodejs, du python, du Go…
• Support de Docker avec des images de base proposées par Tech.io appelées “Runner”
• Support du Markdown pour les explications et la description du cours, des TPs
• Support d’un fichier “techio.yml” pour décrire les différentes étapes du tutorial
• Mode Viewer : possibilité pour des applications web de voir le résultat en ligne (disponibilité d’une url dédiée pour tester le code “front” produit)
• Mode Coding Exercise : possibilité de lancer des tests pour vérifier un comportement voulu
• Mode Quiz : possibilité de gérer des quizz
• Possibilité d’embarquer les exercices de code sur d’autres sites web ou blogs
• Utilisation de Git pour déployer le tutorial sur la plateforme
• Tout cela gratuitement

Toutes ces fonctionnalités permettent de mélanger des phases théoriques (écrites en markdown) et des phases pratiques (écrites directement dans le navigateur web et compilé/testé/lancé dans un conteneur Docker)
La plateforme s’adresse à deux types de population :

• Les créateurs de contenu :
  • Developer advocate pour expliquer des technologies en profondeur
  • Entreprise pour expliquer un nouveau produit ou une nouvelle API
  • Speaker (conférencier) pour préparer leurs codelabs
  • Teacher (professeur) pour créer des formations.
• Les utilisateurs : les développeurs curieux et passionnés

Aujourd’hui, la plateforme compte environ 70 playgrounds avec notamment le cours “Advanced Python Features” très populaire avec plus 31 000 utilisations.

Pour information, tout le contenu publié sur la plateforme sera sous la licence Creative Commons Attribution-ShareALike 4.0 International (CC BY-SA 4.0) Pour plus de détails sur l’aspect juridique, Tech.io possède une page dédiée.

Créer son premier playground

Pour créer un playground, il suffit de cliquer sur son compte et la plateforme nous donne une url GIT à utiliser. N’oubliez pas d’indiquer votre clé ssh pour pouvoir pusher vos commits comme indiqué sur le Getting Started
Ensuite, nous allons créer un premier fichier Markdown appelé intro.md pour expliquer le but de notre tutorial.

# Welcome to my first playground on Tech.io

Pour indiquer les différentes étapes de notre tutorial, nous allons créer un fichier  techio.yml.

title: Carpaccio programming JS
plan:
  - id: Intro
    title: Introduction
    statement: intro.md

Le titre global “title” servira de titre pour notre playground et dans le plan, nous allons indiquer chaque section avec un “id” (sera affiché dans l’url), un “title” (sera affiché en haut et dans les menus) et un “statement’ (sera le contenu de notre page).
Enfin, il suffit de commiter cela et de pousser ça sur leur git avec la commande  git push techio master.

Faire un exercice de code

Nous allons maintenant ajouter une section pour laisser l’utilisateur coder. L’exercice est simple : afficher “Hello World” dans la console Javascript. Pour cela, nous allons proposer 2 fichiers :

• Un premier fichier pour donner des pistes à l’utilisateur (on peut imaginer du code à trou)
• Un deuxième fichier de test pour valider que l’utilisateur a bien codé ce que l’on attend. C’est très intéressant d’avoir une démarche TDD

Fichier  src/hello/hello.js

// Hi, there
// use console.log to print something
module.exports = () => {
};

Fichier  src/hello/hello.test.js

const program = require("./hello.js");
let outputData = “”
const storeLog = inputs => (outputData += inputs);
test("console log Hello World", () => {
  console["log"] = jest.fn(storeLog);
  program();
  expect(console.log).toBeCalled();
  expect(outputData).toBe("Hello World");
});

Nous utilisons Jest pour faire le test unitaire en JS. Rien de spécial dans ce code Jest même si l’avantage est qu’un bon framework de test va respecter les standards de développement :

• Retourner 0 s’il n’y a pas d’erreur
• Retourner 1 s’il y a une erreur

Automatiquement, la plateforme Tech.io affichera un joli “Success” si le code écrit est bon !
Il ne nous reste plus qu’à mettre à jour le markdown intro.md et notre fichier techio.yml

# Welcome to my first playground on Tech.io
@[Can you create an Hello World program?]({"stubs": ["/hello/hello.js"], "command": "npm test"})

Ce bout de Markdown va créer une petite fenêtre de code directement dans notre page web.
Nous voyons qu’il faut indiquer le squelette “stubs” et la commande (“command”) pour valider notre code.

title: Carpaccio programming JS
plan:
  - id: Intro
    title: Introduction
    statement: intro.md
projects:
 node:
   root: /src
   runner: techio/node-npm-runner:1.1.0-node-7.4

Là, pour notre projet NodeJS, nous spécifions quel “runner” (c’est-à-dire quelle image Docker) nous voulons utiliser. Je suis parti de celle préconisée par Tech.io pour faire du NodeJS. Le paramètre “root” permet d’indiquer quel répertoire sera ajouté dans notre conteneur.
Déployons et testons maintenant notre premier playground. Voici ce que donne l’interface web côté créateur de contenu :


Et voici la page web de l’utilisateur pour notre “Hello World” :
Et en cas d’erreur, cela donnera :


Pour information, voilà les limites techniques pour faire tourner nos conteneurs sur la plateforme Tech.io :

• 1 seul “runner” à la fois par utilisateur. Si l’utilisateur clique sur “RUN”, le runner précédent est tué.
• 30 secondes de CPU maximum pour l’exécution (sauf pour les “viewers” qui restent disponibles 2 minutes depuis la dernière requête effectuée)
• 720 Mo de mémoire
• 10 Go de disque
• Limitation à 100 processus
• Limitation sur la bande passante

Conclusion

Une fois notre playground complété et testé sur Tech.io, il n’y a plus qu’à le publier et communiquer sur les réseaux sociaux !

Tech.io publie les nouveaux playgrounds chaque semaine dans une “weekly newsletter” ainsi que sur leur twitter.
Voilà quelques retours personnels sur la plateforme :

• ???? Très simple et très ouvert : nous écrivons en Markdown, utilisons n’importe quelle image Docker, pouvons publier en utilisant Git et voyons les logs de la plateforme. La “Developer Experience” est bonne.
• ???? A chaque publication, nous avons les logs de construction de notre image Docker et nous avons toujours 2 versions disponibles : celle publiée et celle que l’on teste.
• ???? L’utilisateur a directement un menu sur le playground avec les étapes réussies et échouées.
• ???? L’utilisateur peut éditer plusieurs fichiers à la fois (plusieurs “stubs”).
• ???? Le code écrit par l’utilisateur est sauvegardé d’une session à une autre dès lors qu’il clique sur “Run”. L’utilisateur est par contre obligé de copier/coller son code d’étape en étape dans le cadre d’un TP incrémental.
• ???? Un gros défaut cependant : pas de tests en local pour le créateur de contenu même si l’utilisation combinée du markdown et des fichiers sources est assez triviale, nous aimerions pouvoir tester en local.
• ???? De la même manière, il serait intéressant d’avoir toutes les X dernières versions déployées. Je suis un grand amateur de PaaS et c’est assez plaisant de voir toutes ses versions déployées et de choisir la version à mettre en production avec un bouton (mécanisme aussi nommé “Push To Deploy”)
• ???? Il faudrait pouvoir se connecter avec son compte GitHub pour directement avoir une publication automatique sur la plateforme à chaque commit sur une branche spécifique.
• ???? La plateforme n’autorise pas d’avoir un exercice multi langage au sein d’une même section de code façon “Codingame” où l’utilisateur choisit son langage. Dans l’idéal, nous pourrions faire des tests agnostiques au langage en se basant sur la sortie console (et des tests Bash façon BATS).
• ???? Quel est le “business model” de cette plateforme ?

Pour les besoins de Zenika, voilà quelques features manquantes et quelques réflexions sur la plateforme :

• ???? Sommes-nous obligés d’écrire les playgrounds en anglais sur Tech.io ?
• ???? Nous ne pouvons pas bloquer l’utilisateur à une étape. Il peut donc aller directement à la dernière étape de notre codelab… De la même manière, nous n’avons pas le suivi de l’avancement des “stagiaires” comme on peut avoir avec GitHub Classroom
• ???? Nous ne pouvons pas créer de playground privé. D’un point de vue idéaliste, la plateforme est faite pour partager la connaissance donc c’est tout à fait normal. Chez Zenika, nos formations sont payantes et avoir une plateforme de ce genre permettrait de s’affranchir de l’installation de logiciels sur les PCs et de tout faire en ligne avec “juste” un navigateur. Nos solutions actuelles sont proches de Tech.io : nous utilisons déjà du Markdown pour décrire nos slides et nos codelabs, le code étant déjà présent sur GitHub. Devrons-nous recréer un équivalent à Tech.io (Docker, AngularJS, SocketIO, Ace Editor, MathJax) ?
• ???? Serait-ce intéressant de publier gratuitement certaines formations Zenika “vieillissantes” sur la plateforme (comme AngularJS par exemple) ?

Ressources :

• Documentation officielle (et “fun facts” c’est un playground !)
• Lien GitHub pour le code complet du playground “Carpaccio programming”
• Lien Tech.io pour jouer au playground “Carpaccio programming”