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.)
Réponses:
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
la source
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:
etc.
la source
La façon dont je crée des applications:
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.
la source
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.
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.
Réponse - Compréhension et simplicité.
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.
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.
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.
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 !!
la source
La meilleure chose à faire est de regarder des exemples d'utilisation d'autres frameworks:
TodoMVC présente de nombreux frameworks SPA.
la source
Vous pouvez utiliser le framework javascript MVC http://javascriptmvc.com/
la source
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.
la source
J'utilise Samm.js dans plusieurs applications d'une page avec beaucoup de succès
la source
J'irais avec jQuery MVC
la source
Consultez http://bennadel.com/projects/cormvc-jquery-framework.htm Ben est assez pointu et si vous fouillez sur son blog, il a quelques bons articles sur la façon dont CorMVC est mis en place et pourquoi.
la source
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.
la source
Ou jetez un œil à https://github.com/flosse/scaleApp
la source
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.
la source
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
la source