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 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 uniﬁed 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 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 } ) 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) 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 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) 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” http://gist.github.com/578650 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 preﬁx” ﬁeld (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 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/608741 Sunday, October 3, 2010

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 Sunday, October 3, 2010

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

Not Only Drupal

by mcantelon

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Not Only Drupal Presentation Transcript