SlideShare a Scribd company logo

JSONPified Google Spreadsheet (gtug Munich)

•
•
W
wolframkriesing

See how to use JSONP with a Google spreadsheet, even though it’s not exactly provided. I gave this talk at the Google Technology User Group Munich, Germany on 23rd July 2009. The blog article that goes with it: http://blog.uxebu.com/2009/04/30/jsonp-for-google-spreadsheets/

TechnologyBusiness
1 of 28
Download to read offline
Google Spreadsheet is the Database JSONPified Google Spreadsheet Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
JavaScript FrontEnd AJAX Usability UserExperience Browser CSS mobile Web2.0 django dojo OpenSource Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
We Need • The Use Case • JSONP, CSV • Google Spreadsheet • JavaScript Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
The Use Case Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Source: Calendar public data mashable use them as you like Freitag, 24. Juli 2009
Enrich Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Events Custom Data JSONP ??? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Custom Data Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Google Spreadsheet WHY? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Google Doc - My DB • Easy to maintain (by the customer) • Permission handling included • CDN for free • Speed! Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
JSONP Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
JSONP • JSON with Padding http://bit.ly/whatisjsonp • wrap your JSON with a function name • <script src="http://url/?callback=myFunc"></script> • myFunc({whatever:"data"}) • function name given by "caller" • easy cross domain (XD) • widely spread (gCal, Yahoo!Pipes, etc.) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
JSONP Pros • Native JavaScript • No Mapping, Parsing, Native Data • Speed! • Cross Domain • Trigger when data loaded (async made easy) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Real Life Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
ATOM not suited for spreadsheet data cross domain - fail Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
ATOM as JSON cross domain! huge, man Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
CSV so small, sweet still no cross domain :( Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
@runnismus Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
JSONPed CSV Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
CSV as JSONP Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
The Client http://static.uxebu.com/~cain/JSONPedCSV.html Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Drawbacks • Special format for some columns • Little fault tolerance • New lines denied • Callback name is fix Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Even Cooler • Nathan Hammond http://nathanhammond.com/using-google-spreadsheets-to-make-testing-easier • A converter macro • Creates JSONPed sheet on save • Sexy! • Less drawbacks :-) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
Actually • Nobody wants this! • Google: Please add JSONP to spreadsheets! Thanks! Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
thx http://static.uxebu.com/~cain/JSONPedCSV.html http://blog.uxebu.com/2009/04/30/jsonp-for-google-spreadsheets/ http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009

Recommended

Google Docs Presentation
Google Docs PresentationGoogle Docs Presentation
Google Docs Presentationdondonlau
 
Basic tutorial how to use google docs
Basic tutorial how to use google docsBasic tutorial how to use google docs
Basic tutorial how to use google docsCherrylin Ramos
 
State of the Word 2011
State of the Word 2011State of the Word 2011
State of the Word 2011photomatt
 
JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionsJavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionswolframkriesing
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeisterOur react-native experiences at crewmeister
Our react-native experiences at crewmeisterwolframkriesing
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjswolframkriesing
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)wolframkriesing
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindwolframkriesing
 

More Related Content

More from wolframkriesing

TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015wolframkriesing
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheetswolframkriesing
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the messwolframkriesing
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)wolframkriesing
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)wolframkriesing
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meantwolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburgwolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevconwolframkriesing
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)wolframkriesing
 
NEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachNEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachwolframkriesing
 
Java scriptgettingstarted
Java scriptgettingstartedJava scriptgettingstarted
Java scriptgettingstartedwolframkriesing
 
HTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit BangaloreHTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit Bangalorewolframkriesing
 

More from wolframkriesing (20)

TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
 
Baby steps
Baby stepsBaby steps
Baby steps
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheets
 
ECMAScript 6 for real
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for real
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the mess
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
 
Better Code through TDD
Better Code through TDDBetter Code through TDD
Better Code through TDD
 
April JavaScript Tools
April JavaScript ToolsApril JavaScript Tools
April JavaScript Tools
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
 
EmbedJS
EmbedJSEmbedJS
EmbedJS
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
 
WAC
WACWAC
WAC
 
NEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachNEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approach
 
Java scriptgettingstarted
Java scriptgettingstartedJava scriptgettingstarted
Java scriptgettingstarted
 
Munichjs javascript
Munichjs javascriptMunichjs javascript
Munichjs javascript
 
HTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit BangaloreHTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit Bangalore
 

JSONPified Google Spreadsheet (gtug Munich)

  • 1. Google Spreadsheet is the Database JSONPified Google Spreadsheet Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 2. JavaScript FrontEnd AJAX Usability UserExperience Browser CSS mobile Web2.0 django dojo OpenSource Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 3. We Need • The Use Case • JSONP, CSV • Google Spreadsheet • JavaScript Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 4. The Use Case Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 5. Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 6. Source: Calendar public data mashable use them as you like Freitag, 24. Juli 2009
  • 7. Enrich Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 8. Events Custom Data JSONP ??? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 9. Custom Data Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 10. Google Spreadsheet WHY? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 11. Google Doc - My DB • Easy to maintain (by the customer) • Permission handling included • CDN for free • Speed! Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 12. JSONP Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 13. JSONP • JSON with Padding http://bit.ly/whatisjsonp • wrap your JSON with a function name • <script src="http://url/?callback=myFunc"></script> • myFunc({whatever:"data"}) • function name given by "caller" • easy cross domain (XD) • widely spread (gCal, Yahoo!Pipes, etc.) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 14. JSONP Pros • Native JavaScript • No Mapping, Parsing, Native Data • Speed! • Cross Domain • Trigger when data loaded (async made easy) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 15. Real Life Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 16. Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 17. ATOM not suited for spreadsheet data cross domain - fail Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 18. ATOM as JSON cross domain! huge, man Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 19. CSV so small, sweet still no cross domain :( Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 20. @runnismus Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 21. Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 22. JSONPed CSV Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 23. CSV as JSONP Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 24. The Client http://static.uxebu.com/~cain/JSONPedCSV.html Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 25. Drawbacks • Special format for some columns • Little fault tolerance • New lines denied • Callback name is fix Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 26. Even Cooler • Nathan Hammond http://nathanhammond.com/using-google-spreadsheets-to-make-testing-easier • A converter macro • Creates JSONPed sheet on save • Sexy! • Less drawbacks :-) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 27. Actually • Nobody wants this! • Google: Please add JSONP to spreadsheets! Thanks! Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009
  • 28. thx http://static.uxebu.com/~cain/JSONPedCSV.html http://blog.uxebu.com/2009/04/30/jsonp-for-google-spreadsheets/ http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing Freitag, 24. Juli 2009