Architecture D'une application Web JavaScript d'une seule page?
comment une application web JS complexe d'une page devrait-elle être structurée du côté du client? Spécifiquement je suis curieux sur la façon de structurer proprement l'application en termes de ses objets modèles, composants UI, n'importe quels contrôleurs, et la persistance des objets manipulant le serveur.
MVC avait l'air en forme au début. Mais avec des composantes de L'interface utilisateur imbriquées à des profondeurs diverses (chacune avec sa propre façon d'agir sur les données du modèle ou de réagir à ces données, et chaque événement générateur qu'elle peut elle-même produire). ou peut ne pas manipuler directement), il ne semble pas que MVC peut être appliqué proprement. (Mais corrigez-moi si ce n'est pas le cas.)
--
( Cette question a donné lieu à deux suggestions de l'utilisation de l'ajax, ce qui est évidemment nécessaire pour rien d'autre que le plus trivial d'une page d'application.)
14 réponses
MVC architecture de PureMVC / JS est le IMO le plus élégant. J'ai beaucoup appris d'elle. J'ai également trouvé Scalable JavaScript Application Architecture par Nicholas Zakas utile dans la recherche côté client options d'architecture.
deux autres conseils
- j'ai trouvé que la vue, la mise au point et la gestion des entrées sont des domaines qui nécessitent une attention particulière dans les applications web à page unique
- J'ai également trouvé utile de faire abstraction de la bibliothèque JS, en laissant la porte ouverte pour changer d'avis sur ce que vous utilisez, ou mélanger et faire correspondre si le besoin se présente.
la présentation de Nicholas Zakas, telle que partagée par Dean, est un très bon point de départ. J'ai également du mal à répondre à la même question pendant un moment. Après avoir réalisé quelques produits Javascript à grande échelle, j'ai pensé partager les apprentissages comme une architecture de référence au cas où quelqu'un en aurait besoin. Regardez:
il traite des problèmes courants de développement Javascript tels que:
- structuration de la Solution
- Créer des complexes de module hiérarchie
- composantes autonomes de L'assurance-chômage
- basée sur les Événements entre le module de communication
- Routage, L'Histoire, La Mise En Signet
- Tests Unitaires
- localisation
- Production De Documents
etc.
La façon dont je construis des applications:
- framework ExtJS, single page app, tous les composants définis dans un autre fichier JS, chargé à la demande
- chaque composant contacte son propre service web dédié (parfois plus d'un), récupérant des données dans des magasins ExtJS ou des structures de données spéciales
- le rendu utilise des composants ExtJS standard, donc je peux lier des magasins aux grilles, charger des formes à partir d'enregistrements, ...
il suffit de choisir un cadre javascript et de suivre ses meilleures pratiques. Mes favoris sont ExtJS et GWT, mais YMMV.
ne roulez pas votre propre solution pour cela. L'effort requis pour dupliquer ce que font les cadres javascript modernes est trop important. Il est toujours plus rapide d'adapter quelque chose existant que de tout construire à partir de rien.
Question - What makes an application complex ?
Réponse - L'utilisation du mot "complexe" dans la question elle-même. Par conséquent, une tendance commune sera à chercher une solution complexe dès le début.
Question - What does the word complex means ?
Réponse - Tout ce qui est inconnu ou partiellement compris. Exemple: la théorie de la gravité, même aujourd'hui, est complexe pour moi, mais pas pour Sir Isaac Newton qui l'a découverte en 1655.
Question - What tools can I use to deal with complexity ?
réponse-compréhension et simplicité.
Question - But I understand my application . Its still complex ?
réponse-réfléchir à deux fois, parce que la compréhension et la complexité ne coexistent pas. Si vous comprenez un énorme énorme demande, je suis sûr que vous conviendrez qu'il n'est rien mais une intégration des petites et simples unités.
Question - Why all of the above philosophical discussion for a question on
Single Page Application (SAP)?
Réponse-Parce Que,
- > SPA n'est pas une sorte de technologie de base qui est nouvellement inventé pour lequel nous devons réinventer la roue pour beaucoup de choses que nous faisons dans le développement d'applications.
-> Sa un concept poussé par le besoin pour améliorer les performances, la disponibilité, l'évolutivité et la maintenabilité des applications web.
-> Son assez nouvellement identifiés modèle de conception, de sorte que la compréhension de SPA ainsi qu'un design pattern va long chemin dans la prise de décisions éclairées à propos de l'architecture d'un SPA.
- > au niveau de la racine aucun SPA est complexe, parce qu'après avoir compris les besoins d'une application et le SPA pattern, vous vous rendrez compte que vous créez encore une application, à peu près de la même façon que vous l'avez fait avant avec quelques modifications et réarrangements dans l'approche de développement.
Question - What about the use of Frameworks ?
Réponse - Cadres sont chaudière plaque de code / solution pour certains communément identifiés et des modèles génériques, par conséquent, ils peuvent décoller x% (variable, en fonction de la demande), de la charge de développement d'applications, mais alors pas un lot doit être attendu d'eux, spécialement pour les lourds et la croissance des applications. C'est toujours un bon cas d'être en contrôle complet de votre structure d'application et le flux, mais surtout le code pour elle. Il ne devrait pas y avoir de zones grises ou noires dans le code d'application.
Question - Can you suggest one of the many approaches to SPA architecture ?
réponse-pensez à votre propre cadre basé sur la nature de votre demande. Catégoriser les composantes de la demande. Rechercher un cadre qui est proche de votre dérivés cadre, si vous trouvez qu'il faut l'utiliser, si vous ne le trouvez pas alors Je suggère d'aller de l'avant avec votre propre. La création d'un cadre est un effort tout à fait initial, mais produit de meilleurs résultats à long terme. Certains éléments de base de mon cadre de SPA seront les suivants:
-
source des données: Modèles / Collections de Modèles
-
Marque pour présenter des données : les Modèles
-
Interaction avec la demande: événements
-
État de la capture et de la navigation : Routage
-
Utilitaires , des widgets et plugins : bibliothèques
dites-moi si cela a aidé d'une manière ou d'une autre et bonne chance avec votre architecture SPA !!
vous pouvez utiliser javascript MVC framework http://javascriptmvc.com/
l'application web sur laquelle je travaille actuellement utilise JQuery et je ne la recommande pour aucune application web de grande page. La plupart des cadres, C'est-à-dire Dojo, yahoo, google et d'autres utilisent des espaces de noms dans leurs bibliothèques, mais JQuery ne le fait pas et c'est un inconvénient important.
si votre site web est destiné à être petit alors JQuery serait ok, mais si vous aviez l'intention de construire un grand site alors je recommande d'examiner tous les cadres Javascript disponible et de décider lequel répond le plus à vos besoins.
et je recommande d'appliquer le modèle MVC à votre javascript/html et probablement la plupart de votre modèle d'objet pour le javascript pourrait être fait comme le json que vous retournez réellement du serveur par ajax et le javascirpt utilise le json pour rendre html.
je recommande la lecture du livre Ajax en action car il couvre la plupart des choses que vous aurez besoin de savoir.
J'utilise Samm.js dans plusieurs applications d'une page avec un grand succès
Check out http://bennadel.com/projects/cormvc-jquery-framework.htm Ben est assez vif et si vous creusez autour de son blog il a quelques beaux billets sur la façon dont CorMVC est mis en place et pourquoi.
Alternative: jetez un oeil à ItsNat
pense en JavaScript mais code le même en Java dans le serveur avec le même DOMAPIS, dans le serveur est beaucoup plus facile à gérer votre application sans client personnalisé / ponts parce que L'UI et les données sont ensemble.
"Nikafram Framework " vous permet de créer une application en une seule page. Vous permet également d'écrire HTML , CSS ( SASS ), JavaScript dans des fichiers séparés et les regrouper dans un seul fichier de sortie à la fin.
je recommande d'explorer Yeoman . Il vous permet d'utiliser les "meilleures pratiques" pour votre nouveau projet.
par exemple:
si vous décidez d'utiliser Angulaire.js, il y a un Yeoman generator , qui vous donne une structure pour le routage, les vues, Les services, etc. Vous permet également de tester, de minifier votre code, etc.
si vous décidez d'utiliser la colonne vertébrale, la caisse ceci génératrice