Introduction to Node.js: perspectives from a Drupal dev

Introduction to Node.js Perspectives from a Drupal dev Mike Cantelon, Vancouver Drupal Users Group, Nov. 25, 2010Thursday, November 25, 2010

I am: A longtime PHP dev Devop for The Georgia Straight Experimenting with JS/SSJS and HTML5 http://mikecantelon.com http://github.com/mcantelonThursday, November 25, 2010

WHY NODE.JS?Thursday, November 25, 2010

wordsquared.com: Real-time HTML/JS Scrabble MMOThursday, November 25, 2010

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 appsThursday, November 25, 2010

Three barriers to real-time Conventional languages can be slow Conventional web servers can be slow Conventional databases are slowThursday, November 25, 2010

Node.js eliminates two Conventional languages can be slow Conventional web servers can be slow Conventional databases are slowThursday, November 25, 2010

Node.js vs PHP/Apache http://www.slideshare.net/Vodafonedeveloper/nodejs-vs-phpapacheThursday, November 25, 2010

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

Advantages over PHP Javascript is a cleaner language Asynchronous execution increases performance Node.js is suitable for writing TCP/IP appsThursday, November 25, 2010

“Asynchronous”? Also known as “event-based” Think of it as deﬁning actions triggered by events CPU spends less time waiting aroundThursday, November 25, 2010

More beneﬁts 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

What about that last barrier? Conventional languages are slow Conventional servers are slow Conventional databases are slowThursday, November 25, 2010

MongoDB is one solution MongoDB is generally faster than SQL databases MongoDB queries are written in Javascript, not SQL MongoDB works well with node.jsThursday, November 25, 2010

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

This looks conceptually like...Thursday, November 25, 2010

SSJS HELLO WORLDThursday, 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 Node.js easierThursday, November 25, 2010

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, {Content-Type: text/plain}); res.end(Hello Worldn); }).listen(8124, "127.0.0.1");Thursday, November 25, 2010

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

Why use Express? Handles routing and redirection Nice templating support Provides sessionsThursday, November 25, 2010

Express Templating Support Supports EJS, HAML, SASS, Jade (HAML variant) Extend with app-speciﬁc helper functions Provides “partials” (subtemplates)Thursday, November 25, 2010

Templating Example app.get(/, function(req, res){ res.render(index.haml, { locals: { title: My Site } }); });Thursday, November 25, 2010

SETTING UP NODE.JSThursday, November 25, 2010

Installing Node.js OS X: build from source or brew install node Linux: build from source Build instructions at http://nodejs.org/#downloadThursday, November 25, 2010

Installing NPM NPM lets you easily install node.js modules OS X: brew install npm Instructions for manual install: http://mikecantelon.com/npmThursday, November 25, 2010

Installing Express npm install express Now the command express will set up an example Express app for youThursday, November 25, 2010

Installing MongoDB OS X: build from source or brew install mongodb Linux: http://www.mongodb.org/display/DOCS/ Quickstart+Unix npm install mongodbThursday, November 25, 2010

DRUPAL -> NODE.JSThursday, November 25, 2010

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 managementThursday, November 25, 2010

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 pages Whole pages take longer to render and use more bandwidth to transmit Leverage the browser as much as possibleThursday, November 25, 2010

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 browserThursday, November 25, 2010

...vs Serving Data 1. Browser requests some data 2. Server sends back data 3. Browser templates data and outputs HTML into the existing pageThursday, November 25, 2010

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.ioThursday, November 25, 2010

DRUPAL DATA SHARINGThursday, 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 can output JSON via Views DatasourceThursday, November 25, 2010

What JSON looks like { drupal: { language: PHP, license: GPL, developed_by: { individuals, organizations, companies } } }Thursday, November 25, 2010

Drupal pumping out JSONThursday, November 25, 2010

Example: RSS to JSON via ViewsThursday, November 25, 2010

What our example will do Use the Aggregator module to pull data from an RSS feed (speciﬁcally “Drupal Planet”) Use Views, via the Views JSON module, to publish the aggregator items as JSON dataThursday, November 25, 2010

Install Views DatasourceThursday, November 25, 2010

Add ViewThursday, November 25, 2010

Add Page Display and PathThursday, November 25, 2010

Add PagingThursday, November 25, 2010

Add FieldsThursday, November 25, 2010

Set Style to JSONThursday, November 25, 2010

Set Feed/Category IDThursday, November 25, 2010

Save View and Check PathThursday, November 25, 2010

Demo use of Drupal/JSON... [demo] http://github.com/mcantelon/DrupalurkThursday, November 25, 2010

Hack for Paging (v6 beta2) Views Datasource needs theme tweak to make paging work Stick the snippet below into your theme’s template.php 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/581974Thursday, November 25, 2010

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 pagingThursday, November 25, 2010

Possible JSON View Uses Pull front-page content Pull content by taxonomy Pull recent comments Whatever else you can do with a viewThursday, November 25, 2010

Pulling JSON into Node.js restler module allows easy HTTP JSON requests 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/608741Thursday, November 25, 2010

TALKING TO MONGODBThursday, November 25, 2010

Things to remember Can create databases and schema on-the-ﬂy Queries are Javascript A “collection” is similar to an SQL DB’s “table” MongoDB has a shell so easy to experimentThursday, November 25, 2010

Doing something to data 1. Open server DB connection 2. Open database 3. Open collection 4. Do something to the collectionThursday, November 25, 2010

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

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, November 25, 2010

Removing from a collection collection.remove( function(err, collection) { // records are now gone! } );Thursday, November 25, 2010

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

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

DEPLOYING NODE.JSThursday, 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 terminal open There are a number of ways to deal with this...Thursday, November 25, 2010

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_appThursday, November 25, 2010

Installing Upstart Ubuntu: apt-get install upstart Linux: http://upstart.ubuntu.com/download.htmlThursday, November 25, 2010

No Upstart? (Centos/some other distros) System V init script (the right way) rc.local/custom script (quick and dirty) Gnu screen (for temporary deployment)Thursday, November 25, 2010

rc.local/custom script 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 npmThursday, November 25, 2010

Example script #!/bin/bash cd /home/mike/drupalchat export NODE_PATH=/home/mike/root /usr/local/bin/node server.jsThursday, November 25, 2010

Hotnode Hotnode will restart node.js when you change a ﬁle Start app with hotloading: hotnode my_app.js Installation: npm install hotnodeThursday, November 25, 2010

BONUS! WEBSOCKETSThursday, November 25, 2010

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 interfaceThursday, November 25, 2010

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 useThursday, November 25, 2010

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 browsersThursday, November 25, 2010

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.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

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-nodejsThursday, November 25, 2010

http://paper.li	201
http://www.redditmedia.com	19
https://twimg0-a.akamaihd.net	18
http://us-w1.rockmelt.com	4
http://localhost:1984	1
http://trunk.ly	1
http://migueldev.com	1

Introduction to Node.js: perspectives from a Drupal dev

by mcantelon on Nov 26, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 245

Statistics

Introduction to Node.js: perspectives from a Drupal dev — Presentation Transcript