MagJS - Occlusion Culling Mobile

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Mag.JS</title>
</head>

<body>
  <!--   <h1>Hello Mag.JS!</h1>
<a href="https://github.com/magnumjs/mag.js" target="top">GitHub</a>
<hr/>
    <h2>Occlusion culling</h2>

 -->
<div id="app">
  <div class="list">
    <ul>
      <li>
      </li>
    </ul>
  </div>
</div>


  <script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
  <script src="app.js"></script>

</body>

</html>

//Global: Raf Rate

mag.rafBounce = true;

//model
var app = {}

app.dstate = {
  pageY: 0,
  pageHeight: window.innerHeight
}

var items = []
for (var i = 0; i < 5000; i++) {
  items.push({
    title: 'Foo Bar ' + i
  })
}
var instance;
//yes, window.innerHeight is a data source, so it goes in the model
window.addEventListener("scroll", function(e) {
  app.dstate.pageY = Math.max(e.pageY || window.pageYOffset, 0);
  app.dstate.pageHeight = window.innerHeight;
  instance.draw(1)
})

//controller
app.controller = function() {
  this.items = items
}

//view
app.view = function(ctrl) {

  var pageY = app.dstate.pageY
  var begin = pageY / 31 | 0
  // Add 2 so that the top and bottom of the page are filled with
  // next/prev item, not just whitespace if item not in full view
  var end = begin + (app.dstate.pageHeight / 31 | 0 + 2)

  var offset = pageY % 31


  ctrl.list = {
    _style: 'height:' + ctrl.items.length * 31 + "px; position: relative; top:" + -offset + "px"
  }
  ctrl.ul = {
    _style: 'top:' + app.dstate.pageY + "px"
  }

  ctrl.li = ctrl.items.slice(begin, end).map(function(item) {
    return item.title
  })

}

instance = mag.module("app", app)

.hide {
  display: none;
}
a { display: block;}
a:after {content:" \bb";}



* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    background-color: white;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
}

ul li {
    background-color: #f0f0f0;
    margin-bottom: 1px;
    padding-top: 7px;
    padding-left: 20px;
    height: 30px;
}

#Mag.JS

## plunk boilerplate

From : http://jsfiddle.net/7JNUy/1/
And: http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome