1. Big Data for each one of us

6. Team size = 1

9. Team size = 4

10. Can’t work alone anymore 

11. 

12. Fall 2011

16. Team size = ???

17. Can’t count on web designer
Anymore 

18. 

19. Extension points

20. Connectors
Tabs
Applications
Widgets

22. Team size = 10

23. 3 month later…

25. developer usability

26. REST
Java
requirejs
mustache

27. 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":[...]
}
}

28. Java

29. 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;
});

30. requirejs

31. requirejs
total size of the
compiled code (gziped): 70kb

32. 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>

33. Let’s write a widget!

34. 5 files

35. 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"
}

36. An Icon

37. 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>

38. 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>

39. 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;
})

40. Team size = you

41. Thank You!