Successfully reported this slideshow.
Your SlideShare is downloading. ×

Big Data for each one of us

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 41 Ad
Advertisement

More Related Content

Slideshows for you (18)

Similar to Big Data for each one of us (20)

Advertisement

More from OSCON Byrum (20)

Recently uploaded (20)

Advertisement

Big Data for each one of us

  1. Big Data for each one of us
  2. Team size = 1
  3. Team size = 4
  4. Can’t work alone anymore 
  5. Fall 2011
  6. Team size = ???
  7. Can’t count on web designer Anymore 
  8. Extension points
  9. Connectors Tabs Applications Widgets
  10. Team size = 10
  11. 3 month later…
  12. developer usability
  13. REST Java requirejs mustache
  14. 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":[...] } }
  15. Java
  16. 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; });
  17. requirejs
  18. requirejs total size of the compiled code (gziped): 70kb
  19. 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>
  20. Let’s write a widget!
  21. 5 files
  22. 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" }
  23. An Icon
  24. 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>
  25. 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>
  26. the widget’s controller code define(["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; })
  27. Team size = you
  28. Thank You!

×