Vue (1)------Historique du développement front-end

Vue (1)------Historique du développement front-end

1. Vue d'ensemble

• Vue (prononcé /vjuː/, similaire à view) est un framework JavaScript progressif pour la création d'interfaces utilisateur , publié en février 2014.

• Contrairement à d’autres grands frameworks, Vue est conçu pour être appliqué couche par couche de bas en haut.
  La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, ce qui facilite l'intégration avec des bibliothèques tierces (telles que : vue-router : jump, vue-resource : communication, vuex : management) ou des projets existants.

• Site officiel : https://cn.vuejs.org/v2/guide/

2. Système de connaissances frontal

• Il reste encore un long chemin à parcourir pour devenir un véritable « ingénieur full-stack Internet Java », et le front-end est un cours obligatoire qui ne peut être évité. L'objectif principal de cette étape du cours est d'amener les programmeurs d'arrière-plan Java à comprendre, comprendre et maîtriser le front-end, et à faire un pas en avant pour devenir un « ingénieur full-stack Internet Java ».

2.1. Trois éléments du front-end

• HTML (Structure) : Hyper Text Markup Language, qui détermine la structure et le contenu des pages Web
• CSS (Présentation) : Feuilles de style en cascade (Cascading Style Sheets), définit le style de présentation des pages Web.
• JavaScript (comportement) : C'est un langage de script faiblement typé. Son code source n'a pas besoin d'être compilé, mais est interprété et exécuté par le navigateur pour contrôler le comportement des pages Web.

2.2. Couche de structure (HTML)

2.3. Couche de présentation (CSS)

La feuille de style en cascade CSS est un langage de balisage, pas un langage de programmation, elle ne peut donc pas personnaliser les variables, ne peut pas citer, etc. En d'autres termes, elle n'a aucun support de syntaxe. Ses principaux défauts sont les suivants :

• La syntaxe n'est pas assez puissante, par exemple, elle ne peut pas être imbriquée, ce qui nécessite d'écrire de nombreux sélecteurs répétés dans le développement modulaire ;
• Sans variables et sans mécanisme de réutilisation de style raisonnable, les valeurs d'attribut logiquement liées doivent être générées à plusieurs reprises sous forme de littéraux, ce qui rend leur maintenance difficile ;
• Cela a entraîné une augmentation déraisonnable de la charge de travail au travail. Afin de résoudre ce problème, les développeurs front-end utiliseront un outil appelé [Préprocesseur CSS] pour fournir un mécanisme de réutilisation des couches de style manquant dans CSS, réduire le code redondant et améliorer la maintenabilité du code de style. Cela améliore considérablement l’efficacité du développement de styles front-end.

Qu'est-ce que le préprocesseur CSS

• Le préprocesseur CSS définit un nouveau langage. L'idée de base est d'utiliser un langage de programmation spécialisé pour ajouter certaines fonctionnalités de programmation au CSS, et d'utiliser CSS comme cible pour générer des fichiers. Les développeurs n'ont ensuite besoin d'utiliser ce langage que pour coder le CSS. Traduit en termes faciles à comprendre, cela signifie « utiliser un langage de programmation spécial pour concevoir le style de la page Web, puis le convertir en un fichier CSS normal via un compilateur pour une utilisation dans le projet ».

Quels sont les préprocesseurs CSS couramment utilisés ?

• SASS : Basé sur Ruby, traité via le serveur et doté de fonctions puissantes. Haute efficacité d’analyse. besoin

  Pour apprendre le langage Ruby, il est plus difficile de démarrer que LESS.

• MOINS : Basé sur NodeJS, traité via le client, facile à utiliser. La fonction est plus simple que SASS et l'efficacité de l'analyse est également inférieure à celle de SASS, mais elle est suffisante dans le développement réel, donc si notre personnel backend en a besoin, il est recommandé d'utiliser LESS.

2.4. Couche de comportement (JavaScript)

• JavaScript est un langage de script faiblement typé. Son code source n'a pas besoin d'être compilé avant d'être envoyé au client pour être exécuté. Au lieu de cela, les codes de caractères au format texte sont envoyés au navigateur, qui est interprété et exécuté par le navigateur.

Développement JS natif

• Le développement JS natif signifie que nous suivons la méthode de développement standard [ECMAScript], appelée ES. La particularité est que tous les navigateurs la supportent. Jusqu'à présent, la norme ES a été publiée dans les versions suivantes : (La différence est que de nouvelles fonctionnalités sont ajoutées progressivement)
  • ES3
  • ES4 (interne, non officiellement publié)
  • ES5 (prise en charge complète du navigateur)
  • ES6 (version grand public actuelle couramment utilisée : emballée via webpack pour prendre en charge ES5)
  • ES7
  • ES8
  • ES9 (étape de rédaction)

TypeScript le standard de Microsoft

• TypeScript est un langage de programmation gratuit et open source développé par Microsoft. Il s'agit d'un sur-ensemble de JavaScript qui ajoute essentiellement au langage un typage statique facultatif et une programmation orientée objet basée sur les classes. Dirigé par Anders Helsberg (père de C#, Delphi, TypeScript ; fondateur de .NET).

• La caractéristique de ce langage est qu'en plus des fonctionnalités d'ES, il intègre également de nombreuses nouvelles fonctionnalités qui ne rentrent pas dans le champ d'application de la norme. Par conséquent, de nombreux navigateurs ne peuvent pas prendre en charge directement la syntaxe TypeScript et doivent être compilés (compilés en JS). avant qu'il puisse être correctement exécuté par le navigateur. .

Cadre JavaScript

• JQuery : Une bibliothèque JavaScript bien connue. Son avantage est qu'elle simplifie les opérations DOM. Son inconvénient est que les opérations DOM sont trop fréquentes, ce qui affecte les performances du front-end ; aux yeux du front-end, elle n'est utilisée que pour être compatible avec IE6, 7 et 8 ;
• Angular : le framework front-end acquis par Google a été développé par un groupe de programmeurs Java. Il se caractérise par le déplacement du modèle back-end MVC vers le front-end et l'ajout du concept de développement modulaire. Il coopère avec Microsoft et adopte TypeScript. développement de la syntaxe ; il est convivial pour les programmeurs back-end. , pas très convivial pour les programmeurs front-end ; le plus gros inconvénient est que l'itération de la version est déraisonnable (comme 1ère génération -> 2ème génération, à l'exception du nom, c'est fondamentalement deux choses;)
• React : Produit par Facebook, un framework front-end JS hautes performances ; sa caractéristique est qu'il propose un nouveau concept [DOM virtuel] pour réduire les opérations DOM réelles et simuler les opérations DOM en mémoire, améliorant efficacement l'efficacité du rendu front-end ; son L'inconvénient est qu'il est compliqué à utiliser, car vous devez apprendre un langage [JSX] supplémentaire ;
• Vue : Un framework JavaScript progressif. Progressif signifie la mise en œuvre progressive de nouvelles fonctionnalités, telles que le développement modulaire, le routage, la gestion des états et d'autres nouvelles fonctionnalités. Sa particularité est de combiner les avantages d'Angular (modularité) et de React (DOM virtuel) ;
• Axios : framework de communication front-end ; parce que les limites de Vue sont très claires, il s'agit de traiter le DOM, donc il n'a pas de capacités de communication. À ce stade, un cadre de communication supplémentaire doit être utilisé pour interagir avec le serveur ; bien entendu, vous pouvez aussi directement choisir d'utiliser la fonction de communication AJAX fournie par jQuery ;

Cadre d'interface utilisateur

• Ant-Design : produit par Alibaba, un framework d'interface utilisateur basé sur React
• ElementUI, iview, ice : produit par Ele.me, un framework d'interface utilisateur basé sur Vue
• BootStrap : une boîte à outils open source pour le développement front-end lancée par Teitter
• AmazeUI : également appelé "Meizi UI", un framework frontal multi-écran HTML5

Outils de création JavaScript

• Babel : outil de compilation JS, principalement utilisé pour les nouvelles fonctionnalités ES non prises en charge par les navigateurs, comme la compilation de TypeScript
• WebPack : packager de modules, sa fonction principale est le packaging, la compression, la fusion et le chargement séquentiel

Remarque : Les points de connaissances ci-dessus ont répertorié toutes les compétences requises pour le développement de WebApp.

2.5, trois extrémités identiques

Application hybride

L'objectif principal est d'unifier un ensemble de codes à trois extrémités (PC, Android : .apk, iOS : .ipa) et de pouvoir appeler le matériel sous-jacent de l'appareil (comme les capteurs, le GPS, les caméras, etc.). Il existe deux méthodes principales de conditionnement :

• Packaging cloud : HBuild -> HBuildX, produit par DCloud ; API Cloud

• Emballage local : Cordova (anciennement PhoneGap)

Applet WeChat

Pour plus de détails, veuillez consulter le site officiel de WeChat. Voici une introduction à un cadre qui facilite le développement de l'interface utilisateur de l'applet WeChat : WeUI

2.6. Technologie back-end

Le personnel front-end doit également maîtriser certaines technologies back-end afin de faciliter le développement.Cependant, nous, le personnel Java back-end, savons que le système de connaissances back-end est extrêmement vaste et complexe.Par conséquent, afin de faciliter le front-end personnel pour développer des applications back-end, des technologies telles que Node JS ont vu le jour.

L'auteur de Node JS a affirmé abandonner Node JS (en disant que l'architecture n'est pas bien faite et que les modules de nœuds lourds pourraient rendre l'auteur mécontent) et commencer à développer Deno avec une nouvelle architecture.

Puisqu'il s'agit d'une technologie backend, elle nécessite certainement des frameworks et des outils de gestion de projet. Le framework Node JS et les outils de gestion de projet sont les suivants :

• Express : framework Node JS
• Koa : version express simplifiée
• NPM : outil complet de gestion de projet, similaire à Maven
• YARN : Une alternative au NPM, similaire à la relation entre Maven et Gradle

2.7. Frameworks front-end grand public

Vue.js

Voir

iview est une puissante bibliothèque d'interface utilisateur basée sur Vue. Elle possède de nombreux composants de base pratiques qui sont plus riches que ceux de l'élément ui. Elle sert principalement aux produits intermédiaires et back-end des interfaces PC. Le modèle de développement de composants Vue utilisant un seul fichier est développé sur la base de npm+webpack+babel, prend en charge l'API ES 2015 de haute qualité, riche en fonctionnalités et conviviale, et utilise l'espace librement et de manière flexible.

• Adresse du site officiel : https://iviewui.com/

• Github：https://github.com/iview/iview

• iview-admin：https://www.worldlink.com.cn/en/osdir/iview-admin.html

Remarque : il appartient au framework front-end traditionnel et peut être pris en compte lors de la sélection. Sa principale caractéristique est qu'il prend en charge davantage de terminaux mobiles.

Interface utilisateur de l'élément

Element est une bibliothèque de composants Vue UI maintenue par l'open source front-end d'Ele.me. Elle contient des composants complets et couvre essentiellement tous les composants nécessaires dans le backend. La documentation l'explique en détail et est riche en exemples. Principalement utilisée pour développer des pages côté PC, il s'agit d'une bibliothèque de composants Vue UI de relativement haute qualité.

• Adresse du site officiel : https://element.eleme.cn/
• Github：https://github.com/ElemeFE/element
• vue-element-admin：https://panjiachen.github.io/vue-element-admin-site/zh/

Remarque : Il appartient au framework front-end traditionnel et peut être pris en compte lors de la sélection. Sa principale caractéristique est qu'il prend davantage en charge le bureau.

GLACE

Feibing est la solution applicative middle et backend de l'équipe Alibaba basée sur React/Angular/Vue. Au sein d'Alibaba, elle est déjà utilisée par plus de 270 projets de presque toutes les BU. Feibing inclut un lien complet depuis la conception jusqu'à la fin du développement, aidant les utilisateurs à créer rapidement leurs propres applications mid-end et back-end.

• Adresse du site officiel : https://ice.work/

• Github：https://github.com/alibaba/ice

Remarque : Les principaux composants sont toujours basés sur React. Depuis la mise à jour du blog du 17 février 2019, le support de Vue n'est pas encore terminé et est encore en phase d'attente.

VantUI

Vant UI est une bibliothèque de composants Vue implémentée par l'équipe front-end de Youzan sur la base des spécifications unifiées de Youzan. Elle fournit un ensemble complet de composants de base et de composants métier de l'interface utilisateur. Grâce à Vant, vous pouvez créer rapidement une page avec un style unifié et améliorer l'efficacité du développement.

• Adresse du site officiel : https://youzan.github.io/vant-weapp/#/intro
• Github：https://github.com/youzan/vant

AtUI

at-ui est une bibliothèque de composants d'interface utilisateur frontale basée sur Vue 2.x, principalement utilisée pour le développement rapide de produits de sites Web PC. Il fournit un ensemble de flux de travail de développement frontal npm+webpack+babel, le style CSS est indépendant et un style d'interface utilisateur unifié peut être conservé même si différents frameworks sont utilisés.

• Adresse du site officiel : https://at-ui.github.io/at-ui/#/zh
• Github：https://github.com/aliqin/atui

Cube Ul

cube-ui est une bibliothèque de composants mobiles exquise basée sur Vue js développée par l'équipe Didi. Il prend en charge l'introduction et la post-compilation à la demande, est léger et flexible, présente une forte évolutivité et peut facilement mettre en œuvre un développement secondaire basé sur les composants existants.

• Adresse du site officiel : http://www.cubeent.co.kr/

• Github：https://github.com/square/cube

développement hybride

Flutter
Flutter est le framework d'interface utilisateur mobile de Google, qui permet de créer des applications natives de haute qualité sur Android et iOS en très peu de temps. Flutter fonctionne avec le code existant, il est utilisé par les développeurs et les organisations du monde entier, et Flutter est gratuit et open source.

• Adresse du site officiel : https://flutterchina.club/

• Github：https://github.com/flutter/flutter

Remarque : Produit par Google, sa fonctionnalité principale est de créer rapidement des applications APP natives. Si vous réalisez des applications hybrides, ce framework est indispensable.

lonic
Lonic est à la fois un framework CSS et une bibliothèque d'interface utilisateur Javascript. Lonic est actuellement le framework de développement d'applications mobiles HTML 5 le plus prometteur. Créez des applications via SASS, qui fournit de nombreux composants d'interface utilisateur pour aider les développeurs à développer des applications puissantes. Il utilise le framework JavaScript MV VM et Angular JS/Vue pour améliorer l'application. Fournit une liaison bidirectionnelle des données, ce qui en fait un choix courant pour les développeurs Web et mobiles.

• Adresse du site officiel : https://ionicframework.com/

• Document du site officiel : http://www.ionic.wang/js_doc-index.html

• Github：https://github.com/tonib/kaichronicles

Applet WeChat

mpvue
mpvue est un framework frontal développé par Meituan qui utilise Vue.js pour développer des mini-programmes. Il prend actuellement en charge les mini-programmes WeChat, les mini-programmes intelligents Baidu, les mini-programmes Toutiao et les mini-programmes Alipay. Le framework est basé sur Vue.js. L'exécution modifiée du framework d'exécution et l'implémentation du compilateur de code lui permettent de s'exécuter dans un environnement de mini-programme, introduisant ainsi l'expérience de développement de Vue.js au développement de mini-programmes.

• Adresse du site officiel : http://mpvue.com/
• Hub Git：https://github.com/Meituan-Dianping/mpvue

Remarque : expérience complète de développement de Vue et prise en charge du développement de mini-programmes multiplateformes, recommandé.

WeUI
WeUI est un ensemble de bibliothèques de styles de base cohérentes avec l'expérience visuelle native de WeChat. Il est personnalisé par l'équipe de conception officielle de WeChat pour les pages Web WeChat et les mini-programmes WeChat afin de rendre la perception de l'utilisation des utilisateurs plus unifiée. Contient divers éléments tels qu'un bouton, une cellule, une boîte de dialogue, un toast, un article, une icône, etc.

• Adresse du site officiel : https://weui.io/
• Github：https://github.com/Tencent/weui

3. Comprendre l'histoire de l'évolution de la séparation avant et arrière

Pourquoi est-il nécessaire de séparer le devant et le dos ?

3.1. L'ère MVC orientée back-end

Afin de réduire la complexité du développement, le back-end est le point de départ.Par exemple, l'utilisation de Struts, Spring MVC et d'autres frameworks est l'ère MVC du back-end;Prenons l'exemple du processus Spring MVC
:

• Lancer une requête au contrôleur frontal ( Dispatcher Servlet)
• Le contrôleur frontal demande HandlerMappingune recherche Handler, qui peut xmlêtre recherchée en fonction de la configuration et des annotations.
• Le mappeur de processeur HandlerMappingrevient au contrôleur frontalHandler
• Le contrôleur frontal appelle l'adaptateur de processeur pour exécuterHandler
• adaptateur de processeur à exécuterHandler
• HandlerRetour à l'adaptateur une fois l'exécution terminéeModelAndView
• L'adaptateur de processeur revient au contrôleur frontal ModelAndViewet ModelAndViewest un objet sous-jacent du framework SpringMvc, comprenant ModeletView
• Le contrôleur frontal demande à l'analyseur de vue d'effectuer une analyse de vue et de l'analyser en une vue réelle (JSP) en fonction du nom de vue logique.
• Afficher le résolveur revient au contrôleur frontalView
• Le contrôleur frontal effectue le rendu de la vue, qui remplit les champs avec les données du modèle (dans les objets ModelAndView)request
• Le contrôleur frontal répond avec les résultats à l'utilisateur

avantage

• MVC est un très bon modèle de collaboration qui peut réduire efficacement le couplage du code et permettre aux développeurs de comprendre où le code doit être écrit architecturalement. Afin de rendre la vue plus pure, vous pouvez également utiliser des moteurs de modèles tels que Thyme leaf et Free Marker pour empêcher l'écriture de code Java dans le modèle et rendre plus claire la division du travail entre le front-end et le back-end.

défaut

• Le développement front-end dépend fortement de l'environnement de développement et a une faible efficacité de développement. Dans cette architecture, il existe deux modes de collaboration front-end et back-end :

  • La première consiste à écrire la DEMO sur le front-end, après l'avoir écrite, laisser le back-end appliquer le modèle. L’avantage est que DEMO peut être développé localement et est très efficace. L'inconvénient est que le modèle doit encore être installé sur le backend, ce qui peut être faux. Une fois le modèle installé, il doit encore être confirmé par le frontend, et le coût de la communication et de l'ajustement dans les deux sens est relativement élevé. haut;
  • Un autre modèle de collaboration est que le front-end est responsable de tout le développement côté navigateur et du développement des modèles de couche de vue côté serveur. L'avantage est que les codes liés à l'interface utilisateur peuvent être écrits sur le front-end et que vous n'avez pas besoin de prêter trop d'attention au back-end. L'inconvénient est que le développement front-end est fortement lié à l'environnement back-end, et l'environnement est devenu un facteur important affectant l'efficacité du développement front-end.

• Les responsabilités front-end et back-end sont intriquées : le moteur de modèles est puissant et peut toujours implémenter diverses logiques métier grâce aux variables de contexte obtenues. De cette façon, tant que le front-end est faible, le back-end sera souvent amené à écrire beaucoup de code métier dans la couche modèle. Il existe également une grande zone grise dans le Controller. Des fonctions telles que le routage des pages devraient être les plus préoccupés par le front-end, mais ils le sont. Mis en œuvre par le backend. Le contrôleur lui-même et le modèle sont souvent intriqués, et le code métier qui fait grincer des dents apparaît souvent dans la couche contrôleur. Ces problèmes ne peuvent pas tous être attribués à la qualité des programmeurs, sinon JSP suffira.

• Limitations sur le front-end : si l'optimisation des performances se fait uniquement sur le front-end, l'espace est très limité, nous avons donc souvent besoin d'une coopération back-end. Cependant, en raison des limites du cadre back-end, il est difficile pour nous d'utiliser des solutions techniques telles que [Comet] et [Big Pipe] pour optimiser les performances.

Remarque : Durant cette période (avant 2005), y compris les premiers JSP et PHP, on peut l'appeler l'ère du Web 1.0. Je veux dire quelque chose ici, si vous êtes un débutant en Java, arrêtez de prendre au sérieux certaines anciennes technologies, comme JSP, car les temps changent, la technologie change et tout change (citant Zuckerberg (un dicton bien connu : le seule constante est le changement lui-même ); les étudiants contemporains apprennent encore des choses anciennes en classe et considèrent cette connaissance comme le point clé. En fait, ce n'est pas le cas. On peut seulement dire que c'est l'information sèche dans votre cognition pour le marché. C’est juste que c’est dépassé depuis longtemps

3.2. L'ère SPA basée sur AJAX

Le temps remonte à 2005 AJAX(JavaScript et XML asynchrones, JavaScript et XML asynchrones, ancienne technologie et nouvel usage) a été officiellement proposé et CDN a commencé à être utilisé comme stockage de ressources statiques, donc le retour du roi JavaScript est apparu (avant cela, JS était utilisé sur les pages Web (application sur une seule page) SPA (application sur une seule page) avec des publicités en plâtre de peau de chien.

avantage

• Dans ce mode, la division du travail entre le front-end et le back-end est très claire, et le point clé de collaboration entre le front-end et le back-end est l'interface AJAX. **Cela a l'air si merveilleux, mais avec le recul, ce n'est pas très différent de l'ère JSP. La complexité est passée de JSP côté serveur à JavaScript côté navigateur, et le côté navigateur est devenu très compliqué. Semblable à Spring MVC, l'architecture en couches côté navigateur a commencé à apparaître à cette époque :

défaut

• Accord sur les interfaces front-end et back-end : si l'interface back-end est en désordre et si le modèle économique back-end n'est pas suffisamment stable, alors le développement front-end sera très pénible ; de nombreuses équipes ont fait des tentatives similaires. via des règles d'interface, des plateformes d'interface, etc. Avec les règles d'interface précipitées avec le backend, il peut également être utilisé pour simuler des données, afin que les front-ends et les back-ends puissent réaliser un développement parallèle efficace après s'être mis d'accord sur l'interface.
• Contrôle de la complexité du développement front-end : les applications SPA sont pour la plupart fonctionnelles et interactives, et il est normal que le code JavaScript dépasse 100 000 lignes. L'organisation d'une grande quantité de code JS, la liaison à la couche View, etc. ne sont pas des tâches faciles.

3.3. L'ère MVC orientée front-end

Le modèle MVC ici est le suivant :

• MVC (communication principalement synchrone) : Modèle, Vue, Contrôleur
• MVP (communication principalement asynchrone) : Modèle, Vue, Présentateur
• MVVM (communication principalement asynchrone) : Model, View, View Model Afin de réduire la complexité du développement front-end, un grand nombre de frameworks front-end ont vu le jour, tels que : , , , etc. Le principe général Angular JSde Reactces Vue.jsframeworks Ember JSconsiste à les superposer d'abord par type, comme les modèles, les contrôleurs, les modèles, puis à les diviser au sein du calque, comme indiqué ci-dessous :

avantage

• Les responsabilités du front-end et du back-end sont très claires : le front-end fonctionne côté navigateur, et le back-end fonctionne côté serveur. Une division claire du travail permet un développement parallèle, la simulation des données de test n'est pas difficile et le front-end peut être développé localement. Le backend peut se concentrer sur le traitement de la logique métier et produire des interfaces RESTful et autres.
• La complexité du développement front-end est contrôlable : le code front-end est lourd, mais une superposition raisonnable permet au code front-end de remplir ses fonctions. C'est assez intéressant, aussi simple que la sélection des fonctionnalités du modèle, il y a de nombreux détails auxquels il faut prêter attention. Plus c'est puissant, mieux c'est, quelles sont les restrictions, quelles libertés restent, comment le code doit être organisé, toute cette conception, il faudrait un livre pour l'expliquer.
• Le déploiement est relativement indépendant : l'expérience produit peut être rapidement améliorée

défaut

• Le code ne peut pas être réutilisé. Par exemple, le backend doit encore effectuer diverses vérifications sur les données et la logique de vérification ne peut pas réutiliser le code côté navigateur. Si elles peuvent être réutilisées, la vérification des données back-end peut être relativement simple.
• Entièrement asynchrone, mauvais pour le référencement. Il est souvent nécessaire de mettre en place une solution de downgrade pour un rendu synchrone côté serveur.
• Les performances ne sont pas optimales, en particulier dans un environnement Internet mobile.
• SPA ne peut pas répondre à tous les besoins et il existe encore un grand nombre d'applications multipages. La conception d'URL nécessite la coopération du backend et ne peut pas être entièrement contrôlée par le frontend.

3.4. L'ère du full-stack apportée par Node JS

Le modèle MVC orienté front-end résout de nombreux problèmes, mais comme mentionné ci-dessus, il existe encore de nombreuses lacunes. Avec l'essor de Node JS, JavaScript a commencé à pouvoir s'exécuter côté serveur. Cela signifie qu'il pourrait y avoir un nouveau modèle de R&D

Dans ce modèle de R&D, les responsabilités du front-end et du back-end sont très claires. Pour le front-end, les deux couches d'interface utilisateur remplissent leurs fonctions respectives :

• La couche Front-end Ul gère la logique de présentation de la couche navigateur. Les styles de rendu via CSS, l'ajout de fonctions interactives via JavaScript et la génération HTML peuvent également être placés dans cette couche, en fonction du scénario d'application.

• La couche Back-end Ul gère le routage, les modèles, l'acquisition de données, les cookies, etc. Grâce au routage, le front-end peut enfin contrôler la conception d'URL de manière indépendante, de sorte qu'il s'agisse d'une application monopage ou d'une application multipage, le front-end peut la contrôler librement. Le backend peut enfin se débarrasser de sa forte concentration sur la présentation et peut plutôt se concentrer sur le développement de la couche de logique métier.

Grâce à Node, la couche WebServer est également du code JavaScript, ce qui signifie que certains codes peuvent être réutilisés recto et verso, que les scènes nécessitant un référencement peuvent être rendues de manière synchrone côté serveur et que les problèmes de performances causés par trop de requêtes asynchrones peuvent également être atténués. le côté serveur. Les défauts de l’ancien modèle peuvent presque parfaitement être résolus par ce modèle.

Par rapport au modèle JSP, le modèle full-stack semble être une régression, et c'est bien un retour au modèle de développement original, mais c'est un retour en spirale.

Le modèle full-stack basé sur Node JS fait encore face à de nombreux défis :

• Le front-end doit avoir une meilleure compréhension de la programmation côté serveur. Par exemple, maîtrise des connaissances réseaux comme TCP/IP.

• Communication efficace entre la couche Node JS et la couche Java. En mode Node JS, tout est côté serveur. La communication HTTP RESTful peut ne pas être efficace. La communication via SOAP et d'autres méthodes est plus efficace. Tout doit être vérifié.

• Une compréhension approfondie du département et des niveaux d’exploitation et de maintenance nécessite plus de connaissances et d’expérience pratique.

• Comment faire la transition vers un grand nombre de questions historiques. C’est probablement le plus gros obstacle.

3.5. Résumé

En résumé, il n'y a pas de bon ou de mauvais modèle ou technologie, seulement qu'ils soient adaptés ou non, l'idée de développement de la séparation front-to-back repose principalement sur le SoC (le principe de séparation des préoccupations). les modèles permettent tous le front-end et le back-end. Les responsabilités sont plus claires et la division du travail est plus raisonnable et efficace.