Embed Size (px)
DESCRIPTION
Using Drupal to manage data for JS/SSJS apps.
Citation preview
Not Only DrupalUsing Drupal to manage data for JS/SSJS apps
Mike Cantelon, Pacific 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
Sunday, October 3, 2010
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
Sunday, October 3, 2010
Realtime Apps
Communication
Collaboration
Games
Monitoring
Check out http://nodeknockout.com/teams
Sunday, October 3, 2010
Sunday, October 3, 2010
Mobile Apps
Navigation
Field reporting / cataloging
Games involving location
Augmented reality apps/games
Sunday, October 3, 2010
Mobile Apps
Geo-relevance
HTML5 emerging as unified mobile platform
New ways to input (speech-to-text, sensors, scanning)
Phonegap lets you make HTML5 app that leverage native smartphone features
Sunday, October 3, 2010
Implementation of realtime/mobile (and scaling in general) not so easy with conventional tech...
Sunday, October 3, 2010
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
Sunday, October 3, 2010
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
Sunday, October 3, 2010
Sunday, October 3, 2010
Javascript community
is innovating
Sunday, October 3, 2010
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)
Sunday, October 3, 2010
Old Tools, New Roles
No mature CMS for SSJS
Drupal is a great CMS
Don’t need to reinvent the wheel
Sunday, October 3, 2010
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)
Sunday, October 3, 2010
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
Sunday, October 3, 2010
What JSON looks like
{ 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } }}
Sunday, October 3, 2010
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
Sunday, October 3, 2010
What JSONP looks like
mycallback({ 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } }})
Sunday, October 3, 2010
JQuery and JSONP
jQuery.getJSON( 'http://site.com/json?callback=?', function(data) { // stuff gets done here })
JQuery makes utilizing JSONP data clean and easy
Note the second “?”: JQuery automatically generates a name for your callback function
Sunday, October 3, 2010
Demo use of Drupal JSON...
[demo]
http://github.com/mcantelon/Drupalurk
Sunday, October 3, 2010
Next: RSS to JSON via Views
Sunday, October 3, 2010
Install Views Datasource
Sunday, October 3, 2010
Add View
Sunday, October 3, 2010
Add Page Display and Path
Sunday, October 3, 2010
Add Paging
Sunday, October 3, 2010
Add Fields
Sunday, October 3, 2010
Set Style to JSON
Sunday, October 3, 2010
Set Feed/Category ID
Sunday, October 3, 2010
Save View and Check Path
Sunday, October 3, 2010
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
Sunday, October 3, 2010
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
Sunday, October 3, 2010
Hack for JSONP (v6 beta2)
http://gist.github.com/578650
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 filename “views-views-json-style-simple.tpl.php”
Sunday, October 3, 2010
Enabling JSONP in a View
Click the gear icon to the right of “Style: JSON Data”
Enter “callback” into the resulting “JSONP prefix” field (or whatever the GET parameter should be named that designates the callback function name)
Sunday, October 3, 2010
Other JSON View Uses
Pull front-page content
Pull content by taxonomy
Pull recent comments
Whatever you can do with a view!
Sunday, October 3, 2010
Possible Experiment?
Create page template that amalgamates page regions into JSON, using JS/SSJS presentation layer
Sunday, October 3, 2010
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
Sunday, October 3, 2010
NPM == Drush PM for Node.js
http://mikecantelon.com/story/installing-npm-nodejs-package-manager
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)
Sunday, October 3, 2010
Express.js: Node.js Framework
http://expressjs.com/
Express.js provides a nice base from which to develop
Built by co-author of “Drupal 6 Performance Tips”
Sunday, October 3, 2010
Questions? Ideas?
Sunday, October 3, 2010
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/
Sunday, October 3, 2010
