viviancromwell

1990: first browser, Tim Berners-Lee
1995: HTML 2.0
1996: Opera, iframe, Falsh, Netscape (86%) and IE (10%)
1997: 50% of US households had internet via AOL, HTML 4.0
1999: IE (99%)
2002: Mozilla ==> Firefox
2003: Safari
2004: Dojo Toolkit, Gmail
2005: Google Maps, Prototype JS, Ajax term coined, Ajaxian
2006: jQuery, MooTools

viviancromwell

updateRenderModel(contentOffset) {
  var listItemHeight = ITEM_SIZE;
  // Use contentOffset to calculate first visible dataItem as y-position / height of item
  var firstVisibleItem = Math.max(0, Math.floor(contentOffset.y / listItemHeight));
  var renderModelSize = BUFFER_ITEMS * 2 + DISPLAY_ITEMS;
  // Calculate first y-position
  var nextPosition = (firstVisibleItem - BUFFER_ITEMS) * listItemHeight;
  // Subset of dataModel to be rendered.
  var dataItems = this.state.dataModel.slice(firstVisibleItem, firstVisibleItem + renderModelSize);
  var newRenderModel = dataItems.map((dataItem, index) => {

viviancromwell

onScroll(e) {
  this.updateRenderModel(e.nativeEvent.contentOffset);
}

render() {
  var items = this.state.renderModel.map(renderItem => {
    const itemStyle = {
      position       : 'absolute',
      height         : ITEM_SIZE,
      left           : 0,