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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Not Only Drupal

3,414

Published on

Using Drupal to manage data for JS/SSJS apps.

Using Drupal to manage data for JS/SSJS apps.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,414
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
5
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

×