Big Data for each one of us
Team size = 1
Team size = 4
Can’t work alone anymore 

Fall 2011
Team size = ???
Can’t count on web designer        Anymore 

Extension points
Connectors   TabsApplications  Widgets
Team size = 10
3 month later…
developer usability
REST  Javarequirejsmustache
REST   http://api.fluxtream.com/calendar/all/date/2012-05-27       {           "tbounds":{"start":1338069600000,"end":1338...
Java
Requirejs   define(["applications/calendar/tabs/Tab",            "applications/calendar/App", "applications/calendar/tabs/...
requirejs
requirejs                  total size of the            compiled code (gziped): 70kb
Mustache / Hogan        <div id="availableConnectors">          {{^rows}}             <div style="margin: 60px 0 75px 0; w...
Let’s write a widget!
5 files
A Manifest{    "WidgetDescription" : {"en" : "Average Daily Steps Taken per day,                            week or year"}...
An Icon
the widget’s contents template<div class="flx-widget-typo">  <section class="main-widget-data">     {{#steps}}     <div cl...
the widget’s settings template<form class="form-horizontal">   <fieldset>      <div class="control-group">         <label ...
the widget’s controller codedefine(["core/DashboardWidget"], function(DashboardWidget) {     var StepsTaken = new Dashboar...
Team size = you
Thank You!
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Big Data for each one of us
Upcoming SlideShare
Loading in...5
×

Big Data for each one of us

1,056

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,056
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Big Data for each one of us

  1. 1. Big Data for each one of us
  2. 2. Team size = 1
  3. 3. Team size = 4
  4. 4. Can’t work alone anymore 
  5. 5.
  6. 6. Fall 2011
  7. 7. Team size = ???
  8. 8. Can’t count on web designer Anymore 
  9. 9.
  10. 10. Extension points
  11. 11. Connectors TabsApplications Widgets
  12. 12. Team size = 10
  13. 13. 3 month later…
  14. 14. developer usability
  15. 15. REST Javarequirejsmustache
  16. 16. REST http://api.fluxtream.com/calendar/all/date/2012-05-27 { "tbounds":{"start":1338069600000,"end":1338155999999}, "solarInfo":{"sunrise":333,"sunset":1293,}, "updateNeeded":["google_calendar"], "addresses":{...}, "cities":[...], "inTransit":"UNKNOWN", "travelType":"UNKNOWN", "minTempC":10.0,... "settings":{ "temperatureUnit":"FAHRENHEIT", ... }, "haveDataConnectors":[...], "haveNoDataConnectors":[...], "selectedConnectors":[...], "hourlyWeatherData":[...], "cachedData":{ "bodymedia-burn":[...], "picasa-photo":[...], "google_latitude-location":[...], "fitbit-activity_summary":[...] } }
  17. 17. Java
  18. 18. Requirejs define(["applications/calendar/tabs/Tab", "applications/calendar/App", "applications/calendar/tabs/photos/PhotoUtils"], function(Tab, Calendar, PhotoUtils) { var maxWidth = 200; // other private variables // ... function render(dgest, timeUnit, calendarState, cEn) { this.getTemplate("text!applications/calendar/tabs/photos/photos.html", "photos", function() { ... }); } function setup(digest, cEn){...} function showNoPhotos(){...} function onDataReceived(photos){...} function connectorToggled(connectorName,objectTypeNames,enabled){...} function connectorDisplayable(connector){...} var photosTab = new Tab("photos", "Justin Loutsenhizer", "icon-camera", true); photosTab.render = render; photosTab.connectorToggled = connectorToggled; photosTab.connectorDisplayable = connectorDisplayable; return photosTab; });
  19. 19. requirejs
  20. 20. requirejs total size of the compiled code (gziped): 70kb
  21. 21. Mustache / Hogan <div id="availableConnectors"> {{^rows}} <div style="margin: 60px 0 75px 0; width: 100%; text-align: center">You have added all available connectors</div> {{/rows}} {{#rows}} <div class="row-fluid"> {{#connectors}} <div class="span4"> <a href="javascript:App.addConnector({{connectUrl}})"> <img src="{{image}}" alt="" width=158 Height=89> </a> <p>{{text}}</p> </div> {{/connectors}} </div> {{/rows}} </div>
  22. 22. Let’s write a widget!
  23. 23. 5 files
  24. 24. A Manifest{ "WidgetDescription" : {"en" : "Average Daily Steps Taken per day, week or year"}, "WidgetIcon" : "averageSteps.png", "WidgetName" : "averageSteps", "WidgetTitle" : {"en" : "Average Steps"}, "HasSettings" : true, "SupportedLanguages" : "en", "VendorIdentifier" : "Fluxtream.com", "RequiredConnectors":"bodymedia, fitbit"}
  25. 25. An Icon
  26. 26. the widget’s contents template<div class="flx-widget-typo"> <section class="main-widget-data"> {{#steps}} <div class="big-data-figure" style="color:{{color}}">{{steps}}<span class="data-unit">steps</span></div> {{/steps}} {{#noMeasure}} <div class="big-data-figure"><span class="data-unit">{{noMeasureMsg}}</span></div> {{/noMeasure}} </section></div>
  27. 27. the widget’s settings template<form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="input01">Steps threshold:</label> <div class="controls"> <input type="text" class="input-xlarge"id="averageStepsHappyDailyThreshold"> <p class="help-block">Number of steps that make you happy.</p> </div> </div> </fieldset></form>
  28. 28. the widget’s controller codedefine(["core/DashboardWidget"], function(DashboardWidget) { var StepsTaken = new DashboardWidget(); StepsTaken.postLoad = function() { // ... // using this.digest, this.settings, this.manifest var params = {"manifest" : this.manifest, "settings" : this.settings, "color" : color, "steps" : averageSteps>0?steps:null, "noMeasure" : averageSteps===0, "noMeasureMsg" : StepsTaken.noSteps()}; $("#averageSteps-widget .flx-body").empty(); $("#averageSteps-widget .flx-body").append( this.template.render(params) ); }; StepsTaken.validateSettings = function() {...}; StepsTaken.bindWidgetSettings = function(widgetSettings) {...} StepsTaken.defaultSettings = function(widgetSettings) {...} return StepsTaken;})
  29. 29. Team size = you
  30. 30. Thank You!
  1. A particular slide catching your eye?

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

×