Web Notes
1.0.0
Lire en ligne >>
Code de code · Matériaux de référence
Le développement Web est facile à démarrer mais difficile à connaître. Il est divisé en étapes telles que le premier coup d'œil à la porte, entrant dans la pièce et intégrant l'ensemble du processus. Si vous lisez la série d'articles de l'auteur pour la première fois, il est recommandé d'aller sur le chemin technique d'un certain ours pour une compréhension complète. Dans cette série, l'auteur s'est engagé à explorer comment améliorer efficacement l'efficacité de la R&D de l'équipe et la livraison complète en temps opportun et de manière fiable tout au long du cycle de vie de l'itération des produits; Dans le même temps, il peut contrôler la complexité globale du système et optimiser en continu les performances et l'expérience du système.
En repensant aux brillants changements dans la technologie Web et l'écologie au cours des dernières décennies, nous avons connu des changements passionnants et nous sommes souvent perdus dans la confusion de choix. Avec l'innovation des versions du navigateur et l'amélioration des performances matérielles, le développement du Web frontal est entré dans une époque rapide et en constante évolution. D'innombrables cadres de développement frontal et systèmes techniques sont en concurrence pour la beauté, qui a laissé les développeurs confus et même à perte. Surtout avec l'émergence de cadres frontaux Web modernes (Angular, React, Vue.js), l'amélioration des fonctionnalités linguistiques telles que JavaScript, CSS, HTML, etc., et les concepts théoriques proposés tels que l'ingénierie, la multiplateforme, le micro front-end, les grands frontaux et la BFF, la pile technologique et la communauté pour le développement frontal sont également constamment entièrement enrichis et améliorés. statut. En ce qui concerne les ingénieurs dits modernes frontaux, ils doivent généralement utiliser beaucoup de connaissances professionnelles pour résoudre des problèmes d'ingénierie, y compris la façon de modulariser le projet, comment concevoir les interactions entre les composants, comment améliorer la réutilisabilité, comment améliorer l'efficacité des emballages, optimiser les performances de rendu du navigateur, etc. Pas plus avant, ils n'ont besoin que de la routine HTML / CSS / JS pour développer des pages statiques.
Dans l'ensemble, tout écosystème de programmation passera par trois étapes, tout d'abord, la période d'origine. Puisqu'il est nécessaire de développer la langue et les API de base, cette étape donnera naissance à un grand nombre d'outils auxiliaires. Dans la deuxième étape, à mesure que les choses qui sont rendues deviennent plus complexes, davantage d'organisations sont nécessaires et un grand nombre de modèles de conception et de modèles architecturaux seront introduits. Cette étape donnera naissance à un grand nombre de cadres. Dans la troisième étape, avec la complexité supplémentaire de la demande et l'expansion de l'équipe, il est entré en phase d'ingénierie et diverses systèmes hiérarchiques MVC, MVP, MVVM, etc., le développement visuel, les tests automatisés et les systèmes de collaboration d'équipe ont émergé.
Fait intéressant, lorsque nous nous tenons à différents moments, la division de ces trois étapes est également incohérente. Selon la compréhension actuelle de l'auteur, elle est divisée en trois étapes différentes: rendu de modèle, séparation frontale et application, ingénierie et micro frontale, grande fin et sans serveur.
Bien sûr, chaque petite scène sera accompagnée de l'émergence de nouveaux cadres et de nouveaux outils:
Le développement du Web frontal remonte à la mention publique de Tim Berners-Lee de la description de HTML en 1991, puis W3C a publié la norme HTML4 en 1999. Cette étape était principalement une architecture b / s, et il n'y avait aucun concept de développement prétendu. À l'heure actuelle, il s'agissait principalement de pages statiques basées sur le rendu de modèle. L'essentiel est d'écrire certains modèles dynamiques via JSP, PHP et d'autres technologies, puis d'analyser les modèles dans des fichiers HTML via le serveur Web. Le navigateur n'est responsable que du rendu de ces fichiers HTML. Il n'y a pas de division du travail entre les extrémités avant et arrière à ce stade, et généralement l'ingénieur arrière écrit la page avant.
Au cours des prochaines années, avec l'introduction de normes architecturales telles que la technologie et le repos de l'Ajax, les concepts de séparation frontale et de client riche sont de plus en plus reconnus. Nous devons développer la langue et les API de base. À ce stade, une série d'outils auxiliaires frontaux représentés par JQuery a émergé. Sur la base de l'Ajax, les extrémités avant et arrière ont également ouvert la route de la séparation, et l'architecture de séparation avant et arrière est progressivement devenue populaire. Le front-end est responsable de l'interface et de l'interaction, et le back-end est responsable du traitement de la logique commerciale. Les extrémités avant et arrière interagissent à travers l'interface. Nous n'avons plus besoin d'écrire du HTML difficile à maintenir dans chaque langue backend. La complexité des pages Web est également passée du serveur Web backend vers JavaScript côté navigateur.
Depuis 2009, le développement des smartphones est devenu populaire et la vague de terminaux mobiles est imparable. Le concept de conception de l'application SPA à une seule page est également devenu populaire. La modularité frontale associée, la composante, le développement réactif, le développement hybride et d'autres technologies sont urgents. En particulier l'émergence de Node.js en 2009, ainsi que les spécifications CommonJS et le mécanisme de gestion des emballages NPM, ont donné naissance à une série d'excellents cadres tels que Angular 1 et Ionic, ainsi que des normes de module telles que AMD, CMD, UMD, requirejs, mer et outils tels que le grunt et le gulp. Les ingénieurs frontaux sont également devenus un domaine de développement spécial, avec un système technique et un modèle d'architecture indépendamment du backend.
Dans le passé, nous n'avions besoin que de HTML et JS simples. Nous devions maintenant utiliser le gestionnaire de packages pour télécharger automatiquement des packages tiers, utiliser le gestionnaire de modules pour créer un fichier de script unique, utiliser le compilateur de traduction pour appliquer les nouvelles fonctions JavaScript et utiliser le coureur de tâche pour exécuter automatiquement chaque étape de construction.
Au cours des deux dernières années, avec l'augmentation de la complexité des applications Web, l'expansion du personnel de l'équipe et la demande de l'utilisateur de convivialité d'interaction des pages et d'optimisation des performances, nous avons besoin d'un cadre de développement plus excellent et flexible pour nous aider à mieux terminer le développement frontal. Cette étape a émergé de nombreux cadres avec des préoccupations relativement concentrées et de meilleurs concepts de conception. Par exemple, les cadres de composants tels que React, Vue.js et Angular 2 nous permettent de remplacer la programmation impérative par les opérations DOM comme noyau par une programmation déclarative, qui accélère le développement des composants et améliore la réutilisabilité et la composabilité des composants. Redux, qui suit la programmation fonctionnelle, et Mobx, qui emprunte le concept de programmation réactive, sont tous deux de très bons cadres auxiliaires de gestion de l'état, aidant les développeurs à séparer la logique métier du rendu de la vue, divisent la structure du projet plus raisonnablement, mieux mettre en œuvre le principe de la responsabilité unique et améliorer la maintenabilité du code. Dans les outils de construction de projets, la gestion des opérations de tâches représentée par Grunt and Gulp et les outils d'emballage de projet représentés par WebPack, Rollup et JSPM ouvrent tous la voie, aidant les développeurs à mieux construire des processus de construction frontaux et à effectuer un prétraitement, le chargement asynchrone, le polyfilant, la compression et d'autres opérations de manière automatisée.
La maturité de la chaîne d'outils a également provoqué la demande d'ingénierie, la technologie et les technologies de la technologie des entreprises. L'ingénierie frontale consiste à standardiser et standardiser le processus de développement frontal, la technologie, les outils, l'expérience, etc. en fonction de caractéristiques commerciales spécifiques. Son objectif est de permettre au développement frontal de former son propre système, de maximiser l'efficacité de développement des ingénieurs frontaux et de réduire les coûts de coordination et de communication causés par la sélection de la technologie, la mise en service conjointe frontale et back-end, etc.
La complexité logique de l'application, la charge d'ingénierie et les améliorations de la complexité combinée apportent également certains défis aux performances du frontal. Par exemple, les cadres de composants tels que React auront un temps d'écran blanc lorsque l'initialisation de la page, qui n'est pas amicale pour le référencement; L'enju frontal a commencé à essayer de résoudre ce problème grâce à un rendu de serveur et à remplacer les modèles de langages de serveur tels que JSP et PHP sur la base des applications isomorphes implémentées par React, Vue, etc., ou les renvoyer au navigateur sous la forme d'un document HTML complet.
En se concentrant sur la pile complète, après des années de développement, Node.js a pleinement possédé la capacité de soutenir les applications au niveau de l'entreprise et possède un grand nombre de pratiques dans de nombreuses entreprises nationales et étrangères telles que Lowe, Netflix et Alibaba. De plus, Node.js a une affinité du langage naturel, ce qui permet aux développeurs d'assumer plus facilement les responsabilités de la pile complète. Avec la montée en puissance de concepts tels que l'architecture de microservice et le natif et sans serveur, les interfaces backend deviennent progressivement atomiques et les interfaces microservices ne sont plus directement confrontées à la page, et les appels frontaux sont devenus compliqués. Par conséquent, le concept BFF (backend for frontend) représenté par GraphQL a vu le jour. Une couche BFF a été ajoutée entre le microservice et le frontal, et l'interface a été agrégée et recadrée par BFF, puis sortie vers le frontal.
Lors de la résolution des problèmes de coordination et d'agrégation de l'interface, BFF exerce également la pression concomitante d'origine sur le backend, ce qui entraîne également beaucoup de développement et de pression de fonctionnement et d'entretien aux ingénieurs frontaux. Serverless peut atténuer ce problème. Nous pouvons utiliser des fonctions pour implémenter l'agrégation et la culture des interfaces; La demande frontale pour BFF est convertie en un déclencheur pour les déclencheurs FAAS HTTP. Cette fonction met en œuvre la logique métier pour la demande, telles que l'appel de plusieurs microservices pour obtenir des données, puis le renvoi des résultats de traitement à l'avant. De cette façon, la pression de fonctionnement et de maintenance est passée du serveur BFF précédent vers les services FAAS, et le frontal n'a plus à se soucier du serveur. Serverless peut également être appliqué au rendu côté serveur, en divisant chaque itinéraire précédent en fonctions, puis en déploiement des fonctions correspondantes sur FAAS. De cette façon, le chemin demandé par l'utilisateur correspond à chaque fonction individuelle. De cette façon, les opérations de fonctionnement et de maintenance sont transférées sur la plate-forme FAAS. Lorsque le front-end rend le côté serveur, il n'est pas nécessaire de se soucier du déploiement de l'opération et de la maintenance du programme serveur. De plus, les mini-programmes tels que WeChat et Alipay fournissent également des plateformes de développement cloud conformes aux concepts sans serveur, permettant l'itération rapide des frontaux commerciaux.
Pour plus d'informations et guides, voir Introduction.
Version chinoise | Version anglaise
Si vous êtes un développeur très expérimenté et que vous souhaitez connaître l'ingénierie et l'architecture frontale, il est recommandé de lire l'évolution frontale de l'article.
Si vous n'avez pas une compréhension complète de la syntaxe de base JavaScript, il est recommandé de parcourir d'abord la «pratique de syntaxe JavaScript moderne» pour comprendre la syntaxe JavaScript de base et les applications pratiques.
Si vous souhaitez comprendre le développement complet de Node.js, vous pouvez vous référer aux notes de nœuds.
Après avoir compris les connaissances théoriques, il est recommandé de se rendre à WX-FE pour vérifier tous les projets open source liés à la fin de l'auteur.
Tous les articles de l'auteur sont soumis à la Creative Commons Attribution-non-Commercial Use Prohibited Explication 4.0 International License. La réimpression est la bienvenue et le droit d'auteur est respecté. Vous pouvez également vous rendre sur la page d'accueil de NGTE Books pour parcourir une liste de livres pour plusieurs catégories, notamment le système de connaissances, le langage de programmation, l'ingénierie logicielle, le modèle et l'architecture, le Web et le grand frontal, la pratique de développement côté serveur et l'architecture d'ingénierie, l'infrastructure distribuée, l'intelligence artificielle et l'apprentissage en profondeur, les opérations de produits et l'entrepreneuriat: et autres:
