javascript views, client-side or server-side with nodejs
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
![Page 1: Javascript Views, Client-side or Server-side with NodeJS](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/1.jpg)
Views, anywhere!@sylvinus
Paris Node Meetup, 8th June 2011
Wednesday, June 8, 2011
![Page 2: Javascript Views, Client-side or Server-side with NodeJS](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/2.jpg)
( 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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/6.jpg)
Plain old HTML is your friend.
Wednesday, June 8, 2011
![Page 7: Javascript Views, Client-side or Server-side with NodeJS](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/10.jpg)
Demo
Wednesday, June 8, 2011
![Page 11: Javascript Views, Client-side or Server-side with NodeJS](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042521/549eacfdac795910768b483f/html5/thumbnails/15.jpg)
Thanks!Questions?
Wednesday, June 8, 2011