Points clés pour la sélection des trames frontaux

Pour choisir un cadre frontal de niveau d'entreprise approprié, en considérant l'échelle, la flexibilité, la prise en charge hors ligne, le rendu c?té serveur et la maturité du cadre. L'expérience pratique est cruciale et l'équipe des auteurs a utilisé Aurelia et réagir pour construire des pages d'authentification pour l'évaluation.

Le choix final de React est basé principalement sur sa maturité, son soutien communautaire et sa facilité de recrutement. Angular 2 a été éliminé pour ne pas répondre à la plupart des critères de sélection. Vue et Aurelia ont bien performé et répondaient aux exigences, mais l'embauche de développeurs expérimentés était le facteur décisif ultime.

Pour évaluer la plate-forme de réseau centrale du groupe CXA du startup de protection sociale des employés de Singapour, nous avons décidé d'abandonner l'architecture existante vieillissante et de reconstruire le frontal à partir de zéro. L'un des défis auxquels la plate-forme est confrontée est de créer une application Web qui fonctionne bien dans 12 pays cibles à travers l'Asie par le groupe CXA.

Compte tenu de la date limite stricte pour la livraison du projet, j'ai mené l'évaluation d'une gamme de cadres JavaScript frontaux. Il existe peu d'opportunités pour ce niveau de changement dans les projets de grandes entreprises, nous nous effor?ons donc d'être aussi approfondis que possible dans le processus d'évaluation.

Cette décision est importante: à mesure que l'entreprise se développe de fa?on exponentielle, nous ne pouvons pas nous permettre de faire des erreurs. Nous devons également considérer que personne dans l'équipe n'a une expérience importante avec tout cadre que nous envisageons.

Répartir la portée

Le nouveau cadre frontal semble être libéré chaque jour, nous avons donc fait une méta-analyse pour réduire la portée du cadre que nous avons considéré. Y compris les cadres dont nous avons entendu parler ou nous recommandés, nous avons fini par choisir Angular 2 (entendu parler), Aurelia (entendu parler), Vue.js (recommandé) et React (recommandé).

Nous mesurons le classement de chaque trame finaliste en fonction de la liste des exigences clés. Certaines exigences sont basées sur ce dont nous savons ce dont le projet a besoin, tandis que d'autres attendent avec impatience ce que nous voulons faire.

flexibilité

Le cadre que nous avons choisi nécessite une gamme d'options de configuration et est relativement facile à personnaliser. Cela semble dépendre fortement de la philosophie architecturale: que vous preniez des décisions architecturales en votre nom ou que vous soyez complètement ouvert à eux.

Angular 2 est situé à cette fin, faisant chaque choix pour vous (serveur d'état, routeur, gestionnaire). L'avantage de cela est qu'il est facile de commencer rapidement, et le co?t potentiel est que les modules ne peuvent pas fonctionner comme vous avez besoin et n'ont nulle part où aller.

React, Vue et Aurelia sont situés à l'autre extrémité de l'échelle, offrant la possibilité d'échanger des composants au besoin. Aurelia et Vue ont une passerelle configurable dans leur configuration initiale, qui a un avantage clé par rapport à React.

Comme Vue, React lui-même ne fournit qu'une petite partie de ce qu'il faut pour construire quelque chose. De là, de nombreuses décisions doivent être prises, ce qui est certainement intimidant. Depuis que React a été publié pour la première fois, diverses plates-formes (y compris React Coilerplate et Create React) ont été créées pour simplifier le processus d'introduction.

Pour notre projet de réaction de test, nous avons décidé d'abandonner tout passe-partout spécifique et de y consulter directement. Nous en avons encore installé, même juste pour le code de référence. Cette approche est certainement difficile, mais nous avons beaucoup appris sur chaque composant de la pile React et nous étions plus confiants dans le résultat final.

Vue et Aurelia ont remporté le tour avec leur courbe d'apprentissage réduite et leur structure modulaire. React gagne certains points de flexibilité même si la configuration initiale est beaucoup plus difficile.

Support hors ligne

Avec des API telles que les travailleurs du service, il devient possible pour les applications Web de s'exécuter sans connexion Internet en temps réel ou stable. Nous n'avons pas beaucoup d'expérience à cet égard dans notre équipe, et nous ne l'avons pas plongé, sauf en confirmant que tous les cadres évalués fournissent une forme de soutien hors ligne.

léger

La taille des octets du code envoyé au client a un grand impact sur les performances du navigateur, y compris la bande passante et le temps de processeur. Avec l'ajout de code personnalisé et de bibliothèques tierces, la taille des octets ne fera que deviendre de plus en plus, il est donc crucial de démarrer petit. Le marché cible du groupe CXA s'étend aux pays où la bande passante est très précieuse, il est donc crucial de fournir le moins de code possible aux clients.

En raison du manque de données dures qui reflètent la configuration de la production, nous avons examiné la taille de la bibliothèque de base pour au moins avoir une idée de ce à quoi nous allons faire face. La taille réelle de la production est plus grande que ce qui est montré ici.

Vue ont fait de leur mieux pour réduire leur bibliothèque de base à 23 Ko impressionnants. React et Aurelia sont au milieu (environ 42 Ko et 64 Ko, respectivement), tandis que l'Angular 2 reste un poids lourd avec plus de 143 Ko (y compris les RXJ pour la gestion de l'état).

En fait, les versions de production de Vue, Aurelia et React sont très proches les unes des autres et peuvent être considérées. Angular 2 se démarque à nouveau dans le mauvais sens.

rendu c?té serveur

Le framework d'application à page unique (SPA) a suivi le modèle d'envoi de tout le code au client. Cela signifie que le rendu initial de la page est laissé au client et conduit directement à un chargement lent de la page initiale. Le concept de rendu c?té serveur dans SPA exerce le fardeau du rendu initial sur le serveur, permettant à tous les autres contenus d'être retardés après ce rendu.

vue et réagir des plugins pour ajouter un rendu c?té serveur. Angular 2 est actuellement en train de combiner ses capacités universelles dans le noyau, bien que ses capacités ne correspondent pas à ce que Vue ou React fournit. Aurelia marque le rendu c?té serveur comme une fonctionnalité de développement, mais même s'il a d'autres conseils de performances, il n'a pas de calendrier d'implémentation.

maturité

Lors du choix d'un cadre pour les sites Web au niveau de l'entreprise, le large soutien communautaire, la stabilité et les capacités de recrutement sont des facteurs très importants. Il est difficile de spéculer si un cadre est toujours pris en charge après trois ans, mais nous avons décidé d'examiner la santé actuelle de chaque cadre pour prendre une décision.

La visualisation de la date de sortie publique initiale du cadre nous donne une idée de la robustesse de chaque cadre. Les bibliothèques plus anciennes devraient avoir une meilleure gamme de fonctionnalités et moins de bogues majeurs, du moins en théorie.

React a gagné facilement, et sa première version publique a eu lieu en mars 2013. Bien que Vue ait été initialement publiée en octobre 2015, elle n'a pas atteint son apogée avant la sortie en septembre 2016. Aurelia est un débutant et atteint la version 1.0 en ao?t 2016.

Angular 2 est intéressant: il est très différent de la version 1, et en fait, il a été publié pour la première fois en septembre 2016.

Une partie de cette évaluation consiste à plonger dans l'historique de développement de chaque bibliothèque, pas seulement à la date de sortie elle-même. Une longue et stable d'histoire de développement - même en version bêta, bien s?r, cela renforce également la confiance.

Une variété de membres de l'équipe ont prêté attention au développement de cadres candidats, ce qui nous donne au moins une compréhension de la stabilité globale de chaque cadre. L'historique de développement problématique d'Angular 2 se démarque parmi tous les cadres que nous examinons, avec des changements significatifs importants et des dates de libération peu claires. Le cadre a finalement été publié dans sa version finale, mais il était vraiment désordonné dans le processus.

L'aspect clé ultime de la maturité (comme mentionné ci-dessus) est la capacité de recruter des employés expérimentés. Compte tenu de l'expérience limitée de notre équipe dans le cadre de l'évaluation et de la chronologie radicale à laquelle nous sommes confrontés, nous voulons recruter des développeurs expérimentés.

Cependant, l'embauche de personnes ayant une expérience spécifique peut être limitée, mais cela a un impact dans des projets plus importants comme les n?tres. Nous avons éliminé Angular 2 à ce stade car il n'a pas répondu à bon nombre de nos exigences précédentes.

Pour les cadres restants, nous avons d'abord recherché différents sites Web de recherche d'emploi et publié des publicités d'emploi distinctes pour chaque cadre. Nous n'avons pas trouvé d'annonces d'emploi pour Aurelia ou Vue, et nous n'avons pas re?u de demandes. En revanche, nous avons trouvé plusieurs emplois React et nous avons re?u de nombreuses demandes de haute qualité.

Autres fonctions

Le reste de notre liste - outils de développement et support de test unitaire - est disponible dans tous les cadres que nous considérons. Le débogage est presque impossible sans outils de développeurs fiables, et les tests unitaires sont presque essentiels pour les applications de classe d'entreprise comme la n?tre.

Expérience pratique

Aucune théorie ne peut être comparée à l'expérience pratique. Dans cet esprit, nous avons choisi deux cadres qui répondent à la plupart des exigences - les activités et réagissent - et avons commencé à coder en parallèle. Il n'y a aucune bonne raison d'omettre Vue à ce stade; nous n'avons tout simplement pas assez de temps pour évaluer.

La tache donnée consiste à créer un écran d'authentification qui correspond aux fonctions de base de nos applications existantes: connectez-vous, appelez l'API et établissez une session. Les deux membres de l'équipe ont re?u un cadre séparément et ont re?u une semaine civile pour voir ce qu'ils pouvaient construire.

La démo Aurelia est plus complète, en partie en raison du processus de configuration plus simple. Après avoir sélectionné le travail effectué dans chaque section, nous avons l'impression de mieux comprendre ce qui se trouve à l'intérieur de la pile React. Aurelia gagne toujours facilement en termes de facilité de configuration initiale.

Nous ne pouvons tirer aucune conclusion importante basée uniquement sur le codage pratique. La seule surprise est peut-être à quel point le code est similaire: cela est largement d? aux changements structurels introduits dans ECMAScript 6, les deux cadres qui utilisent ECMAScript 6.

Résultat

En fin de compte, notre choix est réagi; plus important encore, il choisit sa maturité, son soutien communautaire et sa facilité de recrutement. Bien que React soit le gagnant clair de nos normes, il est formidable de voir des cadres de haute qualité exister dans le cadre compétitif que nous examinons.

Vue et Aurelia s'est avéré être proche. Vue mène légèrement avec une liste de fonctionnalités plus complète, mais compte tenu de nos exigences, l'une ou l'autre servira probablement bien. Si nous n'avons pas de pression dans le temps, le recrutement est moins important et nous élargirons notre travail pratique pour inclure Vue.

Angular 2 n'a pas répondu à la plupart de nos critères de sélection et était décevant. Malgré ses nombreux avantages, cela ne nous convient évidemment pas.

Après avoir choisi React et commencé à construire notre projet, il est peu probable que nous le referons bient?t. Quant à vous, quels critères ajouterez-vous à notre liste? Qu'avons-nous manqué, nous aurions pu faire mieux? J'attends avec impatience vos commentaires et suggestions.

Cet article a été évalué par des pairs par Stuart Mitchell, Ralph Mason et Vildan Softic. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

FAQS sur le choix du cadre frontal droit pour votre entreprise

Quels facteurs clés doivent être pris en compte lors du choix d'un cadre frontal qui convient à notre entreprise?

quelques facteurs clés que vous devez considérer lors du choix d'un cadre frontal pour votre entreprise. Tout d'abord, considérez les exigences du projet. Différents cadres ont des avantages et des inconvénients différents, il est donc important de choisir celui qui correspond aux besoins de votre projet. Deuxièmement, considérez la courbe d'apprentissage. Certains cadres sont plus faciles à apprendre que d'autres, ce qui peut affecter la vitesse de développement. Troisièmement, considérez la communauté et le soutien. Une communauté forte peut fournir des ressources précieuses et aider lorsque vous avez des problèmes. Enfin, considérez les performances et la taille du cadre. Un cadre léger et haute performance peut apporter une meilleure expérience utilisateur.

Comment la taille du cadre frontal affecte-t-elle ses performances?

La taille du cadre frontal affectera sérieusement ses performances. Les cadres plus grands sont généralement livrés avec plus de fonctionnalités et de fonctionnalités, mais peuvent également charger et fonctionner plus lentement. Cela peut conduire à une mauvaise expérience utilisateur, en particulier sur les connexions Internet plus lentes ou les appareils plus faibles. Les cadres plus petits, en revanche, sont généralement plus rapides et plus efficaces, mais ils peuvent manquer de certaines caractéristiques ou fonctionnalités. Par conséquent, il est très important d'équilibrer la taille et les performances du cadre en fonction des exigences de votre projet.

Quels sont les frameworks frontaux populaires et leurs avantages?

Il existe de nombreux cadres frontaux populaires, chacun avec ses propres avantages. Par exemple, React est connu pour son DOM virtuel et ses performances élevées, ce qui en fait un bon choix pour des applications Web dynamiques complexes. Angular, en revanche, est un cadre entièrement fonctionnel qui contient tout ce dont vous avez besoin pour créer une application Web, ce qui en fait un bon choix pour les grands projets. Vue.js est connu pour sa simplicité et sa facilité d'utilisation, ce qui en fait un bon choix pour les nouveaux développeurs dans de petits projets ou des cadres frontaux.

Quelle est l'importance du soutien communautaire lors du choix d'un cadre frontal?

Le soutien communautaire est très important lors du choix d'un cadre frontal. Une communauté solide peut fournir une multitude de ressources, y compris des tutoriels, de la documentation et des forums où vous pouvez poser des questions et obtenir de l'aide. De plus, les grandes communautés montrent souvent que le cadre est populaire et largement utilisé, ce qui peut conduire à des mises à jour et à des améliorations plus fréquentes.

Puis-je utiliser plusieurs frameworks frontaux dans un seul projet?

Bien que techniquement plusieurs frameworks frontaux puissent être utilisés dans un seul projet, cela n'est généralement pas recommandé. Chaque cadre a sa propre fa?on de faire les choses et les mélanger peut conduire à la confusion et à la complexité. Au lieu de cela, il est généralement préférable de choisir le cadre qui convient le mieux aux besoins de votre projet et de s'en tenir à lui.

Comment la courbe d'apprentissage du cadre frontal affecte-t-elle le développement du projet?

La courbe d'apprentissage du cadre frontal affectera sérieusement le développement du projet. Un cadre avec une courbe d'apprentissage abrupte peut prendre plus de temps à ma?triser, ce qui peut retarder le début du développement. D'un autre c?té, un cadre avec une courbe d'apprentissage douce vous permet de commencer le développement plus rapidement. Cependant, la facilité d'apprentissage ne devrait pas être le seul facteur dans le choix d'un cadre. Il est également nécessaire de considérer les fonctionnalités du cadre et la fa?on dont il correspond aux exigences du projet.

Quel est le r?le des cadres frontaux dans le développement Web?

Les cadres frontaux jouent un r?le crucial dans le développement Web. Il fournit une structure au code pour le maintenir plus facile à entretenir et à évoluer. Il fournit également du code pré-écrit pour les taches courantes, accélérant ainsi le processus de développement. De plus, les cadres frontaux incluent souvent des outils de test et de débogage, ce qui facilite l'assurance de la qualité de votre code.

à quelle fréquence dois-je mettre à jour le cadre frontal que j'utilise?

Il est très important de maintenir le cadre frontal à jour. Les mises à jour incluent généralement des corrections de bogues, des améliorations des performances et de nouvelles fonctionnalités. Cependant, la mise à jour du cadre peut également introduire des modifications qui brisent le code existant, il est donc important de tester en profondeur votre application après la mise à jour. De manière générale, vous devez mettre à jour votre cadre immédiatement après la sortie d'une nouvelle version stable.

Comment prendre une décision entre un cadre monolithique et un micro-Front-Fend?

La décision entre le cadre monolithique et micro frontal dépend des exigences de votre projet. Le cadre monolithique fournit tout ce dont vous avez besoin dans un seul package, ce qui peut simplifier le développement, mais peut également inclure des fonctionnalités inutiles. D'un autre c?té, le microframework ne fournit que les bases, vous permettant d'ajouter uniquement les fonctionnalités dont vous avez besoin. Cela peut conduire à des applications plus légères et plus efficaces, mais cela peut également nécessiter plus de travail pour configurer et entretenir.

Quelles ressources y a-t-il pour en savoir plus sur les cadres frontaux?

Il existe de nombreuses ressources disponibles pour en savoir plus sur les cadres frontaux. Les tutoriels, documents et cours en ligne sont un excellent point de départ. Des sites Web comme Stack Overflow et GitHub peuvent également fournir des informations et des exemples précieux. De plus, de nombreux cadres ont leurs propres communautés où vous pouvez poser des questions et apprendre des autres développeurs.

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!