Your SlideShare is downloading. ×
Not Only Drupal
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Not Only Drupal


Published on

Using Drupal to manage data for JS/SSJS apps.

Using Drupal to manage data for JS/SSJS apps.

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Not Only Drupal Using Drupal to manage data for JS/SSJS apps Mike Cantelon, Pacific Northwest Drupal Summit, 2010 Sunday, October 3, 2010
  • 2. I am: A reformed PHP CMS dev A devop for The Georgia Straight Experimenting with JS/SSJS and HTML5 @mcantelon Sunday, October 3, 2010
  • 3. 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
  • 4. Realtime Apps Communication Collaboration Games Monitoring Check out Sunday, October 3, 2010
  • 5. Sunday, October 3, 2010
  • 6. Mobile Apps Navigation Field reporting / cataloging Games involving location Augmented reality apps/games Sunday, October 3, 2010
  • 7. 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
  • 8. Implementation of realtime/mobile (and scaling in general) not so easy with conventional tech... Sunday, October 3, 2010
  • 9. 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
  • 10. 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
  • 11. Sunday, October 3, 2010
  • 12. Javascript community is innovating Sunday, October 3, 2010
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. What JSON looks like { 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } } } Sunday, October 3, 2010
  • 18. 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
  • 19. What JSONP looks like mycallback({ 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } } }) Sunday, October 3, 2010
  • 20. 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( '', function(data) { // stuff gets done here } ) Sunday, October 3, 2010
  • 21. Demo use of Drupal JSON... [demo] Sunday, October 3, 2010
  • 22. Next: RSS to JSON via Views Sunday, October 3, 2010
  • 23. Install Views Datasource Sunday, October 3, 2010
  • 24. Add View Sunday, October 3, 2010
  • 25. Add Page Display and Path Sunday, October 3, 2010
  • 26. Add Paging Sunday, October 3, 2010
  • 27. Add Fields Sunday, October 3, 2010
  • 28. Set Style to JSON Sunday, October 3, 2010
  • 29. Set Feed/Category ID Sunday, October 3, 2010
  • 30. Save View and Check Path Sunday, October 3, 2010
  • 31. 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] ); } Sunday, October 3, 2010
  • 32. 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
  • 33. 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” Sunday, October 3, 2010
  • 34. 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
  • 35. 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
  • 36. Possible Experiment? Create page template that amalgamates page regions into JSON, using JS/SSJS presentation layer Sunday, October 3, 2010
  • 37. Pulling JSON into Node.js restler module allows easy HTTP JSON requests var sys = require('sys'), rest = require('restler-aaronblohowiak'), item, node rest.get('') .addListener('complete', function(data) { for(item in data.nodes) { node = data.nodes[item].node sys.puts(node.Title) sys.puts(node.Body) } }) Sunday, October 3, 2010
  • 38. 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) Sunday, October 3, 2010
  • 39. Express.js: Node.js Framework Express.js provides a nice base from which to develop Built by co-author of “Drupal 6 Performance Tips” Sunday, October 3, 2010
  • 40. Questions? Ideas? Sunday, October 3, 2010
  • 41. Flickr Credits Sunday, October 3, 2010