Depuis qu’HTML5 est devenu populaire, l’ensemble de la plateforme Web a fait des progrès significatifs, et les gens ont aussi commencé à considérer JavaScript comme un langage capable de créer des applications complexes. De nombreuses nouvelles API ont vu le jour, et un grand nombre d’articles sur la manière dont les navigateurs appliquent ces technologies ont également apparu.

En tant que langage de script, JavaScript a été créé à l’origine pour améliorer les capacités de présentation des pages Web, mais de nos jours JavaScript est utilisé presque partout où vous pouvez l’imaginer. À mesure que les capacités techniques de l’ensemble du secteur continuent de s’améliorer, JavaScript peut désormais s’exécuter côté serveur et peut aussi être compilé en code pour des applications mobiles natives. Les développeurs JavaScript d’aujourd’hui font partie d’un écosystème riche, et ils peuvent choisir librement parmi des centaines d’IDE, d’outils et de frameworks. Comme il y a tellement d’options et de ressources, certains développeurs peuvent avoir l’impression de ne pas savoir par où commencer leur apprentissage. Je suis heureux de discuter et de décrire la situation à laquelle sont confrontés les développeurs JavaScript modernes. D’abord, je présenterai brièvement l’histoire de JavaScript, puis j’aborderai les frameworks, les outils et les IDE les plus populaires.

Un rapide retour sur l’histoire

Commençons un rapide voyage. En 1995, lorsque Netscape Navigator et Internet Explorer 1.0 étaient les seuls choix en matière de navigateurs. Les sites Web étaient pleins de textes clignotants agaçants et de trop nombreuses images GIF. Le chargement d’une page pleine de contenu riche via une connexion commutée pouvait prendre jusqu’à deux minutes entières. Puis un langage Web est apparu, qui permettait à ces anciens sites Web d’exécuter du code côté client. Cette année-là fut l’année de la naissance de JavaScript.

Ces sites web créés il y a 20 ans n'utilisaient pas beaucoup JavaScript, et bien sûr, ils n'exploraient pas pleinement le potentiel du langage. Parfois, une fenêtre contextuelle vous informait de quelque chose, ou les actualités s'affichaient sous forme de texte défilant dans un encadré, ou un cookie enregistrait votre nom d'utilisateur afin que, lorsque vous reveniez sur le site après quelques mois, votre nom s'affiche directement. Naturellement, il n'y avait pas à l'époque de postes qui utilisaient JavaScript comme langage de développement principal, et pouvoir réellement écrire du JavaScript au travail était déjà une grande chance. Bref, l'utilisation de JavaScript sur les sites web à cette époque ne consistait qu'à faire quelques tours dans le DOM.

Aujourd'hui, on peut pratiquement voir JavaScript absolument partout. DeBootstrapà ReactJS, Angular, l'incontournable jQuery, et même Node.js côté serveur, JavaScript est devenu l'un des langages web les plus importants et les plus populaires.

Frameworks

L'un des domaines où JavaScript a le plus changé depuis sa création est sa manière d'être utilisé. L'époque où l'on appelait la méthode maladroite document.GetElementById et où l'on créait de lourds objets XmlHttpRequest est révolue. À la place, diverses bibliothèques d'assistance abstraient ces fonctions de base, ce qui rend JavaScript plus facile à utiliser pour les développeurs. C'est l'une des principales raisons pour lesquelles JavaScript est visible partout aujourd'hui.

jQuery

jQuery a été publié par John Resig en 2006, et il fournit un riche ensemble d'outils qui abstraient et simplifient diverses commandes et méthodes JavaScript obscures et mystérieuses. Il n'y a pas de manière plus simple de démontrer cet outil qu'avec des exemples de code.

Créer une requête AJAX avec du JavaScript pur :

function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               alert("success");
           }
           else if(xmlhttp.status == 400) {
              alert("error 400")
           }
           else {
               alert("something broke")
           }
        }
    }

    xmlhttp.open("GET", "test.html", true);
    xmlhttp.send();
}

Source: Stack Overflow

Et créer une requête AJAX avec jQuery :

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

jQuery a rendu les fonctions JavaScript complexes faciles à utiliser, et la manipulation du DOM est devenue un jeu d'enfant. Par conséquent, jQuery est devenu l'un des premiers frameworks JavaScript largement utilisés, et son idée d'abstraire JavaScript est devenue la fondation sur laquelle divers autres frameworks ont été construits.

AngularJS

AngularJS, souvent aussi appelé « Augular », a fait ses débuts en 2009. C'est un framework créé par Google dans le but de simplifier la création d'applications monopages (SPA). Comme jQuery, son objectif est également d'abstraire les opérations complexes en méthodes hautement réutilisables. Il fournit une architecture Model-View-Controller (MVC) pour JavaScript.

ReactJS

ReactJS, souvent aussi appelé « React », est un nouveau venu qui vient d'entrer dans la danse. Il a été créé par Facebook et publié pour la première fois en 2013. Facebook estime que React peut servir d'alternative à Angular pour gérer les problèmes de SPA, donc si vous pensez qu'Angular et React sont concurrents, vous avez raison. Cependant, la plus grande différence par rapport à Angular est que React est une bibliothèque plus efficace, plus performante et plus rapide. La figure suivante montre le temps nécessaire pour rendre une liste de 1000 éléments dans le DOM en utilisant React, Angular, Knockout (une autre bibliothèque, non traitée dans cet article), et du JavaScript pur :

Source: The Dapper Developer

Si votre application accorde une grande importance aux performances, alors React est le bon choix.

Environnement de développement JavaScript

Pour un développement efficace, l'utilisation d'un IDE est très importante. IDE signifie environnement de développement intégré, une application qui fournit aux développeurs une série d'outils. La partie la plus importante d'un tel outil est généralement un éditeur de texte riche en fonctionnalités, qui offre généralement aux utilisateurs la coloration syntaxique, l'autocomplétion et des raccourcis clavier pour accélérer diverses opérations manuelles fastidieuses.

Sublime Text

Sublime Text n’est en fait pas un IDE, mais un éditeur de texte léger et extrêmement rapide pour la programmation, offrant la coloration syntaxique et des raccourcis clavier intuitifs. Il est multiplateforme, ce qui en fait un choix idéal pour les développeurs qui veulent utiliser un Mac dans un environnement PC (ou inversement). Presque chaque partie de Sublime Text peut être personnalisée, et il propose également une variété de plug-ins qui ajoutent des fonctionnalités de type IDE, telles que l’intégration Git et le linting de code. C’est un excellent choix pour les passionnés de JavaScript et les développeurs débutants. Au moment de la publication de cet article, chaque licence Sublime Text coûte $70.

Source: Sublime Text

WebStorm

WebStorm est un IDE intelligent développé par l’équipe JetBrains, principalement axé sur le développement HTML, CSS et JavaScript. Il ne facture qu’une somme symbolique pour la licence (au moment de la publication de cet article, elle était de $49), et il a été largement reconnu parmi les experts expérimentés de JavaScript et est déjà considéré comme le standard de facto, et à juste titre, car ses outils intégrés de complétion de code et d’inspection sont pratiquement uniques. WebStorm fournit également un riche débogueur JavaScript et s’intègre à divers frameworks populaires de tests unitaires, tels que le Karma test runner et JSDriver, et inclut même Mocha pour Node.js.

L’une des meilleures fonctionnalités de WebStorm est sa capacité Live Edit. Tant qu’un certain plug-in est installé à la fois dans Chrome et WebStorm, les développeurs peuvent voir les résultats directement dans le navigateur pendant qu’ils modifient le code. Les développeurs peuvent également configurer Live Edit pour mettre en évidence les modifications dans la fenêtre du navigateur, ce qui améliore grandement la productivité de débogage et de codage.

Dans l’ensemble, si JavaScript est votre activité à plein temps, l’IDE WebStorm peut être un excellent choix.

Source: JetBrains

Crochets

Brackets est un IDE open source et gratuit axé sur les outils visuels. Brackets propose une fonctionnalité Live Edit semblable à WebStorm, qui vous permet de voir directement les résultats des modifications de code dans la fenêtre du navigateur. Il prend également en charge l’édition en ligne, ce qui vous permet de coder tout en visualisant directement les résultats, sans basculer entre différentes applications ni utiliser de fenêtres pop-up. L’une des fonctionnalités les plus intéressantes de Brackets s’appelle Extract, qui peut analyser les fichiers Photoshop PSD afin d’obtenir des informations telles que les polices, les couleurs et les tailles. Grâce à cette fonctionnalité, Brackets est très adapté aux développeurs JavaScript qui font aussi du design.

(Cliquez sur l’image pour l’agrandir)

Source: Brackets

Atom

Atom est un éditeur de texte enrichi, open source et gratuit, lancé par GitHub, et il est très facile à prendre en main. Après l’installation, il peut être exécuté directement sans avoir besoin de modifier le moindre fichier de configuration, et il « fonctionne tout simplement ». Ce qu’il y a de plus intéressant avec Atom, c’est que chaque aspect peut être personnalisé (GitHub appelle cela « hackable »). Il est construit sur un noyau web, ce qui permet aux utilisateurs de personnaliser son apparence en écrivant du HTML, du CSS et du JavaScript standard. Vous voulez donner à Atom un arrière-plan et une police de caractères différents ? Il suffit de modifier le CSS. Ou vous pouvez choisir de télécharger et d’appliquer divers thèmes qui ont été créés pour Atom. Cette flexibilité permet à Atom de se présenter de la manière que vous souhaitez. Pour les développeurs JavaScript novices et les utilisateurs qui aiment la personnalisation, Atom est un excellent outil.

(Cliquez sur l’image pour l’agrandir)

Source: Atom

Outils de build et d’automatisation

Les projets JavaScript modernes ont tendance à devenir de plus en plus complexes, et le nombre de parties changeantes augmente également. Cela ne veut pas dire que le langage ou les outils correspondants sont inefficaces, mais plutôt que c'est une conséquence directe de la richesse, des expériences intéressantes et de la complexité des applications web actuellement créées. Lorsque vous travaillez sur de grands projets, vous devez souvent effectuer de nombreuses tâches répétitives, que vous soyez sur le point de valider du code ou de construire le code pour la production. Ces tâches peuvent inclure le regroupement, la minification, la compilation de fichiers LESS ou SASS CSS, ou même l'exécution de tests. Effectuer ces tâches manuellement est non seulement frustrant mais aussi inefficace. Une meilleure approche consiste à automatiser ces tâches via un outil de build qui les prend en charge.

Regroupement et Minification

La plupart du JavaScript et du CSS que vous écrivez sera partagé entre plusieurs pages web. Par conséquent, vous placerez probablement ce contenu dans des fichiers .js et .css séparés, puis vous référencerez ces fichiers dans les pages web. En conséquence, le navigateur de l'utilisateur, afin d'afficher complètement votre page web, doit envoyer une requête HTTP distincte pour chacun de ces fichiers (ou au moins vérifier si ces fichiers ont changé).

Les requêtes HTTP sont coûteuses. En plus de la taille de la requête elle-même, vous payez également pour la latence du réseau, les en-têtes HTTP, les cookies, etc. L'objectif de conception des outils de regroupement et de minification est de réduire, voire d'éliminer complètement, l'impact de ces requêtes.

Regroupement

La chose la plus simple que les développeurs puissent faire pour améliorer les performances du code web est de regrouper le code. Dans le processus de regroupement, plusieurs fichiers JavaScript ou CSS sont fusionnés en un seul fichier JavaScript ou CSS. C'est comme assembler plusieurs photos panoramiques individuelles pour en faire une seule photo continue. En regroupant les fichiers JavaScript et CSS, nous pouvons éliminer une grande partie de la surcharge des requêtes HTTP.

Minification

Une autre façon pour les développeurs JavaScript d'améliorer les performances consiste à minifier le code qui vient d'être empaqueté. Le processus de minification compresse le code JavaScript et CSS sous la forme la plus réduite possible tout en garantissant que les fonctionnalités restent inchangées. Pour JavaScript, cela signifie renommer les variables avec des noms d'un seul caractère dénués de sens et supprimer tous les espaces et caractères de formatage. Pour CSS, étant donné que le style de la page dépend des noms des variables, seuls le formatage et les espaces sont généralement supprimés. La minification peut grandement améliorer les performances réseau, car elle réduit le nombre d'octets de chaque réponse HTTP.

Code JavaScript AJAX non minifié (identique au code présenté ci-dessus) :

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

Le même code après minification :

$.ajax({url:"test.html",statusCode:{200:function() {alert("success");},
400:function(){alert("error 400");}},error:function(){alert("something broke");}});

Veuillez noter que j'ai séparé la sortie minifiée en deux lignes uniquement pour faciliter la lecture dans cet article ; en fait, la sortie minifiée tient généralement sur une seule ligne.

Quand regrouper et minifier

Généralement, les étapes de regroupement et de minification ne sont effectuées qu'en production. Cela permet de déboguer le code source d'origine, qui contient le formatage et les numéros de ligne, dans votre environnement local ou de développement. Déboguer du code minifié comme celui présenté ci-dessus est très difficile, car tout le code est compressé sur une seule ligne. De plus, le code minifié devient complètement illisible, et vous le trouverez inutile et extrêmement frustrant lorsque vous essaierez de déboguer.

Fichiers de mappage de source

Parfois, certains bogues dans le code ne peuvent être reproduits qu'en production. Par conséquent, le code minifié devient un problème lorsque vous devez déboguer certains problèmes. Heureusement, JavaScript prend en charge les fichiers source map, qui peuvent établir une correspondance entre le code minifié et le code source original. Ces fichiers source map sont générés lors de la phase de minification par certains des outils de build mentionnés ci-dessous. Votre débogueur JavaScript peut alors utiliser ces fichiers de mappage pour vous fournir un code propre et lisible à déboguer. Vous devriez publier les fichiers de mappage avec le code réel autant que possible, afin de pouvoir déboguer le code en cas de problème.

Linting du code

Les outils de linting vérifient votre code à la recherche d'erreurs et de problèmes courants selon des règles de formatage prédéfinies. Les erreurs signalées par ces outils sont généralement similaires aux suivantes : utiliser l'indentation par tabulation au lieu d'espaces, omettre les points-virgules en fin de ligne, ou utiliser des accolades sans utiliser d'instructions if, for ou while. La plupart des IDE incluent des outils de linting, et certains autres IDE permettent aux utilisateurs d'installer eux-mêmes des plugins de linting.

Les deux outils de linting JavaScript les plus populaires sont JSHint et JSLint. JSLint est un framework de linting développé par Doug Crockford, tandis que JSHint a été dérivé de JSLint par des membres de la communauté. Ils ne diffèrent que par certains de leurs standards respectifs de formatage de code. Ma suggestion est d'essayer les deux, puis de choisir celui qui correspond le mieux à votre style de codage.

Automatisation des tâches : Grunt

Malgré son nom, Grunt (qui signifie littéralement ronfler) n'est en rien un outil grossier ; c'est un outil de build robuste en ligne de commande qui peut exécuter une variété de tâches définies par l'utilisateur. En configurant un simple fichier de configuration, vous pouvez faire faire à Grunt toutes sortes de travaux, comme compiler des fichiers LESS ou SASS, regrouper et minifier tous les fichiers JavaScript et CSS d'un dossier spécifique, ou même exécuter un outil de linting ou un framework de test. Vous pouvez également configurer Grunt pour qu'il s'exécute comme hook Git, en minifiant et regroupant automatiquement votre code lorsque vous validez vos modifications dans votre dépôt de gestion de versions.

Grunt prend en charge les cibles nommées, ce qui vous permet de spécifier différentes commandes pour différents environnements. Par exemple, vous pouvez désigner « dev » et « prod » comme cibles. C'est très utile dans des scénarios tels que le regroupement et la minification du code en production tout en sautant cette étape dans l'environnement de développement pour faciliter le débogage.

Une fonctionnalité très utile de Grunt s'appelle « grunt watch », qui peut surveiller les modifications des fichiers d'un répertoire ou d'un ensemble de fichiers. Cette fonctionnalité peut être intégrée à des IDE tels que WebStorm et Sublime Text. En utilisant la fonctionnalité watch, vous pouvez déclencher des événements en fonction des modifications de fichiers. La compilation de LESS ou de SASS est un usage pratique de cette fonctionnalité : vous pouvez configurer Grunt pour surveiller vos fichiers LESS ou SASS et les compiler immédiatement lorsqu'ils changent, et les fichiers compilés peuvent ensuite être utilisés directement dans l'environnement de développement. Vous pouvez également demander à Grunt de surveiller et d'exécuter automatiquement un outil de linting après que vous avez modifié chaque fichier. L'exécution de tâches en temps réel via Grunt watch est un excellent moyen d'accélérer votre productivité.

Automatisation des tâches : Gulp

Grunt et Gulp sont tous deux des outils permettant de résoudre des problèmes d'automatisation de build, et on peut dire qu'ils sont des concurrents directs. La principale différence entre eux est que Grunt se concentre davantage sur la configuration, tandis que Gulp se concentre davantage sur le code. Dans un Gruntfile, vous configurez les tâches de build via du JSON déclaratif, tandis que dans un Gulpfile vous accomplissez la même fonctionnalité en écrivant des fonctions JavaScript.

Le fichier de configuration Grunt suivant compile les fichiers SASS en fichiers CSS lorsque les fichiers SASS changent :

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: "app/styles",
        src: "**/*.scss",
        dest: "../.tmp/styles",
        expand: true,
        ext: ".css"
      }]
    }
  },
  autoprefixer: {
    options: ["last 1 version"],
    dist: {
      files: [{
        expand: true,
        cwd: ".tmp/styles",
        src: "{,*/}*.css",
        dest: "dist/styles"
      }]
    }
  },
  watch: {
    styles: {
      files: ["app/styles/{,*/}*.scss"],
      tasks: ["sass:dist", "autoprefixer:dist"]
    }
  }
});
grunt.registerTask("default", ["styles", "watch"]);

Source: Grunt vs Gulp – Au-delà des chiffres

Le fichier de configuration Gulp suivant compile de même les fichiers SASS en fichiers CSS lorsque les fichiers SASS changent :

gulp.task("sass", function () {
  gulp.src("app/styles/**/*.scss")
    .pipe(sass())
    .pipe(autoprefixer("last 1 version"))
    .pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
  gulp.run("sass");
  gulp.watch("app/styles/**/*.scss", function() {
    gulp.run("sass");
  });
});

Source: Grunt vs Gulp – Au-delà des chiffres

Je vous suggère de choisir librement celui que vous préférez. Ces deux outils sont généralementnpmtéléchargés via le gestionnaire de paquets de Node.js.

Résumé

JavaScript a connu d'énormes améliorations depuis sa naissance aux débuts d'Internet. Aujourd'hui, il est devenu un composant de premier plan et important des applications web interactives.

Les développeurs ont également connu d'énormes changements de 1995 à aujourd'hui. Les développeurs d'aujourd'hui sont plus enclins à utiliser des frameworks, des outils et des IDE riches et robustes pour améliorer l'efficacité et la productivité au travail.

Créer votre première application JavaScript moderne peut être plus facile que vous ne le pensez ! Choisissez simplement un IDE (je recommande pour les débutantsAtom), puis installeznpmetgrunt. Si vous êtes bloqué quelque part plus tard,Stack Overflowest une très bonne ressource. Avec juste un peu de temps passé à apprendre les fondamentaux, vous pourrez rapidement commencer à développer et finalement publier votre première application JavaScript moderne.

Ressources

Tutoriels :

Frameworks :

IDE：

Outils de linting :

Outils de build et d’automatisation

Ressources utiles

Source : http://www.infoq.com/cn/articles/modern-javascript-toolbox