Une introduction détaillée aux perspectives de la pile technologique JavaScript

Si vous planifiez un nouveau projet front-end ou refactorisez un projet existant, vous devez alors comprendre que l'environnement de développement front-end actuel n'est plus ce qu'il était. de nombreux choix : React , Flux, Angular, Aurelia, Mocha, Jasmine, Babel, TypeScript, Flow... Leur intention initiale est de simplifier le développement, mais ils augmentent virtuellement le coût d'apprentissage et posent également des problèmes au maintien des projets futurs.

Heureusement, ce phénomène s'estompe, et les plus aptes survivront. Les excellents projets s'installent petit à petit, et les méthodes de développement deviennent de plus en plus claires. Certains développeurs tentent d'utiliser des frameworks basés sur les technologies ci-dessus pour le développement, ce qui réduit également dans une certaine mesure les coûts d'apprentissage.

Cet article présente principalement certaines technologies que j'implique et recommande dans le développement d'applications Web. Certaines d'entre elles sont techniquement controversées, je ne donne donc qu'une brève introduction et analyse de chaque technologie. Toutes ces opinions sont basées sur mon expérience personnelle et mes contacts avec la communauté, veuillez donc les utiliser comme bon vous semble.

React

React fait fureur :

• La composantisation facilite le développement et la maintenance des applications

• La courbe d'apprentissage est douce, l'API de base est concise et claire, facile à apprendre

• La syntaxe JSX n'est pas conventionnelle et utilise pleinement la puissance de JavaScript

• Naturellement adapté à Flux et Redux

• La communauté est active et créative, et a apporté de nombreux excellents outils de développement

• Le flux de données unidirectionnel est plus adapté aux applications complexes et a une qualité supérieure à la liaison de données bidirectionnelle

• Prend en charge le rendu côté serveur

Bien que React ne soit pas polyvalent par rapport aux frameworks riches en fonctionnalités tels que Ember, Aurelia et Angular, l'environnement de développement de React est plus robuste. Pour l’instant, utiliser React n’est pas un choix technologique, mais une pratique commerciale qui offre une productivité plus efficace et efficiente.

Lorsque vous souhaitez développer des applications mobiles, parce que vous avez déjà appris la syntaxe React, vous pouvez directement commencer à développer des applications multiplateformes avec React Native.

Redux

Maintenant que nous avons la possibilité de développer la couche de vue, nous devons ensuite utiliser d'autres outils pour gérer l'état et le cycle de vie de l'application, comme recommandé ici L'outil est : Redux.

Afin de coopérer avec React, Facebook a développé Flux, un outil de gestion du flux de données unidirectionnel. Bien que Flux prenne essentiellement en charge un flux de données unique, il pose également d'autres problèmes, tels que comment enregistrer l'état et où. Faites des requêtes Ajax et bien plus encore.

Afin de résoudre ces problèmes, une série de frameworks imitant le modèle Flux ont été dérivés : Fluxible, Reflux, Alt, Flummox, Lux, Nuclear, Fluxxor...

Actuellement, il est largement utilisé par la communauté de développement. Une implémentation prise en charge est Redux.

Dans Redux, la plupart des composants sont des composants purement fonctionnels, et il n'y a qu'un seul centre de stockage et de ressources centralisé. Les méthodes d'instance de Redux sont responsables du fonctionnement et de la maintenance de l'ensemble des données. Par rapport à Flux, les idées de Redux sont plus claires.

Plus important encore, Redux est très facile à apprendre. Dan Abramov, l'auteur de Redux, est un excellent professeur qui a créé une série de didacticiels vidéo Redux approfondis et faciles à comprendre. Devenez un expert Redux en regardant ces vidéos. J'ai vu une fois une équipe React base zéro développer rapidement un produit bêta en quelques semaines seulement, et le code était très robuste et sophistiqué.

L'écosystème entourant Redux est aussi robuste que Redux lui-même. De l'incroyable outil de développement au puissant outil de mémorisation reselect, la communauté de développement Redux fournit aux développeurs tout ce dont ils ont besoin.

Les développeurs peuvent instinctivement essayer d'abstraire un modèle Redux. Cela présente de nombreux avantages, mais veuillez encapsuler le modèle en fonction d'une compréhension claire des besoins au lieu d'essayer aveuglément.

ES6 et Babel

Il est temps d'abandonner CoffeeScript car bon nombre de ses fonctionnalités ont une syntaxe similaire dans ES6, et ES6 est un standard d'implémentation et représente l'orientation future du développement de JavaScript.

Les derniers navigateurs prennent déjà en charge la plupart des fonctionnalités d'ES6. Babel est un outil de conversion puissant pour convertir ES6 en ES5. De plus, le degré de transcodage peut être ajusté en fonction du navigateur cible.

Alors, y a-t-il un système de types ? TypeScript et Flow fournissent tous deux des systèmes de types statiques pour JavaScript. L'utilisation de la vérification de type statique peut détecter efficacement les erreurs et réduire la quantité de tests. Pour l’instant, je recommande d’adopter une approche attentiste à ce sujet.

TypeScript fait de son mieux pour faire évoluer JavaScript dans le sens de C# ou Java, mais il lui manque de nombreuses fonctionnalités avancées du système de types, telles que les types de données algébriques. De plus, il ne gère pas les valeurs nulles aussi efficacement que Flow.

En comparaison, Flow est plus puissant et capture plus de types d'erreurs, mais il est difficile à configurer. De plus, sa prise en charge des nouvelles fonctionnalités JavaScript est plus faible que Babel et ne prend pas en charge les systèmes Windows.

De mon point de vue personnel, le système de types n'est pas un élément crucial du développement front-end (il peut être controversé ici). Jusqu'à ce que le système de types devienne plus robuste et compatible avec Babel, attendons de voir.

ESLint

Un autre outil incontesté est ESLint. ESLint prend en charge la syntaxe ES6 et fournit également des plug-ins React. Ce n'est plus seulement un outil de révision de code. À l'heure actuelle, JSLint est obsolète et ESLint peut remplacer JSHint et JSCS dans une classe à part.

Les développeurs peuvent configurer ESLint en fonction de leurs propres besoins, mais ici, je recommande de le configurer selon les spécifications de développement d'AirBNB, ou vous pouvez utiliser directement la configuration Airbnb d'ESLint. Bien sûr, cette spécification présente encore des lacunes, mais maintenir la cohérence du code global de l'équipe peut améliorer efficacement la lisibilité du code.

Une fois familiarisé avec ESLint, il est recommandé aux développeurs d'essayer ses règles en profondeur. Plus ESLint détecte d’erreurs, plus le produit est stable.

Modules NPM, CommonJS et ES6

Oubliez Bower, laissez NPM prendre le relais. Les outils de création tels que Browserify et Webpack ont ​​indirectement accru le statut de NPM dans le développement Web. Avec NPM, la gestion des versions sera plus simple et il y aura plus de contacts avec l'écosystème Node.js. La gestion actuelle du CSS n'est pas encore suffisamment complète.

Vous pourriez réfléchir à la manière d'effectuer la compilation sur le serveur de déploiement ? Contrairement à Ruby's Bundler, NPM utilise des caractères génériques pour récupérer des fichiers, et les packages tiers peuvent être modifiés arbitrairement pendant le développement du code et avant la publication du projet. Utilisez des fichiers rétractables pour geler les dépendances tierces dans le projet. Je recommande d'utiliser le film rétractable de l'utilisateur pour améliorer la cohérence de la sortie. De plus, les développeurs peuvent également envisager d’utiliser des outils comme Sinopia pour héberger leurs propres serveurs NPM privés.

Babel convertira la syntaxe du module ES6 en CommonJS. CommonJS est une syntaxe éprouvée, ce qui signifie stable et universelle. De plus, nous pouvons réaliser une analyse de code statique en utilisant des mécanismes tels que l'arborescence (Webpack 2.0 et Rollup prennent déjà en charge cette fonctionnalité).

Webpack

À moins que vous ne souhaitiez ajouter des centaines de balises de script à votre page, vous devriez essayer d'utiliser un outil de construction pour empaqueter les ressources de la page. De plus, vous aurez besoin de certains outils pour activer la prise en charge du navigateur pour les packages tiers NPM. Ici, je vous recommande d'utiliser Webpack.

Il y a un an, les développeurs disposaient de nombreux outils parmi lesquels choisir pour le travail ci-dessus, tels que les solutions RequireJS, Browserify et Webpack basées sur JavaScript, ainsi que RollupJS, qui est considéré comme la meilleure optimisation pour les modules ES6. .

Après avoir essayé tous les outils, je recommande fortement aux développeurs de choisir Webpack :

• Vous pouvez gérer diverses situations grâce à la configuration

• Prend en charge les méthodes de chargement de modules traditionnelles (AMD, CommonJS, globals)

• Le mécanisme interne peut réparer les modules cassés

• Peut gérer le CSS

• Système de mise en cache complet

• Prend en charge le rechargement à chaud

• Peut charger la plupart des ressources

• Fournit des solutions efficaces d'optimisation des performances

Webpack est également très efficace pour gérer de grandes applications d'une seule page, prenant en charge le fractionnement du code et le chargement paresseux.

Mais il convient de noter que la courbe d'apprentissage de Webpack est extrêmement abrupte. Mais une fois que vous l’aurez appris, vous disposerez du système de construction le plus puissant.

Et Gulp et Grunt ? En comparaison, Webpack gère mieux diverses ressources. Gulp et Grunt sont toujours utiles si vous devez effectuer d'autres types de tâches de construction. Pour les tâches de base comme l'exécution de Webpack, je recommande d'utiliser directement les scripts NPM.

Mocha Chai Sinon

En JavaScript, il existe un grand nombre d'outils de tests unitaires facultatifs, chacun étant stable et robuste. Si vous l'utilisez uniquement pour des tests unitaires, les outils existants répondront pleinement à vos besoins.

Les outils de test courants incluent Jasmine, Mocha, Tape, Ava, Jest, etc. Ils ont chacun leurs propres atouts.

Mes exigences pour un framework de test sont les suivantes :

• Peut être exécuté dans le navigateur pour un débogage facile

• Rapide exécution

• Tests asynchrones faciles à gérer

• Facile à utiliser en ligne de commande

• Oui Bibliothèques tierces compatibles avec les assertions arbitraires et les simulations de données

Le premier critère exclut Ava et Jest.

J'aime les affirmations de Chai pour sa riche variété de plugins complets, et Mocha pour sa bonne prise en charge de l'async. Il est fortement recommandé d’utiliser Dirty Chai pour éviter certains problèmes. Le plugin mocha-leader de Webpack permet aux développeurs d'automatiser les tests.

Pour React, les développeurs peuvent se référer à Enzyme et Teaspoon d'AirBNB.

J'aime beaucoup les fonctionnalités de Mocha. Si vous souhaitez simplement les fonctions les plus basiques, vous pouvez vous référer à cet article pour en savoir plus sur Tape.

Lodash

JavaScript ne dispose pas d'une bibliothèque d'outils de base similaire à Java ou .NET, les développeurs feront donc principalement référence à une bibliothèque d'outils externe de l'extérieur.

Actuellement, Lodash est le leader dans cette catégorie. De plus, en raison de ses caractéristiques d’exécution paresseuses, il s’agit de l’un des outils les plus performants disponibles. Il n'est pas nécessaire de référencer toutes les ressources lors de l'utilisation de Lodash, les développeurs peuvent utiliser les fonctions selon leurs besoins. En version 4.x, Lodash propose un mode « Développement fonctionnel » pour les développeurs qui préfèrent la programmation fonctionnelle.

Si vous êtes familier avec la programmation fonctionnelle, vous pouvez en apprendre davantage sur Ramda. Si vous décidez d'utiliser cette bibliothèque, vous devrez peut-être référencer certaines fonctions Lodash.

fetch

De nombreuses applications basées sur React n'utilisent plus jQuery. À moins que vous ne conserviez un ancien projet ou que vous n’utilisiez une bibliothèque tierce dépendant de jQuery, il n’est plus nécessaire de l’utiliser.

J'aime garder les projets simples et utiliser uniquement fetch dans le code. fetch est basé sur la promesse, et Firefox et Chrome encapsulent cette interface. Pour les autres navigateurs, vous devez fournir un script putty. Je recommande d'utiliser la récupération isomorphe pour maintenir la cohérence des fonctionnalités entre les navigateurs et les serveurs.

Bien sûr, vous pouvez également utiliser d'autres excellentes bibliothèques tierces pour obtenir des données de manière asynchrone, mais je pense que la récupération est suffisante.

JavaScript isomorphe

JavaScript isomorphe fait référence à JavaScript qui s'exécute à la fois sur le client et sur le serveur. Il est souvent utilisé pour pré-afficher des pages sur le serveur afin d'améliorer les performances et de faciliter le référencement. Le JavaScript isomorphe peut être implémenté à l'aide de React, mais ce n'est pas simple. Cela augmente la complexité du programme et limite les outils et bibliothèques tierces disponibles pour les développeurs.

Si vous créez un site B2C, tel qu'un site Web de commerce électronique, vous devrez peut-être utiliser du JavaScript isomorphe. Cependant, pour les sites internes ou les applications B2B, les performances ne sont pas la chose la plus importante, donc le JavaScript isomorphe n'est pas trop important.

API

Tout le monde semble réfléchir à ce qu'il faut faire avec les API ces jours-ci. Tout le monde prend le train en marche en utilisant les API RESTfull, et SOAP appartient au passé. Actuellement, il existe différents protocoles API dans l'industrie, tels que HATEOAS, JSON API, HAL, GraphQL, etc.

GraphQL donne au client la possibilité d'effectuer des requêtes arbitraires. Associé à Relay, l'état et le cache du client peuvent être mieux gérés. Cependant, il est encore difficile de créer une interface serveur GraphQL, et la plupart de la documentation est destinée à Node.js.

Falcor de Netflix semble offrir des fonctionnalités similaires à GraphQL/Relay tout en réduisant également les exigences côté serveur, mais il est actuellement en version préliminaire pour les développeurs et n'a pas encore été utilisé dans le développement réel.

Toutes les spécifications connues ont leurs propres défauts, certaines sont trop complexes, certaines ne peuvent gérer que la lecture des données mais pas la mise à jour, et certaines sont très différentes de REST. De nombreux développeurs choisissent de développer eux-mêmes, mais ils rencontrent toujours les problèmes ci-dessus.

Je ne pense pas qu'il existe de solution parfaite pour ce qui précède, mais j'ai ma propre compréhension de l'API :

• Prévisible, suivez un protocole cohérent

• Prend en charge l'obtention de plusieurs entités dans une seule requête

• Prend en charge les opérations de mise à jour

• Facile à déboguer

• Facile à utiliser

Jusqu'à présent, je n'ai pas trouvé de solution répondant à tous les critères ci-dessus.

Si vous utilisez RESFful, il est recommandé de se référer à Swagger pour écrire l'API.

Electron

Electron peut utiliser la technologie front-end pour créer des programmes de bureau. L'éditeur Atom produit par l'équipe GitHub est basé sur Electron. Essentiellement, Electron encapsule un Node.js en interne, qui peut ouvrir une fenêtre Chrome pour afficher l'interface utilisateur, et peut également accéder à l'API locale du système d'exploitation, et il n'y a pas de mécanisme de bac à sable dans le navigateur. Les développeurs peuvent empaqueter et distribuer des applications via Electron.

C'est le moyen le plus simple de créer des logiciels multiplateformes et de profiter de tous les outils mentionnés ci-dessus. De plus, Electron dispose d'une documentation complète et d'une communauté de développement active.

Vous avez peut-être entendu parler du nom nw.js Bien qu'il existe depuis de nombreuses années, Electron est plus stable et plus facile à utiliser.

Voici un modèle basé sur Electron, React et hot reload, essayez-le.

Extensions

Voici quelques personnes que je suis sur Twitter :

• Dan Abramov, créateur de Redux

• Christopher Chedeau, un développeur React très actif, travaillant actuellement chez Facebook

• Jeff Morrison, l'un des principaux contributeurs de Flow

• Sebastian Markbåge, l'un des créateurs de React

• Pete Hunt

• React

• Pour plus d'objets digne d'attention, veuillez vous référer à React Influencers

Il est recommandé de lire Learning React de Pate Hunt !

Dan Abramov a publié une série de didacticiels vidéo Pour démarrer avec Redux, Fortement recommandé! De plus, Dan a publié une liste de surveillance plus détaillée que celle ci-dessus.

La collection de liens React/Redux de Mark Erikson est également un bon matériel d'apprentissage.

Utilisation à la demande

L'écosystème JavaScript se développe rapidement et se renforce de jour en jour. Les meilleures pratiques de React se solidifient et les responsabilités et capacités des outils environnants deviennent de plus en plus claires.

La chose la plus importante à retenir est la suivante : restez simple et utilisez-la uniquement lorsque vous en avez besoin.

Si votre application n'a que deux ou trois écrans, vous n'avez pas besoin d'utiliser un système de routage ; si vous créez une application d'une seule page, vous n'avez même pas besoin de Redux, juste du propre attribut d'état de React ; vous créez un Pour un programme CRUD simple, vous n'avez pas besoin d'utiliser Relay ; si vous apprenez ES6, vous n'avez pas besoin de comprendre Async/Await ou les décorateurs en profondeur si vous venez de commencer à apprendre React, vous n'avez pas besoin de comprendre Async/Await ou les décorateurs en profondeur ; Vous n'avez pas besoin d'utiliser le rechargement à chaud et le rendu côté serveur ; Si vous êtes nouveau sur Webpack, vous n'avez pas besoin de séparer le code et de fusionner plusieurs ressources si vous apprenez simplement Redux, vous n'avez pas besoin de comprendre l'utilisation de Redux-Form ; et Redux-Sagas.

Faites simple et faites une chose à la fois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!