Not Only Drupal

  • 3,352 views
Uploaded on

Using Drupal to manage data for JS/SSJS apps.

Using Drupal to manage data for JS/SSJS apps.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,352
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 http://mikecantelon.com @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 http://nodeknockout.com/teams 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( 'http://site.com/json?callback=?', function(data) { // stuff gets done here } ) Sunday, October 3, 2010
  • 21. Demo use of Drupal JSON... [demo] http://github.com/mcantelon/Drupalurk 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] ); } http://gist.github.com/581974 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” http://gist.github.com/578650 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('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
  • 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) http://mikecantelon.com/story/installing-npm-nodejs-package-manager 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” http://expressjs.com/ Sunday, October 3, 2010
  • 40. Questions? Ideas? Sunday, October 3, 2010
  • 41. 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