Ho cercato di capire l'utilità di backbone.js dal suo sito http://documentcloud.github.com/backbone , ma non riuscivo ancora a capire molto.

Qualcuno può aiutarmi spiegando come funziona e come potrebbe essere utile per scrivere meglio JavaScript?

Backbone.js è fondamentalmente un framework super leggero che ti consente di strutturare il tuo codice Javascript in modo MVC (Model, View, Controller) dove ...

Il modello fa parte del codice che recupera e popola i dati,

View è la rappresentazione HTML di questo modello (le visualizzazioni cambiano quando cambiano i modelli, ecc.)

e Controller opzionale che in questo caso ti consente di salvare lo stato della tua applicazione Javascript tramite un URL hashbang, ad esempio: http://twitter.com/#search?q=backbone.js

Alcuni professionisti che ho scoperto con Backbone:

• Niente più Spaghetti Javascript: il codice è organizzato e suddiviso in file .js semanticamente significativi che vengono successivamente combinati usando JAMMIT

• Non più jQuery.data(bla, bla): non è necessario archiviare i dati nel DOM, archiviare invece i dati nei modelli

• l'associazione di eventi funziona e basta

• libreria di utilità Underscore estremamente utile

• Il codice backbone.js è ben documentato e un'ottima lettura. Mi ha aperto gli occhi su una serie di tecniche di codice JS.

Contro:

• Mi ci è voluto un po 'per avvolgerci la testa e capire come applicarlo al mio codice, ma sono un novizio di Javascript.

Ecco una serie di fantastici tutorial sull'uso di Backbone con Rails come back-end:

CloudEdit: un tutorial Backbone.js con Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps Esiste anche questa meravigliosa classe Collection che ti consente di gestire raccolte di modelli e imitare modelli nidificati, ma non voglio confonderti fin dall'inizio.

Se hai intenzione di creare interfacce utente complesse nel browser, probabilmente ti ritroverai a inventare la maggior parte dei pezzi che compongono framework come Backbone.js e Sammy.js. Quindi la domanda è: stai costruendo qualcosa di abbastanza complicato nel browser da meritare di usarlo (quindi non finisci per inventare la stessa cosa da solo).

Se ciò che prevedi di creare è qualcosa in cui l'interfaccia utente cambia regolarmente la modalità di visualizzazione ma non va al server per ottenere intere nuove pagine , probabilmente avrai bisogno di qualcosa come Backbone.js o Sammy.js. L'esempio cardine di qualcosa del genere è GMail di Google. Se l'hai mai usato, noterai che scarica un grosso pezzo di HTML, CSS e JavaScript quando accedi per la prima volta e poi tutto ciò accade in background. Può passare dalla lettura di un'e-mail all'elaborazione della posta in arrivo e dalla ricerca e viceversa, senza mai richiedere il rendering di una pagina completamente nuova.

È quel tipo di app che questi framework eccellono nel rendere più semplice lo sviluppo. Senza di essi finirai per riunire un insieme diversificato di singole librerie per ottenere parti della funzionalità (ad esempio, jQuery BBQ per la gestione della cronologia, Events.js per eventi, ecc.) O finirai per costruire tutto da solo e dover mantenere e testare tutto da soli. In contrasto con qualcosa come Backbone.js che ha migliaia di persone che lo guardano su Github, centinaia di fork in cui le persone potrebbero lavorarci e centinaia di domande già poste e risposte qui su Stack Overflow.

Ma nulla di tutto ciò ha alcuna importanza se ciò che si prevede di costruire non è abbastanza complicato da valere la curva di apprendimento associata a un framework. Se stai ancora costruendo siti PHP, Java o qualcos'altro in cui il server back-end sta ancora facendo tutto il lavoro pesante di costruzione delle pagine Web su richiesta dell'utente e JavaScript / jQuery è solo la ciliegina su quel processo, non sei " non sarà necessario o non è ancora pronto per Backbone.js.

La spina dorsale è ...

... una libreria di componenti molto piccola che puoi usare per organizzare il tuo codice. Viene fornito in un unico file JavaScript. Escludendo i commenti, ha meno di 1000 righe di JavaScript reale. È scritto in modo ragionevole e puoi leggere tutto in un paio d'ore.

È una libreria front-end, la includi nella tua pagina web con un tag script. Interessa solo il browser e dice poco sul tuo server, tranne che dovrebbe esporre idealmente un'API riposante.

Se hai un'API, Backbone ha alcune utili funzioni che ti aiuteranno a parlarne, ma puoi usare Backbone per aggiungere interattività a qualsiasi pagina HTML statica.

Backbone è per ...

... aggiunta di struttura a JavaScript.

Poiché JavaScript non impone alcun modello particolare, le applicazioni JavaScript possono diventare molto disordinate molto rapidamente. Chiunque abbia costruito qualcosa di oltre banale in JavaScript probabilmente avrà incontrato domande come:

1. Dove memorizzerò i miei dati?
2. Dove inserirò le mie funzioni?
3. Come collegherò le mie funzioni insieme, in modo che vengano chiamate in modo sensato e non si trasformino in spaghetti?
4. Come posso rendere questo codice gestibile da diversi sviluppatori?

Backbone cerca di rispondere a queste domande dandoti:

• Modelli e raccolte per aiutarti a rappresentare dati e raccolte di dati.
• Viste, per aiutarti ad aggiornare il tuo DOM quando i tuoi dati cambiano.
• Un sistema di eventi in modo che i componenti possano ascoltarsi a vicenda. Ciò mantiene i componenti disaccoppiati e previene la spaghettificazione.
• Un insieme minimo di convenzioni sensate, in modo che gli sviluppatori possano lavorare insieme sulla stessa base di codice.

Lo chiamiamo un modello MV *. Modelli, viste ed extra opzionali.

La spina dorsale è leggera

Nonostante le apparenze iniziali, Backbone è incredibilmente leggero, non fa quasi nulla. Quello che fa è molto utile.

Ti dà una serie di piccoli oggetti che puoi creare e che possono emettere eventi e ascoltarsi a vicenda. Ad esempio, è possibile creare un piccolo oggetto per rappresentare un commento, quindi un piccolo oggetto commentView per rappresentare la visualizzazione del commento in un determinato punto del browser.

Puoi dire a commentView di ascoltare il commento e ridisegnare se stesso quando il commento cambia. Anche se hai lo stesso commento visualizzato in più punti della tua pagina, tutte queste viste possono ascoltare lo stesso modello di commento e rimanere sincronizzate.

Questo modo di comporre il codice ti aiuta a evitare di aggrovigliati anche se la tua base di codice diventa molto grande con molte interazioni.

Modelli

All'inizio, è comune archiviare i dati in una variabile globale o nel DOM come attributi di dati . Entrambi hanno problemi. Le variabili globali possono essere in conflitto tra loro e sono generalmente in cattive condizioni. Gli attributi di dati archiviati nel DOM possono essere solo stringhe, dovrai analizzarli nuovamente. È difficile archiviare elementi come matrici, date o oggetti e analizzare i dati in un formato strutturato.

Gli attributi dei dati sono simili al seguente:

<p data-username="derek" data-age="42"></p>

Backbone risolve questo problema fornendo un oggetto Model per rappresentare i dati e i metodi associati . Supponi di avere un elenco di cose da fare, avresti un modello che rappresenta ogni elemento in quell'elenco.

Quando il modello viene aggiornato, genera un evento. Potresti avere una vista legata a quel particolare oggetto. La vista ascolta gli eventi di cambio modello e si esegue nuovamente il rendering.

Visualizzazioni

Backbone fornisce oggetti View che parlano al DOM. Tutte le funzioni che manipolano il DOM o ascoltano gli eventi DOM vanno qui.

Una vista in genere implementa una funzione di rendering che ridisegna l'intera vista, o possibilmente parte della vista. Non è obbligatorio implementare una funzione di rendering, ma è una convenzione comune.

Ogni vista è associata a una parte particolare del DOM, quindi potresti avere un searchFormView, che ascolta solo il modulo di ricerca, e un shoppingCartView, che visualizza solo il carrello.

Le viste sono in genere associate anche a modelli o raccolte specifici. Quando il Modello si aggiorna, genera un evento che la vista ascolta. La vista potrebbe chiamarli render per ridisegnarsi.

Allo stesso modo, quando si digita in un modulo, la vista può aggiornare un oggetto modello. Ogni altra vista che ascolta quel modello chiamerà quindi la propria funzione di rendering.

Questo ci dà una netta separazione delle preoccupazioni che mantiene il nostro codice pulito e ordinato.

La funzione di rendering

È possibile implementare la funzione di rendering in qualsiasi modo lo ritenga opportuno. Potresti semplicemente inserire un po 'di jQuery qui per aggiornare manualmente il DOM.

È inoltre possibile compilare un modello e utilizzarlo. Un modello è solo una stringa con punti di inserimento. Lo si passa a una funzione di compilazione insieme a un oggetto JSON e si ottiene una stringa compilata che è possibile inserire nel DOM.

collezioni

Hai anche accesso a raccolte che memorizzano elenchi di modelli, quindi un todoCollection sarebbe un elenco di todo modelli. Quando una raccolta guadagna o perde un modello, cambia il suo ordine o un modello in una raccolta si aggiorna, l'intera raccolta genera un evento.

Una vista può ascoltare una raccolta e aggiornarsi ogni volta che la raccolta si aggiorna.

È possibile aggiungere metodi di ordinamento e filtro alla propria raccolta e, ad esempio, farla ordinare automaticamente.

Ed eventi per legare tutto insieme

Per quanto possibile, i componenti dell'applicazione sono separati l'uno dall'altro. Comunicano utilizzando gli eventi, quindi un carrello acquisti può ascoltare una raccolta carrello acquisti e ridisegnarsi quando viene aggiunto il carrello.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Ovviamente, anche altri oggetti potrebbero ascoltare lo shoppingCart e fare altre cose come aggiornare un totale o salvare lo stato nella memoria locale.

• Le viste ascoltano Modelli e eseguono il rendering quando il modello cambia.
• Le viste ascoltano le raccolte e visualizzano un elenco (o una griglia, o una mappa, ecc.) Quando un elemento della raccolta cambia.
• I modelli ascoltano le visualizzazioni in modo che possano cambiare stato, magari quando un modulo viene modificato.

Disaccoppiare i tuoi oggetti in questo modo e comunicare usando gli eventi significa che non sarai mai ingarbugliato in nodi e aggiungere nuovi componenti e comportamenti è facile. I tuoi nuovi componenti devono solo ascoltare gli altri oggetti già presenti nel sistema.

Convegni

Il codice scritto per Backbone segue una serie libera di convenzioni. Il codice DOM appartiene a una vista. Il codice di raccolta appartiene a una raccolta. La logica aziendale si inserisce in un modello. Un altro sviluppatore che raccoglierà la tua base di codice sarà in grado di colpire il terreno correndo.

Per riassumere

Backbone è una libreria leggera che presta struttura al tuo codice. I componenti sono disaccoppiati e comunicano tramite eventi in modo da non finire nel caos. Puoi estendere facilmente la tua base di codice, semplicemente creando un nuovo oggetto e facendolo ascoltare correttamente gli oggetti esistenti. Il tuo codice sarà più pulito, più bello e più gestibile.

Il mio piccolo libro

Backbone mi è piaciuto così tanto che ho scritto un piccolo libro introduttivo al riguardo. Puoi leggerlo online qui: http://nicholasjohnson.com/backbone-book/

Ho anche suddiviso il materiale in un breve corso online, che puoi trovare qui: http://www.forwardadvance.com/course/backbone . Puoi completare il corso in circa un giorno.

Ecco una presentazione interessante:

Un'introduzione a Backbone.js

Suggerimento (dalle diapositive):

• Rotaie nel browser? No .
• Un framework MVC per JavaScript? Sorta .
• Una grande macchina a grasso? SÌ !

Backbone.js è un framework JavaScript che ti aiuta a organizzare il tuo codice. È letteralmente una spina dorsale su cui costruire la tua applicazione. Non fornisce widget (come l'interfaccia utente di jQuery o Dojo).

Ti offre un fantastico set di classi base che puoi estendere per creare codice JavaScript pulito che si interfaccia con gli endpoint RESTful sul tuo server.

JQuery e Mootools sono solo una cassetta degli attrezzi con molti strumenti del tuo progetto. Backbone si comporta come un'architettura o una spina dorsale per il progetto su cui è possibile creare un'applicazione utilizzando JQuery o Mootools.

Questo è un video introduttivo abbastanza buono: http://vimeo.com/22685608

Se stai cercando di più su Rails e Backbone, Thoughtbot ha questo libro abbastanza buono (non gratuito): https://workshops.thoughtbot.com/backbone-js-on-rails

Devo ammettere che tutti i "vantaggi" di MVC non hanno mai reso il mio lavoro più facile, veloce o migliore. Rende l'intera esperienza di codifica più astratta e richiede tempo. La manutenzione è un incubo quando si tenta di eseguire il debug di qualcun altro concezione sul significato di separazione. Non so quanti di voi abbiano mai provato ad aggiornare un sito FLEX che utilizzava Cairngorm come modello MVC, ma ciò che dovrebbe richiedere 30 secondi per l'aggiornamento può spesso richiedere più di 2 ore (ricerca / traccia / debug solo per trovare un singolo evento ). MVC è stato ed è ancora, per me, un "vantaggio" che puoi fare.

Ecco un breve post introduttivo che ho scritto su BackboneJS. Spero che sia d'aiuto! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

backbone.js è Model-View-Controller (MVC) con JavaScript ma Extjs migliore di backbone per MVC Pattern di script java

Con la spina dorsale hai la libertà di fare quasi tutto ciò che desideri. Invece di provare a sfogliare l'API e personalizzare vorrei usare Backbonejs per la sua semplicità e facilità di implementazione. Ancora una volta è difficile dire che ciò di cui hai bisogno sia una libreria, un altro un componente

Backbone è stato creato da Jeremy Ashkenas che ha anche scritto CoffeeScript. Come applicazione pesante di JavaScript, quella che ora conosciamo come Backbone era responsabile della strutturazione dell'applicazione in una base di codice coerente. Underscore.js, l'unica dipendenza di backbone, faceva anche parte dell'applicazione DocumentCloud.

Backbone aiuta gli sviluppatori a gestire un modello di dati nella loro app Web sul lato client con la stessa disciplina e struttura che otterresti nella logica tradizionale dell'applicazione lato server.

Ulteriori vantaggi dell'utilizzo di Backbone.js

1. Vedi Backbone come una libreria, non come un framework
2. Javascript ora si sta organizzando in modo strutturato, il modello (MVVM)
3. Grande comunità di utenti

Aggiunge inoltre il routing tramite controller e viste con KVO. Sarai in grado di sviluppare applicazioni "AJAXy" con esso.

Vedilo come una leggera struttura Sproutcore o Cappuccino.

È un modello di progettazione MVC sul lato client, credimi .. Ti farà risparmiare tonnellate di codice, per non parlare di un codice più pulito e chiaro, un codice più facile da mantenere. All'inizio potrebbe essere un po 'complicato, ma credimi è un'ottima biblioteca.

Tante buone risposte già. Backbone js aiuta a mantenere organizzato il codice. La modifica del modello / raccolta si occupa della visualizzazione automatica del rendering che riduce molto il sovraccarico di sviluppo.

Anche se offre la massima flessibilità per lo sviluppo, gli sviluppatori dovrebbero fare attenzione a distruggere i modelli e rimuovere correttamente le viste. Altrimenti potrebbe esserci una perdita di memoria nell'applicazione.

Un'applicazione Web che coinvolge molte interazioni dell'utente con molte richieste AJAX, che deve essere cambiata di volta in volta e che viene eseguita in tempo reale (come Facebook o StackOverflow) dovrebbe utilizzare un framework MVC come Backbone.js. È il modo migliore per creare un buon codice.

Se l'applicazione è solo piccola, allora Backbone.js è eccessivo, soprattutto per gli utenti alle prime armi.

Backbone offre MVC lato client e tutti i vantaggi impliciti da questo.