AngularJS – rendering lato server

Come forse saprai, AirBnb ha aperto Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr ) che dovrebbe abilitare il rendering lato server delle app Backbone . Questo è interessante, perché si può eseguire la prima “iterazione” del rendering dei template sul server e il client ottiene un documento HTML completamente renderizzato più l’intera app JS. Riduce notevolmente il time-to-display e può farci sbarazzare di altri sistemi di template sul lato server.

Quindi, qualcuno è riuscito a rendere AngularJS con jsdom o ZombieJS ? Queste emulazioni di dom / browser su Node.js dovrebbero in teoria essere sufficienti per un semplice template Angular sul lato server, ma i risultati che ho trovato su google non erano molto conclusivi.

Ecco un’altra soluzione: https://github.com/ithkuil/angular-on-server

wiki per i dettagli

Questo nuovo pacchetto https://github.com/a-lucas/angular.js-server consente di eseguire il rendering preliminare di un’applicazione Angolare e di inviare HTML al client, che eseguirà quindi il codice jS.

Supporta il caching per url e puoi definire regole per triggersre il pre-rendering dell’URL.

PS: sono il principale contributore per questo pacchetto.

AngularJS funziona con il contesto di jsdom senza trucchi. Basta aggiungere angular.js alla lista js src e alla pagina principale dell’app angular a jsdom sul suo initializion.

Quindi, il rendering è molto semplice: basta usare l’angular in jsdom e funziona. Metterlo al browser è un po ‘più difficile.

Un modo è la sincronizzazione batch delle modifiche DOM.

Per ottenere aggiornamenti dinamici da server a client è ansible utilizzare MutationEvents (sfortunatamente, jsdom non supporta MutationObservers, ma MutationEvents funziona piuttosto velocemente). Usali per impilare le modifiche del DOM nell’array accumulator e spingerlo periodicamente sul browser del client (ad esempio, per 25 ms).

Inoltre, per abilitare gli eventi utente, è necessario tracciarli in modo documentale sul browser e accumulare simili e inviarli al server.

Un’implementazione di tale approccio è jsdom-sync ( https://www.npmjs.org/package/jsdom-sync )

Uno svantaggio del rendering lato server è l’assenza della dimensione del modello box DOM, perché per ottenere l’ampiezza / altezza dell’elemento dovrebbe essere effettivamente visualizzato. Significa che questa soluzione si adatta a malapena per svg e così via ..

Inoltre, potresti considerare di guardare il modello dello scope e sincronizzarlo con gli ambiti del browser, ma questa è una storia completamente diversa.

Sto cercando anche una soluzione. Ma non è un’opzione per usare il browser per rendere l’html sul server e inviarlo al frontend. Airbnb lo provi prima ma rifiutato perché è lento e ha fame di risorse. Non è una soluzione di produzione.

Aggiornamento: questo presto può essere ansible con l’introduzione di Object.observe;)

AngularJS 2.0 può funzionare anche su un server. Vojta Jina ne parla in “JavaScript Jabber” show # 109 – http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (32:30 in player ). C’è un collegamento al nuovo modulo di dipendenza dipendenza di AngularJS – https://github.com/angular/di.js .

@ dai-shi ha creato connect-prerenderer, vedi qui . Ancora alcuni problemi, ma si spera un buon inizio

Un approccio è quello di indirizzare le richieste HTML al server nodejs che esegue phantomjs. Ho usato un approccio basato su phantomjs. Controllalo se risolve

http://himangshu.io/blog/optimizing-single-page-application-using-prerender/

So che questo è un po ‘una risposta tardiva, angular.js-server ( https://github.com/a-lucas/angular.js-server ) utilizza una versione modificata di angular che triggers uno stato di inattività necessario per rilevare quando tutto richiesta di ajax e eventi di compilazione $ vengono elaborati.

Sono riuscito a pre-renderizzare lo stack mean.js senza quasi nessuna modifica.

Questo non è performante, ma ho lavorato su un semplice server PhantomJS per Heorku che analizzerà qualsiasi JS client. Lo uso in modo specifico con Angular e Rails per offrire richieste HTML a bot.

Spero che possa ancora aiutare qualcuno, ma ecco un pacchetto npm che ho creato:

https://www.npmjs.com/package/ng-node-compile