@danielkalen/simplybind/comparison/src/index.jade

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

doctype html
html
	head
		meta(charset='utf-8')
		link(rel="stylesheet", href="style.css")
		script(src='http://localhost:48626/takana.js')
		script.
			if (typeof takanaClient !== 'undefined')
				takanaClient.run({host: 'localhost:48626'});
		
		title Benchmarks Index

	

	body
		.testSuite_heading
			.testSuite_heading-title Data Binding Comparison
			.testSuite_heading-subtitle A rich comparison of various implemenations of data binding compared to SimplyBind
		
		.testSuite_index
			each subject in libraries
				.testSuite_index-item
					.testSuite_index-item-innerwrap
						.testSuite_index-item-title
							span.testSuite_index-item-title-name=subject.title
							span.testSuite_index-item-title-version=' '+subject.version
						
						a.testSuite_index-item-button(href=subject.location)
							.testSuite_index-item-button-text Open Benchmarks Suite

		
		.testSuite_divider
			.testSuite_divider-line
			.testSuite_divider-text Results
		
		.testSuite_charts
			.testSuite_charts-gap
		
		.testSuite_settingsBar
			.testSuite_settingsBar-innerwrap
				.testSuite_settingsBar-title Settings
				.testSuite_settingsBar-list#settingsBar
					
					-
						var settings = [
							{
								name: 'valueType',
								label: 'Value Type',
								options: [
									{
										name: 'ops',
										label: 'Op/s'
									},
									{
										name: 'points',
										label: 'Points'
									}
								]
							},
							{
								name: 'chartType',
								label: 'Chart Type',
								options: [
									{
										name: 'bar',
										label: 'Bar'
									},
									{
										name: 'column',
										label: 'Column'
									}
								]
							},
							{
								name: 'browserData',
								label: 'Browser Data',
								options: [
									{
										name: 'current',
										label: 'Only Current'
									},
									{
										name: 'all',
										label: 'All Browsers'
									}
								]
							}
						]

					each setting in settings
						.testSuite_settingsBar-list-item(id=setting.name)
							.testSuite_settingsBar-list-item-label=setting.label
							
							.testSuite_settingsBar-list-item-options
								each option in setting.options
									.testSuite_settingsBar-list-item-options-item(class='{{state}}', data-name=option.name)=option.label




		script(src='bower_components/polyfills/polyfills.js')
		script(src='bower_components/jquery/dist/jquery.js')
		script(src='bower_components/humanize/humanize.js')
		script(src='bower_components/simplybind/'+latestSimplyBind+'/simplybind.pretty.js')
		script(src='indexCharts.js')
		script window.ignoreList = !{JSON.stringify(ignoreList)};
		script.
			indexCharts({
				chartsOrderMap: [
					"Object Update",
					"Input Update",
					"Input x100 Update",
					"Input Transform",
					"Div HTML Update",
					"Div HTML Same Update",
					"Div HTML Placeholder",
					"Div HTML 250 Placeholders",
					"Div Text Update",
					"Div Text Placeholder",
					"Create 1k DOM Els",
					"Update 1k DOM Els",
					"Create DOM Bindings",
					"Create Object Bindings",
					"Rebind existing bindings"
				],
				
				itemsMap: {
					// 'Native': 		{index:0, color:'#ff5e3a'},
					'Native': 		{index:0, color:'#dbddde'},
					'SimplyBind': 	{index:1, color:'#ff9500'},
					'ReactJS': 		{index:2, color:'#ffdb4c'},
					'AngularJS': 	{index:3, color:'#87fc70'},
					'VueJS': 		{index:4, color:'#52edc7'},
					'Polymer': 		{index:5, color:'#1ad6fd'},
					'KnockoutJS': 	{index:6, color:'#c644fc'},
					'Aurelia': 		{index:7, color:'#ef4db6'},
					'CycleJS': 		{index:8, color:'#4a4a4a'},
					'Mithril': 		{index:9, color:'#ff5e3a'},
					'Plastiq': 		{index:10, color:'#ff5e3a'}
				}
			})