Architecture d'une application web JavaScript à page unique ?

Question

Comment structurer une application Web JS complexe à page unique du 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 éventuels et d'objets gérant la persistance du serveur.

MVC semblait convenir au début. Mais avec des composants d'interface utilisateur imbriqués à différentes profondeurs (chacun ayant sa propre façon d'agir sur/réagir aux données du modèle, et chacun générant des événements qu'il peut ou non gérer 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 donné lieu à deux suggestions d'utilisation d'ajax, ce qui est évidemment nécessaire pour toute application autre que la plus triviale à une page).

Answer 1

Architecture MVC de PureMVC/JS est le plus élégant, selon moi. J'ai beaucoup appris grâce à lui. J'ai aussi trouvé Architecture d'application JavaScript évolutive par Nicholas Zakas, utile dans la recherche d'options d'architecture côté client.

Deux autres conseils

1. J'ai constaté que l'affichage, 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.
2. 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 pour mélanger et assortir si le besoin s'en fait sentir.

Answer 2

La présentation de Nicholas Zakas, partagée par Dean, est un très bon point de départ. J'ai également lutté pendant un certain temps pour répondre à la même question. Après avoir réalisé quelques produits Javascript à grande échelle, j'ai pensé partager mes connaissances en tant qu'architecture de référence au cas où quelqu'un en aurait besoin. Jetez un coup d'oeil :

http://boilerplatejs.org/

Il aborde les préoccupations courantes liées au développement de Javascript, telles que :

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

etc.

Answer 3

Vous pouvez essayer angularJS ou backboneJS

Answer 4

La façon dont je construis les applications :

• Cadre ExtJS, application à page unique, chaque composant étant défini dans un fichier JS distinct, 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, de sorte que je peux lier des magasins à des grilles, charger des formulaires à partir d'enregistrements, ...

Il suffit de choisir un framework javascript, et de suivre ses meilleures pratiques. Mes préférés sont ExtJS et GWT, mais YMMV.

N'élaborez PAS votre propre solution à ce sujet. L'effort requis pour dupliquer ce que les frameworks javascript modernes font est trop important. Il est toujours plus rapide d'adapter quelque chose d'existant que de tout construire à partir de zéro.

Answer 5

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

TodoMVC présente de nombreux frameworks SPA.