Introduction to Node.js
Perspectives from a Drupal dev
Mike Cantelon, Vancouver Drupal Users Group, Nov. 25, 2010
Thursday...
I am:
A longtime PHP dev
Devop for The Georgia Straight
Experimenting with JS/SSJS and HTML5
http://mikecantelon.com
http:...
WHY NODE.JS?
Thursday, November 25, 2010
wordsquared.com: Real-time
HTML/JS Scrabble MMO
Thursday, November 25, 2010
The real-time web
Real-time applications are an interesting web subset
Examples: Twitter, Etherpad, games, monitoring
Real...
Three barriers to real-time
Conventional languages can be slow
Conventional web servers can be slow
Conventional databases...
Node.js eliminates two
Conventional languages can be slow
Conventional web servers can be slow
Conventional databases are ...
http://www.slideshare.net/Vodafonedeveloper/nodejs-vs-phpapache
Node.js vs PHP/Apache
Thursday, November 25, 2010
So what exactly is Node.js?
Server-side Javascript (SSJS) implementation
“Asynchronous” (more on that later)
Built using V...
Advantages over PHP
Javascript is a cleaner language
Asynchronous execution increases performance
Node.js is suitable for ...
“Asynchronous”?
Also known as “event-based”
Think of it as defining actions triggered by events
CPU spends less time waitin...
More benefits of SSJS
Requires less mental context switching for devs
Allows sharing of logic between client and server sid...
What about that last barrier?
Conventional languages are slow
Conventional servers are slow
Conventional databases are slo...
MongoDB is one solution
MongoDB is generally faster than SQL databases
MongoDB queries are written in Javascript, not SQL
...
And Drupal?
Drupal is great for managing content
Node.js has no killer CMS
Node.js can pull data from Drupal (details late...
This looks conceptually like...
Thursday, November 25, 2010
SSJS HELLO WORLD
Thursday, November 25, 2010
Node.js isn’t hard to learn
Knowing Javascript is the hard part
Node.js is accessible
Express is a framework that makes No...
Hello World in Node.js shell
var sys = require('sys');
sys.puts('Hello world');
Thursday, November 25, 2010
Node.js server Hello World
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Conten...
Hello World in Express
var express = require('express');
var app = express.createServer();
app.get('/', function(req, res)...
Why use Express?
Handles routing and redirection
Nice templating support
Provides sessions
Thursday, November 25, 2010
Express Templating Support
Supports EJS, HAML, SASS, Jade (HAML variant)
Extend with app-specific helper functions
Provides...
app.get('/', function(req, res){
res.render('index.haml', {
locals: { title: 'My Site' }
});
});
Templating Example
Thursd...
SETTING UP NODE.JS
Thursday, November 25, 2010
Installing Node.js
OS X: build from source or brew install node
Linux: build from source
Build instructions at http://node...
Installing NPM
NPM lets you easily install node.js modules
OS X: brew install npm
Instructions for manual install:
http://...
Installing Express
npm install express
Now the command express will set up an example
Express app for you
Thursday, Novemb...
Installing MongoDB
OS X: build from source or brew install mongodb
Linux: http://www.mongodb.org/display/DOCS/
Quickstart+...
DRUPAL -> NODE.JS
Thursday, November 25, 2010
Drupal as a datastore
One way Node.js and Drupal can work together is
having Drupal be the storehouse for important conten...
Something like...
Thursday, November 25, 2010
Serve data, not just pages
For realtime apps you’re going to want to serve chunks
of data to the browser rather than whole...
Serving a page...
1. Browser requests a URL
2. Server grabs some data from a database and
dresses it up as a page using a ...
...vs Serving Data
1. Browser requests some data
2. Server sends back data
3. Browser templates data and outputs HTML
into...
Where to serve data from
Pulling Drupal data directly to the browser is quick to
implement, but puts more stress on your D...
DRUPAL DATA SHARING
Thursday, November 25, 2010
Javascript For Data Sharing
JSON is the duct tape of the web
drupal_to_js turns any chunk of data into JSON
Drupal Views c...
What JSON looks like
{
'drupal': {
'language': 'PHP',
'license': 'GPL',
'developed_by': {
'individuals',
'organizations',
...
Drupal pumping out JSON
Thursday, November 25, 2010
Example: RSS to JSON via Views
Thursday, November 25, 2010
What our example will do
Use the Aggregator module to pull data from an RSS
feed (specifically “Drupal Planet”)
Use Views, ...
Install Views Datasource
Thursday, November 25, 2010
Add View
Thursday, November 25, 2010
Add Page Display and Path
Thursday, November 25, 2010
Add Paging
Thursday, November 25, 2010
Add Fields
Thursday, November 25, 2010
Set Style to JSON
Thursday, November 25, 2010
Set Feed/Category ID
Thursday, November 25, 2010
Save View and Check Path
Thursday, November 25, 2010
Demo use of Drupal/JSON...
[demo]
http://github.com/mcantelon/Drupalurk
Thursday, November 25, 2010
Hack for Paging (v6 beta2)
function mytheme_preprocess_views_views_json_style_simple(&$vars) {
global $pager_total, $pager...
Hack for Paging (v6 beta2)
This enables you to add &page=<page number
starting at 0> to JSON calls
You can then implement ...
Possible JSON View Uses
Pull front-page content
Pull content by taxonomy
Pull recent comments
Whatever else you can do wit...
Pulling JSON into Node.js
var sys = require('sys'),
rest = require('restler-aaronblohowiak'),
item,
node
rest.get('http://...
TALKING TO MONGODB
Thursday, November 25, 2010
Things to remember
Can create databases and schema on-the-fly
Queries are Javascript
A “collection” is similar to an SQL DB...
Doing something to data
1. Open server DB connection
2. Open database
3. Open collection
4. Do something to the collection...
Opening server DB connection
var mongo = require('mongodb');
var port = mongo.Connection.DEFAULT_PORT;
var db = new mongo....
Opening database
db.open(function(err, db) {
// stuff gets done in here
});
Thursday, November 25, 2010
Opening a collection
db.collection(
'students',
function(err, collection) {
// collection operations here
}
);
Thursday, N...
Removing from a collection
collection.remove(
function(err, collection) {
// records are now gone!
}
);
Thursday, November...
Adding some records
// make four students with random ages
var names
= ['Rick', 'Jane', 'Bob', 'Lisa'];
var index;
for (in...
Displaying data from records
// display names
collection.find({}, {},
function(err, cursor) {
cursor.toArray(
function(err...
DEPLOYING NODE.JS
Thursday, November 25, 2010
Node.js isn’t a daemon
Like PHP, node.js doesn’t run as a daemon
This means that naive deployment would require
keeping a ...
Upstart (Ubuntu/some other distros)
Make a config file for each app in /etc/init
Name config file my_app.conf and set as execu...
Installing Upstart
Ubuntu: apt-get install upstart
Linux: http://upstart.ubuntu.com/download.html
Thursday, November 25, 2...
System V init script (the right way)
rc.local/custom script (quick and dirty)
Gnu screen (for temporary deployment)
No Ups...
Requires adding a line to /etc/rc.local and a script
Example line in rc.local triggers script at startup:
su - mike -c "/h...
Example script
#!/bin/bash
cd /home/mike/drupalchat
export NODE_PATH=/home/mike/root
/usr/local/bin/node server.js
Thursda...
Hotnode will restart node.js when you change a file
Start app with hotloading: hotnode my_app.js
Installation: npm install ...
BONUS! WEBSOCKETS
Thursday, November 25, 2010
What are WebSockets?
WebSockets are an “HTML5” technology for two-way
TCP/IP textual communication
Modern browsers, like C...
Why not just use AJAX?
AJAX is a hack that uses HTTP for communication
HTTP request/response cycle has a lot of overhead
W...
Implementing with Socket.io
Socket.io is a client/server websocket solution, using
Node.js for the server side
The client ...
Questions? Ideas?
Thursday, November 25, 2010
Flickr Credits
http://www.flickr.com/photos/sidehike/459483568/
http://www.flickr.com/photos/wysz/86758900/
http://www.flickr...
Resources
Node.js, Express.js and MongoDB
http://nodejs.org/
http://expressjs.com/
http://www.mongodb.org/
Socket.io
http:...
Upcoming SlideShare
Loading in...5
×

Introduction to Node.js: perspectives from a Drupal dev

16,985

Published on

I gave a talk on November 25, 2010, on Node.js, and related technologies, to the Vancouver Drupal Users Group. The talk ran through why node.js is useful for realtime web apps, how to get it and Express up and running, and how to access data from Drupal and MongoDB.

Published in: Technology

Introduction to Node.js: perspectives from a Drupal dev

  1. 1. Introduction to Node.js Perspectives from a Drupal dev Mike Cantelon, Vancouver Drupal Users Group, Nov. 25, 2010 Thursday, November 25, 2010
  2. 2. I am: A longtime PHP dev Devop for The Georgia Straight Experimenting with JS/SSJS and HTML5 http://mikecantelon.com http://github.com/mcantelon Thursday, November 25, 2010
  3. 3. WHY NODE.JS? Thursday, November 25, 2010
  4. 4. wordsquared.com: Real-time HTML/JS Scrabble MMO Thursday, November 25, 2010
  5. 5. The real-time web Real-time applications are an interesting web subset Examples: Twitter, Etherpad, games, monitoring Real-time paradigm will spawn new types of apps Thursday, November 25, 2010
  6. 6. Three barriers to real-time Conventional languages can be slow Conventional web servers can be slow Conventional databases are slow Thursday, November 25, 2010
  7. 7. Node.js eliminates two Conventional languages can be slow Conventional web servers can be slow Conventional databases are slow Thursday, November 25, 2010
  8. 8. http://www.slideshare.net/Vodafonedeveloper/nodejs-vs-phpapache Node.js vs PHP/Apache Thursday, November 25, 2010
  9. 9. So what exactly is Node.js? Server-side Javascript (SSJS) implementation “Asynchronous” (more on that later) Built using V8 (JS engine used in Chrome Browser) Thursday, November 25, 2010
  10. 10. Advantages over PHP Javascript is a cleaner language Asynchronous execution increases performance Node.js is suitable for writing TCP/IP apps Thursday, November 25, 2010
  11. 11. “Asynchronous”? Also known as “event-based” Think of it as defining actions triggered by events CPU spends less time waiting around Thursday, November 25, 2010
  12. 12. More benefits of SSJS Requires less mental context switching for devs Allows sharing of logic between client and server side Server-side JQuery for screen scraping? Yes! Thursday, November 25, 2010
  13. 13. What about that last barrier? Conventional languages are slow Conventional servers are slow Conventional databases are slow Thursday, November 25, 2010
  14. 14. MongoDB is one solution MongoDB is generally faster than SQL databases MongoDB queries are written in Javascript, not SQL MongoDB works well with node.js Thursday, November 25, 2010
  15. 15. And Drupal? Drupal is great for managing content Node.js has no killer CMS Node.js can pull data from Drupal (details later) Thursday, November 25, 2010
  16. 16. This looks conceptually like... Thursday, November 25, 2010
  17. 17. SSJS HELLO WORLD Thursday, November 25, 2010
  18. 18. Node.js isn’t hard to learn Knowing Javascript is the hard part Node.js is accessible Express is a framework that makes Node.js easier Thursday, November 25, 2010
  19. 19. Hello World in Node.js shell var sys = require('sys'); sys.puts('Hello world'); Thursday, November 25, 2010
  20. 20. Node.js server Hello World var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(8124, "127.0.0.1"); Thursday, November 25, 2010
  21. 21. Hello World in Express var express = require('express'); var app = express.createServer(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(8124); Thursday, November 25, 2010
  22. 22. Why use Express? Handles routing and redirection Nice templating support Provides sessions Thursday, November 25, 2010
  23. 23. Express Templating Support Supports EJS, HAML, SASS, Jade (HAML variant) Extend with app-specific helper functions Provides “partials” (subtemplates) Thursday, November 25, 2010
  24. 24. app.get('/', function(req, res){ res.render('index.haml', { locals: { title: 'My Site' } }); }); Templating Example Thursday, November 25, 2010
  25. 25. SETTING UP NODE.JS Thursday, November 25, 2010
  26. 26. Installing Node.js OS X: build from source or brew install node Linux: build from source Build instructions at http://nodejs.org/#download Thursday, November 25, 2010
  27. 27. Installing NPM NPM lets you easily install node.js modules OS X: brew install npm Instructions for manual install: http://mikecantelon.com/npm Thursday, November 25, 2010
  28. 28. Installing Express npm install express Now the command express will set up an example Express app for you Thursday, November 25, 2010
  29. 29. Installing MongoDB OS X: build from source or brew install mongodb Linux: http://www.mongodb.org/display/DOCS/ Quickstart+Unix npm install mongodb Thursday, November 25, 2010
  30. 30. DRUPAL -> NODE.JS Thursday, November 25, 2010
  31. 31. Drupal as a datastore One way Node.js and Drupal can work together is having Drupal be the storehouse for important content requiring long-term management Thursday, November 25, 2010
  32. 32. Something like... Thursday, November 25, 2010
  33. 33. Serve data, not just pages For realtime apps you’re going to want to serve chunks of data to the browser rather than whole pages Whole pages take longer to render and use more bandwidth to transmit Leverage the browser as much as possible Thursday, November 25, 2010
  34. 34. Serving a page... 1. Browser requests a URL 2. Server grabs some data from a database and dresses it up as a page using a template. 3. Whole page gets sent back to browser Thursday, November 25, 2010
  35. 35. ...vs Serving Data 1. Browser requests some data 2. Server sends back data 3. Browser templates data and outputs HTML into the existing page Thursday, November 25, 2010
  36. 36. Where to serve data from Pulling Drupal data directly to the browser is quick to implement, but puts more stress on your Drupal stack The alternative is to pull Drupal data to node.js and cache using a datastore like MongoDB Data can then be relayed via AJAX or Socket.io Thursday, November 25, 2010
  37. 37. DRUPAL DATA SHARING Thursday, November 25, 2010
  38. 38. Javascript For Data Sharing JSON is the duct tape of the web drupal_to_js turns any chunk of data into JSON Drupal Views can output JSON via Views Datasource Thursday, November 25, 2010
  39. 39. What JSON looks like { 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } } } Thursday, November 25, 2010
  40. 40. Drupal pumping out JSON Thursday, November 25, 2010
  41. 41. Example: RSS to JSON via Views Thursday, November 25, 2010
  42. 42. What our example will do Use the Aggregator module to pull data from an RSS feed (specifically “Drupal Planet”) Use Views, via the Views JSON module, to publish the aggregator items as JSON data Thursday, November 25, 2010
  43. 43. Install Views Datasource Thursday, November 25, 2010
  44. 44. Add View Thursday, November 25, 2010
  45. 45. Add Page Display and Path Thursday, November 25, 2010
  46. 46. Add Paging Thursday, November 25, 2010
  47. 47. Add Fields Thursday, November 25, 2010
  48. 48. Set Style to JSON Thursday, November 25, 2010
  49. 49. Set Feed/Category ID Thursday, November 25, 2010
  50. 50. Save View and Check Path Thursday, November 25, 2010
  51. 51. Demo use of Drupal/JSON... [demo] http://github.com/mcantelon/Drupalurk Thursday, November 25, 2010
  52. 52. Hack for Paging (v6 beta2) function mytheme_preprocess_views_views_json_style_simple(&$vars) { global $pager_total, $pager_page_array; $element = $vars['view']->pager['element']; $vars['rows']['pager'] = array( 'total' => $pager_total[$element], 'current' => $pager_page_array[$element] ); } http://gist.github.com/581974 Views Datasource needs theme tweak to make paging work Stick the snippet below into your theme’s template.php Thursday, November 25, 2010
  53. 53. Hack for Paging (v6 beta2) This enables you to add &page=<page number starting at 0> to JSON calls You can then implement your own JS paging Thursday, November 25, 2010
  54. 54. Possible JSON View Uses Pull front-page content Pull content by taxonomy Pull recent comments Whatever else you can do with a view Thursday, November 25, 2010
  55. 55. Pulling JSON into Node.js var sys = require('sys'), rest = require('restler-aaronblohowiak'), item, node rest.get('http://mikecantelon.com/jsontest/News') .addListener('complete', function(data) { for(item in data.nodes) { node = data.nodes[item].node sys.puts(node.Title) sys.puts(node.Body) } }) http://gist.github.com/608741 restler module allows easy HTTP JSON requests Thursday, November 25, 2010
  56. 56. TALKING TO MONGODB Thursday, November 25, 2010
  57. 57. Things to remember Can create databases and schema on-the-fly Queries are Javascript A “collection” is similar to an SQL DB’s “table” MongoDB has a shell so easy to experiment Thursday, November 25, 2010
  58. 58. Doing something to data 1. Open server DB connection 2. Open database 3. Open collection 4. Do something to the collection Thursday, November 25, 2010
  59. 59. Opening server DB connection var mongo = require('mongodb'); var port = mongo.Connection.DEFAULT_PORT; var db = new mongo.Db( 'classroom', new mongo.Server('localhost', port, {}), {} ); Thursday, November 25, 2010
  60. 60. Opening database db.open(function(err, db) { // stuff gets done in here }); Thursday, November 25, 2010
  61. 61. Opening a collection db.collection( 'students', function(err, collection) { // collection operations here } ); Thursday, November 25, 2010
  62. 62. Removing from a collection collection.remove( function(err, collection) { // records are now gone! } ); Thursday, November 25, 2010
  63. 63. Adding some records // make four students with random ages var names = ['Rick', 'Jane', 'Bob', 'Lisa']; var index; for (index in names) { collection.insert({ 'name': (names[index]), 'age': Math.round(Math.random(4)*10)+18 }); } Thursday, November 25, 2010
  64. 64. Displaying data from records // display names collection.find({}, {}, function(err, cursor) { cursor.toArray( function(err, students) { var index; for(index in students) { sys.puts(students[index].name); }; } ); } ); Thursday, November 25, 2010
  65. 65. DEPLOYING NODE.JS Thursday, November 25, 2010
  66. 66. Node.js isn’t a daemon Like PHP, node.js doesn’t run as a daemon This means that naive deployment would require keeping a terminal open There are a number of ways to deal with this... Thursday, November 25, 2010
  67. 67. Upstart (Ubuntu/some other distros) Make a config file for each app in /etc/init Name config file my_app.conf and set as executable Start app using: sudo start my_app Thursday, November 25, 2010
  68. 68. Installing Upstart Ubuntu: apt-get install upstart Linux: http://upstart.ubuntu.com/download.html Thursday, November 25, 2010
  69. 69. System V init script (the right way) rc.local/custom script (quick and dirty) Gnu screen (for temporary deployment) No Upstart? (Centos/some other distros) Thursday, November 25, 2010
  70. 70. Requires adding a line to /etc/rc.local and a script Example line in rc.local triggers script at startup: su - mike -c "/home/mike/drupalchat/RUN.sh" & Script should set NODE_PATH if you’re using npm rc.local/custom script Thursday, November 25, 2010
  71. 71. Example script #!/bin/bash cd /home/mike/drupalchat export NODE_PATH=/home/mike/root /usr/local/bin/node server.js Thursday, November 25, 2010
  72. 72. Hotnode will restart node.js when you change a file Start app with hotloading: hotnode my_app.js Installation: npm install hotnode Hotnode Thursday, November 25, 2010
  73. 73. BONUS! WEBSOCKETS Thursday, November 25, 2010
  74. 74. What are WebSockets? WebSockets are an “HTML5” technology for two-way TCP/IP textual communication Modern browsers, like Chrome and Firefox 4, offer a Javascript WebSockets interface Thursday, November 25, 2010
  75. 75. Why not just use AJAX? AJAX is a hack that uses HTTP for communication HTTP request/response cycle has a lot of overhead WebSockets increase speed, lessen bandwidth use Thursday, November 25, 2010
  76. 76. Implementing with Socket.io Socket.io is a client/server websocket solution, using Node.js for the server side The client library tries WebSockets, but falls back to other mechanisms when talking to old browsers Thursday, November 25, 2010
  77. 77. Questions? Ideas? Thursday, November 25, 2010
  78. 78. Flickr Credits http://www.flickr.com/photos/sidehike/459483568/ http://www.flickr.com/photos/wysz/86758900/ http://www.flickr.com/photos/generated/291537716/ http://www.flickr.com/photos/gsfc/3720663082/ http://www.flickr.com/photos/skreuzer/354316778/ http://www.flickr.com/photos/ubookworm/455760111/ http://www.flickr.com/photos/batega/1596898776/ http://www.flickr.com/photos/batigolix/3778363253/ http://www.flickr.com/photos/wwworks/4472384764/ http://www.flickr.com/photos/19779889@N00/4398186065/ http://www.flickr.com/photos/theplanetdotcom/4878809615/ http://www.flickr.com/photos/estherase/177188677/ Thursday, November 25, 2010
  79. 79. Resources Node.js, Express.js and MongoDB http://nodejs.org/ http://expressjs.com/ http://www.mongodb.org/ Socket.io http://socket.io/ This presentation http://mikecantelon.com/drupal-nodejs Thursday, November 25, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×