SlideShare a Scribd company logo
1 of 41
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
   Tabs
Applications
  Widgets
Team size = 10
3 month later…
developer usability
REST
  Java
requirejs
mustache
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 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;
})
Team size = you
Thank You!

More Related Content

What's hot

Django Class-based views (Slovenian)
Django Class-based views (Slovenian)Django Class-based views (Slovenian)
Django Class-based views (Slovenian)
Luka Zakrajšek
 
Sprout core and performance
Sprout core and performanceSprout core and performance
Sprout core and performance
Yehuda Katz
 

What's hot (18)

Optimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page AppsOptimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page Apps
 
Django Class-based views (Slovenian)
Django Class-based views (Slovenian)Django Class-based views (Slovenian)
Django Class-based views (Slovenian)
 
Knockoutjs UG meeting presentation
Knockoutjs UG meeting presentationKnockoutjs UG meeting presentation
Knockoutjs UG meeting presentation
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Bacbkone js
Bacbkone jsBacbkone js
Bacbkone js
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
 
Client Web
Client WebClient Web
Client Web
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS Services
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
AngularJS - $http & $resource Services
AngularJS - $http & $resource ServicesAngularJS - $http & $resource Services
AngularJS - $http & $resource Services
 
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 JavascriptjQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
 
Sprout core and performance
Sprout core and performanceSprout core and performance
Sprout core and performance
 
Mysocial databasequeries
Mysocial databasequeriesMysocial databasequeries
Mysocial databasequeries
 
Mysocial databasequeries
Mysocial databasequeriesMysocial databasequeries
Mysocial databasequeries
 
Cервер на Go для мобильной стратегии
Cервер на Go для мобильной стратегииCервер на Go для мобильной стратегии
Cервер на Go для мобильной стратегии
 
Building complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactBuilding complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and React
 
AngulrJS Overview
AngulrJS OverviewAngulrJS Overview
AngulrJS Overview
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 

Similar to Big Data for each one of us

After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
yangdj
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
yangdj
 
Android app development basics
Android app development basicsAndroid app development basics
Android app development basics
Anton Narusberg
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mohammad Shaker
 

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

JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
 
Gmaps Railscamp2008
Gmaps Railscamp2008Gmaps Railscamp2008
Gmaps Railscamp2008
 
SE2016 Android Mikle Anokhin "Speed up application development with data bind...
SE2016 Android Mikle Anokhin "Speed up application development with data bind...SE2016 Android Mikle Anokhin "Speed up application development with data bind...
SE2016 Android Mikle Anokhin "Speed up application development with data bind...
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
jQuery
jQueryjQuery
jQuery
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
Google app engine by example
Google app engine by exampleGoogle app engine by example
Google app engine by example
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
 
JavaScript Refactoring
JavaScript RefactoringJavaScript Refactoring
JavaScript Refactoring
 
Android app development basics
Android app development basicsAndroid app development basics
Android app development basics
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Gutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesGutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisables
 

More from OSCON Byrum

Declarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScriptDeclarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScript
OSCON Byrum
 

More from OSCON Byrum (20)

OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom FifieldOSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
 
Protecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent LicenseProtecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent License
 
Using Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open DataUsing Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open Data
 
Finite State Machines - Why the fear?
Finite State Machines - Why the fear?Finite State Machines - Why the fear?
Finite State Machines - Why the fear?
 
Open Source Automotive Development
Open Source Automotive DevelopmentOpen Source Automotive Development
Open Source Automotive Development
 
How we built our community using Github - Uri Cohen
How we built our community using Github - Uri CohenHow we built our community using Github - Uri Cohen
How we built our community using Github - Uri Cohen
 
The Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in PythonThe Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in Python
 
Distributed Coordination with Python
Distributed Coordination with PythonDistributed Coordination with Python
Distributed Coordination with Python
 
An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)
 
Oscon 2013 Jesse Anderson
Oscon 2013 Jesse AndersonOscon 2013 Jesse Anderson
Oscon 2013 Jesse Anderson
 
US Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzUS Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David Mertz
 
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
 
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
 
Declarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScriptDeclarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScript
 
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
 
A Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed ApplicationsA Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed Applications
 
Life After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data CloudLife After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data Cloud
 
Faster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesFaster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypes
 
Comparing open source private cloud platforms
Comparing open source private cloud platformsComparing open source private cloud platforms
Comparing open source private cloud platforms
 
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open SourceState of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
 

Recently uploaded

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
Wonjun Hwang
 

Recently uploaded (20)

JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 

Big Data for each one of us

  • 1. Big Data for each one of us
  • 2.
  • 3.
  • 4.
  • 5.
  • 7.
  • 8.
  • 10. Can’t work alone anymore 
  • 11.
  • 13.
  • 14.
  • 15.
  • 16. Team size = ???
  • 17. Can’t count on web designer Anymore 
  • 18.
  • 20. Connectors Tabs Applications Widgets
  • 21.
  • 24.
  • 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; });
  • 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!
  • 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" }
  • 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