• Like
  • Save
Not Only Drupal
Upcoming SlideShare
Loading in...5

Not Only Drupal



Using Drupal to manage data for JS/SSJS apps.

Using Drupal to manage data for JS/SSJS apps.



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.redditmedia.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Not Only Drupal Not Only Drupal Presentation Transcript

    • Not Only Drupal Using 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 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 filename “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 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 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