Architecture d'un JavaScript application web unique page?

StackOverflow https://stackoverflow.com/questions/3050869

Question

Comment structurer une seule page complexe JS application web sur le côté client? Plus précisément, je suis curieux de savoir comment la structure proprement l'application en termes de ses objets modèles, composants d'interface utilisateur, tous les contrôleurs et la manipulation d'objets persistance du serveur.

MVC semblait un ajustement au début. Mais avec les composants d'interface imbriqués à différentes profondeurs (chacune avec leur manière d'agir sur / réaction aux données du modèle, et chaque événement générant eux-mêmes qu'ils peuvent ou ne peuvent pas gérer directement), il ne semble pas comme MVC peut être proprement appliqué. (Mais s'il vous plaît me corriger si ce n'est pas le cas.)

-

( Cette question a donné lieu à deux suggestions d'utilisation ajax, ce qui est évidemment nécessaire pour autre chose que la plupart application d'une page triviale.)

Était-ce utile?

La solution

PureMVC / JS est le plus élégant de l'OMI . J'ai appris beaucoup de lui. J'ai aussi trouvé Scalable JavaScript Application Architecture par Nicholas Zakas utile dans la recherche d'options d'architecture côté client.

Deux autres conseils

  1. Je l'ai trouvé vue, mise au point et la gestion des intrants sont des domaines qui nécessitent une attention particulière dans les applications web page unique
  2. J'ai aussi trouvé utile de abstraire la bibliothèque JS, en laissant la porte ouverte à l'esprit de changement sur ce que vous utilisez, ou mix & match en cas de besoin.

Autres conseils

Présentation de Nicholas Zakas comme partagée par Dean est un très bon endroit pour commencer. Je luttais aussi répondre pendant un certain temps la même question. Après avoir fait quelques produits à grande échelle Javascript, idée de partager les leçons apprises comme une architecture de référence au cas où quelqu'un a besoin. Jetez un oeil à:

http://boilerplatejs.org/

Il aborde les problèmes de développement Javascript communes telles que:

  • structuration Solution
  • Création d'hiérarchie du module complexe
  • Self contained composants d'interface utilisateur
  • L'événement basé sur les communications entre le module
  • Routing, Histoire, Bookmarking
  • Tests unitaires
  • Localisation
  • Génération de documents

etc.

Les I façon construire des applications:

  • Cadre ExtJS, app seule page, chaque composant défini dans un fichier JS séparé, chargé sur demande
  • Tous les contacts composant son propre service Web dédié (parfois plus d'un), l'extraction de données dans les magasins de ExtJS ou des structures de données à usage spécial
  • Le rendu utilise des composants standards de ExtJS, donc je peux lier les magasins aux réseaux, les formes de charge de dossiers, ...

Il suffit de choisir un cadre javascript, et suivez ses meilleures pratiques. Mes favoris sont ExtJS et GWT, mais YMMV.

Ne pas rouler votre propre solution pour cela. L'effort nécessaire pour reproduire ce que les cadres javascript modernes font est trop grand. Il est toujours plus rapide d'adapter quelque chose existant que de construire tout à partir de zéro. 

Question - What makes an application complex ?

Réponse - L'utilisation de mot « complexe » dans la question elle-même. Par conséquent, une tendance commune sera de chercher une bonne solution complexe depuis 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é, aujourd'hui encore, est complexe pour moi, mais pas à Sir Isaac Newton qui l'a découvert en 1655 

Question - What tools can I use to deal with complexity ?

Réponse -. La compréhension et la simplicité 

Question - But I understand my application . Its still complex ?

Réponse - Réfléchissez à deux fois, parce que la compréhension et la complexité ne coexistent pas. Si vous comprenez une énorme demande énorme, je suis sûr que vous conviendrez qu'il n'y a rien, mais une intégration des unités petites et simples. 

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Réponse - Parce que,

-> SPA est pas une sorte de technologie de base qui réinventées pour laquelle nous avons besoin de réinventer la roue pour beaucoup de choses que nous faisons dans le développement d'applications.

-> Son concept motivée par la nécessité pour de meilleures performances, la disponibilité, l'évolutivité et la maintenabilité des applications Web.

-> Son un modèle de conception assez récemment identifié, donc une compréhension de SPA en tant que modèle de conception va très loin prendre des décisions éclairées sur l'architecture d'un SPA.

-> Au niveau racine ne SPA est complexe, car après avoir compris les besoins d'une application et le motif de SPA, vous vous rendrez compte que vous créez encore une application, à peu près de la même façon que vous avez fait avant avec quelques modifications et réarrangements dans l'approche de développement. 

Question - What about the use of Frameworks ?

Réponse - Les cadres sont le code de la plaque de la chaudière / solution pour certains modèles communément identifiés et génériques, par conséquent, ils peuvent enlever x% (variable en fonction de l'application) charge du développement d'applications mais pas beaucoup devrait attendre d'eux spécialement pour les applications lourdes et de plus en plus. Il est toujours un bon cas pour être dans le contrôle complet de la structure de votre application et flux mais surtout le code correspondant. Il devrait y avoir pas 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 en fonction de la nature de votre demande. composants d'application. Catégoriser Recherchez un cadre existant qui est proche de votre cadre dérivé, si vous le trouvez, utilisez-le, si vous ne trouvez pas alors je suggère d'aller de l'avant avec votre propre. Création cadre est tout à fait un effort initial mais produit de meilleurs résultats à long terme. Certains composants de base dans mon cadre de SPA sont les suivants:

  • Source de données: Modèles / Collections des modèles

  • Majoration pour la présentation des données: Modèles

  • Interaction avec l'application: Evénements

  • capture Etat et navigation: routage

  • utilitaires, widgets et des plug-ins: bibliothèques

Permettez-moi de savoir si cela a contribué de quelque façon et bonne chance avec votre architecture SPA !!

La meilleure chose à faire est de regarder par exemple les utilisations d'autres cadres:

TodoMVC showcases beaucoup de nombreux cadres SPA.

Vous pouvez utiliser javascript framework MVC http://javascriptmvc.com/

L'application web que je travaille actuellement sur les utilisations JQuery et je ne le recommanderais pas pour une grande application Web d'une seule page. La plupart des cadres à savoir Dojo, Yahoo, Google et d'autres utilisent leurs espaces de noms dans les bibliothèques, mais JQuery ne pas ce qui est un inconvénient important.

Si votre site Web est destiné à être petite, JQuery serait ok mais si vous aviez l'intention de construire un grand site alors je vous conseille de regarder du tout le Javascript frameworks disponibles et décider que l'on rencontre le mieux à vos besoins.

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 en JSON que vous revenez en fait à partir du serveur via ajax et le javascirpt utilise JSON pour rendre html .

Je recommande la lecture du livre Ajax en action comme il couvre la plupart des choses que vous devez savoir.

J'utilise Samm.js dans plusieurs applications une page avec un grand succès

Je voudrais aller avec jQuery MVC

Consultez http://bennadel.com/projects/cormvc-jquery-framework .htm Ben est assez forte et si vous creusez sur son blog, il a quelques bons messages sur la façon dont CorMVC est mis en place et pourquoi.

Alternative: jetez un oeil à ItsNat

Pensez en JavaScript mais le code même en Java dans le serveur avec les mêmes API DOM, dans le serveur est beaucoup plus facile de gérer votre application sans client personnalisé / ponts parce que l'interface utilisateur et les données sont ensemble.

NikaFramework vous permet de créer l'application d'une seule page. vous permet également d'écrire HTML , CSS ( SASS ), JavaScript dans des fichiers séparés et les regrouper en un seul fichier de sortie à la fin.

Je recommande d'explorer Yeoman . Il vous permet d'utiliser existantes « meilleures pratiques » pour votre nouveau projet.

Par exemple:

si vous décidez d'utiliser angularjs, il y a un Yeoman générateur , vous donner une structure pour le routage, des vues, des services, etc. vous permettent également de tester, rapetisser votre code, etc.

Si vous décidez d'utiliser Backbone, la caisse ce générateur

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top