Configuration modulaire de Backbone.js

Question

Je suis novice en matière de backbone, et je suis ici pour vous demander un peu d'aide pour comprendre comment j'élaborerais mon projet webapp actuel. Je développe un panneau d'administration modulaire pour les serveurs. Chaque "page" du panel devrait être un "module" empaqueté comprenant des contrôleurs, des modèles et des vues.

Le panneau se composera d'une vue principale mise en page initialement chargée, avec une navigation de base. Lorsqu'un utilisateur clique sur un lien dans la navigation, une page est chargée via AJAX dans la mise en page. (Et si cela semble stupide/il y a une raison de ne pas le faire s'il vous plaît dites-moi :))

Puisque d'autres vont développer ces pages aussi, et comme ils sont modulaires, je ne sais pas quels modèles, vues et contrôleurs je serai présenté avec à l'intérieur de la page je charge via AJAX.

Comment est-ce que je ferais mieux de le faire avec backbone? Je m'interroge particulièrement sur la façon d'étendre dynamiquement les modèles Backbone etc., et comment je gérerais (par exemple) l'utilisateur quittant la page et/ou la revisitant plus tard. Est-ce que Backbone fournit quelque chose avec lequel je peux travailler, devrai-je me pirater quelque chose ensemble, y a-t-il une meilleure façon de faire les choses qui me manquent?

Answer 1

Votre réflexion sur les problèmes semble très correcte. Rendez vos composants d'interface utilisateur aussi autonomes que possible. Regardez ce 10 min video pour obtenir plus d'informations sur les meilleures pratiques des composants de l'interface utilisateur.

Si vous êtes intéressé par d'autres préoccupations importantes concernant le développement d'applications JavaScript, regardez l'architecture de référence BoilerplateJS que j'ai publiée pour partager mes expériences. Cela contient un exemple d'application similaire à celui que vous avez décrit (menu avec activation de composant).

mes recommandations pour l'activation de votre composant d'interface utilisateur, la désactivation sont:

• Ne pas supprimer/créer des composants DOM. Réutilisez avec hide/show, car vos éléments seront enregistrés en mémoire même après avoir été retirés de DOM
• Réduire au minimum les informations sur l'état du côté client. Lorsqu'un utilisateur revisite le composant, le rafraîchir avec un appel de serveur et le rendre visible (utiliser le serveur comme unique vérité d'information d'état).

Pour plus de détails, voir Implémentations du composant exemple BoilerplateJS. Je connais peu de gens qui l'utilisent avec BackboneJS (actuellement il est livré avec knockoutJS). Nous en enverrons un exemple en utilisant BackboneJS dans v0.2 qui est dû dans une semaine.

Answer 2

Jetez un oeil à Marionette ou Chaplin. Les deux sont construits au-dessus de Backbone et fournissent une manière structurée de construire une application plus grande avec Backbone.

Answer 3

Un cadre de chargement de script modulaire commun utilisé conjointement avec Backbone serait require.js. C'est peut-être ce que vous cherchez. Require.js est tout sur les modules AMD, modules asynchrones. Habituellement, chaque modèle, collection, vue est son propre module qui définit les dépendances dont un module particulier a besoin puis charge ces modules selon les besoins. Il est particulièrement bien adapté pour les grands projets où vous avez beaucoup de morceaux individuels qui doivent être mélangés ensemble à différents points de votre application.

Vous pouvez bien sûr combiner plusieurs éléments de backbone dans un seul module (en général, je le réserve pour les vues et sous-vues spécifiques qui ne seront utilisées qu'avec la vue parente), mais c'est vraiment à vous de décider. Avec Backbone, l'objectif est généralement de créer des applications à une seule page, ce qui signifie que tous les échafaudages de page sont généralement regroupés en un seul fichier et entièrement chargés sur le client dès le départ. Les données de chaque page sont ensuite appelées via ajax et remplies lorsque l'utilisateur navigue et charge différents aspects de l'application. Est-ce que c'est ce que vous vouliez dans votre description?

Si vous cherchez à charger différentes pages du serveur, je ne suis pas sûr que Backbone soit la solution. Il existe d'autres frameworks MVC côté serveur qui permettent d'y parvenir.

Cela touche généralement à la façon dont Backbone est utilisé pour ce genre de chose. Pour ce qui est de l'extension des modèles Backbone et autres, Backbone utilise Underscore comme une dépendance et un trait de soulignement qui fournit une fonction agréable qui peut facilement étendre tous vos objets de la façon dont vous le souhaitez. Surpassant la fonctionnalité par défaut, en lançant des mixins, tout cela est assez facile pour Backbone. En tant que framework, Backbone est très agréable quand il s'agit de modifier, de modifier et de personnaliser chaque petite pièce.En ce qui concerne la gestion des utilisateurs visitant et revisitant des pages, Backbone.router vous permet de créer des URL qui pointent non seulement vers des "pages" spécifiques dans votre application, mais aussi d'exécuter du code arbitraire qui doit être exécuté pour y parvenir. Quelque chose comme un utilisateur connecté visitant "mysite/# compte" déclencherait le routeur pour charger certains scripts qui affichent cette vue particulière ainsi que peut-être les données nécessaires pour obtenir cette vue opérationnelle pour l'utilisateur.

Je ne suis pas sûr s'il y a des ressources là-bas qui vous donnent une sorte de structure de base pour commencer. La plupart des expériences que je connais tendent à passer par les tutoriels de base comme "Todo List" et à se frayer un chemin à partir de là. Je ne suis pas sûr de ce que votre niveau d'expérience est avec javascript ou la programmation en général, mais j'ai commencé avec Backbone ET exiger quand je savais vraiment à peu près rien. Seule une notion vague de ce que JSON était et une compréhension de bas niveau de HTTP comme dans, "c'est cette chose qui obtient des pages web." Cela dit, je pense que Backbone était vraiment facile à obtenir pour moi et cela m'a permis d'approfondir mes connaissances sur la structure complète de l'application de type RESTful côté client.

Il ya une très bonne liste là-bas de l'application "Todo List" dans de nombreuses saveurs différentes telles que Backbone et Knockout et d'autres. Au moment de décider d'un cadre, j'ai essentiellement parcouru ce code en comparant tous les différents cadres disponibles et sélectionnés Backbone, car il semblait juste pour moi le plus logique. Je ne le regrette pas. C'est très amusant et je pense que la meilleure façon d'y arriver est d'essayer quelques tutoriels de démonstration.

Answer 4

Voici tutoriel pour organiser votre application sous forme de modules en utilisant backbone.js

http://backbonetutorials.com/organizing-backbone-using-modules/