Rendere l'applicazione Backbone.js sul server E sul client

Question

Supposto che io abbia un'applicazione web costruita usando Backbone.js e Handlebars. Come server sto usando Node.js. Ora voglio fare il rendering su entrambe le estremità, vale a dire sul server e sul client.

Quando una rotta viene richiesta per la prima volta, il server esegue il rendering (principalmente a causa di motivi di prestazioni). Dopodiché, tutte le seguenti azioni daranno luogo al rendering lato client.

Ciò significa che devo essere in grado di rendere qualsiasi pagina sul client e sul server, entrambe le volte in perfetta stesso modo. Entrambe le estremità devono supportare lo stesso tipo di percorsi.

Come posso eseguire questo compito?

Al momento, ho dato un'occhiata al progetto rendr di AirBnb, ma questo sicuramente mi lega a Backbone.js (non sono sicuro se voglio restare con Backbone.js per tutte le volte), e sembra non essere ancora perfettamente finito Almeno, AirBnb non lo consiglia ancora per l'uso in produzione.

Qualche altra idea su come fare questo?

Come domanda secondaria, potrei anche chiedere: qual è il modo preferito per condividere il codice JavaScript tra il server e il client? Per questo, so anche piler, ma potrei immaginare che ci possano essere soluzioni migliori disponibili.

Eventuali suggerimenti?

Answer 1

Bene, sto costruendo un'applicazione che lo fa. Se non si desidera utilizzare rendr, sarà necessario codificare le proprie versioni di alcune delle cose di cui si occupano. AFAIK al momento le tue scelte sono rese o cresciute in casa. Ecco alcuni suggerimenti.

• Usiamo cheerio per operazioni lato server DOM, così quando viste rendering sul server, this.$el è un'istanza elemento cheerio. Nel browser, è jQuery.
• Non è necessaria la delega eventi e il binding sul lato server. Il nostro codice fa tecnicamente questo al momento, ma è inutile e una soluzione più pulita eviterebbe sul server
• Una volta che avete HTML server di rendering nel browser, è necessario un modo per cablare un grande albero nidificato di istanze vista ai loro elementi corrispondenti nel grande albero DOM nidificato. Abbiamo una soluzione sviluppata internamente per questo, ma il core è lo Backbone.View.setElement
• Al momento stiamo eseguendo nuovamente il rendering sul browser, anche se probabilmente c'è un modo più semplice di prendere una istanza di visualizzazione, dargli alcune opzioni nel costruttore, incluso un nodo DOM pre-renderizzato, e fare in modo che le cose vengano cablate correttamente senza re-rendering. Questo è un esercizio per il lettore però. :-)
• Inviamo anche i dati non elaborati di cui abbiamo bisogno come JSON all'interno di un tag <script>, quindi abbiamo sia l'HTML reso dal server (per le prestazioni percepite) sia i dati non elaborati disponibili come JSON in modo da ottenere i nostri modelli di backbone istanziato e operativo. Ancora una volta, dovrai elaborare un codice per gestire questa situazione.
• Utilizziamo browserify per raggruppare e condividere il codice tra server e browser. Tutti i nostri JavaScript sono codificati come moduli CommonJS.
• Abbiamo una funzione base isBrowser() nella nostra classe padre di visualizzazione, quindi sappiamo quando il codice del browser deve essere eseguito per i binding di eventi, ecc.

In ogni caso, per quello che vale, dopo aver lavorato in questo modo per molti mesi, non penso che la spina dorsale funzioni bene con questo paradigma. Molti dei concetti chiave di backbone vanno bene, ma non si prestano a mappare le istanze di visualizzazione su nodi DOM pre-renderizzati. Il bootstrap di modelli e collezioni da JSON è più semplice, ma il livello di visualizzazione probabilmente ha bisogno di un fork significativo per operare in modo pulito in questo stile.