Initial commit

Author: gthomas-appfolio

.gitignore

@@ -0,0 +1,10 @@
+._*
+.DS_Store
+.DS_Store?
+.idea
+.Spotlight-V100
+.Trashes
+docs
+Icon?
+node_modules
+public/scripts/bower_components

.jshintrc

@@ -0,0 +1,20 @@
+{
+  "node": true,
+  "browser": true,
+  "bitwise": true,
+  "devel": false,
+  "eqeqeq": false,
+  "forin": true,
+  "immed": true,
+  "latedef": "nofunc",
+  "newcap": true,
+  "noarg": true,
+  "noempty": true,
+  "nonew": true,
+  "nomen": false,
+  "sub": true,
+  "trailing": true,
+  "undef": true,
+  "unused": true,
+  "asi": true
+}

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 bestguy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

Readme.md

@@ -0,0 +1,26 @@
+# Lazy load example
+
+* [ES6 (via BabelJS)](http://babeljs.io/)
+* [Ractive](http://www.ractivejs.org/)
+* [Webpack](http://webpack.github.io)
+* [lodash](https://lodash.com/docshttps://github.com/chjj/marked)
+* [xhttp](https://github.com/Mitranim/xhttp)
+* [Ractive-route](https://github.com/MartinKolarik/ractive-route)
+
+----
+
+## Install & Run:
+
+### For development:
+
+    npm install
+    npm start
+
+Open: http://localhost:3000
+
+### For production bundle:
+
+    webpack -p
+    npm start
+
+Open: http://localhost:3000

app.js

@@ -0,0 +1,35 @@
+'use strict';
+
+let config = require('config');
+let express = require('express');
+let logger = require('morgan');
+let request = require('request-promise');
+let data = require('./data.json');
+
+let app = new express();
+
+// ## Middleware
+
+app.use(logger('dev'));
+app.use(express.static(`${__dirname}/public`));
+
+// ## Routes
+if (config.env == 'dev') {
+  let webpackMiddleware = require('webpack-dev-middleware');
+  let webpack = require('webpack');
+  let webpackConfig = require('./webpack.config.js');
+  app.use(webpackMiddleware(webpack(webpackConfig), {}));
+}
+
+app.get('/api/data', (req, resp) => {
+  let start = parseInt(req.query.start || 0);
+  let size = parseInt(req.query.size || 1000);
+  let results = {
+    results: data.slice(start, start+size),
+    total: data.length
+  }
+
+  setTimeout(() => resp.json(results), 3500); // Fake delay to simulate reality
+});
+
+app.listen(config.port, () => console.log(`Server running on port ${config.port}...`));

config/default.js

@@ -0,0 +1,4 @@
+module.exports = {
+  env: process.env.NODE_ENV || 'dev',
+  port: process.env.PORT || 3000
+};

data.json

@@ -0,0 +1,33 @@
+{
+  "name": "lazy-load-example",
+  "version": "0.1.0",
+  "private": true,
+  "main": "app.js",
+  "scripts": {
+    "start": "node app.js"
+  },
+  "dependencies": {
+    "config": "^1.8.1",
+    "express": "^4.10.2",
+    "morgan": "^1.5.0"
+  },
+  "devDependencies": {
+    "animate.css": "^3.5.1",
+    "autoprefixer-loader": "^3.2.0",
+    "babel-core": "^5.8.35",
+    "babel-loader": "^5.4.0",
+    "css-loader": "^0.23.1",
+    "html-loader": "^0.4.3",
+    "lodash": "^4.6.1",
+    "ractive": "^0.7.3",
+    "ractive-loader": "^0.5.6",
+    "ractive-route": "github:martinkolarik/ractive-route",
+    "ractive-transitions-fade": "^0.3.1",
+    "ractive-transitions-slide": "^0.4.0",
+    "request-promise": "^3.0.0",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.5.1",
+    "xhttp": "0.0.8"
+  }
+}

package.json

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Lazy-load example</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="format-detection" content="telephone=no">
+  <link rel="stylesheet" href="/styles/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+</head>
+
+<body>
+  <div id="main" class="container"></div>
+</body>
+
+<script type="text/javascript" src="./bundle.js"></script>
+
+</html>

public/index.html

@@ -0,0 +1,74 @@
+import Ractive from 'ractive';
+import xhttp from 'xhttp';
+import _ from 'lodash';
+
+export default Ractive.extend({ // jshint ignore:line
+  template: require('./Home.html'),
+  data() {
+    return {
+      loading: true,
+      search_index: 0
+    }
+  },
+  computed: {
+    search_results() {
+      let { data, search } = this.get();
+      search = search.trim().toLowerCase();
+      if (search.trim().length > 0) {
+        return _.filter(data, user => user.first.startsWith(search) ||  user.last.startsWith(search)) || [];
+      } else {
+        return []
+      }
+    }
+  },
+  oninit() {
+    let page_size = 500;
+
+    this.observe({
+      search: () => this.set({ search_index: 0 }) // Reset index on new search
+    });
+
+    // Request first page of data, up to page_size results:
+    xhttp({ method: 'get', url: `/api/data?size=${page_size}`})
+      .then(data => {
+        // Get total results from first request:
+        let total_results = data.total;
+
+        // Display first results and total:
+        this.set({
+          data: data.results,
+          total: total_results
+        });
+
+        // If results length < page size, we are done; otherwise queue up requests:
+        if (total_results > page_size) {
+
+          // Build array of page start indexes:
+          let page_indexes = _.range(page_size, total_results, page_size);
+
+          // Create array of promises for requesting each page, then appending results:
+          let page_requests =
+              page_indexes.map(start_index => () => {
+                return xhttp({ method: 'get', url: `/api/data?size=${page_size}&start=${start_index}`})
+                          .then(data => this.push('data', ...data.results)); // Appends data
+              });
+
+          // Sets loading indicator to false when all requests are complete:
+          page_requests.push(() => this.set({ loading: false }));
+
+          // This calls the promises above in sequence:
+          page_requests.reduce((promise, next_request) => promise.then(next_request), Promise.resolve());
+
+          // Parallel
+//          let page_requests =
+//              page_indexes.map(start_index => new Promise(() => {xhttp({ method: 'get', url: `/api/data?size=${page_size}&start=${start_index}`})
+//                          .then(data => this.push('data', ...data.results))); // Appends data
+//          // Start all requests, set loading indicator to false when all are complete:
+//          Promise.all(page_requests)
+//            .then(data => this.set({ loading: false }))
+//            .catch(err => console.error);
+        }
+      })
+      .catch(err => console.error);
+  }
+});