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

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

description

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 !

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

Page 1: Javascript Views, Client-side or Server-side with NodeJS

Views, anywhere!@sylvinus

Paris Node Meetup, 8th June 2011

Wednesday, June 8, 2011

Page 2: Javascript Views, Client-side or Server-side with NodeJS

( I never thought I’d be the opening act for God,

but here we are! ;-)

Wednesday, June 8, 2011

Page 3: Javascript Views, Client-side or Server-side with NodeJS

Old server-side apps

Server

Browser

GET/POST HTML

App.(php|rb|...)

Wednesday, June 8, 2011

Page 4: Javascript Views, Client-side or Server-side with NodeJS

Current client-side apps

Server

Browser

GET “Loader” HTML

App.js

API

GET/POST JSON

Wednesday, June 8, 2011

Page 5: Javascript Views, Client-side or Server-side with NodeJS

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

Page 6: Javascript Views, Client-side or Server-side with NodeJS

Plain old HTML is your friend.

Wednesday, June 8, 2011

Page 7: Javascript Views, Client-side or Server-side with NodeJS

Why Server-side JS?

• JS is cool

• Client or Server, only one language

• Client or Server, only one app!

Wednesday, June 8, 2011

Page 8: Javascript Views, Client-side or Server-side with NodeJS

Updated design

Server

Browser

GET/POST Full HTML

App.js

GET/POST JSON

App.js API

Wednesday, June 8, 2011

Page 9: Javascript Views, Client-side or Server-side with NodeJS

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

Page 10: Javascript Views, Client-side or Server-side with NodeJS

Demo

Wednesday, June 8, 2011

Page 11: Javascript Views, Client-side or Server-side with NodeJS

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

Page 12: Javascript Views, Client-side or Server-side with NodeJS

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

Page 13: Javascript Views, Client-side or Server-side with NodeJS

The View ClassView.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

Page 14: Javascript Views, Client-side or Server-side with NodeJS

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

Page 15: Javascript Views, Client-side or Server-side with NodeJS

Thanks!Questions?

Wednesday, June 8, 2011