Le langage JavaScript est un langage non typé, front-end et basé sur les événements généré par le DOM. Au début du web, c’était un langage cantonné à de simples effets visuels sur la page web, mais il a rapidement été possible de communiquer avec le serveur via des requêtes AJAX pour mettre à jour des portions de pages sans les recharger entièrement.
L’arrivée de la bibliothèque JQuery a permis de considérablement simplifier les développements JavaScript, tous les frameworks CSS l’utilisent aujourd’hui.
NodeJS est une plateforme logicielle qui permet d’écrire du JavaScript côté serveur, et donc développer des applications full-stack (back-end et front-end) dans un même langage.
La nouvelle syntaxe ES6, aussi appelée ES 2015 introduit de nouveaux éléments syntaxiques tels que l’utilisation du mot-clé let au lieu de var, et des fonctions fléchées, améliorant au passage la lisibilité du code.
Des frameworks front-end sont apparus, transférant une partie de la logique métier du serveur au client, comme par example le routing, et reléguant le serveur à une simple API communiquant avec une base de données. Les trois principaux frameworks JavaScript front-end sont AngularJS, Angular2+, ReactJS et VueJS.
La famille des PIC32 est la plus récente et la plus puissante (les autres étant les PIC16 et les PIC24), ses microcontrôleurs possèdent entre autre un jeux d’instruction sur 32 bits.
Seulement quelques versions de la famille PIC32 se présentent sous la forme d’un boîtier DIP muni de 28 broches, ce qui permet de les tester facilement sur une plaque d’essai (breadboard). Les autres sont des boîtiers TQFP comprenant 64 ou 100 broches, qui sont soudés en CMS (composant monté en surface, donc non-traversant) sur un adaptateur pour les utiliser, ce qui est souvent une aventure au vu du faible écart entre les broches.
PiC32MX220F032B dans un boîtier DIP
On programme un PIC avec un PICKit 3, c’est un boîtier rouge muni d’un câble USB relié au PC et de 6 fils reliés au broches du microcontrôleur. Le transfert des données de l’ordinateur vers le PIC de fait par ICSP (In-Circuit Serial Programming) : les données du programme sont poussées dans la mémoire ROM.
Programmateur PICKit 3 avec la nomenclature des 6 fils ICSP
Comme toute connexion série, il y a une broche pour les données (PGED) et une broche pour l’horloge (PGEC), le PIC a aussi besoin d’être alimenté via ses broches AVSS (GND) et AVDD (+3.3V). Enfin, ne pas oublier d’ajouter quelques composants passifs autour du microcontrôleur : un condensateur céramique (10uF) et une résistance de pull-up (10K).
Le programme est codé sur MPLAB X IDE en C++, il est possible d’utiliser des breakpoints pour déboger plus finement le code. Une fois la compilation effectuée (et sans erreurs), il ne reste plus qu’à le transférer le programme sur le PIC.
La Raspberry Pi est un micro-ordinateur de la taille d’une carte de crédit, bon marché, tournant sous Linux, avec une distribution nommée… Raspbian. Elle embarque le strict nécessaire pour communiquer : port Ethernet, ports USB, sortie vidéo HDMI, sortie audio jack et alimentation par micro USB, et pour fonctionner : mémoire vive, et mémoire morte sur une carte SD.
Contrairement aux cartes Arduino, on ne la programme pas via un port USB mais avec le port Ethernet via un liaison SSH. Pour la première utilisation : installer une distribution Raspbian sur une carte SD, insérer la carte dans la Raspberry Pi, puis la mettre sous tension.
Après avoir passé la barre des lignes de commandes sous linux, les domaines d’utilisation sont très nombreux : serveur WEB, serveur NAS, domotique avec l’utilisation des broches E/S (GPIO), systèmes embarqués, IOT et même de l’émulation de jeux vidéos (Recalbox, RetroPie). Il n’y a qu’a voir le foisonnement de projets DIY disponibles sur Internet.
Toutefois cela reste un outil de prototypage qui n’est pas adapté à une production de biens à grande échelle dû à son coût unitaire élevé.
Il y existe aussi des clones de la Raspberry Pi comme l’Orange Pi, production chinoise, moins chère et plus puissante que sa cousine, mais ne fédérant pas une aussi forte communauté autour d’elle.
Les cartes Arduino sont facilement reconnaissables par leur couleur bleue et arborent fièrement la mention made in Italy avec en prime un motif de la botte italienne. Contrairement aux microcontrôleurs PIC, elles intègrent la puce ET tous les composants autour : liaison série (UART) par USB, broches 2.54 mm à brancher sur une breadboard (plaque d’essai), et quelques composants passifs (résistances, condensateurs). À ces composants de base s’ajoutent des spécificités sur certaines cartes, par exemple un module WiFi et un port Ethernet sur l’Arduino Yún. Elle disposent de nombreuses E/S digitales, d’entrées analogiques munies d’un convertisseur CAN (Convertisseur Analogique Numérique) et sorties analogiques PWM (Pulse Width Modulation, Modulation par Largeur d’Impulsion en français).
Pour faire du prototypage, des projets DIY (Do It Yourself) ou alors pour commencer en électronique et en programmation, les cartes Arduino sont tout simplement le meilleur choix possible : la documentation est claire et la section playground du site officiel présente des fonctionnalités avancées basées sur des projet DIY existants.
L’environnement de développement dédié (Arduino IDE) est aussi très bien fait : on branche la carte à l’ordinateur par USB, on sélectionne le modèle de la carte, et il n’y a plus qu’à commencer à coder. La langage de programmation est le C/C++, on a accès à une console pour le débogage et un terminal pour la liaison série, pratique pour afficher en temps réel le contenu d’une variable. Tout projet s’articule autour de deux fonctions principales : setup() qui ne s’exécute qu’une seule fois au début du programme, et loop() qui n’est rien d’autre qu’une boucle infinie.
Au delà du modèle de base (Arduino Uno), ils existe une dizaine de type de cartes, tout dépend sur quel type de projet on veux travailler : si l’on veut beaucoup d’E/S, utiliser l’Arduino MEGA; pour de la puissance, utiliser l’Arduino Zéro.
Pour une mise en production à petite échelle, l’Arduino Pro Mini conviendra parfaitement : petit prix (moins de 2 euros), mais à ce tarif là le port série pour flasher le programme dans la ROM de sera pas inclu, il faudra utiliser un composant UART extérieur.
Arduino Pro Mini.
De nombreuses cartes non-Arduino utilisent d’IDE d’Arduino, le plus connu est le NodeMCU, embarquant un ESP8266 : c’est l’outil idéal pour les projet IOT avec sa puce WIFI intégrée. La carte Teensy 3.2 quant à elle convient aux projets réclamant davantage de puissance grâce à son processeur 32 bits.
Le NodeMCU, on peut voir le module ESP8266 soudé dessus.
Teensy 3.2.
Mais qui fait la force d’Arduino, c’est l’importante communauté que le projet fédère, ainsi que ses nombreuses librairies téléchargeables directement depuis l’IDE.
NodeJS est une plateforme logicielle qui permet exécuter du JavaScript côté serveur, ouvrant la possibilité de création d’applications web écrites entièrement en JavaScript (côté client ET côté serveur).
Tout comme le langage sur lequel il est basé, le JavaScript, NodeJS est asynchrone : il utilise des callbacks, qui sont des fonctions exécutées lorsque qu’une tâche est terminée. NodeJS permet de faire tourner un serveur web sans avoir besoins d’un logiciel externe, contrairement à PHP qui est tributaire de Apache pour fonctionner.
Il dispose d’un gestionnaire de paquet nommé NPM (Node Package Manager) permettant d’enrichir ses fonctionnalités. Le plus célèbre de ces packages est ExpressJS, qui est un micro-framework facilitant entre autre le routing. Il est possible d’utiliser plusieurs moteurs de template comme EJS ou Jade.
MeteorJS est un framework open-source basé sur NodeJS, sa particularité est d’englober au sein d’un même projet la partie client ET serveur. Il permet de créer rapidement des applications full-stack en JavaScript (« un seul langage pour les gouverner tous »).
MeteorJS utilise par défaut Blaze comme moteur front-end, mais on peut aussi y brancher des frameworks connus comme AngularJS, Angular 2+ et ReactJS. Il est même possible d’utiliser Apache Cordova pour créer des applications mobiles hybriques, cette librairie permettant d’accéder aux composants natifs des smartphones tel que la caméra par exemple. Dans ces cas-là, MeteorJS fera office d’API pour servir les données au client.
Le framework utilise une base de donnée MongoDB. Elle est très réactive car elle est utilise la compensation de latence (latency compensation) : une autre base de données appelée mini-mongo est stockée chez le client, elle est donc disponible tout de suite, puis elle se met à jour une fois la connexion au serveur établie.
Encore peu connu du grand public des développeurs, ce framework dispose toutefois d’une communauté active. Meteor propose sa propre plateforme de gestion de package (Atmosphere) ainsi que son propre service d’hébergement (Galaxy).
Firebase est un ensemble de services d’hébergement, mais plus encore : il propose une véritable partie back-office pour des applications front-end basés sur des frameworks comme Angular2+ ou Ionic 3.
Il gère l’authentification via une paire e-mail / mot de passe, ou par l’intermédiaire de réseaux sociaux comme Google, Facebook, Twitter ou encore Github. Il propose aussi une base de données NoSQL accessible en temps réel : c’est tellement vrai qu’il est possible de créer un chat, les conversations se mettant à jour quasi-instantanément. Firebase dispose d’un service de stockage de fichiers, qui n’est pas encore implémenté dans le package NPM angularfire2, mais qui peut s’installer manuellement. Enfin il est possible de faire du SSR avec des frameworks front-end tel que Angular2+.
L’intérêt immédiat de Firebase est de pouvoir sortir une MVP (Minimum Value Product) d’une application front-end rapidement, sans avoir à se préocuper du back-end, Firebase gère tout cela en toile de fond pour nous, le développeur n’aura qu’à utiliser les fonctions haut niveau fournies dans le package.
Firebase est utilisé par Shazam ou bien encore Skyscanner.
IBM Bluemix est le cloud d’IBM, c’est une plateforme offrant une multitude de services web dont l’hébergement d’applications web, la reconnaissance vocale (Speech To Text, STT), la synthèse vocale (Text To Speech, TTS) ou encore le service conversation : ce service permet de créer et d’entraîner un chatbot en liant des questions et des réponses possibles. Plus le chatbot est utilisé, plus il apprend, et plus il devient précis dans ses réponses.
Ces services sont basés sur l’intelligence artificielle Waston, ce programme a acquis une notoriété mondiale en devenant en 2011 champion du jeu télévisé américain Jeopardy!.
Sur NPM un package nommé watson-developer-cloud permet d’utiliser les services IBM facilement, ils sont facturés à l’utilisation : il n’y a pas de frais fixes.
Ionic est un framework JavaScript conçu pour faciliter le développement d’applications mobiles. Contrairement aux applications natives écrites en Java pour Android ou en Objective-C pour IOS, Ionic permet la création d’applications dites hybrides. C’est à dire qu’il est possible de faire fonctionner une application avec JavaScript sous Android et IOS, c’est ce que l’on appelle une web view.
Ionic se base sur Apache Cordova pour communiquer avec les composants natifs du smarphone (caméra, micro, accéléromètre, etc..). La logique métier est gérée par Angular 2+ (AngularJS pour sa première version), qui est en englobé par Ionic. Le framework fournit beaucoup de composants CSS prêt à l’emploi (boutons, menus, inputs), on peut aussi utiliser du SASS.
L’environnement de développement est très agréable : on peut voir instantanément le résultat visuel sur Android ou IOS, Ionic dispose aussi d’un watcher permettant de redémarrer le serveur à chaque modification du projet.
JQuery est une bibliothèque JavaScript, elle permet d’en simplifier les développements. Tous les frameworks CSS l’utilisent pour implémenter leur propres effets JavaScript. JQuery est basé sur des sélecteurs qui modifient les propriétés des éléments du DOM (Document Object Model), il permet de gérer plus efficacement les évènements et les requêtes AJAX.
JQuery fait le lien entre le code JavaScript pur et les frameworks front-end modernes tel que AngularJS, Angular2+, ReactJS ou VueJS, c’est à dire vers plus d’intégration côté client. L’inconvénient de JQuery est qu’il met du temps à s’exécuter et peut donc ralentir la navigation, voilà pourquoi, pour une utilisation épisodique de Javascript dans une page web on préfère plutôt utiliser du JavaScript pur (appelé JavaScript Vanilla). Très populaire à une époque, JQuery est donc de moins en moins utilisé.
