Not Only Drupal
          Using Drupal to manage data for JS/SSJS apps




                          Mike Cantelon, Pacific...
I am:

               A reformed PHP CMS dev
               A devop for The Georgia Straight
               Experimenting ...
The Crazy New Web


               Post “Web 2.0” moving towards realtime and mobile
               Twitter and smartphone...
Realtime Apps

               Communication
               Collaboration
               Games
               Monitoring
  ...
Sunday, October 3, 2010
Mobile Apps

               Navigation
               Field reporting / cataloging
               Games involving location...
Mobile Apps

               Geo-relevance
               HTML5 emerging as unified mobile platform
               New ways ...
Implementation of realtime/mobile
          (and scaling in general) not so easy
          with conventional tech...




S...
Conventional Server Admin

               Realtime apps require good server response/scaling
               RDMSs can be s...
Conventional Frontends

               Mobile apps requires light frontends
               Trying to please all browsers c...
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, Postg...
Old Tools, New Roles


               No mature CMS for SSJS
               Drupal is a great CMS
               Don’t nee...
How to Think of This?

               Realtime, archived, and structured content
               Realtime shares the presen...
Javascript For Data Sharing

               JSON: the duct tape of the web
               drupal_to_js turns any chunk of ...
What JSON looks like
                          {
                              'drupal': {
                               ...
JSONP
               JSONP is a JSON usage pattern
               Exploits ability of SCRIPT tag to get a script from any
...
What JSONP looks like
                          mycallback({
                              'drupal': {
                   ...
JQuery and JSONP
               JQuery makes utilizing JSONP data clean and easy
               Note the second “?”: JQuer...
Demo use of Drupal JSON...
                                      [demo]

                          http://github.com/mcant...
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 ...
Hack for Paging (v6 beta2)


               This enables you to add &page=<page number starting
               a 0> to JSO...
Hack for JSONP (v6 beta2)

               Views Datasource currently needs a theme override to
               make JSONP w...
Enabling JSONP in a View


               Click the gear icon to the right of “Style: JSON Data”
               Enter “cal...
Other JSON View Uses


               Pull front-page content
               Pull content by taxonomy
               Pull ...
Possible Experiment?



               Create page template that amalgamates page regions
               into JSON, using ...
Pulling JSON into Node.js
               restler module allows easy HTTP JSON requests

                          var sys ...
NPM == Drush PM for Node.js


               NPM is the Node Package Manager
               Makes playing with node.js mor...
Express.js: Node.js Framework



               Express.js provides a nice base from which to develop
               Built...
Questions? Ideas?


Sunday, October 3, 2010
Flickr Credits

                          http://www.flickr.com/photos/stefan-w/3337072853/
                          http:...
Upcoming SlideShare
Loading in...5
×

Not Only Drupal

3,468

Published on

Using Drupal to manage data for JS/SSJS apps.

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

No Downloads
Views
Total Views
3,468
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Not Only Drupal

  1. 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. 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. 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. 4. Realtime Apps Communication Collaboration Games Monitoring Check out http://nodeknockout.com/teams Sunday, October 3, 2010
  5. 5. Sunday, October 3, 2010
  6. 6. Mobile Apps Navigation Field reporting / cataloging Games involving location Augmented reality apps/games Sunday, October 3, 2010
  7. 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. 8. Implementation of realtime/mobile (and scaling in general) not so easy with conventional tech... Sunday, October 3, 2010
  9. 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. 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. 11. Sunday, October 3, 2010
  12. 12. Javascript community is innovating Sunday, October 3, 2010
  13. 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. 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. 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. 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. 17. What JSON looks like { 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } } } Sunday, October 3, 2010
  18. 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. 19. What JSONP looks like mycallback({ 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } } }) Sunday, October 3, 2010
  20. 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. 21. Demo use of Drupal JSON... [demo] http://github.com/mcantelon/Drupalurk Sunday, October 3, 2010
  22. 22. Next: RSS to JSON via Views Sunday, October 3, 2010
  23. 23. Install Views Datasource Sunday, October 3, 2010
  24. 24. Add View Sunday, October 3, 2010
  25. 25. Add Page Display and Path Sunday, October 3, 2010
  26. 26. Add Paging Sunday, October 3, 2010
  27. 27. Add Fields Sunday, October 3, 2010
  28. 28. Set Style to JSON Sunday, October 3, 2010
  29. 29. Set Feed/Category ID Sunday, October 3, 2010
  30. 30. Save View and Check Path Sunday, October 3, 2010
  31. 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. 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. 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. 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. 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. 36. Possible Experiment? Create page template that amalgamates page regions into JSON, using JS/SSJS presentation layer Sunday, October 3, 2010
  37. 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. 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. 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. 40. Questions? Ideas? Sunday, October 3, 2010
  41. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×