Architecture d'une application web JavaScript monopage?


99

Comment une application Web JS complexe d'une seule page doit-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 être un ajustement au début. Mais avec les composants de l'interface utilisateur imbriqués à différentes profondeurs (chacun avec sa propre façon d'agir / réagir aux données du modèle, et chacun générant des événements qu'ils peuvent 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 abouti à deux suggestions d'utilisation d'ajax, ce qui est évidemment nécessaire pour tout autre chose que l'application d'une page la plus triviale.)


Vous pouvez essayer angularJS ou backboneJS
Romain

2
Pouvez-vous fournir vos propres idées pour cette question? Cela fait un moment que vous n'avez pas posé cette question et je suis intéressé de savoir quels sont les aspects les plus importants que vous avez appris de votre propre expérience avec les SPA Javascript.
Adrian Moisa

Réponses:


35

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

Deux autres conseils

  1. J'ai trouvé que la gestion des vues, de la mise au point et 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 résumer 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 fait sentir.

13

La présentation de Nicholas Zakas telle que partagée par Dean est un très bon point de départ. J'avais également 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 problèmes de développement Javascript courants tels que:

  • Structuration de la solution
  • Créer une hiérarchie de modules complexes
  • Composants d'interface utilisateur autonomes
  • Communication inter-modules basée sur les événements
  • Routage, historique, bookmarking
  • Test unitaire
  • Localisation
  • Génération de documents

etc.


10

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

  • Framework ExtJS, application d'une seule page, chaque composant défini dans un fichier JS séparé, 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, je peux donc lier les 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 lancez 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.


10
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 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é est encore aujourd'hui 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 à deux fois, car la compréhension et la complexité ne coexistent pas. Si vous comprenez une énorme application énorme, je suis sûr que vous conviendrez que ce n'est rien d'autre qu'une intégration d'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 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 le besoin de meilleures performances, disponibilité, évolutivité et 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 la démarche de développement.

Question - What about the use of Frameworks ?

Réponse - Les cadres sont un code / une solution de chaudière pour certains modèles couramment identifiés et génériques, ils peuvent donc retirer une charge de x% (variable, en fonction de l'application) du développement de l'application, mais il ne faut pas en attendre beaucoup, spécialement pour les gros et des applications en croissance. C'est toujours un bon cas d'avoir le contrôle complet de la structure et du flux de votre application, mais surtout du code correspondant. Il ne doit y avoir aucune zone grise ou noire dans le code de l'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 application. Catégorisez les composants de l'application. Recherchez un cadre existant qui est proche de votre cadre dérivé, si vous le trouvez, utilisez-le, si vous ne le trouvez pas, je vous suggère de continuer avec le vôtre. Créer 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

  • Marquage pour la présentation 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 vous a aidé de quelque manière que ce soit et bonne chance avec votre architecture SPA !!


1
Cela ajoute une bonne perspective (c'est généralement rare). THX!
Cody

4

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

TodoMVC présente de nombreux frameworks SPA.



1

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 à savoir 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 majeur.

Si votre site Web est destiné à être petit, JQuery conviendrait, mais si vous aviez l'intention de créer un grand site, je vous recommanderais de consulter tous les frameworks 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 html.

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


jQuery peut être écrit (comme n'importe quel JS) dans un espace de noms en utilisant des prototypes. Je ne suis pas sûr que ce soit une fonctionnalité suffisamment large ou assez obscure pour justifier l'abstraction derrière un cadre - je préfère savoir ce que fait réellement JS. stackoverflow.com/questions/881515/…
SimplGy

4
JQuery n'est pas conçu comme une infrastructure d'application côté client. Il vise un «niveau inférieur». JQuery est conçu pour simplifier la traversée de documents HTML, la gestion des événements, l'animation et les opérations Ajax et pour éliminer les différences entre les navigateurs. Pour les applications plus volumineuses, vous devez utiliser un cadre d'application côté client tel que knockout ou backbone EN CONJONCTION AVEC JQuery.
Sam Shiles

Donc, mon argument est toujours valable si le knockout ou l'épine dorsale n'inclut pas, la traversée de documents, la gestion des événements, etc. alors il ne vaut pas grand-chose. Le framework d'application YUI3 le fait et il n'est pas nécessaire d'utiliser JQuery si vous l'utilisez.
eaglestorm

1
jquery conserve toutes ses méthodes stockées dans la variable jQuery et la variable $. Si vous utilisez l'option sans conflit, seul le nom jQuery est créé dans l'espace de noms global. jQuery n'est pas un framework, juste une bibliothèque, il ne vous dit pas comment faire les choses, donne juste quelques raccourcis pour faire des choses courantes. Comparer jQuery à Dojo / YUI, etc. est faux.
Hoffmann

1
@eaglestorm Votre instruction if est évaluée à false.
John Lehmann




0

Alternative: jetez un œil à ItsNat

Pensez en JavaScript mais codez de la même manière en Java dans 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.



0

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


0

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

Par exemple:

si vous décidez d'utiliser Angular.js, il existe un générateur Yeoman , qui vous donne une structure pour le routage, les vues, les services, etc. Vous permet également de tester, de réduire votre code, etc.

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.