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
Upcoming SlideShare
Loading in …5
×

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

9,923 views

Published on

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 !

Published in: Technology, Design
4 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
9,923
On SlideShare
0
From Embeds
0
Number of Embeds
348
Actions
Shares
0
Downloads
90
Comments
4
Likes
8
Embeds 0
No embeds

No notes for slide

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

×