Not Only Drupal
-
Upload
mcantelon -
Category
Technology
-
view
3.423 -
download
0
description
Transcript of Not Only Drupal
![Page 1: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/1.jpg)
Not Only DrupalUsing Drupal to manage data for JS/SSJS apps
Mike Cantelon, Pacific Northwest Drupal Summit, 2010
Sunday, October 3, 2010
![Page 2: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/2.jpg)
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
![Page 3: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/3.jpg)
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
![Page 4: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/4.jpg)
Realtime Apps
Communication
Collaboration
Games
Monitoring
Check out http://nodeknockout.com/teams
Sunday, October 3, 2010
![Page 5: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/5.jpg)
Sunday, October 3, 2010
![Page 6: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/6.jpg)
Mobile Apps
Navigation
Field reporting / cataloging
Games involving location
Augmented reality apps/games
Sunday, October 3, 2010
![Page 7: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/7.jpg)
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
![Page 8: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/8.jpg)
Implementation of realtime/mobile (and scaling in general) not so easy with conventional tech...
Sunday, October 3, 2010
![Page 9: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/9.jpg)
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
![Page 10: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/10.jpg)
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
![Page 11: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/11.jpg)
Sunday, October 3, 2010
![Page 12: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/12.jpg)
Javascript community
is innovating
Sunday, October 3, 2010
![Page 13: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/13.jpg)
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
![Page 14: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/14.jpg)
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
![Page 15: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/15.jpg)
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
![Page 16: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/16.jpg)
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
![Page 17: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/17.jpg)
What JSON looks like
{ 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } }}
Sunday, October 3, 2010
![Page 18: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/18.jpg)
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
![Page 19: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/19.jpg)
What JSONP looks like
mycallback({ 'drupal': { 'language': 'PHP', 'license': 'GPL', 'developed_by': { 'individuals', 'organizations', 'companies' } }})
Sunday, October 3, 2010
![Page 20: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/20.jpg)
JQuery and JSONP
jQuery.getJSON( 'http://site.com/json?callback=?', function(data) { // stuff gets done here })
JQuery makes utilizing JSONP data clean and easy
Note the second “?”: JQuery automatically generates a name for your callback function
Sunday, October 3, 2010
![Page 21: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/21.jpg)
Demo use of Drupal JSON...
[demo]
http://github.com/mcantelon/Drupalurk
Sunday, October 3, 2010
![Page 22: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/22.jpg)
Next: RSS to JSON via Views
Sunday, October 3, 2010
![Page 23: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/23.jpg)
Install Views Datasource
Sunday, October 3, 2010
![Page 24: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/24.jpg)
Add View
Sunday, October 3, 2010
![Page 25: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/25.jpg)
Add Page Display and Path
Sunday, October 3, 2010
![Page 26: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/26.jpg)
Add Paging
Sunday, October 3, 2010
![Page 27: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/27.jpg)
Add Fields
Sunday, October 3, 2010
![Page 28: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/28.jpg)
Set Style to JSON
Sunday, October 3, 2010
![Page 29: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/29.jpg)
Set Feed/Category ID
Sunday, October 3, 2010
![Page 30: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/30.jpg)
Save View and Check Path
Sunday, October 3, 2010
![Page 31: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/31.jpg)
Hack for Paging (v6 beta2)
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
Views Datasource needs theme tweak to make paging work
Stick the snippet below into your theme’s template.php
Sunday, October 3, 2010
![Page 32: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/32.jpg)
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
![Page 33: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/33.jpg)
Hack for JSONP (v6 beta2)
http://gist.github.com/578650
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
![Page 34: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/34.jpg)
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
![Page 35: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/35.jpg)
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
![Page 36: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/36.jpg)
Possible Experiment?
Create page template that amalgamates page regions into JSON, using JS/SSJS presentation layer
Sunday, October 3, 2010
![Page 37: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/37.jpg)
Pulling JSON into Node.js
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
restler module allows easy HTTP JSON requests
Sunday, October 3, 2010
![Page 38: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/38.jpg)
NPM == Drush PM for Node.js
http://mikecantelon.com/story/installing-npm-nodejs-package-manager
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
![Page 39: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/39.jpg)
Express.js: Node.js Framework
http://expressjs.com/
Express.js provides a nice base from which to develop
Built by co-author of “Drupal 6 Performance Tips”
Sunday, October 3, 2010
![Page 40: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/40.jpg)
Questions? Ideas?
Sunday, October 3, 2010
![Page 41: Not Only Drupal](https://reader035.fdocuments.net/reader035/viewer/2022081400/5557749cd8b42ace7f8b542e/html5/thumbnails/41.jpg)
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