Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Views, anywhere!                                     @sylvinus                          Paris Node Meetup, 8th June 2011We...
( I never thought I’d be        the opening act for God,           but here we are! ;-)Wednesday, June 8, 2011
Old server-side apps                                      Server                                App.(php|rb|...)          ...
Current client-side apps                                      Server          API                GET       “Loader” HTML  ...
We should NOT be happy                 • Google & other crawlers?                 • Browser history? (twitter.com#wtf)    ...
Plain old HTML is                             your friend.Wednesday, June 8, 2011
Why Server-side JS?                 • JS is cool                 • Client or Server, only one language                 • C...
Updated design                                      Server                               App.js                 API       ...
Basic idea        • One common app core        • Two adapters : Nodejs & Browsers        • As much as possible in the shar...
DemoWednesday, June 8, 2011
History?                 • HTML5 pushState() !                 • Server answers to GET /index.html                 • Clien...
Benefits      • Only one codebase      • Serve HTML-only versions of your JS app             for Crawlers, Odd devices, IE6...
The View Class            View.render(callback)            - Executed on server & client            - Plug APIs, Templates...
Should you go this way?                 • Check the requirements of your app                 • Check your love for JS :)  ...
Thanks!                           Questions?Wednesday, June 8, 2011
Nächste SlideShare
Wird geladen in …5
×

Javascript Views, Client-side or Server-side with NodeJS

10.107 Aufrufe

Veröffentlicht am

A talk I gave at the Paris Node Meetup on June 8th 2011, in front of all the best JS developers in Paris and NodeJS creator Ryan Dahl.

I hope it will make some devs avoid some of the horrible hashbang practices we see on websites like the new twitter !

Veröffentlicht in: Technologie, Design

Javascript Views, Client-side or Server-side with NodeJS

  1. 1. Views, anywhere! @sylvinus Paris Node Meetup, 8th June 2011Wednesday, June 8, 2011
  2. 2. ( I never thought I’d be the opening act for God, but here we are! ;-)Wednesday, June 8, 2011
  3. 3. Old server-side apps Server App.(php|rb|...) GET/POST HTML BrowserWednesday, June 8, 2011
  4. 4. Current client-side apps Server API GET “Loader” HTML GET/POST JSON App.js BrowserWednesday, June 8, 2011
  5. 5. We should NOT be happy • Google & other crawlers? • Browser history? (twitter.com#wtf) • Accessibility? • Mobile devices? • Set-top boxes? CEHTML? • Whatever is next?Wednesday, June 8, 2011
  6. 6. Plain old HTML is your friend.Wednesday, June 8, 2011
  7. 7. Why Server-side JS? • JS is cool • Client or Server, only one language • Client or Server, only one app!Wednesday, June 8, 2011
  8. 8. Updated design Server App.js API GET/POST Full HTML GET/POST JSON App.js BrowserWednesday, June 8, 2011
  9. 9. Basic idea • One common app core • Two adapters : Nodejs & Browsers • As much as possible in the shared core! • This is nothing really new (cf Gmail, again) • BUT Nodejs makes it so much easierWednesday, June 8, 2011
  10. 10. DemoWednesday, June 8, 2011
  11. 11. History? • HTML5 pushState() ! • Server answers to GET /index.html • Client listens to “/index.html” event • If !HTML5, 2 possible fallbacks: • #bang • HTML-only modeWednesday, June 8, 2011
  12. 12. Benefits • Only one codebase • Serve HTML-only versions of your JS app for Crawlers, Odd devices, IE6, ... • (Respect the way the web was built) • Feel better about pushing advanced client-side featuresWednesday, June 8, 2011
  13. 13. The View Class View.render(callback) - Executed on server & client - Plug APIs, Templates, ... - callback(error, html) View.enhance() - Executed on client only - Bind event listeners, too much jQuery plugins View.transitionTo(newView) - Executed on client only - Plug some fancy animations!Wednesday, June 8, 2011
  14. 14. Should you go this way? • Check the requirements of your app • Check your love for JS :) • 29th June: get all of this (& more) built-in with the Joshfire framework!Wednesday, June 8, 2011
  15. 15. Thanks! Questions?Wednesday, June 8, 2011

×