CodeLab Vue.js #Devfest2017

Lors du Devfest qui a eu lieu le 19 et 20 octobre, j'ai pu assister à un codeLab de deux heures sur la création d'une application avec Vue.js. Ce codeLab a été dirigé par deux personnes de chez Zenika qui sont Franck ABGRALL et Gregory BEVAN. Il s'est déroulé en deux temps avec une présentation du framework Vue.js puis avec le développement de notre première application.

Vue.js c'est quoi ?

Vue.js est un framework Javascript qui permet de créer des interfaces utilisateurs. Il a été développé par Evan You et la première release de ce framework est sorti en 2014. C'est un framework qui se veut minimaliste, performant et simple d'utilisation.

Déroulement de l'application

L'objectif de cette session a été le développement d'une application de gestion de séries en utilisant l'API Tvmaze. Pour celà, le codeLab a été découpé en 10 parties et chacune de ses parties a été séparée en 4 étapes : Explication, Live coding, 5 à 10 min de développement par nous même avec un résultat attendu et une correction. Durant ces 10 étapes, on a pu voir les principes de base du framework comme la génération d'un nouveau projet avec le client vue-cli (disponible avec npm), mais aussi la création des routes de l'application, les appels http avec les fonctions Javascript, les différentes fonctions Vue.js et la création d'événements entre les composants.

Mes impressions

Ça a été une très bonne expérience avec une bonne explication du langage, deux personnes disponibles en cas de difficultés  et une bonne ambiance.

Si vous voulez voir le résultat attendu, vous pouvez aller sur le lien github suivant : https://github.com/GregoryBevan/devfest-vuejs

Les flex-items

Flexbox est une valeur de la propriété css display. J'ai pu en faire usage sur des projets requérant une compatibilité ie 11 minimum pour profiter des avantages qu'elle procure par rapport aux display: table, display: inline-block ou float: left lorsqu'il s'agit de mettre deux blocs côte à côte (pas de perte de flux, pas d'espace entre les deux blocs).

Avant de parler en détail des flex-items, je vais m'interesser rapidement au flex-container à qui on affecte le display flex. En effet, on donne à un container la valeur flex sur son display, puis une série de propriétés que je vais rapidement énumerer et qui agissent n'ont pas sur lui même, mais sur ses enfants directs (appellé flex-items).

Packaging d’une application Electron

Présentation

Electron est un framework maintenu par GitHub qui permet de créer des applications lourdes en javascript/HTML/CSS. Il est  open source et utilisable sur toutes les plateformes (MacOS, Windows et Linux). Le framework permet entre autre d'utiliser les notifications natives de la plateforme, d'installer des mises à jour automatiques via Squirrel et il dispose d'outil de debug (dont la console pour développeur de Chromium). Je vous invite à consulter cet article pour plus d'informations.

L'objectif d'une application lourde est souvent le déploiement sur de nombreux postes et il est assez fréquent que ces postes ne disposent pas d'un environnement node. Nous allons voir dans cet article trois solutions pour disposer d'un livrable exploitable sur toutes les plateformes. Les exemples suivants ont été testés sur Linux (distribution Mint 18.1) et Windows 10.

TYPESCRIPT : Du Super JS

TypeScript est un langage de programmation JavaScript open-source développé par Microsoft (Co-créé par Anders Hejlsberg, principal inventeur de C#).

Il constitue un sur-ensemble de JavaScript, ce qui signifie que tout code JavaScript valide peut être utilisé avec TypeScript. Le code est transpilé par le biais d’un transpileur vers du code JS standard, qui lui sera interprété par le navigateur.

Son but principal est d'améliorer et sécuriser la production de code JS.

Créer une WebExtension

Les WebExtensions sont les modules complémentaires (ou add-on) que nous ajoutons à nos différents navigateurs pour leurs ajouter des fonctionnalités. Elles ont l'avantage d'être, de manière générale et avec parfois quelques adaptations, compatibles avec l'API de plusieurs navigateurs comme Chrome, Firefox, Opéra, Edge (oui oui !). Dans cet article, nous allons le créer et le tester en suivant les directives fournies par Mozilla.