Comment c'était d'apprendre JavaScript dans le passé ?

Hé, j'ai récemment reçu un projet Web, mais pour être honnête, je n'ai pas eu beaucoup de contacts avec la programmation Web au cours des deux dernières années. J'ai entendu dire que la technologie Web avait subi quelques changements. J'ai entendu dire que vous étiez le développeur Web le plus compétent ici en matière de nouvelles technologies ?

Pour être précis, je suis un "ingénieur front-end". Mais vous avez trouvé la bonne personne. Je ne connais pas trop la technologie de cette année, la visualisation frontale, les lecteurs de musique, les drones capables de jouer au football, il suffit de demander. Je viens d'assister à une conférence JS et à une conférence React, et il n'y a aucune nouvelle technologie que je ne connaisse pas.

Génial. Eh bien, je souhaite développer une page Web pour afficher les dernières mises à jour des utilisateurs. Je pense que je devrais obtenir les données via l'interface backend, puis utiliser un tableau pour afficher les données, et l'utilisateur peut trier les données. Si les données sur le serveur changent, je dois également mettre à jour ce tableau. Mon idée est d'utiliser jQuery pour le faire.

N'utilisez pas jQuery ! Personne n'utilise jQuery de nos jours. Nous sommes en 2016 et vous devriez absolument utiliser React.

Oh, d'accord, qu'est-ce que React ?

React est une bibliothèque très puissante, écrite par des personnes talentueuses de Facebook. Cela rend les pages plus contrôlables, extrêmement performantes et faciles à utiliser.

Ça a l'air vraiment bien. Puis-je utiliser React pour afficher les données du serveur ?

Bien sûr, il vous suffit d'ajouter deux dépendances, l'une est React et l'autre est React DOM

Euh, attendez, pourquoi y a-t-il deux bibliothèques ?

React est la bibliothèque dont je parle, et React DOM est utilisé pour faire fonctionner DOM. Ces DOM étant écrits en JSX, ils nécessitent une bibliothèque spécialisée pour les manipuler.

JSX ? Qu’est-ce que JSX ?

JSX est une extension de JS. Il ressemble à XML et peut être utilisé pour écrire du HTML. Vous pouvez considérer JSX comme une manière plus élégante d'écrire du HTML.

Pourquoi ne pas utiliser HTML... ?

Nous sommes en 2016 maintenant, et personne n’écrit directement du HTML.

Oui. D'accord, après avoir ajouté ces deux dépendances, puis-je commencer à utiliser React ?

Non. Vous devez ajouter Babel avant de pouvoir utiliser React.

Babel est une autre bibliothèque ?

Eh bien, Babel est un outil de traduction qui peut traduire le JS que vous écrivez dans n'importe quelle version de JS. Vous n’êtes pas obligé d’utiliser Babel, mais si vous ne le faites pas, vous devrez écrire la syntaxe ES5. Vous savez, nous sommes en 2016, comment ne pas utiliser la syntaxe ES2016 ? ES2016 est tellement cool.

Qu'est-ce que ES5 ? Qu’est-ce que ES2016 ? J'ai un peu le vertige.

ES5 est ECMAScript 5. La plupart des gens utiliseront ES5 car la plupart des navigateurs prennent en charge ES5.

Qu'est-ce qu'ECMAScript...

Comme vous le savez, JS est né en 1995 et le standard JS a été formulé en 1999. À cette époque, JavaScript s’appelait encore Livescript et ne pouvait fonctionner que dans les navigateurs Netscape. C'était une période chaotique, mais nous avons maintenant 7 versions de la spécification JS.

7 versions ? Qu’en est-il de ES5 et ES2016 ?

sont respectivement les 5ème et 7ème versions.

Hé, et la sixième version ?

Vous parlez d'ES6. Chaque version est un surensemble de la version précédente, vous pouvez donc simplement utiliser la dernière version ES2016.

Oui. Pourquoi ne pas utiliser ES6 ?

Eh bien, vous pouvez utiliser ES6, mais vous ne pourrez pas utiliser la syntaxe sympa d'async et d'attente. Il est préférable d'utiliser ES2016. Avec ES6, vous ne pouvez utiliser des générateurs que pour contrôler le flux de tâches asynchrones.

Je ne sais pas de quoi tu parles... tu as dit trop de noms que je ne comprends pas. Je veux juste obtenir des données du serveur. J'utilisais très bien jQuery après avoir introduit jQuery à partir de CDN, je peux utiliser AJAX pour obtenir les données.

Frère, nous sommes en 2016 et personne n'utilise jQuery, d'accord ? Tout le monde sait que l'utilisation de jQuery ne créera que du code "spaghetti" (non maintenable)

D'accord, je dois donc maintenant charger trois bibliothèques pour obtenir et afficher les données.

Oui, vous pouvez réellement utiliser le "Module Manager" pour "regrouper" ces trois bibliothèques dans un seul fichier.

Oh, qu'est-ce qu'un gestionnaire de modules...

Les gestionnaires de modules sont différents selon les plateformes. Le gestionnaire de modules front-end fait généralement référence à quelque chose qui gère les modules AMD ou CommonJS.

D'accord... eh bien, que sont AMD et CommonJS ?

sont deux définitions. Il existe de nombreuses façons de décrire l'interaction de plusieurs bibliothèques ou classes dans JS, telles que les exportations et les exigences. Vous pouvez écrire du JS selon l'API AMD ou CommonJS, puis les empaqueter avec Browserify.

Cela semble raisonnable. Mais qu’est-ce que Browserify ?

est un outil utilisé pour empaqueter des fichiers JS sous la forme de CommonJS et les exécuter dans le navigateur. Les personnes qui utilisent les référentiels npm ont inventé CommonJS.

Qu'est-ce que le référentiel npm...

est un référentiel public utilisé pour placer des modules dépendants.

Est-ce comme un CDN ?

Pas pareil. Il s'agit plutôt d'une base de données où tout le monde peut publier du code et télécharger du code. Vous pouvez télécharger ces codes localement pour les utiliser pendant le développement, ou les télécharger sur un CDN si nécessaire.

On dirait Bower !

Ouais, mais nous sommes en 2016 et plus personne n'utilise Bower...

D'accord, je comprends, donc je devrais utiliser npm pour installer les dépendances.

C'est vrai. Laissez-moi vous donner un exemple. Si vous souhaitez utiliser React, vous pouvez installer React directement à l'aide de npm, puis importer React dans votre code. La plupart des bibliothèques JS peuvent être installées de cette façon.

Eh bien, Angular fonctionne aussi.

Angular est tellement 2015. Mais Angular n'est pas mort cette année, il y a aussi VueJS et RxJS, etc. Vous souhaitez les apprendre ?

Utilisons React. J'en ai juste assez appris. J'installe donc React avec npm et le conditionne avec Browerify ?

Oui.

Cela semble un peu trop compliqué.

En effet. C'est pourquoi vous devez utiliser un outil de gestion de tâches comme Grunt, Gulp ou Broccoli, qui peut exécuter automatiquement Browserify. Non, vous pouvez utiliser Mimosa maintenant.

De quoi parlez-vous...

Outil de gestion des tâches. Mais nous ne l'utilisons plus. Nous l'utilisions encore l'année dernière et l'avons ensuite remplacé par Makefiles, mais maintenant nous utilisons tous Webpack.

Je pensais que seuls les projets C/C utiliseraient les Makefiles.

Oui, mais évidemment, dans le développement Web, nous aimons d'abord compliquer les choses, puis revenir à l'état le plus simple. Nous faisons cela chaque année. Regardez, dans moins de deux ans nous pourrons écrire des compilations sur la page web.

Hé, qu'est-ce que Webpack que vous venez de mentionner ?

Un autre outil de gestion de modules et un outil de gestion de tâches. Vous pouvez le considérer comme une version améliorée de Browserify.

Oh, d'accord, pourquoi Webpack est-il la version améliorée ?

Eh bien, peut-être que ce n’est pas renforcé. Webpack vous indique comment gérer vos dépendances. Webpack vous permet d'utiliser différents gestionnaires de modules, pas seulement CommonJS, mais prend même en charge les modules ES6.

Tout se passe ici et là, je suis confus.

Tout le monde est confus, mais attendez simplement que SystemJS sorte.

Oh mon Dieu, une autre bibliothèque JS, qu'est-ce que c'est ?

Haha, contrairement à Browserify et Webpack 1.x, SystemJS est un chargeur de module dynamique.

Attendez une minute, ne viens-je pas de dire que toutes les dépendances doivent être regroupées dans un seul fichier ?

C'est ce que je dis, mais une fois que HTTP/2 sera devenu populaire, il vaudra mieux ne pas le packager.

Alors pourquoi n'ajoutons-nous pas les trois fichiers de dépendances de React directement à la page ?

Non. Vous pouvez charger ces fichiers depuis un CDN, mais vous devez quand même les traduire localement avec Babel.

Oh, tant pis ?

Oui, vous ne pouvez pas exécuter Babel sur l'environnement de production. Vous devez exécuter une série de tâches avant de publier dans l'environnement de production, notamment la compression, l'obscurcissement, le CSS en ligne, le chargement paresseux des scripts... …

Je comprends, je comprends. Puisque je ne peux pas utiliser directement un CDN, que dois-je faire ?

J'envisagerais d'utiliser Webpack SystemJS Babel pour transpiler Typescript.

Dactylographié ? Ne parlons-nous pas de JavaScript ? !

Typescript est également JavaScript. Il est plus facile à utiliser que JS et est un sur-ensemble de JS. Il est basé sur ES6, qui est l'ES6 dont nous venons de parler.

ES2016 est déjà un sur-ensemble d'ES6, pourquoi Typescript réapparaît-il ?

Ça y est, Typescript nous permet d'écrire du JS « fortement typé », réduisant ainsi les erreurs d'exécution. En 2016, il est temps pour JS de prendre en charge le typage fort.

Apparemment, Typescript peut le faire.

Flow peut aussi le faire, la différence est que Typescript doit être compilé, tandis que Flow vérifie simplement la syntaxe.

Hé, Flow ?

est un vérificateur de type statique écrit par des personnes de Facebook. Écrite en OCaml, la programmation fonctionnelle est très simple.

OCaml ? Programmation fonctionnelle ?

De nos jours, les grands utilisent ces choses. Nous sommes en 2016. Vous savez, des concepts comme la programmation fonctionnelle, les fonctions d'ordre supérieur, le curry et les fonctions pures.

Je ne sais pas de quoi vous parlez.

Personne ne le savait au début. Disons-le ainsi, tout ce que vous devez savoir, c'est que la programmation fonctionnelle est meilleure que la programmation orientée objet, et en 2016 nous avons souligné la programmation fonctionnelle.

Attendez, j'ai étudié la programmation orientée objet à l'université et je pensais que c'était plutôt bien.

Java était plutôt bon avant d'être racheté par Oracle. Je veux dire, l'orientation objet était autrefois une bonne chose, et certaines personnes l'utilisent encore, mais maintenant tout le monde trouve que la transformation d'état est difficile à maintenir, donc tout le monde commence à utiliser des "objets immuables" et une programmation fonctionnelle. Les gens d'Haskell utilisent cet ensemble de choses depuis longtemps, mais heureusement, il existe des bibliothèques comme Ramda dans le domaine du développement Web, qui nous permettent d'effectuer une programmation fonctionnelle en utilisant JS.

Vous venez de jeter quelques noms supplémentaires ? Qu’est-ce que Ramnda ?

Ce n’est pas Ramnda, c’est Ramda, qui est un peu comme une expression Lambda. est une bibliothèque écrite par David Chambers.

Qui ?

David Chambers, un gars formidable. blablabla

Je dois vous interrompre. Toutes ces choses semblent bonnes, mais je pense qu’elles sont toutes trop compliquées et inutiles. Je veux juste obtenir les données et les afficher, je suis presque sûr que je n'ai pas besoin de connaissances dans ce cas.

Retour à React, comment puis-je obtenir des données du serveur à l'aide de React ?

Eh bien, React ne fournit pas cette fonction, vous ne pouvez utiliser React que pour afficher des données.

Je suis convaincu. Alors, comment puis-je obtenir les données ?

Vous utilisez simplement l'API Fetch.

C'est quoi ce bordel ? Le nom de cette API est terrible.

Je le pense aussi. L'API Fetch est une interface de requête asynchrone fournie par le navigateur.

Oh, c'est AJAX.

AJAX utilise uniquement l'objet XMLHttpRequest, mais l'API Fetch vous permet d'utiliser le style Promise pour lancer des requêtes asynchrones, vous aidant ainsi à vous débarrasser de « l'enfer des rappels ».

Rappel, bon sang ?

Oui, chaque fois que vous faites une requête asynchrone, vous devez attendre qu'elle réponde. À ce stade, vous devez utiliser une fonction dans une fonction, et cet appel imbriqué est un enfer de rappel.

D'accord. Est-ce que Promise résout ce problème ?

Oui. En utilisant Promises pour gérer les rappels, vous pouvez écrire du code plus lisible et plus facile à tester. Vous pouvez même faire plusieurs demandes en même temps et attendre qu’elles reviennent toutes.

Fetch peut-il faire la même chose ?

Oui. Mais le principe est que vos utilisateurs utilisent une nouvelle version du navigateur, sinon vous devez ajouter un "polyfill" Fetch ou utiliser des bibliothèques telles que Request, Bluebird ou Axios.

Oh mon Dieu, de combien de bibliothèques ai-je besoin ?

C'est JS, il y a des milliers de bibliothèques qui font la même chose. Nous connaissons les bibliothèques et nous avons les meilleures bibliothèques. Nous avons un grand nombre de bibliothèques et vous pouvez obtenir ce que vous voulez.

Que font les bibliothèques que vous venez de mentionner ?

Ces bibliothèques exploitent XMLHttpRequest et renvoient des objets Promise.

Il semble que la méthode ajax de jQuery fasse la même chose...

Nous n'utilisons pas jQuery depuis 2016. Si vous utilisez Fetch, vous devrez peut-être ajouter un Polyfill, sinon vous pouvez utiliser Bluebird, Request ou Axios. Utilisez ensuite wait et async pour gérer Promise afin que les tâches asynchrones puissent être contrôlées.

C'est la troisième fois que tu dis attendre. Qu'est-ce que c'est ?

await vous permet de bloquer un appel asynchrone, vous permettant de mieux contrôler les données renvoyées de manière asynchrone, améliorant considérablement la lisibilité du code. wait est très facile à utiliser, il vous suffit d'ajouter la configuration de l'étape 3 dans Babel, ou d'ajouter des fonctions syntax-async et des plug-ins de transformation async-to-generator.

Ça a l’air fou.

Pas fou. Pour utiliser wait, ceux qui compilent Typescript puis utilisent Babel pour le traduire sont fous.

C'est quoi ce bordel ? Typescript ne prend pas en charge l'attente ?

Il sera pris en charge dans la prochaine version.

Je n'ai rien à dire.

Vous voyez, c'est en fait très simple. Utilisez Typescript pour écrire du code, utilisez Fetch pour lancer des requêtes asynchrones, compilez tous les codes dans ES6, puis utilisez les éléments de configuration de l'étape 3 de Babel pour traduire ES6 en ES5. Tout le code est chargé à l'aide de SystemJS. Si vous ne pouvez pas utiliser Fetch, ajoutez un polyfill ou utilisez Bluebird, Request ou Axios pour pouvoir utiliser wait pour gérer Promise.

Constatant que notre compréhension du « simple » est différente. D'accord, donc avec ça, je peux enfin obtenir les données et les afficher en utilisant React, n'est-ce pas ?

Votre page doit-elle gérer les changements de statut ?

Hmm, pas besoin. Je veux juste montrer les données.

C'est bien, sinon je dois vous expliquer Flux, et certaines implémentations de Flux, comme Flummox, Alt, Fluxible. Mais sérieusement, vous devriez utiliser Redux.

J'ai simplement ignoré ce que vous avez dit. Encore une fois, je veux juste montrer les données.

Eh bien, si vous souhaitez simplement afficher des données, vous n'avez pas besoin de React. Tout ce dont vous avez besoin est un moteur de modèles.

Vous plaisantez ?

Je vous dis juste quelles techniques vous pouvez utiliser.

Arrêtez ça, sérieusement.

Je dirais que même s'il ne s'agissait que d'un moteur de modèles, j'utiliserais toujours Typescript SystemJS Babel.

Je souhaite simplement afficher des données sur la page, dites-moi simplement quel moteur de modèle utiliser.

Il y en a plusieurs, lequel avez-vous utilisé ?

Euh, je ne l'ai pas utilisé depuis si longtemps que je ne m'en souviens plus.

jTemplates, jQote ou Pure ?

Euh, je ne me souviens pas, y a-t-il autre chose ?

Transparence ? JSRender ? MarkupJS ? Celui-ci prend en charge la liaison bidirectionnelle.

Encore plus ?

PlatesJS ? jQuery-tmpl ? Certaines personnes l'utilisent encore.

Un peu comme. Lesquels ressemblent le plus au dernier ?

Moustache, soulignement ? Je me souviens que même Lodash avait un moteur de modèles, mais c'était en 2014.

Euh, c'est peut-être une bibliothèque plus récente ?

Jade ? DustJS ?

Jamais utilisé

DotJS ?

Jamais utilisé .

Nunjucks ? ECT ?

Jamais utilisé. Je ne me souviens plus, si c'était vous, lequel utilisez-vous ?

Je devrais utiliser des chaînes de modèles natives ES6

Je suppose que seul ES6 le prend en charge.

C'est vrai.

Vous devez utiliser Babel

C'est vrai.

Vous devez utiliser npm pour l'installer

Oui.

Vous devez utiliser Browserify ou Webpack, ou SystemJS

Oui.

Si je n'utilise pas Webpack, j'ai également besoin d'un outil de gestion des tâches.

C'est vrai.

Mais comme je souhaite utiliser de la programmation fonctionnelle et des langages fortement typés, je dois d'abord utiliser Typescript ou Flow.

C'est vrai.

Si je veux utiliser wait , alors je dois utiliser la traduction Babel.

C'est vrai.

Ensuite, je peux utiliser Fetch , Promise et toutes sortes de trucs sympas.

Eh bien, n'oubliez pas d'ajouter Fetch's Polyfill car Safari ne prend pas en charge Fetch.

Devinez quoi, arrêtons d'en parler. Je n’en fais plus, je ne fais plus de Web, et je ne veux plus toucher au JS.

C'est bon, dans quelques années, nous utiliserons tous Elm ou WebAssembly.

Je retourne au backend, je ne supporte pas tous ces changements, mises à jour de version, compilation et traduction. La communauté JS est folle si elle pense que n'importe qui peut suivre.

Je te comprends. Je vous suggère d'aller sur la communauté Python.

Pourquoi ?

Avez-vous déjà entendu parler de Python 3 ?

Ce qui précède est à quoi ressemblait l'apprentissage de JavaScript dans le passé ? Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois (www.php.cn) !