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

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!

Big Data for each one of us

by OSCON Byrum on Jul 20, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 11

Statistics

Big Data for each one of us Presentation Transcript