Archives pour la catégorie Développements Web

Javascript - le langage numéro 1

Javascript – Le langage le plus utilisé sur Github

Javascript - le langage numéro 1 Le Javascript, langage créé en 1995 par Brendan Eich, initialement inspiré du langage Python, a connu bien des déboires… Ce langage à été longuement critiqué par les développeurs C et Java et les développeurs Javascript étaient souvent assimilés à des personnes désorganisées et ne sachant pas coder… Aujourd’hui, ce langage occupe une place de plus en plus grandissante grâce à certains acteurs majeurs de l’Internet. A ses début, Javascript était surtout utilisé pour créer des effets de survol de boutons et/ou liens pour rendre la page web plus attrayante. Mais désormais, il est utilisé par les plus gros acteurs de l’Internet, à savoir, Google et Facebook qui, tout deux, ont chacun créé leur propre framework, respectivement Angular JS et React JS. D’autre part, Javascript ne s’utilise plus exclusivement pour des sites internet, mais permet de créer des logiciels (clients) lourds ou encore des applications natives pour mobile ou tablette. Pour preuve, le langage n°1 utilisé sur Github est désormais le Javascript depuis Juin 2012 laissant derrière lui le Java, Ruby, PHP et autres langages…

Javascript, un langage pour tout faire (ou presque)

Un site complet en Javascript

Il y a 20 ans, Javascript servait entre autre à égayer une page web et venait compléter les autres technologies nécessaires à l’élaboration d’une page web, à savoir le HTML et le CSS. Aujourd’hui, on trouve des sites dit “full JS”, c’est à dire que la partie HTML ne fait que quelques lignes et c’est le fichier JS, qui une fois chargé, construit toute la page. Bien entendu, ces sites ultra dynamique n’était pas bien référencé mais les moteurs de recherche n’ont eu d’autre choix que de s’adapter aux vues de la quantité de tels sites actuellement en ligne.

Une application mobile avec du Javascript

Depuis quelques années (env. 6 ans), Phonegap permet de créer des applications pour mobile dite “hybrides”. C’est à dire que l’application n’est pas entièrement écrite en code natif ni exclusivement écrite en HTML et CSS. Les développeurs Javascript pouvaient désormais créer des applications pour mobiles sans connaitre une once de Java.

Un logiciel/client lourd

A peu près à la même période que l’apparition de Phonegap, Ryan Dahl inventait (2009) le Javascript côté serveur : le Node JS. 2 ans plus tard, le gestionnaire de package “npm” propulsait cette technologie. Outre le fait de pouvoir utiliser qu’un seul langage pour le client et pour le serveur, Node JS permet d’ajouter une certaine rigueur et améliore la lisibilité du code. La qualité et la productivité s’en voyait améliorée. Les développeurs Javascript pouvaient désormais créer des logiciels/clients lourds sans connaitre les différents langages nécessaires (Visual Basic, C++ et autre)

Javascript dans sa version la plus évoluée

La version actuelle de Javascript (EcmaScript 6 ou ES6) permet de faire gagner un temps précieux aux développeurs. En effet, cette version intègre des raccourcis non négligeable comme l’itération sur un tableau incluant un traitement spécifique sur chaque occurrence, et le tout en une seule ligne.

Ex :

En ES5, le code aurait plutôt ressemblé à ceci :

Javascript – L’environnement de travail (Editeurs et outils)

Node JS est le Javascript côté serveur permettant de faire beaucoup de chose ! Impossible de tout lister…

Webstorm, l’éditeur de JetBrains très apprécié des développeurs Javascript (inclus également un compilateur TypeScript)

TypeScript, de Microsoft, ajoute la notion de type au langage JS le rendant plus stable et plus facilement maintenable.

Browserify permettant l’inclusion de module (require “nom_du_module”) et disponible via npm.

Imba utilisant un compilateur Javascript et qui facilite la lecture du code.

Apache Cordova pour la création d’application mobile hybride.

JS Unit, Mocha JS pour les tests unitaires et j’en passe…

Des jeux 2D en Javascript ? Oui c’est possible avec la fameuse balise “canvas” du HTML5. Pixi JS rend la chose plus facile 😉

De la 3D en Javascript ? Idem en HTML5. Three.js facilite grandement la tâche du développeur 🙂

En conclusion, Javascript semble être le langage de demain… Il y a toujours quelques limitations, notamment pour les applications hybrides et l’accès aux fonctionnalités natives du téléphone, mais tout est mis en oeuvre pour combler ces lacunes. Dans les faits, Javascript est le langage le plus exploité par les utilisateurs de Github. Les développeurs JavaScript ont un bel avenir devant eux 🙂

React – Création d’une application “one page”

Vous trouverez dans cet article une technique de développement Javascript d’une application “one page” (ou SPA pour Single Page Application) utilisant la librairie React de Facebook. Dans ce genre d’application, il est nécessaire d’avoir un conteneur générique pour y injecter le contenu dynamique.

Structure HTML de base de l’application one page

Ci dessous le fichier Javascript incluant le controller ainsi que l’injection dans la balise portant la classe pmToolApp__rp

Si vous avez des questions ou des commentaires sur le code ou son fonctionnement, n’hésitez pas à les poster 😉

AngularJS – La librairie de Google

J’ai commencé à m’intéresser à cette technologie au tout début 2014 lorsque je devais choisir une techno pour mon projet, à savoir le développement d’un portail web.

Angulars, à quoi ça sert ?

Angular JS est une librairie Javascript développée par le géant “Google”. Sa particularité est qu’il se base sur des attributs spécifiques que l’on ajoute directement dans les balises HTML. De cette manière, il est possible d’affecter un comportement identique à toutes les balises comportant cet attribut. Au premier abord, j’ai réellement été impressionné par le côté dynamique d’une page construite avec cette librairie et surtout par la rapidité et la simplicité de mise en oeuvre. Une petite application peut-être développée très rapidement à condition que celle-ci ne soit pas trop complexe.

Exemple très simple d’implémentation de la librairie AngularJS

Vous noterez la présence de l’attribut “ng-model” qui permet d’afficher en temps réel la saisie de l’utilisateur à côté du mot “Hello”.

La librairie ultra performante de Facebook

React – La librairie ultra performante de Facebook

J’ai découvert React en Janvier 2014 au cours d’une toute nouvelle mission chez Palo-IT pour le compte de la SACEM. L’objectif est de développer un nouveau portail web pour les clients de la SACEM. Plus tard, viendra le site mobile ainsi que l’application mobile. Je ne connais pas encore les technologies que nous utiliserons pour le site mobile ni pour l’application mais React est en tout cas bien ancré pour le future portail web de la SACEM et c’est avec une très grosse motivation que je commence cette nouvelle missions en découvrant cette superbe librairie.

React, à quoi ça sert ?

React est une librairie Javascript qui s’occupe de gérer le rendu des pages web. Autrement dit, son boulot, c’est de gérer le DOM des navigateurs et à ma connaissance, il le fait mieux que personne. En effet, mettre à jour plusieurs centaines de noeuds en simultané est un jeu d’enfant ! Son secret ? il créé un DOM virtuel (qui est une copie du vrai DOM) et calcul le différentiel par rapport au DOM du navigateur de façon à ne mettre à jour que les noeuds concernés par la partie dynamique. Il limite ainsi les accès en lecture / écriture au DOM pour économiser les ressources du navigateur. En effet, les “lectures / écritures” étant ce qui consomme le plus de ressource sur les pages dynamiques, vous comprendrez que React  a un atout sérieux. C’est d’ailleurs la raison pour laquelle Instagram à également choisi cette technologie révolutionnaire.

Ci-dessous, un petit exemple très simple de “Hello world!” version React JS

On suppose la structure HTML suivante :

Et le fichier javascript “myApp.js” suivant :

Pour en savoir plus, rendez-vous directement sur leur site : http://facebook.github.io/react/