Not Only Drupal

Not Only Drupal
Using Drupal to manage data for JS/SSJS apps

Mike Cantelon, Paciﬁc Northwest Drupal Summit, 2010
Sunday, October 3, 2010

I am:

A reformed PHP CMS dev
A devop for The Georgia Straight
Experimenting with JS/SSJS and HTML5
http://mikecantelon.com
@mcantelon


The Crazy New Web

Post “Web 2.0” moving towards realtime and mobile
Twitter and smartphones are now mainstream
This sets the stage for Strange New Things


Realtime Apps

Communication
Collaboration
Games
Monitoring
Check out http://nodeknockout.com/teams


Mobile Apps

Navigation
Field reporting / cataloging
Games involving location
Augmented reality apps/games


Mobile Apps

Geo-relevance
HTML5 emerging as uniﬁed mobile platform
New ways to input (speech-to-text, sensors, scanning)
Phonegap lets you make HTML5 app that leverage
native smartphone features


Implementation of realtime/mobile
(and scaling in general) not so easy
with conventional tech...


Conventional Server Admin

Realtime apps require good server response/scaling
RDMSs can be slow
Denormalization often needed
RDMS server to server replication can be tricky
Hazards of inconsistency, complexity, collision of data


Conventional Frontends

Mobile apps requires light frontends
Trying to please all browsers creates overhead
Results in bloated markup and Javascript
AJAX has HTTP overhead and can be a pain to
maintain


Javascript
community
is innovating


News Tools, Old Language

node.js (alternative to PHP)
MongoDB (alternative to MySQL, Postgres)
HTML5 websockets (alternative to AJAX)
Easy node.js hosting/deployment (Joyent, Heroku)


Old Tools, New Roles

No mature CMS for SSJS
Drupal is a great CMS
Don’t need to reinvent the wheel


How to Think of This?

Realtime, archived, and structured content
Realtime shares the present (relayed via SSJS/
websockets)
Archived preserves the past (managed via Drupal)
Structured content allows for future development/
remixing (provided via SSJS or Drupal)


Javascript For Data Sharing

JSON: the duct tape of the web
drupal_to_js turns any chunk of data into JSON
Drupal Views can output JSON via Views Datasource
Browser extensions format JSON for viewing/
debugging


What JSON looks like
{
'drupal': {
'language': 'PHP',
'license': 'GPL',
'developed_by': {
'individuals',
'organizations',
'companies'
}
}
}


JSONP
JSONP is a JSON usage pattern
Exploits ability of SCRIPT tag to get a script from any
domain
Used for cross-domain requests
JSONP requires JSON to be expressed as a call to a
function
The function called is known as the callback function


What JSONP looks like
mycallback({
'drupal': {
'language': 'PHP',
'license': 'GPL',
'developed_by': {
'individuals',
'organizations',
'companies'
}
}
})


JQuery and JSONP
JQuery makes utilizing JSONP data clean and easy
Note the second “?”: JQuery automatically generates a
name for your callback function

jQuery.getJSON(
'http://site.com/json?callback=?',
function(data) {
// stuff gets done here
}
)


Demo use of Drupal JSON...
[demo]

http://github.com/mcantelon/Drupalurk

Next: RSS to JSON via Views


Install Views Datasource


Add View


Add Page Display and Path


Add Paging


Add Fields


Set Style to JSON


Set Feed/Category ID


Save View and Check Path


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/581974

Hack for Paging (v6 beta2)

This enables you to add &page=<page number starting
a 0> to JSON/JSONP calls
You can then implement your own JS paging


Hack for JSONP (v6 beta2)

Views Datasource currently needs a theme override to
make JSONP work properly
Stick the snippet available at the link below into your
theme directory with the ﬁlename “views-views-json-
style-simple.tpl.php”


Enabling JSONP in a View

Click the gear icon to the right of “Style: JSON Data”
Enter “callback” into the resulting “JSONP preﬁx” ﬁeld
(or whatever the GET parameter should be named that
designates the callback function name)


Other JSON View Uses

Pull front-page content
Pull content by taxonomy
Pull recent comments
Whatever you can do with a view!


Possible Experiment?

Create page template that amalgamates page regions
into JSON, using JS/SSJS presentation layer


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)
}
})


NPM == Drush PM for Node.js

NPM is the Node Package Manager
Makes playing with node.js more pleasant
Example: “npm install restler-aaronblohowiak”
A bit weird to install: check my blog post on it (link below)

http://mikecantelon.com/story/installing-npm-nodejs-package-manager


Express.js: Node.js Framework

Express.js provides a nice base from which to develop
Built by co-author of “Drupal 6 Performance Tips”

http://expressjs.com/


Questions? Ideas?


Flickr Credits

http://www.flickr.com/photos/stefan-w/3337072853/
http://www.flickr.com/photos/seeminglee/4469555847/
http://www.flickr.com/photos/auggie/400745315/
http://www.flickr.com/photos/tedsali/2322861938/
http://www.flickr.com/photos/almaz73/3564244382/
http://www.flickr.com/photos/fatllama/42844367/
http://www.flickr.com/photos/dvs/64064283/
http://www.flickr.com/photos/horiavarlan/4264037742/
http://www.flickr.com/photos/wwworks/4472384764/
http://www.flickr.com/photos/28634332@N05/4971299549/


Not Only Drupal

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (18)

Semelhante a Not Only Drupal

Semelhante a Not Only Drupal (20)

Último

Último (20)

Not Only Drupal