Ce 14 février s’est tenue la 4ème édition du DevFest au Palais des Congrès d’Issy-les-Moulineaux. Cet événement est une conférence technique organisée par la communauté de développeurs parisienne et soutenue administrativement par GDG Paris (Google Developers Group). Elle permettait à un certain nombre d’intervenants de présenter et de discuter, via des ateliers ou des talks, de sujets techniques tel que les PWA, le Machine Learning, Androïd, Cloud ou encore Google Assistant.
Une Keynote d’ouverture a été menée par le CTO de l’Oréal : Hervé Dumas, dont le mot d’ordre était l’environnement et comment amener le Numérique à être éco-responsable face aux problématiques liées à la sur-consommation énergétique (augmentation de 9% par an) et à la pollution des déchets non recyclable (85% des déchets numériques).
Plusieurs solutions sont envisageables, à commencer par une meilleure éducation sur l’utilisation des outils informatiques. Il parle même d’hygiène numérique éco-responsable, avec un changement d’angle sur leur maniement comme par exemple limiter le nombre de smartphones par employé, privilégier l’utilisation de plateforme collaborative ou réapprendre à rédiger des mails. Il a également suggéré le principe d’éco-conception dont la fonction serait d’adopter un matériel performant sur une meilleure durée. Pour lui, l’avenir se décidera sur les choix d’architectures et le passage vers un Cloud public, avec des solutions partagées via des Data Center permettant une meilleure gestion de l’énergie et moins de déchets générés.
Atelier : The Web is still on F.I.R.E
Animé par Noël Macé, développeur Web et Web Advocate, ce workshop avait pour but de nous faire découvrir les avancées menées par les équipes Google sur les Progressive Web App ou PWA. Les PWA sont des pages ou sites web dont la fonction est de proposer une expérience identique aux applications natives que l’on trouve sur les appareils mobiles. Le but d’une telle application est bien entendue de diminuer les coups de développement spécifique à chaque plateforme mobile (iOS, Androïd …). Cette approche s’est rapidement vu appliquée le terme F.I.R.E. pour Fast Integrated Relaiable & Engaging. Elle résume et globalise, d’après Noël, le concept des PWA pour une meilleur compréhension des applications web modernes.
L’atelier consistait à appliquer les principes des Progressive Web App sur un portail d’événements. Le workshop s’appui d’un codelab de Google intitulé Build an offline-first, data-driven PWA. Les sujets traités étaient les suivants :
- Rendre une Web App disponible hors ligne
- Expliquer les principes d’une Web App orientée données
- Comment utiliser la synchronisation en arrière-plan (background sync) pour mettre à jour l’application, même lorsque celle-ci n’est pas affichée
- Utiliser la Notification API à bon escient avec le Background Sync
- Appliquer les bonnes pratiques de promotions de l’installation d’une Web App
- Partager les événements à l’aide des Web Share API & Web Share Target API
- En bonus, variables CSS et Media Queries Level 5 pour l’application d’un thème sombre
Ici, pas d’Angular ou de React, tout le code repose sur une utilisation classique du JavaScript. On a notamment vu comment utiliser les Service Workers et IndexedDB pour une utilisation hors connexion de l’application et l’utilisation de callback pour la synchronisation. Pour une question de compatibilité, la synchronisation s’effectuait à l’aide de la librairie Workbox, le background sync n’étant à l’heure actuelle compatible que sous Chrome et Opéra. On a également eu quelques notions d’utilisation de l’A2HS.
L’ensemble du workshop est disponible à l’adresse suivante : https://next.wof.show/codelabs/doc/modern-data-driven_fr/index.html?index=/codelabs/#0
Tests de propriétés : Ecrire moins de tests, trouver plus de bugs
Par Julien Debon, Développeur Java chez Decathlon et Thomas Haessle, CTO chez Cutti.io
Les tests unitaires permettent de vérifier le comportement d’un programme à partir d’une base d’exemple dont on connait le résultat. Ces tests permettent surtout de vérifier qu’une modification du programme ne casse pas certains comportements mais ne permettent pas de trouver de nouveaux bugs.
Les tests de propriétés vérifient qu’un programme respecte des propriétés en générant plusieurs tests de manière aléatoire. Ainsi les valeurs testées sont différentes à chaque exécution du jeu de tests.
| Unit Tests | Property Based Tests |
|---|---|
| Fixed input | Random Input |
| One execution | Many exécutions |
| Assert result | Assert result or behavior |
On peut utiliser les tests de propriétés en JavaScript en important la lib fast-check via npm.
Ci dessous, quelques exemples de code provenant du workshop. Le premier morceau de code présent dans le fichier elf.js représente l’objet permettant la création d’un Elfe :
/* ENUM THAT REPRESENT ELF RACE */
const ROLE = {
SWORDSMAN: 1,
ARCHER: 2,
PRIEST: 3,
WARLOCK: 4,
properties: {
1: { name: 'Swordsman', value: 4 },
2: { name: 'Archer', value: 2 },
3: { name: 'Priest', value: 6 },
4: { name: 'Warlock', value: 4 },
},
};
/* FACTORY THAT CREATE ELF OBJECT */
const createElf = (role = ROLE.SWORDSMAN, race = RACE.DARK) => ({
role,
race,
getValue: () => ROLE.properties[role].value + RACE.properties[race].value,
});La deuxième partie montre de quelle manière on utilise le composant fast-check pour effectuer un test de propriété. Visible depuis le fichier elf.prop.test.js :
const fc = require('fast-check');
const elfArbitrary = () =>
fc
.tuple(fc.integer(1, 4), fc.integer(1, 2))
.map(([role, race]) => createElf(role, race));
describe('Elf Invariance', () => {
test('Elf value should always be positive', () => {
fc.assert(fc.property(elfArbitrary(), elf => elf.getValue() > 0));
});
});La fonction elfArbitrary permet de générer des objets Elfes aléatoires qui seront utilisés dans les tests. Le test en lui-même vérifie la propriété en exécutant une fonction pour chaque objet Elfe généré. Cette fonction, qui prend un Elfe en paramètre, renvoie vrai si la propriété est vérifiée, sinon faux.
Si toutes les exécutions renvoient vrai alors le test est validé. Dans le cas contraire, le test n’est pas validé et le cas qui a posé problème est renvoyé dans la console.
Le workshop complet est disponible depuis GitHub.
Flutter Web : que peut-on faire aujourd’hui ?
Flutter est un framework permettant de générer à partir d’un seul code source des applications pour Android, iOS, Windows, Mac, Linux et le Web. Toujours en beta à ce jour, cette présentation montre les possibilités offertes par cette technologie.
Possibilité :
Flutter dispose d’outils de développement (IDE, Débogage, Gestionnaire de dépendance …), cependant il faut utiliser Google Chrome pendant la phase de développement. Il sait générer des applications pour chaque plateformes ainsi qu’un site internet qui peut être hébergé sur n’importe quel service d’hébergement. Il intègre les options d’accessibilités ainsi qu’un module permettant d’intégrer des éléments HTML existants.
Performance :
Flutter génère un fichier JS de 1Mo comprenant toute la logique de l’application. Ce fichier une fois compressé pèse plus que 300Ko (400Ko en comptant les assets). Le téléchargement du fichier ne pose pas de problème sur PC, cependant des améliorations reste à faire sur mobile car il faut télécharger intégralement le script avant de pourvoir utiliser l’application. Au niveau du SEO, on ne sait pas ce que va donner Flutter car il n’y a pas de site en production qui l’utilise. En revanche, le contenu étant stocké dans des fichiers HTML, les robots n’auront pas de problèmes pour accéder aux données.
Limitation :
Il faut penser à la barre d’adresse. Même si les applications natives n’en possèdent pas, il faut prévoir les URL des différentes pages de l’application pour la version web. De plus, les applications réalisées sous Flutter possèdent encore de nombreux bugs.
Conclusion :
Il ne faut pas passer à Flutter aujourd’hui car il s’agit d’une version toujours en beta et la fiabilité n’est pas garantie. Flutter doit être utilisé pour tester la technologie et réfléchir aux cas d’usages qu’il permet.
Atelier : API serverless avec Nest.js
Cet atelier, présenté par Yohan Lasorsa, Ingénieur Fullstack et Cloud Advocate chez Microsoft, et Wassim Chegham, membre de la Core Team Angular et Senior Cloud Advocate chez Microsoft, présentait une façon simple de développer et déployer rapidement une API sur le Cloud Azure de Microsoft.
Pour les besoins de l’atelier, nous avons utilisé le workshop Nitro, développé par Wassim. Il explique pas à pas comment développer son API à l’aide de NestJS, un framework Node.js progressif pour créer des applications côté serveur. NestJS suit les principes SOLID, utilise TypeScript et est compatible avec les services Serverless d’Azure. Pour cela rien de plus facile, il suffit d’une ligne de commande pour transformer votre API NestJS en application Serverless. Une fois la commande terminée, vous avez la possibilité de déployer votre application dans Azure Functions, le FaaS (Function as a Service) Azure de Microsoft. Plus besoin de se préoccuper de l’infrastructure de l’application ni de la scalabilité, Azure s’en charge pour vous. Côté prix, le coup d’accès aux fonctions est très minime. D’après Yohan, malgré un bon million d’appel, on dépasse à peine les 3 centimes. De quoi revoir le prix de nos hébergements.
Cerise sur le gâteau, vous pouvez participer au développement du workshop en vous rendant sur le code open source de Wassim sur GitHub.
Le web Natif débarque
Par Jean-François Garreau, GDE Web Technology & Mozilla Tech Speaker & CEO de SFEIR Nantes
L’idée derrière le web natif est d’exploiter toutes les possibilités que possède une application directement depuis une page web via l’utilisation d’API. Par exemple : l’utilisation du Bluetooth, la lecture ou l’écriture d’un fichier, la lecture des capteurs… C’est dans cette optique que le projet Fugu est né. Porté par des grandes entreprises du numérique telles que Google, Intel et Microsoft, il définit les spécifications pour l’utilisation des API ainsi que la sécurité et l’obligation de l’utilisateur à donner son consentement.
N’importe qui peut demander la création d’une API si un nouveau besoin est identifié. Le processus de création d’une nouvelle API est le suivant :
Il est possible de tester une implémentation du projet Fugu dans Google Chrome en demandant un token sur https://developers.chrome.com/origintrials/#/trials/active et en ajoutant l’attribut suivant dans le header de la requête :
<meta http-equiv="origin-trial" content="mytoken">Exemple : File API > lecture d’un fichier :
const fileHandle =
await window.chooseFileSystemEntries();
const file = await fileHandle.getFile();
const contents = await file.text();Les slides de la présentation : https://jef.binomed.fr/binomed_docs/Prezs/NativeWeb/index.html#/43
Atelier : Highway to Elm
Elm est une librairie JavaScript réalisée par Evan Czaplicki. C’est la promesse d’un langage utilisant la programmation fonctionnelle et dont le code compilé en JavaScript n’est plus soumis aux aléas d’une exception de type Runtime. C’est Jordane Grenat, référent technique web chez VISEO, qui nous a introduit dans le langage qu’est Elm.
Pour l’aider dans cette tâche, il a créé un workshop disponible sous GitHub et s’appuyant complètement sur Elm. Le workshop s’applique à nous faire développer un Quizz en 15 étapes dirigé par les tests (TDD). La syntaxe est dans un premier temps déroutante, mais l’idée principale est que le code est construit autour d’un modèle contenant l’état de votre application, que vous disposez d’outils pour le mettre à jour et que vous pouvez obtenir un rendu de votre vue. D’après Jordane, Elm est très rapide comparé à des Framework comme React ou Angular, en plus d’être très petit. La communauté autour de ce langage semble d’ailleurs très active, et des librairies comme Redux ont clairement dit s’être inspiré de Elm.
Petit bémol cependant, Elm existe depuis 2012 et n’en est toujours qu’à une version 0.19.1, malgré le côté abouti de la librairie, ce qui implique potentiellement des changements futurs dans le code source. Difficile de se projeter en production quand on a pas l’assurance d’avoir une première version stable du langage, cependant Elm dispose de très bons atouts : un debugger performant, un typage fort des variables, aucune exception de type runtime.
Si vous êtes intéressés par ce langage, à la manière de React, vous pouvez créer un projet web from scratch grâce à create-elm-app.
Créer un robot intelligent ? C’est facile et abordable
Par Estelle Auberix, Consultante spécialiste du Cloud, de la Cybersecurité, de l’IoT et de la Robotique.
La conférence commence par nous présenter le Petoi Nybble, un petit robot chat en open-source. Il est vendu en kit sur Indiegogo et fonctionne sur une base Raspberry Pi 3 et Arduino.
Estelle enchaîne sur l’intelligence du robot : Comment, à partir des différents services de Cloud et des services d’assistants vocaux, donner des instructions à son robot ? Une approche Multicloud est montrée ici en utilisant à la fois Amazon Alexia Services, AWS Lambda et Azure Web API.
La présentation répond ensuite à la problématique de stockage et de traitement des données provenant des différents capteurs du robots. Le principe du Edge Cloud est évoqué : plutôt que de tout envoyer sur le Cloud, on opère localement à un pré-traitement des données afin d’envoyer uniquement les données utiles dans le Cloud.
La conférence nous montre ensuite les Services Mesh de Nginx, l’utilisation de Kubernetes dans une approche Micro et Nano Services ainsi que la réalisation d’un Cluster de Raspberry Pi.
Les slides : https://www.slideshare.net/estelleinomniaparatus/ai-robot-cat-a-smart-cat
Conclusion
Ce DevFest était très dense, avec un grand nombre d’atelier de qualité faisant la part belle aux technologies émergentes du web. De nombreux sponsors également dans la salle principale : Microsoft, Google, La Banque Populaire, Dataiku, Hiway pour ne citer qu’eux se sont prêtés au jeu du thème de la gourmandise pour nous offrir un événement hors norme. Difficile de faire son choix parmi tous les workshops et talks présents lors de cet événement. Vivement la prochaine session !
Cet article a été écrit en collaboration avec Emmanuel Leroux.
0 commentaire