Quick pass

coffee/datasource.coffee

@@ -55,7 +55,7 @@ class @DataSource
         viewModelIndex = (row * DATA_POINTS) + col
 
         # Create the view model for this grid point
-        @viewModels[viewModelIndex] ||= {}
+        @viewModels[viewModelIndex] = {}
 
         # Calculate the brightness of a grid point according to how far away it is from the data point
         @viewModels[viewModelIndex].brightness = Math.min(1, Math.max(0, (DISPLAY_SPREAD - Math.abs(dataPoint - ROW_AMPLITUDES[row])) / DISPLAY_SPREAD))
@@ -91,9 +91,7 @@ class @DataSource
 
   doWork: =>
     # Produce the data
-    Perf.time 'producing data' if PROFILE
     data = produceData.call(this)
-    Perf.timeEnd 'producing data' if PROFILE
 
     # Notify anyone interested in the data
     listener(data) for listener in @dataListeners

coffee/native.coffee

@@ -10,8 +10,6 @@ dataSource = new (getDataSource())
 
 # Attach a handler to that data source, to be called whenever new data is available
 dataSource.onData (data) ->
-  Perf.time 'reconstructing DOM'
-
   # Remove the visualizer from the DOM to prevent reflows
   visualizerElementParent.removeChild(visualizerElement)
 
@@ -31,19 +29,5 @@ dataSource.onData (data) ->
   # Reattach the visualizer element
   visualizerElementParent.appendChild visualizerElement
 
-  Perf.timeEnd 'reconstructing DOM'
-
 # Make the data source work as fast as possible
-workIt = ->
-  # Work!
-  dataSource.doWork()
-
-  # Force a synchronous reflow, then schedule another work package.
-  # NOTE: This is preferable to using requestAnimationFrame, because RAF fires at funny times.
-  Perf.time 'redrawing' if PROFILE
-  forceReflow()
-  Perf.timeEnd 'redrawing' if PROFILE
-
-  # Schedule that next work package
-  setZeroTimeout workIt
-workIt()
+setInterval dataSource.doWork.bind(dataSource), 0

coffee/react.coffee

@@ -1,25 +1,20 @@
-# Given a data point, produce an object where the keys represent DOM element attributes
-dataPointToAttributes = (dataPoint) ->
-  style:
-    backgroundColor: "rgba(0,255,0,#{dataPoint.brightness})"
+DataPoint = React.createClass
+  shouldComponentUpdate: (prevProps) -> prevProps.dataPoint.brightness != @props.dataPoint.brightness
+  render: ->
+    React.DOM.div (style: (backgroundColor: "rgba(0,255,0,#{@props.dataPoint.brightness})"))
 
 # Create a React component for the visualizer
 VisualizerComponent = React.createClass
   getInitialState: -> { data: [] }
 
   componentDidMount: ->
-    # Instantiate a data source
-    @dataSource = @props.dataSource or new BoringDataSource
-
     # Attach a handler to that data source, to be called whenever new data is available
-    @dataSource.onData (data) =>
-      Perf.time 'setting state' if PROFILE
-      @replaceState { data: data }
-      Perf.timeEnd 'setting state' if PROFILE
+    @props.dataSource.onData (data) =>
+      @setState { data: data }
 
   render: ->
     # Return data point elements, wrapped in a visualizer
-    React.DOM.div @props, (React.DOM.div dataPointToAttributes(dataPoint) for dataPoint in @state.data)
+    React.DOM.div @props, ((DataPoint (dataPoint: dataPoint)) for dataPoint in @state.data)
 
 # Create a visualizer
 visualizer = new VisualizerComponent { id: 'visualizer', dataSource: (dataSource = new (getDataSource())) }
@@ -32,17 +27,5 @@ app = React.DOM.body null, [visualizer, markerButton]
 
 # Render the app
 React.renderComponent app, document.body, ->
-  # Make the data source work as fast as possible
-  workIt = ->
-    # Work!
-    dataSource.doWork()
-
-    # Force a synchronous reflow, then schedule another work package.
-    # NOTE: This is preferable to using requestAnimationFrame, because RAF fires at funny times.
-    Perf.time 'redrawing' if PROFILE
-    forceReflow()
-    Perf.timeEnd 'redrawing' if PROFILE
-
-    # Schedule that next work package
-    setZeroTimeout workIt
-  workIt()
+  setInterval dataSource.doWork.bind(dataSource), 0
+

native.html

@@ -20,6 +20,7 @@
   <script src="js/perf.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/datasource.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/native.js" type="text/javascript" charset="utf-8"></script>
+  <script src="js/fpscounter.js" type="text/javascript" charset="utf-8"></script>
 
 </body>
 

react.html

@@ -17,6 +17,7 @@
   <script src="js/datasource.js" type="text/javascript" charset="utf-8"></script>
   <script src="http://fb.me/react-0.5.0.min.js" type="text/javascript"></script>
   <script src="js/react.js" type="text/javascript" charset="utf-8"></script>
+  <script src="js/fpscounter.js" type="text/javascript" charset="utf-8"></script>
 
 </body>