Architecture d'une application web JavaScript d'une seule page?

Question

Comment une application Web JS d'une seule page complexe devrait-elle être structurée côté client? Plus précisément, je suis curieux de savoir comment structurer proprement l'application en termes d'objets de modèle, de composants d'interface utilisateur, de contrôleurs et d'objets gérant la persistance du serveur.

MVC semblait au premier abord. Mais avec des composants d'interface utilisateur imbriqués à différentes profondeurs (chacun avec sa propre façon d'agir sur/réagir aux données du modèle, et chacun générant des événements qu'ils peuvent eux-mêmes gérer ou non directement), il ne semble pas que MVC puisse être appliqué proprement. (Mais veuillez me corriger si ce n'est pas le cas.)

-

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

Dean Burge · Accepted Answer

L'architecture MVC de PureMVC/JS est l'OMI la plus élégante. J'en ai beaucoup appris. J'ai également trouvé Architecture d'application JavaScript évolutive par Nicholas Zakas utile dans la recherche d'options d'architecture côté client.

Deux autres conseils

J'ai trouvé que la vue, la concentration 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 d'abstraire la bibliothèque JS, laissant la porte ouverte pour changer d'avis sur ce que vous utilisez, ou mélanger et assortir si le besoin s'en faisait sentir.

Hasith · Answer

La présentation de Nicholas Zakas telle que partagée par Dean est un très bon point de départ. J'ai également eu du mal à répondre à la même question pendant un certain temps. Après avoir fait 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. Jettes un coup d'oeil à:

http://boilerplatejs.org/

Il répond aux préoccupations courantes de développement Javascript telles que:

Structuration de la solution
Création d'une hiérarchie de modules complexe
Composants d'interface utilisateur autonomes
Communication inter-modules basée sur les événements
Routage, histoire, bookmarking
Tests unitaires
Localisation
Génération de documents

etc.

Joeri Sebrechts · Answer

La façon dont je crée des applications:

Framework ExtJS, application d'une seule page, chaque composant défini dans un fichier JS distinct, chargé à la demande
Chaque composant contacte son propre service Web dédié (parfois plusieurs), récupérant des données dans des magasins ExtJS ou des structures de données à usage spécial
Le rendu utilise des composants ExtJS standard, je peux donc lier des magasins à des grilles, charger des formulaires à partir d'enregistrements, ...

Choisissez simplement un framework javascript et suivez 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 frameworks javascript modernes est trop important. Il est toujours plus rapide d'adapter quelque chose d'existant que de tout construire à partir de zéro.

Prakash Tiwari · Answer

Question - What makes an application complex ?

Réponse - L'utilisation de Word "complexe" dans la question elle-même. Par conséquent, une tendance commune sera de rechercher 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échissez bien, car la compréhension et la complexité ne coexistent pas. Si vous comprenez une énorme application énorme, je suis sûr que vous conviendrez qu'il ne s'agit que d'une intégration de petites unités simples.

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 nouvellement inventée pour laquelle nous devons réinventer la roue pour beaucoup de choses que nous faisons dans le développement d'applications.

-> C'est un concept motivé par la nécessité d'améliorer les performances, la disponibilité, l'évolutivité et la maintenabilité des applications Web.

-> C'est un modèle de conception assez récemment identifié, donc une compréhension du SPA en tant que modèle de conception permet de prendre des décisions éclairées sur l'architecture d'un SPA.

-> Au niveau racine, aucun SPA n'est complexe, car après avoir compris les besoins d'une application et le modèle SPA, vous vous rendrez compte que vous créez toujours une application, à peu près de la même manière que vous l'avez fait auparavant avec quelques modifications et réarrangements dans l'approche du développement.

Question - What about the use of Frameworks ?

Réponse - Les cadres sont un code/une solution de plaque de chaudière pour certains modèles génériques et couramment identifiés, ils peuvent donc prendre x% (variable, en fonction de l'application) de la charge du développement de l'application, mais il ne faut pas en attendre beaucoup d'eux spécialement pour les lourds et des applications croissantes. C'est toujours un bon cas pour être en contrôle total de la structure et du flux de votre application, mais surtout du code pour cela. Il ne doit 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 infrastructure en fonction de la nature de votre application. Catégorisez les composants d'application. Recherchez un framework existant qui est proche de votre framework dérivé, si vous le trouvez, utilisez-le, si vous ne le trouvez pas, je vous suggère d'aller de l'avant avec le vôtre. La création d'un cadre est un effort initial mais produit de meilleurs résultats à long terme. Certains composants de base de mon framework SPA seront:

Source de données: modèles/collections de modèles
Marquer pour présenter des données: modèles
Interaction avec l'application: événements
Capture d'état et navigation: routage
Utilitaires, widgets et plug-ins: bibliothèques

Faites-moi savoir si cela a aidé de quelque façon que ce soit et bonne chance avec votre architecture SPA !!

Adam Gent · Answer

La meilleure chose à faire est de regarder des exemples d'utilisation d'autres frameworks:

TodoMVC présente de nombreux frameworks SPA.

eaglestorm · Answer

L'application Web sur laquelle je travaille actuellement utilise JQuery et je ne le recommanderais pas pour une grande application Web d'une seule page. La plupart des frameworks, c'est-à-dire Dojo, Yahoo, Google et 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, JQuery conviendrait, mais si vous aviez l'intention de créer un grand site, je recommanderais de regarder tous les cadres Javascript disponibles et de décider lequel répond le mieux à vos besoins.

Et je recommanderais 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 via ajax et le javascirpt utilise le json pour rendre le html.

Je recommanderais de lire le livre Ajax en action car il couvre la plupart des choses que vous devrez savoir.

NicoGranelli · Answer

J'utilise Samm.js dans plusieurs applications d'une page avec beaucoup de succès

bjornd · Answer

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

cody · Answer

Ou jetez un œil à https://github.com/flosse/scaleApp

jmarranz · Answer

Alternative: jetez un œil à ItsNat

Pensez en JavaScript mais codez de la même manière en Java sur un serveur avec les mêmes API DOM, dans le serveur, il est beaucoup plus facile de gérer votre application sans client/ponts personnalisés car l'interface utilisateur et les données sont ensemble.