15 outils JavaScript essentiels que vous devriez utiliser
JavaScript est un outil essentiel pour tout développeur Web. Pour vous aider à tirer le meilleur parti de ce puissant langage de programmation, vous allez vouloir faire appel à des outils dédiés (et obtenir votre hébergement Web droit). La bonne nouvelle est que vous n'êtes pas à court d'options ici: il existe de nombreux outils JavaScript parmi lesquels choisir. La partie la plus difficile est de choisir celles qui conviennent à vous et à votre flux de travail.
Dans cet article, nous avons rassemblé ce que nous pensons être les meilleurs outils JavaScript actuellement. Si vous n'êtes pas développeur ou si vous souhaitez simplement créer un site rapidement et sans code, envisagez d'utiliser un Générateur de site Web .
01. Composants Web
Le concept de composant est largement utilisé dans les frameworks JavaScript. Ils sont utilisés pour séparer un projet en plusieurs morceaux réutilisables qui peuvent être déplacés indépendamment les uns des autres. Mais que se passe-t-il quand il est temps de changer le cadre? Les composants précédemment écrits ne fonctionneront plus. Soit il y a une charge de travail supplémentaire pour convertir les composants, soit le projet reste lié à cette infrastructure.
Composants Web sont une solution à ce problème. Ils sont écrits à l'aide de technologies Web natives, sont autonomes et exposent des valeurs et des comportements via des attributs comme tout autre élément HTML.
Ils sont constitués de trois spécifications distinctes: les modèles HTML, le shadow DOM et les éléments personnalisés.
Modèles HTML
Ceux-ci définissent l'apparence visuelle d'un composant. Ils contiennent la structure du contenu, qui peut ensuite être copiée et réutilisée pour chaque composant de la page.
DOM de l'ombre
Le concept de garder le balisage interne du composant à l'écart du reste du document. Cela empêche les styles et autres logiques d'éclater et d'affecter d'autres composants.
Éléments personnalisés
Ce sont la colle qui maintient tout ensemble. Ils sont responsables du cycle de vie du composant, qui peut inclure une logique supplémentaire pour le moment où un composant est ajouté ou supprimé de la page.
Les composants Web peuvent être utilisés avec leurs homologues de framework. Comme ils sont censés agir comme des éléments natifs, la plupart des frameworks fonctionneront avec eux sans problème. Certains frameworks, comme Angular, peuvent avoir besoin d'être informés de leur existence à l'avance pour fonctionner correctement.
Comme ils peuvent être facilement composés ensemble, les composants peuvent être importés de nombreuses sources. Sites Web comme webcomponents.org fournissent plusieurs éléments prêts à l'emploi qui peuvent être déposés et utilisés immédiatement.
Alors que le concept de composant Web existe depuis 2011, les spécifications ont constamment changé. En 2018, les choses se sont stabilisées, avec Firefox implémentant les dernières versions de shadow DOM et les spécifications des éléments personnalisés en octobre. Avec Edge qui devrait livrer ses implémentations en 2019, tous les principaux navigateurs les prendront en charge de manière native.
02. WebAssembly
Une plainte concernant l'utilisation du navigateur pour héberger des applications est que JavaScript s'exécute trop lentement lorsqu'il s'agit de tâches gourmandes en processeur, telles que les moteurs de jeu ou le montage vidéo.
WebAssembly - ou «WASM» - est une cible de compilation pour le code écrit dans d’autres langages plus adaptés aux tâches lourdes. Cela permet aux programmes existants écrits dans des langages tels que C ++, Rust ou Go de se rendre sur le Web. En les compilant dans un format binaire, cela leur permet d'être divisés en morceaux et téléchargés efficacement.
Ces fichiers binaires sont ensuite compilés en mémoire et instanciés à l'aide du nouvel objet WebAssembly. Il y a une pression pour les rendre importables comme tous les autres modules JavaScript, mais le travail dans ce domaine est toujours en cours.
Bien que WASM soit un nouveau langage avec lequel travailler dans le navigateur, il n'en fait pas un concurrent de JavaScript. Les deux langages ont leurs avantages, JavaScript se prêtant toujours mieux aux opérations quotidiennes dans le navigateur. Ils peuvent travailler ensemble et avoir une autonomie sur des parties distinctes d'une application.
WASM prend en charge plusieurs navigateurs, y compris désormais les mobiles. Cela ouvre la porte à de nombreuses opportunités qui étaient auparavant limitées aux applications natives. Au cours de l'année prochaine, nous verrons peut-être plus de jeux et de développeurs d'applications adopter cette technologie.
03. Vue
Vue n'a cessé d'augmenter au cours de l'année écoulée. Les mises à jour récentes se sont davantage concentrées sur l'expérience des développeurs et les améliorations de la qualité. Vue 2.5 a été publié en 2017 et comprenait des mises à jour de la gestion des erreurs, du rendu du serveur et des définitions TypeScript. Des composants fonctionnels uniques - l'une des fonctionnalités les plus populaires de Vue - ont été mis à jour pour prendre en charge les CSS étendus et une compilation de modèles améliorée.
Depuis lors, les mises à jour de l'expérience principale de Vue se sont principalement concentrées sur les corrections de bogues et l'amélioration des performances. L'accent est désormais mis sur les produits de développement complémentaires.
La version 3 de l’outil CLI de Vue passe à une approche plus configurable. Des fonctionnalités telles que le routage, le peluchage et la gestion des données sont sélectionnées lors de l'initialisation. Ces fonctionnalités peuvent être ajoutées et supprimées selon les besoins sans avoir à séparer le processus de construction.
En plus de la CLI, une interface Web est disponible pour visualiser les différentes parties d'une application. Cela agit comme un tableau de bord pour aider à analyser les temps de chargement, les tailles et les points faibles de la construction pendant son exécution.
Pour l'avenir, 2019 verra la sortie de Vue 3.0. Bien que les modifications radicales soient réduites au minimum, cette version se concentrera sur l'utilisation de composants basés sur les classes ES2015. Il prendra également en charge les fragments et les portails, tout comme les fonctionnalités de React.
- Apprendre encore plus: Accélérez les performances avec Vue.js
04. TypeScript
Apportez la sécurité des types à JavaScript avec Manuscrit . Cet outil vous permet de définir les types attendus pour les variables et de faire en sorte que les outils de construction et les IDE vous avertissent de tout problème. La version 3 offre une meilleure prise en charge des nouveaux concepts, tels que les opérateurs de repos et de propagation.
- Apprendre encore plus: Comment démarrer avec TypeScript
05. Réagissez
Réagir 16.6 a introduit la fonction «suspense», qui a rendu le contenu dynamique plus facile à utiliser. Combiné avec React.lazy () , il crée un point auquel diviser le code en petits morceaux. Suspense peut restituer un composant de secours, comme une double flèche de chargement, pendant le chargement du composant. En 2019, le suspense deviendra un outil plus flexible. En déclenchant la récupération des données dans le cadre du flux, les utilisateurs bénéficieront d'une expérience transparente et native.
L’un des moyens les plus simples de démarrer avec React consiste à utiliser l’outil «Créer une application React» pour supprimer un projet. Une mise à jour récente a mis à jour ses dépendances et amélioré ses fonctionnalités. Create React App 2.0 utilise Babel 7 et Webpack 4 pour créer des projets, ce qui accélère la construction et ouvre la porte à de nouvelles fonctionnalités telles que la syntaxe de fragment abrégé.
Les projets réalisés avec la version précédente peuvent être mis à niveau en mettant à jour la dépendance «react-scripts». La mise à jour des applications éjectées est un processus plus manuel, mais elles peuvent être mises à niveau pièce par pièce.
React ne montre aucun signe de ralentissement cette année. Les hooks permettent aux composants fonctionnels de définir les comportements et les comportements du cycle de vie. Le mode simultané améliore les performances des composants à rendu lent. Les deux fonctionnalités devraient sortir au cours du premier semestre de 2019.
- Apprendre encore plus: Développer des composants React réutilisables
06. Angulaire
Angulaire est un cadre impliqué dans toutes les parties d'une application, y compris la gestion des données et les mises à jour d'interface. Bien qu'il puisse gonfler la taille des lots, toutes les parties de l'application fonctionneront ensemble de manière transparente.
La version 7 d'Angular ajoute des améliorations à chaque partie du framework. Bien qu'il y ait peu de changements avec lesquels les développeurs pourront jouer, il y a beaucoup de changements pour améliorer la vitesse et la fiabilité dans les coulisses. Il est désormais possible d'ajouter des budgets de performances pour les tailles de bundle. Cela garantira qu'une compilation ne deviendra jamais trop volumineuse sans en être informée.
Dans le cadre d'une mise à jour globale de Material Design, les composants angulaires CDK respectifs ont également été mis à jour. Par exemple, le module de défilement permet la prise en charge du défilement virtuel, ce qui permet de maintenir le défilement fluide des longues listes.
La mise à niveau vers la version 7 impliquera, pour la plupart, d'exécuter une ligne à l'aide de l'interface de ligne de commande.
ng update @angular/cli @angular/coreLes futures mises à jour se concentreront sur le nouveau moteur de rendu Ivy. Cela améliorera la capacité de supprimer le code inutilisé du bundle, ce qui réduira considérablement la taille des fichiers. En raison de la structure des applications angulaires, le moteur de rendu peut être remplacé sans nécessiter de modification de la logique interne.
07. Polymère
Dans sa première itération, le Polymère La bibliothèque était la porte d'entrée vers un futur d'éléments personnalisés. En adoptant les spécifications des composants Web à venir, les développeurs ont pu assembler des sites Web à partir de blocs de construction prêts à l'emploi.
Au fil du temps, ces spécifications ont évolué et l'un des éléments de base - les importations HTML - ne faisait plus partie du plan. La récente version de Polymer 3.0 résout ce problème et se concentre davantage sur l'utilisation de modules ES plus accessibles pour atteindre un objectif similaire.
L'objectif initial de la bibliothèque Polymer était de devenir plus léger à mesure que la prise en charge de ces spécifications augmentait, mais elle a fini par s'agrandir à la place. Pour se recentrer sur cet objectif, la 3.0 est la dernière version de la bibliothèque à sortir. À l'avenir, il est recommandé que les composants soient fabriqués avec LitElement et lit-html .
class MyElement extends LitElement { render(){ return html` This is a LitElement `; } } LitElement est un wrapper léger autour des composants Web pour les rendre plus faciles à utiliser. Le html Le littéral du modèle étiqueté est lit-html , qui est une bibliothèque de modèles avec un DOM différent pour garder les mises à jour de page aussi petites que possible.
Tous les deux LitElement et lit-html sont dans un état de pré-sortie pour le moment, mais l'équipe Polymer vise à les sortir à un moment donné au début de cette année.
08. Plus joli
Cet outil JavaScript est dédié à garantir que le formatage du code reste cohérent dans un projet. Ont Plus jolie Passez au peigne fin les fichiers et mettez à jour le formatage automatiquement. Certains éditeurs prennent également en charge le formatage à chaque sauvegarde.
Si vous travaillez sur un projet d'équipe, assurez-vous que votre processus est totalement cohérent avec le parfait stockage en ligne option.
09. Travailleurs des services
Travailleurs de service permettre à une application d'exécuter un processus d'arrière-plan qui gère certaines fonctionnalités de niveau inférieur. Cela peut inclure des notifications push, la synchronisation des données en arrière-plan et même fournir une expérience lorsque l'appareil est hors ligne. Le niveau de contrôle appartient au développeur.
Les techniciens de service existent depuis un certain temps sur Android, mais ils ont également récemment fait le saut vers iOS. Bien que l'accent soit mis sur les appareils mobiles, ils fonctionnent également sur les ordinateurs de bureau. Maintenant que la majorité des visiteurs auront accès à la fonctionnalité, il n'y a pas de meilleur moment pour commencer à améliorer l'expérience des utilisateurs.
- Apprendre encore plus: Faites fonctionner votre application hors ligne avec les techniciens de service
10. OffscreenCanvas
Il y a des moments où un élément de canevas est le meilleur outil pour le travail. Par exemple, les jeux en ligne peuvent les utiliser pour générer des sprites, ou les vidéos peuvent avoir des effets de traitement qui leur sont appliqués.
Le problème est que toute interaction avec l'élément fonctionnera toujours sur le thread principal, ce qui ralentit les choses pour l'utilisateur. Pour des animations répétées ou des traitements lourds, cela peut devenir un problème.
Hors écran découpe la logique du canevas de l'élément. Sans le lien vers le DOM, il peut être utilisé dans un worker pour libérer le thread principal. Actuellement, seul Chrome prend en charge cette fonctionnalité, Firefox l'incluant derrière un drapeau.
11. Electron
Utilisez HTML, CSS et JavaScript pour créer des applications natives pour Windows, MacOS et Linux. Électron alimente de nombreuses applications populaires, telles que Visual Studio Code, Slack et Skype pour ordinateur de bureau.
12. Svelte
Tandis que Svelte est un framework relativement inconnu, il n'a cessé de gagner du terrain depuis sa sortie il y a quelques années. La récente enquête State of JavaScript l'a classée plus populaire l'année dernière que les titans historiques de Backbone et jQuery.
Le but de Svelte est de réduire la taille du fichier en ne livrant pas du tout de framework. Dans le cadre du processus de construction, il analyse les composants et les optimise avant de les compiler en JavaScript vanilla. Le résultat est une application avec la plus petite taille possible.
Avec la version 2, il y a des améliorations à la syntaxe pour rendre les composants aussi lisibles et prévisibles que possible. Les mises à jour des hooks de cycle de vie et des valeurs calculées permettent au compilateur de savoir plus facilement où effectuer des optimisations.
Les fonctionnalités sont volontairement légères pour que chaque application reste rapide. De nombreuses mises à jour depuis la version 2 visent à éviter les situations qui entraînent de mauvaises performances dans la sortie compilée.
Des discussions sont en cours sur une réécriture de la logique des composants dans Svelte pour l'aligner sur d'autres frameworks. En tant que compilateur, il est capable de faire ses propres modifications pour aider à mieux fonctionner, tout en restant un environnement propre pour les développeurs.
13. Redimensionner l'observateur
Une approche véritablement basée sur les composants du développement Web est plus proche que jamais. Bien que CSS et JavaScript puissent être regroupés dans un seul package, il est difficile de réutiliser ce composant de manière fiable sur les pages.
Lors de l'ajout d'éléments à un redimensionner l'observateur , il est notifié lorsque les limites de l'élément changent. Les visuels peuvent ensuite être mis à jour en fonction de l'espace disponible. Par exemple, le même composant de carte peut avoir un aspect différent dans une barre latérale ou dans le corps principal.
Cet observateur n'est actuellement disponible que dans Chrome, alors qu'il est en développement dans Firefox. D'autres navigateurs peuvent revenir à la surveillance des événements de redimensionnement du navigateur, mais cela affectera les performances.
14. Cordova
Créez plusieurs applications mobiles et de bureau différentes à l'aide des technologies Web et d'une base de code avec Cordoue . PhoneGap - la distribution Adobe de Cordova - fournit des outils supplémentaires, tels que le développement iOS sur Windows.
15. Livre d'histoires
Livre d'histoires vous permet de créer une galerie d'éléments d'interface utilisateur dans un environnement personnalisable distinct de toute application. Il fonctionne avec les frameworks populaires tels que React et Vue, ainsi que la prise en charge des extraits de code HTML.
Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web . Acheter le numéro 283 ou abonnez-vous ici .
Lire la suite:
- Comment coder un JavaScript plus rapide et plus léger
- Découvrez d'autres outils JavaScript géniaux ici
- API JavaScript impressionnantes
