Big Data for each one of us
Upcoming SlideShare
Loading in...5
×
 

Big Data for each one of us

on

  • 1,283 views

 

Statistics

Views

Total Views
1,283
Views on SlideShare
1,266
Embed Views
17

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 17

http://lanyrd.com 17

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Big Data for each one of us Big Data for each one of us Presentation Transcript

  • 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":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":[...] } }
  • Java
  • 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; });
  • requirejs
  • requirejs total size of the compiled code (gziped): 70kb
  • 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>
  • Let’s write a widget!
  • 5 files
  • 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"}
  • An Icon
  • 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>
  • 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>
  • 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;})
  • Team size = you
  • Thank You!