The document summarizes a presentation on building applications that can render on both the server and client using a single codebase. It discusses how traditional server-side and client-side apps are structured, then shows how server-side JavaScript allows building a single app with a shared core that can adapt for the server or browser through the use of adapters. It demonstrates this approach with a sample app and discusses benefits like serving HTML versions for search engines or legacy browsers. Key aspects covered are rendering on the server/client with a View class and handling browser history across environments.

1. Views, anywhere!
@sylvinus
Paris Node Meetup, 8th June 2011
Wednesday, June 8, 2011

2. ( I never thought I’d be
the opening act for God,
but here we are! ;-)
Wednesday, June 8, 2011

3. Old server-side apps
Server
App.(php|rb|...)
GET/POST HTML
Browser
Wednesday, June 8, 2011

4. Current client-side apps
Server API
GET “Loader” HTML GET/POST JSON
App.js
Browser
Wednesday, June 8, 2011

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. Plain old HTML is
your friend.
Wednesday, June 8, 2011

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. Updated design
Server
App.js API
GET/POST Full HTML GET/POST JSON
App.js
Browser
Wednesday, June 8, 2011

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 easier
Wednesday, June 8, 2011

10. Demo
Wednesday, June 8, 2011

11. History?
• HTML5 pushState() !
• Server answers to GET /index.html
• Client listens to “/index.html” event
• If !HTML5, 2 possible fallbacks:
• #bang
• HTML-only mode
Wednesday, June 8, 2011

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 features
Wednesday, June 8, 2011

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. 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. Thanks!
Questions?
Wednesday, June 8, 2011