├── .gitignore ├── images ├── test-image-01.jpg ├── test-image-02.jpg ├── test-image-03.jpg ├── test-image-04.jpg ├── test-image-05.jpg └── test-image-06.jpg ├── benchmarks ├── color-picker │ ├── marko │ │ ├── page.marko │ │ ├── server.js │ │ ├── client.js │ │ ├── rollup.config.js │ │ └── components │ │ │ └── app │ │ │ └── index.marko │ ├── inferno │ │ ├── .babelrc │ │ ├── util │ │ │ └── serverRender.jsx │ │ ├── server.jsx │ │ ├── client.jsx │ │ ├── page.marko │ │ ├── rollup.config.js │ │ └── components │ │ │ └── App.jsx │ ├── vue │ │ ├── .babelrc │ │ ├── page.marko │ │ ├── util │ │ │ └── serverRender.jsx │ │ ├── server.jsx │ │ ├── rollup.config.js │ │ ├── client.jsx │ │ └── components │ │ │ └── App.jsx │ ├── svelte │ │ ├── util │ │ │ └── serverRender.js │ │ ├── server.js │ │ ├── rollup.config.js │ │ ├── page.marko │ │ ├── client.js │ │ └── components │ │ │ └── App.html │ ├── react │ │ ├── .babelrc │ │ ├── util │ │ │ └── serverRender.jsx │ │ ├── server.jsx │ │ ├── client.jsx │ │ ├── page.marko │ │ ├── rollup.config.js │ │ └── components │ │ │ └── App.jsx │ ├── preact │ │ ├── .babelrc │ │ ├── util │ │ │ └── serverRender.jsx │ │ ├── server.jsx │ │ ├── client.jsx │ │ ├── page.marko │ │ ├── rollup.config.js │ │ └── components │ │ │ └── App.jsx │ ├── server.js │ ├── style.css │ ├── util │ │ └── search.js │ ├── client.js │ ├── createRoute.js │ ├── page.marko │ └── colors.json └── search-results │ ├── marko │ ├── page.marko │ ├── server.js │ ├── components │ │ ├── app │ │ │ └── index.marko │ │ └── app-search-results-item │ │ │ └── index.marko │ ├── client.js │ └── rollup.config.js │ ├── inferno │ ├── .babelrc │ ├── util │ │ └── serverRender.jsx │ ├── server.jsx │ ├── client.jsx │ ├── components │ │ ├── App.jsx │ │ └── SearchResultsItem.jsx │ ├── rollup.config.js │ └── page.marko │ ├── vue │ ├── .babelrc │ ├── page.marko │ ├── util │ │ └── serverRender.jsx │ ├── server.jsx │ ├── components │ │ ├── App.jsx │ │ ├── SearchResultsItem.jsx │ │ └── Footer.jsx │ ├── rollup.config.js │ └── client.jsx │ ├── svelte │ ├── util │ │ └── serverRender.js │ ├── server.js │ ├── rollup.config.js │ ├── components │ │ ├── App.html │ │ ├── SearchResultsItem.html │ │ └── Footer.html │ ├── page.marko │ └── client.js │ ├── react │ ├── .babelrc │ ├── util │ │ └── serverRender.jsx │ ├── server.jsx │ ├── components │ │ ├── App.jsx │ │ ├── SearchResultsItem.jsx │ │ └── Footer.jsx │ ├── client.jsx │ ├── rollup.config.js │ └── page.marko │ ├── preact │ ├── .babelrc │ ├── util │ │ └── serverRender.jsx │ ├── server.jsx │ ├── components │ │ ├── App.jsx │ │ └── SearchResultsItem.jsx │ ├── client.jsx │ ├── page.marko │ └── rollup.config.js │ ├── util │ └── search.js │ ├── server.js │ ├── createRoute.js │ ├── client.js │ └── page.marko ├── benchmark-client ├── browser.json ├── components │ ├── mount-container │ │ ├── style.css │ │ └── index.marko │ └── app │ │ ├── index.marko │ │ └── component.js ├── client.js ├── createRoute.js ├── helpers.js └── page.marko ├── scripts ├── bundle.js └── minify.js ├── .jshintrc ├── index.marko ├── init.js ├── benchmarks.js ├── benchmark-server └── run.js ├── server.js ├── package.json ├── README.md └── util └── runBenchmark.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.marko.js 2 | /node_modules 3 | /build 4 | /.cache 5 | .DS_Store 6 | /static 7 | npm-debug.log -------------------------------------------------------------------------------- /images/test-image-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/isomorphic-ui-benchmarks/master/images/test-image-01.jpg -------------------------------------------------------------------------------- /images/test-image-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/isomorphic-ui-benchmarks/master/images/test-image-02.jpg -------------------------------------------------------------------------------- /images/test-image-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/isomorphic-ui-benchmarks/master/images/test-image-03.jpg -------------------------------------------------------------------------------- /images/test-image-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/isomorphic-ui-benchmarks/master/images/test-image-04.jpg -------------------------------------------------------------------------------- /images/test-image-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/isomorphic-ui-benchmarks/master/images/test-image-05.jpg -------------------------------------------------------------------------------- /images/test-image-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/isomorphic-ui-benchmarks/master/images/test-image-06.jpg -------------------------------------------------------------------------------- /benchmarks/color-picker/marko/page.marko: -------------------------------------------------------------------------------- 1 | 2 | <@body> 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /benchmarks/search-results/marko/page.marko: -------------------------------------------------------------------------------- 1 | 2 | <@body> 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /benchmark-client/browser.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": [ 3 | "lodash/lodash.js", 4 | "benchmark/benchmark.js", 5 | "require: ./components/app" 6 | ] 7 | } -------------------------------------------------------------------------------- /benchmark-client/components/mount-container/style.css: -------------------------------------------------------------------------------- 1 | .mount-container { 2 | height: 600px; 3 | width: 300px; 4 | overflow: scroll; 5 | display: inline-block; 6 | } -------------------------------------------------------------------------------- /benchmarks/color-picker/inferno/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0" 5 | ], 6 | "plugins": ["inferno"] 7 | } -------------------------------------------------------------------------------- /benchmarks/search-results/inferno/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0" 5 | ], 6 | "plugins": ["inferno"] 7 | } -------------------------------------------------------------------------------- /benchmarks/color-picker/vue/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0" 5 | ], 6 | "plugins": ["transform-vue-jsx"] 7 | } -------------------------------------------------------------------------------- /benchmarks/search-results/vue/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0" 5 | ], 6 | "plugins": ["transform-vue-jsx"] 7 | } -------------------------------------------------------------------------------- /benchmarks/color-picker/svelte/util/serverRender.js: -------------------------------------------------------------------------------- 1 | module.exports = function serverRender(App, input, out) { 2 | const html = App.render({ colors: input.colors }); 3 | out.beginAsync().end(html); 4 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/svelte/util/serverRender.js: -------------------------------------------------------------------------------- 1 | module.exports = function serverRender(App, searchResultsData, out) { 2 | const html = App.render({ searchResultsData }); 3 | out.beginAsync().end(html); 4 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": ["transform-react-constant-elements"] 8 | } -------------------------------------------------------------------------------- /benchmarks/search-results/react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": ["transform-react-constant-elements"] 8 | } -------------------------------------------------------------------------------- /benchmark-client/components/mount-container/index.marko: -------------------------------------------------------------------------------- 1 | class { 2 | 3 | } 4 | 5 | 6 |

${data.libName}

7 |
8 |
9 |
10 |
11 | -------------------------------------------------------------------------------- /benchmarks/search-results/marko/server.js: -------------------------------------------------------------------------------- 1 | var app = require('./components/app'); 2 | 3 | module.exports = function(getNextSearchResults) { 4 | return function benchFn() { 5 | var html = app.renderToString(getNextSearchResults()); 6 | return html; 7 | }; 8 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/react/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOMServer = require('react-dom/server'); 3 | 4 | module.exports = function reactRender(App, colors) { 5 | return ReactDOMServer.renderToString( 6 | ); 7 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/inferno/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | var Inferno = require('inferno'); 2 | var InfernoServer = require('inferno-server'); 3 | 4 | module.exports = function infernoRender(App, colors) { 5 | return InfernoServer.renderToString( 6 | ); 7 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/marko/server.js: -------------------------------------------------------------------------------- 1 | var app = require('./components/app'); 2 | 3 | module.exports = function(colors) { 4 | return function benchFn() { 5 | var html = app.renderToString({ 6 | colors: colors 7 | }); 8 | 9 | return html; 10 | }; 11 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/preact/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0" 5 | ], 6 | "plugins": [ 7 | [ "transform-react-jsx", { "pragma": "h" } ], 8 | ["transform-es2015-block-scoping"] 9 | ] 10 | } -------------------------------------------------------------------------------- /benchmarks/color-picker/preact/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | var preact = require('preact'); 2 | var h = preact.h; 3 | var renderToString = require('preact-render-to-string'); 4 | 5 | module.exports = function reactRender(App, colors) { 6 | return renderToString( 7 | ); 8 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/preact/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose": true, "modules": false }], 4 | "stage-0" 5 | ], 6 | "plugins": [ 7 | [ "transform-react-jsx", { "pragma": "h" } ], 8 | ["transform-es2015-block-scoping"] 9 | ] 10 | } -------------------------------------------------------------------------------- /benchmarks/color-picker/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | require('marko/node-require'); 3 | 4 | var colors = require('./colors.json'); 5 | module.exports = function(bench) { 6 | var serverFactory = bench.serverFactory; 7 | var fn = serverFactory(colors); 8 | return { 9 | fn 10 | }; 11 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/react/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOMServer = require('react-dom/server'); 3 | 4 | module.exports = function reactRender(App, searchResultsData) { 5 | return ReactDOMServer.renderToString( 6 | ); 7 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/svelte/server.js: -------------------------------------------------------------------------------- 1 | require('svelte/ssr/register'); 2 | 3 | var App = require('./components/App.html'); 4 | 5 | module.exports = function(colors) { 6 | return function benchFn(done) { 7 | const html = App.render({ colors }); 8 | done(); 9 | return html; 10 | }; 11 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/inferno/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | var Inferno = require('inferno'); 2 | var InfernoServer = require('inferno-server'); 3 | 4 | module.exports = function infernoRender(App, searchResultsData) { 5 | return InfernoServer.renderToString( 6 | ); 7 | }; -------------------------------------------------------------------------------- /benchmark-client/components/app/index.marko: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 | 
 7 | 
 8 |     
 9 | 
10 |
11 | -------------------------------------------------------------------------------- /benchmarks/search-results/preact/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | var preact = require('preact'); 2 | var h = preact.h; 3 | var renderToString = require('preact-render-to-string'); 4 | 5 | module.exports = function reactRender(App, searchResultsData) { 6 | return renderToString( 7 | ); 8 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/svelte/server.js: -------------------------------------------------------------------------------- 1 | require('svelte/ssr/register'); 2 | 3 | var App = require('./components/App.html'); 4 | 5 | module.exports = function(getNextSearchResults) { 6 | return function benchFn(done) { 7 | const html = App.render({ searchResultsData: getNextSearchResults() }); 8 | done(); 9 | return html; 10 | }; 11 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/inferno/server.jsx: -------------------------------------------------------------------------------- 1 | var Inferno = require('inferno'); 2 | var InfernoServer = require('inferno-server'); 3 | var App = require('./components/App'); 4 | 5 | module.exports = function(colors) { 6 | return function benchFn() { 7 | var html = InfernoServer.renderToString( 8 | ); 9 | 10 | return html; 11 | }; 12 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/react/server.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOMServer = require('react-dom/server'); 3 | 4 | var App = require('./components/App'); 5 | 6 | module.exports = function(colors) { 7 | return function benchFn() { 8 | 9 | var html = ReactDOMServer.renderToString( 10 | ); 11 | 12 | return html; 13 | }; 14 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/vue/page.marko: -------------------------------------------------------------------------------- 1 | import serverRender from './util/serverRender' 2 | import App from './components/App'; 3 | 4 | 5 | <@body> 6 |
7 | $ serverRender(App, input, out); 8 |
9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /benchmarks/color-picker/preact/server.jsx: -------------------------------------------------------------------------------- 1 | var preact = require('preact'); 2 | var h = preact.h; 3 | var renderToString = require('preact-render-to-string'); 4 | 5 | var App = require('./components/App'); 6 | 7 | module.exports = function(colors) { 8 | return function benchFn() { 9 | 10 | var html = renderToString( 11 | ); 12 | 13 | return html; 14 | }; 15 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/inferno/server.jsx: -------------------------------------------------------------------------------- 1 | var Inferno = require('inferno'); 2 | var InfernoServer = require('inferno-server'); 3 | var App = require('./components/App'); 4 | 5 | module.exports = function(getNextSearchResults) { 6 | return function benchFn() { 7 | 8 | var html = InfernoServer.renderToString( 9 | ); 10 | 11 | return html; 12 | }; 13 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/react/server.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOMServer = require('react-dom/server'); 3 | 4 | var App = require('./components/App'); 5 | 6 | module.exports = function(getNextSearchResults) { 7 | return function benchFn() { 8 | var html = ReactDOMServer.renderToString( 9 | ); 10 | 11 | return html; 12 | }; 13 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/svelte/rollup.config.js: -------------------------------------------------------------------------------- 1 | import bublePlugin from 'rollup-plugin-buble'; 2 | import sveltePlugin from 'rollup-plugin-svelte'; 3 | import path from 'path'; 4 | 5 | export default { 6 | entry: path.join(__dirname, 'client.js'), 7 | format: 'iife', 8 | moduleName: 'app', 9 | plugins: [ 10 | sveltePlugin(), 11 | bublePlugin() 12 | ], 13 | dest: path.join(process.env.BUNDLES_DIR, 'svelte.js') 14 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/svelte/rollup.config.js: -------------------------------------------------------------------------------- 1 | import bublePlugin from 'rollup-plugin-buble'; 2 | import sveltePlugin from 'rollup-plugin-svelte'; 3 | import path from 'path'; 4 | 5 | export default { 6 | entry: path.join(__dirname, 'client.js'), 7 | format: 'iife', 8 | moduleName: 'app', 9 | plugins: [ 10 | sveltePlugin(), 11 | bublePlugin() 12 | ], 13 | dest: path.join(process.env.BUNDLES_DIR, 'svelte.js') 14 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/svelte/page.marko: -------------------------------------------------------------------------------- 1 | import 'svelte/ssr/register'; 2 | import serverRender from './util/serverRender'; 3 | import App from './components/App.html'; 4 | 5 | 6 | <@body> 7 |
8 | $ serverRender(App, input, out); 9 |
10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /benchmarks/search-results/vue/page.marko: -------------------------------------------------------------------------------- 1 | import serverRender from './util/serverRender' 2 | import App from './components/App'; 3 | 4 | 5 | <@body> 6 |
7 | $ serverRender(App, input.searchResults, out); 8 |
9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /benchmarks/search-results/marko/components/app/index.marko: -------------------------------------------------------------------------------- 1 | class { 2 | onInput() { 3 | this.input = null; 4 | } 5 | 6 | onMount() { 7 | window.onMount(); 8 | } 9 | } 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /benchmarks/search-results/preact/server.jsx: -------------------------------------------------------------------------------- 1 | var preact = require('preact'); 2 | var h = preact.h; 3 | var renderToString = require('preact-render-to-string'); 4 | 5 | var App = require('./components/App'); 6 | 7 | module.exports = function(getNextSearchResults) { 8 | return function benchFn() { 9 | 10 | var html = renderToString( 11 | ); 12 | 13 | return html; 14 | }; 15 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/marko/client.js: -------------------------------------------------------------------------------- 1 | var app = require('./components/app'); 2 | require('marko/components').init(); 3 | 4 | window.addBench('marko', function(el, getNextSearchResults) { 5 | 6 | var component = app.renderSync(getNextSearchResults()) 7 | .appendTo(el) 8 | .getComponent(); 9 | 10 | return function(done) { 11 | component.input = getNextSearchResults(); 12 | component.update(); 13 | done(); 14 | }; 15 | }); -------------------------------------------------------------------------------- /benchmarks/search-results/svelte/components/App.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{#each searchResultsData.items as item, i}} 4 | 5 | {{/each}} 6 |
7 |
8 |
9 | 10 | -------------------------------------------------------------------------------- /benchmarks/search-results/svelte/page.marko: -------------------------------------------------------------------------------- 1 | import 'svelte/ssr/register'; 2 | import serverRender from './util/serverRender'; 3 | import App from './components/App.html'; 4 | 5 | 6 | <@body> 7 |
8 | $ serverRender(App, input.searchResults, out); 9 |
10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /benchmarks/color-picker/style.css: -------------------------------------------------------------------------------- 1 | .colors .color { 2 | box-sizing: border-box; 3 | border: 2px solid white; 4 | cursor: pointer; 5 | } 6 | 7 | .colors .color.selected { 8 | border: 2px solid black; 9 | } 10 | .colors ul { 11 | margin: 0; 12 | padding-left: 0; 13 | list-style: none; 14 | } 15 | 16 | .colors li { 17 | margin: 0; 18 | display: inline-block; 19 | width: 150px; 20 | height: 3em; 21 | text-align: center; 22 | line-height: 3em; 23 | vertical-align: middle; 24 | } -------------------------------------------------------------------------------- /benchmarks/color-picker/marko/client.js: -------------------------------------------------------------------------------- 1 | var app = require('./components/app'); 2 | require('marko/components').init(); 3 | 4 | window.addBench('marko', function(el, colors) { 5 | 6 | var component = app.renderSync({ colors: colors }) 7 | .appendTo(el) 8 | .getComponent(); 9 | 10 | var selectedColorIndex = 0; 11 | 12 | return function(done) { 13 | component.state.selectedColorIndex = (++selectedColorIndex) % colors.length; 14 | component.update(); 15 | done(); 16 | }; 17 | }); -------------------------------------------------------------------------------- /benchmarks/color-picker/vue/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | const Vue = require('Vue'); 2 | const renderToString = require('vue-server-renderer').createRenderer().renderToString; 3 | 4 | module.exports = function serverRender(App, input, out) { 5 | const vm = new Vue({ 6 | render(h) { 7 | return 8 | } 9 | }); 10 | 11 | var asyncOut = out.beginAsync(); 12 | 13 | return renderToString(vm, function(err, html) { 14 | if (err) { 15 | throw err; 16 | } 17 | 18 | asyncOut.end(html); 19 | }); 20 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/vue/util/serverRender.jsx: -------------------------------------------------------------------------------- 1 | const Vue = require('Vue'); 2 | const renderToString = require('vue-server-renderer').createRenderer().renderToString; 3 | 4 | module.exports = function serverRender(App, searchResultsData, out) { 5 | const vm = new Vue({ 6 | render(h) { 7 | return 8 | } 9 | }); 10 | 11 | var asyncOut = out.beginAsync(); 12 | 13 | return renderToString(vm, function(err, html) { 14 | if (err) { 15 | throw err; 16 | } 17 | 18 | asyncOut.end(html); 19 | }); 20 | }; -------------------------------------------------------------------------------- /benchmark-client/client.js: -------------------------------------------------------------------------------- 1 | var helpers = require('./helpers'); 2 | 3 | function addBench(libName, factoryFunc) { 4 | var benchmark = exports.benchmark; 5 | var bench = benchmark.createBench(libName, factoryFunc); 6 | benchmark.benches[libName] = bench; 7 | } 8 | 9 | function registerBenchmark(factoryFunc) { 10 | var benchmark = factoryFunc(helpers); 11 | benchmark.benches = {}; 12 | exports.benchmark = benchmark; 13 | } 14 | 15 | if (typeof window !== 'undefined') { 16 | window.addBench = addBench; 17 | window.registerBenchmark = registerBenchmark; 18 | window.onMount = function() {}; 19 | } -------------------------------------------------------------------------------- /benchmarks/color-picker/util/search.js: -------------------------------------------------------------------------------- 1 | var searchResultsData = require('./search-results-input.json'); 2 | 3 | exports.performSearch = function(input) { 4 | var pageIndex = input.pageIndex || 0; 5 | var pageSize = 100; 6 | var start = pageIndex * pageSize; 7 | 8 | var items = []; 9 | 10 | for (var i=start; i 13 | } 14 | }); 15 | 16 | renderToString(vm, function(err, html) { 17 | if (err) { 18 | throw err; 19 | } 20 | 21 | done(); 22 | 23 | return html; 24 | }); 25 | }; 26 | }; -------------------------------------------------------------------------------- /scripts/bundle.js: -------------------------------------------------------------------------------- 1 | require('../init'); 2 | 3 | var execSync = require('child_process').execSync; 4 | var path = require('path'); 5 | 6 | var benchmarks = require('../benchmarks'); 7 | var targetLib = process.argv[2]; 8 | 9 | benchmarks.forEach((benchmark) => { 10 | var benchmarkName = benchmark.name; 11 | 12 | benchmark.benches.forEach((bench) => { 13 | var libName = bench.name; 14 | if (targetLib && libName !== targetLib) { 15 | return; 16 | } 17 | 18 | process.env.BUNDLES_DIR = path.join(__dirname, `../build/${benchmarkName}/bundles/`); 19 | execSync(`rollup -c ${bench.dir}/rollup.config.js`); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /benchmarks/search-results/vue/server.jsx: -------------------------------------------------------------------------------- 1 | const Vue = require('Vue'); 2 | const renderToString = require('vue-server-renderer').createRenderer().renderToString; 3 | 4 | 5 | var App = require('./components/App'); 6 | 7 | module.exports = function(getNextSearchResults) { 8 | return function benchFn(done) { 9 | 10 | const vm = new Vue({ 11 | render(h) { 12 | return 13 | } 14 | }); 15 | 16 | renderToString(vm, function(err, html) { 17 | if (err) { 18 | throw err; 19 | } 20 | 21 | done(); 22 | 23 | return html; 24 | }); 25 | }; 26 | }; -------------------------------------------------------------------------------- /benchmark-client/createRoute.js: -------------------------------------------------------------------------------- 1 | var template = require('./page.marko'); 2 | 3 | var isProduction = process.env.NODE_ENV === 'production'; 4 | 5 | function createRoute(benchmark, routeOptions) { 6 | var bundles = []; 7 | benchmark.benches.forEach((bench) => { 8 | // if (bench.name !== 'marko') { 9 | // return; 10 | // } 11 | bundles.push(`/build/${benchmark.name}/bundles${isProduction ? '.min' : ''}/${bench.name}.js`); 12 | }); 13 | 14 | return function(req, res) { 15 | res.marko(template, { 16 | $global: { 17 | benchmark 18 | }, 19 | bundles 20 | }); 21 | }; 22 | } 23 | 24 | module.exports = createRoute; 25 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document" 4 | ], 5 | "node" : true, 6 | "esnext": true, 7 | "boss" : false, 8 | "curly": false, 9 | "debug": false, 10 | "devel": false, 11 | "eqeqeq": true, 12 | "evil": true, 13 | "forin": false, 14 | "immed": true, 15 | "laxbreak": false, 16 | "newcap": true, 17 | "noarg": true, 18 | "noempty": false, 19 | "nonew": true, 20 | "nomen": false, 21 | "onevar": false, 22 | "plusplus": false, 23 | "regexp": false, 24 | "undef": true, 25 | "sub": false, 26 | "white": false, 27 | "eqeqeq": false, 28 | "latedef": "func", 29 | "unused": "vars", 30 | "strict": false, 31 | "eqnull": true 32 | } 33 | -------------------------------------------------------------------------------- /benchmarks/search-results/createRoute.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | require('marko/node-require'); 3 | 4 | var searchService = require('./util/search'); 5 | var pageLayoutTemplate = require('./page.marko'); 6 | 7 | module.exports = function createRoute(libName, options) { 8 | var pageTemplate = require(`./${libName}/page.marko`); 9 | 10 | return function(req, res) { 11 | res.setHeader('Content-Type', 'text/html; charset=utf-8'); 12 | 13 | pageTemplate.render({ 14 | $global: { 15 | jsBundle: options.jsBundle, 16 | title: libName 17 | }, 18 | pageLayout: pageLayoutTemplate, 19 | searchResults: searchService.performSearch({}) 20 | }, res); 21 | }; 22 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/vue/components/App.jsx: -------------------------------------------------------------------------------- 1 | var Vue = require('vue'); 2 | var SearchResultsItem = require('./SearchResultsItem'); 3 | var Footer = require('./Footer'); 4 | 5 | module.exports = { 6 | mounted() { 7 | window.onMount(); 8 | }, 9 | props: ['searchResultsData'], 10 | render(h) { 11 | var searchResultsData = this.searchResultsData; 12 | 13 | return ( 14 |
15 |
16 | {searchResultsData.items.map(function(item, i) { 17 | return 18 | })} 19 |
20 |
21 |
22 | ); 23 | } 24 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/react/components/App.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var SearchResultsItem = require('./SearchResultsItem'); 3 | var Footer = require('./Footer'); 4 | 5 | module.exports = class extends React.Component { 6 | componentDidMount() { 7 | window.onMount(); 8 | } 9 | 10 | render() { 11 | var searchResultsData = this.props.searchResultsData; 12 | 13 | return ( 14 |
15 |
16 | {searchResultsData.items.map(function(item, i) { 17 | return 18 | })} 19 |
20 |
21 |
22 | ); 23 | } 24 | }; -------------------------------------------------------------------------------- /benchmarks/search-results/inferno/client.jsx: -------------------------------------------------------------------------------- 1 | var Inferno = require('inferno'); 2 | 3 | var App = require('./components/App'); 4 | 5 | var mountNode = document.getElementById("searchResultsMount"); 6 | 7 | if (mountNode) { 8 | Inferno.render( 9 | , 10 | mountNode); 11 | 12 | console.log('Re-rendering on client completed'); 13 | } 14 | 15 | window.addBench('inferno', function(el, getNextSearchResults) { 16 | Inferno.render( 17 | , 18 | el); 19 | 20 | return function(done) { 21 | Inferno.render( 22 | , 23 | el); 24 | 25 | done(); 26 | }; 27 | }); -------------------------------------------------------------------------------- /benchmarks/color-picker/client.js: -------------------------------------------------------------------------------- 1 | var colors = require('./colors.json'); 2 | 3 | window.registerBenchmark(function(helpers) { 4 | return { 5 | createBench: function(libName, factoryFunc) { 6 | var mountEl = helpers.createMountEl(libName); 7 | var pageIndex = 0; 8 | 9 | 10 | var fn = factoryFunc(mountEl, colors); 11 | 12 | return { 13 | onWarmup: function() { 14 | pageIndex = 0; 15 | helpers.showMountEl(libName); 16 | }, 17 | onStart: function() { 18 | pageIndex = 0; 19 | helpers.showSingleMountEl(libName); 20 | }, 21 | fn 22 | }; 23 | } 24 | }; 25 | }); -------------------------------------------------------------------------------- /benchmarks/search-results/react/client.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var App = require('./components/App'); 5 | 6 | var mountNode = document.getElementById("searchResultsMount"); 7 | 8 | if (mountNode) { 9 | ReactDOM.render( 10 | , 11 | mountNode); 12 | 13 | console.log('Re-rendering on client completed'); 14 | } 15 | 16 | window.addBench('react', function(el, getNextSearchResults) { 17 | ReactDOM.render( 18 | , 19 | el); 20 | 21 | return function(done) { 22 | ReactDOM.render( 23 | , 24 | el, 25 | done); 26 | }; 27 | }); -------------------------------------------------------------------------------- /benchmarks/search-results/inferno/components/App.jsx: -------------------------------------------------------------------------------- 1 | var Inferno = require('inferno'); 2 | var Component = require('inferno-component'); 3 | var SearchResultsItem = require('./SearchResultsItem'); 4 | var Footer = require('./Footer'); 5 | 6 | module.exports = class extends Component { 7 | componentDidMount() { 8 | window.onMount(); 9 | } 10 | 11 | render() { 12 | var searchResultsData = this.props.searchResultsData; 13 | 14 | return ( 15 |
16 |
17 | {searchResultsData.items.map(function(item, i) { 18 | return 19 | })} 20 |
21 |
22 |
23 | ); 24 | } 25 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/createRoute.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | require('marko/node-require'); 3 | var pageLayoutTemplate = require('./page.marko'); 4 | 5 | var colors = require('./colors.json'); 6 | 7 | module.exports = function createRoute(libName, options) { 8 | var pageTemplate = require(`./${libName}/page.marko`); 9 | 10 | return function(req, res) { 11 | res.setHeader('Content-Type', 'text/html; charset=utf-8'); 12 | 13 | pageTemplate.render({ 14 | $global: { 15 | jsBundle: options.jsBundle, 16 | title: libName 17 | }, 18 | pageLayout: pageLayoutTemplate, 19 | colors: colors 20 | }, res); 21 | 22 | res.on('error', function(err) { 23 | console.error('ERROR:', err); 24 | }); 25 | }; 26 | }; -------------------------------------------------------------------------------- /benchmarks/color-picker/svelte/client.js: -------------------------------------------------------------------------------- 1 | import App from './components/App.html'; 2 | 3 | var mountNode = document.getElementById("mount"); 4 | 5 | if (window.colors) { 6 | mountNode.innerHTML = ''; 7 | 8 | var colors = window.colors; 9 | const app = new App({ 10 | target: mountNode, 11 | data: { colors } 12 | }); 13 | 14 | console.log('Re-rendering on client completed'); 15 | } 16 | 17 | window.addBench('svelte', function(el, colors) { 18 | var widget; 19 | var selectedColorIndex = 0; 20 | 21 | var widget = new App({ 22 | target: el, 23 | data: { colors } 24 | }); 25 | 26 | return function(done) { 27 | widget.set({ 28 | selectedColorIndex: (++selectedColorIndex) % colors.length 29 | }); 30 | done(); 31 | }; 32 | }); -------------------------------------------------------------------------------- /benchmarks/search-results/preact/components/App.jsx: -------------------------------------------------------------------------------- 1 | var preact = require('preact'); 2 | var h = preact.h; 3 | var Component = preact.Component; 4 | 5 | var SearchResultsItem = require('./SearchResultsItem'); 6 | var Footer = require('./Footer'); 7 | 8 | module.exports = class extends Component { 9 | componentDidMount() { 10 | window.onMount(); 11 | } 12 | 13 | render() { 14 | var searchResultsData = this.props.searchResultsData; 15 | 16 | return ( 17 |
18 |
19 | {searchResultsData.items.map(function(item, i) { 20 | return 21 | })} 22 |
23 |
24 |
25 | ); 26 | } 27 | }; -------------------------------------------------------------------------------- /index.marko: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Isomorphic UI Benchmarks 6 | 7 | 8 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /benchmarks/search-results/preact/client.jsx: -------------------------------------------------------------------------------- 1 | var preact = require('preact'); 2 | var h = preact.h; 3 | var render = preact.render; 4 | 5 | var App = require('./components/App'); 6 | 7 | var mountNode = document.getElementById("searchResultsMount"); 8 | 9 | if (mountNode) { 10 | render( 11 | , 12 | mountNode, 13 | mountNode.firstChild); 14 | 15 | console.log('Re-rendering on client completed'); 16 | } 17 | 18 | window.addBench('preact', function(el, getNextSearchResults) { 19 | render( 20 | , 21 | el); 22 | 23 | return function(done) { 24 | render( 25 | , 26 | el, 27 | el.firstChild); 28 | 29 | done(); 30 | }; 31 | }); -------------------------------------------------------------------------------- /benchmarks/search-results/svelte/client.js: -------------------------------------------------------------------------------- 1 | import App from './components/App.html'; 2 | 3 | var mountNode = document.getElementById("searchResultsMount"); 4 | 5 | if (mountNode) { 6 | mountNode.innerHTML = ''; 7 | 8 | const app = new App({ 9 | target: mountNode, 10 | data: { searchResultsData: window.searchResultsData } 11 | }); 12 | 13 | console.log( `window.searchResultsData`, window.searchResultsData ) 14 | 15 | console.log('Re-rendering on client completed'); 16 | } 17 | 18 | window.addBench('svelte', function(el, getNextSearchResults) { 19 | var widget = new App({ 20 | target: el, 21 | data: { searchResultsData: getNextSearchResults() } 22 | }); 23 | 24 | return function(done) { 25 | widget.set({ 26 | searchResultsData: getNextSearchResults() 27 | }); 28 | done(); 29 | }; 30 | }); -------------------------------------------------------------------------------- /benchmarks/color-picker/react/client.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var App = require('./components/App'); 5 | 6 | var mountNode = document.getElementById("mount"); 7 | 8 | if (window.colors) { 9 | ReactDOM.render( 10 | , 11 | mountNode); 12 | 13 | console.log('Re-rendering on client completed'); 14 | } 15 | 16 | window.addBench('react', function(el, colors) { 17 | var widget; 18 | 19 | function onMount(instance) { 20 | widget = instance; 21 | } 22 | 23 | ReactDOM.render( 24 | , 25 | el); 26 | 27 | 28 | var selectedColorIndex = 0; 29 | 30 | return function(done) { 31 | widget.setState({ 32 | selectedColorIndex: (++selectedColorIndex) % colors.length 33 | }, done); 34 | }; 35 | }); -------------------------------------------------------------------------------- /benchmarks/search-results/client.js: -------------------------------------------------------------------------------- 1 | var searchService = require('./util/search'); 2 | 3 | window.registerBenchmark(function(helpers) { 4 | return { 5 | createBench: function(libName, factoryFunc) { 6 | var mountEl = helpers.createMountEl(libName); 7 | var pageIndex = 0; 8 | 9 | function getNextSearchResults() { 10 | return searchService.performSearch({ pageIndex: pageIndex++ }); 11 | } 12 | 13 | var fn = factoryFunc(mountEl, getNextSearchResults); 14 | 15 | return { 16 | onWarmup: function() { 17 | pageIndex = 0; 18 | helpers.showMountEl(libName); 19 | }, 20 | onStart: function() { 21 | pageIndex = 0; 22 | helpers.showSingleMountEl(libName); 23 | }, 24 | fn 25 | }; 26 | } 27 | }; 28 | }); -------------------------------------------------------------------------------- /benchmarks/search-results/svelte/components/SearchResultsItem.html: -------------------------------------------------------------------------------- 1 |
2 |

{{item.title}}

3 | 4 |
5 |
6 | 7 | {{item.title}} 8 | 9 |
10 |
11 | 12 | {{item.price}} 13 | 14 | {{#if purchased}} 15 |
Purchased!
16 | {{else}} 17 | 20 | {{/if}} 21 |
22 | 23 | -------------------------------------------------------------------------------- /benchmarks/search-results/page.marko: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ${out.global.title} • Isomorphic UI Benchmarks 6 | 7 | 8 |

${out.global.title} • Isomorphic UI Benchmarks

9 |