Un guide pratique pour planifier une application de pile moyenne

Cet article est extrait de la "Mastering Mean: Utilisation de Mongo, Express, Angular et Node, deuxième édition". La deuxième édition a été entièrement révisée et mise à jour pour couvrir Angular 2, Node 6 et la dernière version JavaScript traditionnelle ES2015 (ES6). Cette édition vous guidera en apprenant à développer des applications Web à l'aide de la pile moyenne mise à jour.

Points clés

• Lors de la planification d'une application de pile moyenne, vous devez d'abord concevoir l'écran que vous souhaitez sans avoir à creuser profondément dans chaque page. Les croquis à ce stade aident à visualiser l'ensemble de l'application et à organiser l'écran en collections et processus.
• Divisez l'écran en un ensemble logique. Par exemple, les écrans à tous les emplacements de traitement peuvent être combinés ensemble, tandis que des pages indépendantes comme "About Us" peuvent être combinées dans une collection diverses.
• Considérez l'architecture de l'application, commencez par l'API. La construction d'API qui interagit avec les données est la base de l'architecture. Déterminez s'il faut fournir HTML directement à partir du serveur ou choisir une seule application de page (SPA) en fonction des exigences spécifiques de l'application.
L'architecture
• peut être encapsulée dans un projet express, ce qui facilite la gestion et le déploiement. Cependant, il est crucial d'organiser correctement votre code pour garder différentes parties de votre application séparées les unes des autres afin qu'il soit plus facile de le diviser en projets séparés en cas de besoin à l'avenir.

Planification pratique des applications: loc8r

Pour faciliter l'illustration, supposons que nous construisons une application de travail appelée LOC8R sur la pile moyenne. LOC8R énumérera les endroits à proximité avec le wifi où les gens peuvent travailler. Il montrera également une carte des installations, des heures d'ouverture, des notes et des emplacements pour chaque lieu.

Planification avancée de l'application de pile moyenne

La première étape consiste à considérer les écrans nécessaires dans l'application. Nous nous concentrerons sur des pages vues et des voyages utilisateur séparés. Nous pouvons le faire à un niveau élevé sans avoir à faire attention aux détails de chaque page. Il est préférable d'esquisser sur du papier ou sur un tableau blanc à ce stade, car il aide à visualiser l'ensemble de l'application. Il aide également à organiser les écrans en collections et processus, comme un bon point de référence lors de la construction. Puisqu'il n'y a pas de données jointes derrière la page ou la logique d'application, il est facile d'ajouter et de supprimer les pièces, de modifier le contenu et l'emplacement affichés, et même de modifier le nombre de pages requises. Il est très probable que nous ne le fassions pas correctement pour la première fois;

Planification d'écran

Lire le javascript moderne Suivez le monde JavaScript en constante évolution! Lire ce livre Lire ce livre

Considérons LOC8R. Nos objectifs sont les suivants:

LOC8R énumèrera les endroits à proximité avec le wifi où les gens peuvent travailler. Il montre les installations, les heures d'ouverture, les notes et les cartes de localisation de chaque lieu. Les visiteurs peuvent soumettre des notes et des commentaires.

À partir de cela, nous pouvons apprendre certains des écrans dont nous avons besoin:

1. Écran répertoriant les endroits à proximité
2. Écran montrant les détails d'un seul endroit
3. Écran pour ajouter des commentaires sur les lieux

Nous pouvons également vouloir dire aux visiteurs à quoi sert LOC8R et pourquoi nous devrions ajouter un autre écran à la liste:

1. Écran pour "About Us" Informations

Divisez l'écran en une collection

Ensuite, nous voulons obtenir la liste d'écran et les organiser où ils appartiennent logiquement ensemble. Par exemple, les trois premiers de la liste sont tous liés à la position. La page About n'appartient nulle part, elle peut être placée dans la diverses "autres" collection. Dessiner un croquis en résultera similaire à la figure 1.

Figure 1: Organisez l'écran séparé de l'application dans une collection logique.

Un tel croquis est la première phase de planification, et nous devons terminer cette phase avant de commencer à penser à l'architecture. Cette étape nous donne la possibilité de voir la page de base et de considérer le processus. Par exemple, la figure 1 montre le parcours de base de l'utilisateur dans la collection de localisation, de la page de liste à la page Détails, puis au formulaire où vous ajoutez un commentaire.

conception d'architecture

loc8r semble simple, avec seulement quelques écrans. Mais nous devons encore réfléchir à la façon de construire son architecture, car nous transférerons les données de la base de données vers le navigateur, permettant à l'utilisateur d'interagir avec les données et de permettre les données à renvoyer à la base de données.

Commencez par l'API

Étant donné que l'application utilisera la base de données et passera les données, nous commencerons à construire l'architecture à partir des pièces dont nous avons certainement besoin. La figure 2 montre le point de départ, une API REST construite à l'aide de Express et Node.js pour permettre l'interaction avec les bases de données MongoDB.

Figure 2 En commençant par l'API de repos moyenne standard, utilisez MongoDB, Express et Node.js.

Building API qui interagit avec nos données est la base de l'architecture. La question la plus intéressante et la plus difficile est: comment construire l'architecture de notre application?

Options d'architecture d'application

À ce stade, nous devons examiner les exigences spécifiques de l'application et comment combiner les parties de la pile moyenne pour construire la meilleure solution. Avons-nous besoin de caractéristiques spéciales de MongoDB, Express, Angular ou Node.js pour modifier les décisions? Voulons-nous servir HTML directement à partir du serveur, ou Spa est-il une meilleure option?

Pour LOC8R, il n'y a pas d'exigences spéciales ou spécifiques, et si elle doit être facilement rampante par les moteurs de recherche dépend du plan de croissance de l'entreprise. Si l'objectif est d'apporter du trafic organique à partir des moteurs de recherche, alors oui, il doit être rampable. Si l'objectif est de promouvoir l'application en tant qu'utilisation de l'application et de conduire de cette manière, la visibilité du moteur de recherche semble moins importante.

Nous pouvons immédiatement envisager trois architectures d'application possibles, comme le montre la figure 3:

1. node.js et applications express
2. node.js et applications express avec interaction angulaire
3. spa angulaire

avec ces trois options à l'esprit, laquelle est la meilleure pour LOC8R?

Figure 3 Trois options de création d'applications LOC8R, des applications Express et Node.js côté serveur et Node.js au SPA Angular Full Client.

Sélectionner l'architecture d'application

Il n'y a pas d'exigence commerciale spécifique qui nous pousse à préférer une architecture à une autre. La construction des trois architectures nous permet d'explorer le fonctionnement de chaque approche et de nous permettre de consulter chaque technologie, en construisant la couche de couche d'application par couche.

Nous allons construire le schéma dans l'ordre illustré à la figure 3, en commençant par les applications Node.js et Express, puis continuer à ajouter un peu angulaire et à le refactoriser au spa angulaire. Bien que ce ne soit pas la façon dont vous créez généralement un site Web, il vous offre une excellente occasion d'apprendre tous les aspects de la pile moyenne.

résumer tout dans un projet express

Le diagramme d'architecture que nous avons examiné suggère que nous aurons des applications express distinctes pour l'API et la logique d'application. Cela est tout à fait possible et est également un bon choix pour les grands projets. Si nous nous attendons à beaucoup de trafic, nous pourrions même vouloir notre application principale et notre API sur différents serveurs. L'avantage supplémentaire de cela est que nous pouvons définir des paramètres plus spécifiques pour chaque serveur et application qui convient le mieux à leurs besoins respectifs.

Une autre façon est de rester simple et concis et de tout mettre dans un seul projet express. Avec cette approche, nous devons simplement nous soucier de l'hébergement et du déploiement d'une application, ainsi que de la gestion d'un ensemble de code source. C'est ce que nous ferons avec LOC8R, qui nous donne un projet express avec certaines sous-applications. La figure 4 illustre cette approche.

Figure 4 Architecture d'application qui résume la logique de l'API et de l'application dans le même projet express.

Lors de la combinaison d'applications de cette manière, assurez-vous d'organiser correctement le code afin que différentes parties de l'application puissent être séparées. En plus de rendre notre code plus facile à entretenir, il nous permet également de le diviser en projets distincts plus tard lorsque nous décidons de prendre le bon itinéraire. C'est un sujet clé à laquelle nous continuerons à discuter dans ce livre.

Produit final

Comme vous pouvez le voir, nous utiliserons toutes les couches de la pile moyenne pour créer LOC8R. Nous inclurons également Twitter Bootstrap pour nous aider à créer une disposition réactive. La figure 5 montre des captures d'écran de certains contenus qui peuvent être construits.

La figure 5 LOC8R est un exemple d'application. Il affiche différents sur différents appareils, affiche la liste des lieux et des détails de chaque endroit, et permet aux visiteurs de se connecter et de laisser des commentaires.

Conclusion

Il s'agit de cet article. Si vous souhaitez commencer à mettre ces étapes en pratique, visitez le site Web de Manning, où vous pouvez télécharger le premier chapitre gratuit de Mastering Mean: Utilisation de Mongo, Express, Angular et Node, Second Edition, ou acheter le livre. Sinon, si vous avez des questions sur ce que j'ai couvert dans cet article, veuillez le publier dans les commentaires ci-dessous.

FAQ sur la planification des applications de pile moyenne (FAQ)

Quelle est la pile moyenne et pourquoi est-elle importante dans le développement d'applications?

Mean Stack est une collection de technologies basées sur JavaScript utilisées pour développer des applications Web. La moyenne est l'acronyme de MongoDB, ExpressJS, AngularJS et Node.js. MongoDB est une base de données NoSQL, ExpressJS est un framework d'application Web, AngularJS est un framework JavaScript et Node.js est une plate-forme de serveur. L'importance de la pile moyenne dans le développement d'applications réside dans son efficacité et sa flexibilité. Il permet aux développeurs d'écrire du code pour le serveur et le client à l'aide de JavaScript, permettant une intégration transparente et un traitement efficace des données.

Comment fonctionne l'architecture de l'application de pile moyenne?

L'architecture des applications de pile moyenne est flexible et efficace. MongoDB (une base de données NOSQL) stocke les données d'application. Expressjs fonctionnant sur Node.js Server gère les fonctionnalités côté serveur. AngularJS gère les fonctionnalités du client (orienté utilisateur). L'application entière est écrite en JavaScript, permettant aux données de circuler de manière transparente de l'interaction utilisateur au serveur et à la base de données.

Quels sont les avantages de l'utilisation de la pile moyenne pour le développement des applications?

La pile moyenne offre de nombreux avantages pour le développement des applications. Grâce à Node.js, il permet la réutilisation du code et la vitesse élevée. MongoDB offre une flexibilité pour stocker des données complexes, tandis qu'AngularJS offre un moyen propre d'ajouter des fonctionnalités interactives. ExpressJS simplifie le processus de création et de gestion du routage des serveurs. De plus, comme tout est écrit en JavaScript, il simplifie et accélère le processus de développement.

Comment MongoDB améliore-t-il l'efficacité des applications de pile moyenne?

MongoDB est une base de données NoSQL qui offre des performances élevées, une haute disponibilité et une facilité d'évolutivité. Il est basé sur le concept de collections et de documents, plutôt que sur une base de données relationnelle traditionnelle à l'aide de tables et de lignes. Cela rend MongoDB particulièrement bon pour gérer de grandes quantités de données et des structures de données hiérarchiques complexes, ce qui contribue à améliorer l'efficacité des applications de pile moyenne.

Quel rôle joue AngularJS dans une application de pile moyenne?

AngularJS est un puissant cadre JavaScript pour la création d'applications dans la pile moyenne. Il permet aux développeurs d'étendre le vocabulaire HTML pour créer des environnements de développement plus expressifs, lisibles et plus rapides. AngularJS fournit également des capacités de liaison de données pour HTML, permettant une synchronisation automatique des données entre les composants du modèle et de la vue.

ExpressJS Comment simplifier les opérations côté serveur dans les applications de pile moyenne?

ExpressJS est un cadre d'applications Web Node.js minimal et flexible qui fournit un ensemble puissant de fonctionnalités pour les applications Web et mobiles. Il simplifie les opérations côté serveur en fournissant une interface simple pour créer des applications Web uniques, multi-pages et hybrides. Il aide également à gérer le routage, les demandes et les vues et effectuer des opérations de middleware.

Comment Node.js améliore-t-il les performances des applications de pile moyenne?

Node.js est une plate-forme construite sur le runtime JavaScript basé sur Chrome pour la création facile de créer des applications Web rapides et évolutives. Il utilise des modèles d'E / S non bloquants, ce qui le rend léger et efficace, ce qui le rend idéal pour les applications en temps réel à forte intensité de données exécutées sur des appareils distribués. Cela améliore les performances de l'application de pile moyenne en lui permettant de traiter simultanément plusieurs demandes client sans décalage.

Quelles sont les conditions préalables pour développer une application de pile moyenne?

Pour développer une application de pile moyenne, vous avez besoin d'une compréhension de base de JavaScript et HTML. Vous devez également connaître les bases de données NoSQL (en particulier MongoDB), ainsi que pour comprendre les scripts côté client et serveur. Il est crucial de connaître AngularJS, ExpressJS et Node.js. De plus, la compréhension des technologies JSON et Ajax sera très avantageuse.

Comment la catégorie des moyens se compare-t-elle aux autres options de pile complète?

La pile moyenne est entièrement basée sur JavaScript et fournit un processus de développement transparent car la même langue peut être utilisée du côté client et du serveur. Il s'agit du principal avantage des autres options complètes qui nécessitent une compétence dans plusieurs langues. De plus, l'architecture non bloquante de Node.js rend les applications de pile moyennes rapides et évolutives, ce qui en fait le premier choix pour les applications en temps réel.

Puis-je utiliser une autre base de données dans la pile moyenne?

Bien que MongoDB soit la base de données par défaut dans la pile moyenne car elle est compatible avec JavaScript, d'autres bases de données sont disponibles. Cependant, cela peut nécessiter une configuration et des ajustements de code supplémentaires, et les flux de données transparents connus de la pile moyenne peuvent être affectés. Par conséquent, à moins qu'il n'y ait un besoin spécifique d'utiliser une base de données différente, il est recommandé d'utiliser MongoDB.

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!