Share
Les applications Web à page unique - ou SPA, comme on les appelle couramment - deviennent rapidement la norme de facto pour le développement d'applications Web. Le fait qu'une partie importante de l'application fonctionne dans une seule page Web la rend très intéressante et attrayante, et la croissance accélérée des capacités du navigateur nous rapproche de la journée, lorsque toutes les applications s'exécutent entièrement dans le navigateur..
Techniquement, la plupart des pages Web sont déjà des SPA. c'est la complexité d'une page qui différencie un page Web de application web. À mon avis, une page devient une application lorsque vous intégrez des flux de travail, des opérations CRUD et une gestion d'état autour de certaines tâches. Vous travaillez avec un SPA lorsque chacune de ces tâches se déroule sur la même page (en utilisant AJAX pour la communication client / serveur, bien sûr).
Commençons par cette compréhension commune et examinons certaines des choses les plus importantes à prendre en compte lors de la création de ZPS..
Il y a de nombreux points à considérer avant de construire une nouvelle application; Pour aggraver les choses, le vaste paysage du développement Web peut être intimidant au départ. J'ai été dans ces chaussures troublantes, mais heureusement, ces dernières années ont permis de dégager un consensus sur les outils et techniques qui rendent l'expérience de développement d'applications aussi agréable et productive que possible.
La plupart des applications sont constituées de composants client et serveur; Bien que cet article se concentre principalement sur la partie cliente d'une application, je fournirai quelques pointeurs côté serveur vers la fin de cet article..
Il existe un mélange coloré de technologies côté client, ainsi que plusieurs bibliothèques et pratiques permettant une expérience de développement d'applications productive. Ceci peut être résumé en utilisant le nuage de mots suivant.
Je développerai chacun des points ci-dessus dans les sections suivantes.
Il y a une abondance de cadres parmi lesquels choisir. Voici une poignée des plus populaires:
Le choix d'un framework est facilement l'un des choix les plus importants que vous ferez pour votre application. Vous voudrez certainement choisir le meilleur cadre pour votre équipe et votre application. Chacun des cadres ci-dessus incorpore le modèle de conception MVC (sous une forme ou une autre). En tant que tel, il est assez courant de les appeler des frameworks MVC. Si nous devions commander ces cadres sur une échelle de complexité, de courbe d'apprentissage et de jeu de fonctionnalités, de gauche à droite, cela pourrait ressembler à:
Bien qu'ils soient différents dans leur mise en œuvre et leur niveau de sophistication, tous les cadres susmentionnés fournissent certaines abstractions communes, telles que:
Au cours des cinq dernières années, les bibliothèques, les outils et les pratiques ont connu une croissance explosive..
Des infrastructures plus avancées, telles que CanJS, BatmanJS, EmberJS et AngularJS, développent ces fonctionnalités de base en prenant en charge la liaison automatique des données et les modèles côté client. Les modèles sont liés aux données et maintiennent la vue synchronisée avec toutes les modifications apportées au modèle. Si vous décidez de choisir un framework avancé, vous obtiendrez certainement de nombreuses fonctionnalités prêtes à l'emploi, mais il attend également de vous que vous construisiez votre application d'une certaine manière..
Meteor est le seul framework à pile complète de tous les frameworks précédemment listés. Il fournit des outils non seulement pour le développement côté client, mais il fournit également un élément côté serveur, via NodeJS, et une synchronisation de modèle de bout en bout, via MongoDB. Cela signifie que, lorsque vous enregistrez un modèle sur le client, il persiste automatiquement dans MongoDB. C'est une option fantastique, si vous exécutez un backend Node et utilisez MongoDB pour la persistance.
En fonction de la complexité de votre application, vous devez choisir le cadre qui vous rend le plus productif. Il y aura certainement une courbe d'apprentissage, mais c'est un péage unique que vous payez pour le développement de la voie rapide. Assurez-vous de prendre un peu de temps pour évaluer ces cadres, sur la base d'un cas d'utilisation représentatif..
Remarque: Si vous voulez en savoir plus sur ces frameworks de leurs créateurs, écoutez ces vidéos de ThroneJS.
Les systèmes de templates basés sur JavaScript les plus populaires sont les templates Underscore et les guidons..
Certains des frameworks avancés de la section précédente offrent des systèmes de templates intégrés.
Par exemple, EmberJS dispose d’un support intégré pour les guidons. Cependant, vous devez envisager un moteur de template si vous décidez d'utiliser un framework lean, tel que Backbone. Le soulignement est un excellent point de départ si vos besoins en modèles sont limités. Sinon, le guidon est idéal pour les projets plus avancés. Il offre également de nombreuses fonctionnalités intégrées pour des modèles plus expressifs.
Si vous constatez que vous avez besoin d'un grand nombre de modèles côté client, vous pouvez économiser du temps de calcul en compilant à l'avance les modèles sur le serveur. La pré-compilation vous donne des fonctions JavaScript simples que vous appelez pour améliorer le temps de chargement de la page. Handlebars prend en charge la pré-compilation, ce qui vaut la peine de consacrer du temps et des efforts à une exploration complète.
Les utilisateurs d’ExpressJS peuvent même utiliser le même moteur de création de modèles sur le client que sur le serveur, ce qui vous permet de partager vos modèles entre le client et le serveur..
L'utilisation d'un pré-processeur nécessite une étape supplémentaire dans votre processus de construction..
Le code JavaScript est traditionnellement ajouté à la page, via le bouton >
Accentsconagua