Add todoapp benchmark

bench/implementations/angular-2/.gitignore

@@ -0,0 +1,28 @@
+node_modules/.bin
+
+# ignore the source / documentation of each node module, but retain the
+# distribution builds
+
+node_modules/systemjs
+!node_modules/systemjs/dist/system.src.js
+
+node_modules/todomvc-app-css
+!node_modules/todomvc-app-css/index.css
+
+node_modules/todomvc-common
+!node_modules/todomvc-common/base.css
+
+node_modules/angular2
+!node_modules/angular2/bundles/angular2-polyfills.js
+!node_modules/angular2/bundles/angular2.dev.js
+
+node_modules/rxjs
+!node_modules/rxjs/bundles/Rx.js
+
+# Ignore development dependencies
+node_modules/tsd
+node_modules/typescript
+
+*.js
+*.js.map
+typings

bench/implementations/angular-2/app/app.html

@@ -0,0 +1,23 @@
+<section class="todoapp">
+	<header class="header">
+		<h1>todos</h1>
+		<input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodoText" (keydown.enter)="addTodo()">
+	</header>
+	<section class="main" *ngIf="todoStore.todos.length > 0">
+		<input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall.checked)">
+		<ul class="todo-list">
+			<li *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
+				<div class="view">
+					<input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
+					<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+					<button class="destroy" (click)="remove(todo)"></button>
+				</div>
+				<input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo.value)" (keydown.enter)="updateEditingTodo(todo, editedtodo.value)" (keydown.escape)="cancelEditingTodo(todo)">
+			</li>
+		</ul>
+	</section>
+	<footer class="footer" *ngIf="todoStore.todos.length > 0">
+		<span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
+		<button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
+	</footer>
+</section>

bench/implementations/angular-2/app/app.ts

@@ -0,0 +1,58 @@
+import {Component} from 'angular2/core';
+import {TodoStore, Todo} from './services/store';
+
+@Component({
+	selector: 'todo-app',
+	templateUrl: 'app/app.html'
+})
+export default class TodoApp {
+	todoStore: TodoStore;
+	newTodoText = '';
+
+	constructor(todoStore: TodoStore) {
+		this.todoStore = todoStore;
+	}
+
+	stopEditing(todo: Todo, editedTitle: string) {
+		todo.title = editedTitle;
+		todo.editing = false;
+	}
+
+	cancelEditingTodo(todo: Todo) {
+		todo.editing = false;
+	}
+
+	updateEditingTodo(todo: Todo, editedTitle: string) {
+		editedTitle = editedTitle.trim();
+		todo.editing = false;
+
+		if (editedTitle.length === 0) {
+			return this.todoStore.remove(todo);
+		}
+
+		todo.title = editedTitle;
+	}
+
+	editTodo(todo: Todo) {
+		todo.editing = true;
+	}
+
+	removeCompleted() {
+		this.todoStore.removeCompleted();
+	}
+
+	toggleCompletion(todo: Todo) {
+		this.todoStore.toggleCompletion(todo);
+	}
+
+	remove(todo: Todo){
+		this.todoStore.remove(todo);
+	}
+
+	addTodo() {
+		if (this.newTodoText.trim().length) {
+			this.todoStore.add(this.newTodoText);
+			this.newTodoText = '';
+		}
+	}
+}

bench/implementations/angular-2/app/bootstrap.ts

@@ -0,0 +1,9 @@
+///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
+
+import {bootstrap} from 'angular2/platform/browser';
+import TodoApp from './app'
+import {TodoStore} from './services/store';
+import {enableProdMode} from 'angular2/core';
+
+enableProdMode();
+bootstrap(TodoApp, [TodoStore]);

bench/implementations/angular-2/app/services/store.ts

@@ -0,0 +1,62 @@
+export class Todo {
+	completed: Boolean;
+	editing: Boolean;
+
+	private _title: String;
+	get title() {
+		return this._title;
+	}
+	set title(value: String) {
+		this._title = value.trim();
+	}
+
+	constructor(title: String) {
+		this.completed = false;
+		this.editing = false;
+		this.title = title.trim();
+	}
+}
+
+export class TodoStore {
+	todos: Array<Todo>;
+
+	constructor() {
+		this.todos = [];
+	}
+
+	private getWithCompleted(completed: Boolean) {
+		return this.todos.filter((todo: Todo) => todo.completed === completed);
+	}
+
+	allCompleted() {
+		return this.todos.length === this.getCompleted().length;
+	}
+
+	setAllTo(completed: Boolean) {
+		this.todos.forEach((t: Todo) => t.completed = completed);
+	}
+
+	removeCompleted() {
+		this.todos = this.getWithCompleted(false);
+	}
+
+	getRemaining() {
+		return this.getWithCompleted(false);
+	}
+
+	getCompleted() {
+		return this.getWithCompleted(true);
+	}
+
+	toggleCompletion(todo: Todo) {
+		todo.completed = !todo.completed;
+	}
+
+	remove(todo: Todo) {
+		this.todos.splice(this.todos.indexOf(todo), 1);
+	}
+
+	add(title: String) {
+		this.todos.push(new Todo(title));
+	}
+}

bench/implementations/angular-2/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en" data-framework="angular2">
+	<head>
+		<meta charset="utf-8">
+		<title>Angular2 • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+		<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+		<script src="node_modules/systemjs/dist/system.src.js"></script>
+		<script src="node_modules/rxjs/bundles/Rx.js"></script>
+		<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+	</head>
+	<body>
+		<todo-app></todo-app>
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+			<p>
+				Created by <a href="http://github.com/samccone">Sam Saccone</a> and <a href="http://github.com/colineberhardt">Colin Eberhardt</a>
+				using <a href="http://angular.io">Angular2</a>
+			</p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+		<script>
+			System.config({
+				packages: {
+					'app': {
+						format: 'cjs',
+						defaultExtension: 'js'
+					}
+				}
+			});
+			System.import('app/bootstrap');
+		</script>
+	</body>
+</html>

bench/implementations/angular-2/package.json

@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^1.8.10"
+  },
+  "dependencies": {
+    "angular2": "^2.0.0-beta.17",
+    "es6-shim": "^0.35.1",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.6",
+    "systemjs": "0.19.6",
+    "todomvc-app-css": "^2.0.0",
+    "todomvc-common": "^1.0.1",
+    "zone.js": "^0.6.17"
+  }
+}

bench/implementations/angular-2/readme.md

@@ -0,0 +1,32 @@
+# Angular 2 • [TodoMVC](http://todomvc.com)
+
+> Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
+
+## Resources
+
+- [Website](https://angular.io/)
+- [Documentation](https://angular.io/docs/ts/latest/)
+
+### Articles
+
+- [Angular 2 Beta Announcement](http://angularjs.blogspot.co.uk/2015/12/angular-2-beta.html)
+
+### Support
+
+- [StackOverflow](http://stackoverflow.com/questions/tagged/angular2)
+- [Google Groups](https://groups.google.com/forum/#!forum/angular)
+- [Twitter](http://twitter.com/angularjs)
+- [Google+](https://plus.sandbox.google.com/+AngularJS/posts)
+
+*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
+
+## Implementation
+
+This app was built using TypeScript and Angular 2 beta. To make changes simply
+
+* `npm i`
+* `npm run dev`
+
+## Credit
+
+Created by [Sam Saccone](http://github.com/samccone)

bench/implementations/angular-2/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true
+  },
+  "files": [
+    "app/bootstrap.ts"
+  ]
+}