Knockout.js Lightning Talk

I go over the basics of Knockout.js and compare it to Backbone.js.

Transcript

1. Knockout.js The JS library for people who want to build client side apps, not render client side views. Scott Messinger - @scottmessinger Bmore on Rails - October 11, 2011 1
2. MY GOALS • Make a case for Knockout • Show you some code • Talk about other JS libraries 2
3. Knockout.js makes hard things easy. 3
4. Backbone.js makes easy things easier. 4
5. AJAX 5
6. View Updating 6
7. Backbone.js biggest feature: helps you organize your app. 7
8. MVVM DB DB 8
9. An Example. http://jsfiddle.net/scottmessinger/pC4zY/16/ http://jsfiddle.net/scottmessinger/pC4zY/16/embedded/result/ 9
10. The thing that makes it go. ko.applyBindings(viewModel); 10
11. The View-Model var viewModel = { todos: ko.observableArray(), current: ko.observable(), add: .... remove: .... removeCompleted: ... }; 11
12. The Model var Todo = function (text) { this.content = ko.observable(text); this.order = ko.observable(); this.done = ko.observable(false); } 12
13. The View The part you might re exively love to hate. 13
14. <div id="todoapp"> <div class="content"> <div id="create-todo"> <input id="new-todo" data-bind="value: current, event: { keyup: add}"placeholder="What needs to be done?" type="text" /> <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span> </div> <div id="todos"> <ul id="todo-list" data-bind="template: { name: 'todoitemtemplate', foreach: todos() }"> </ul> </div> <div id="todo-stats" > <span class="todo-count" data-bind="visible: remaining().length > 0"> <span class="number" data-bind="text: remaining().length"></span> <span class="word" data-bind="text: remaining().length == 1 ? 'item' : 'items'"></span> left. </span> <span class="todo-clear" data-bind="visible: done().length > 0"> <a href="#" data-bind="click: viewModel.removeCompleted"> Clear <span class="number-done" data-bind="text: done().length"></span> completed <span class="word-done"data-bind="text: done().length == 1 ? 'item' : 'items'"></span> </a> </span> </div> </div> <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <div class="display"> <input class="check" type="checkbox" data-bind="checked: done" /> <div class="todo-content" contenteditable="true" data-bind="text: content"></div> <span class="todo-destroy" data-bind="click: viewModel.remove"></span> </div> </div> </li> </script> 14
15. <div id="todoapp"> <div class="content"> <div id="create-todo"> <input id="new-todo" data-bind="value: current, event: { keyup: add}"placeholder="What needs to be done?" type="text" /> <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span> </div> <div id="todos"> <ul id="todo-list" data-bind="template: { name: 'todoitemtemplate', foreach: todos() }"> </ul> </div> <div id="todo-stats" > <span class="todo-count" data-bind="visible: remaining().length > 0"> <span class="number" data-bind="text: remaining().length"></span> <span class="word" data-bind="text: remaining().length == 1 ? 'item' : 'items'"></span> left. </span> <span class="todo-clear" data-bind="visible: done().length > 0"> <a href="#" data-bind="click: viewModel.removeCompleted"> Clear <span class="number-done" data-bind="text: done().length"></span> completed <span class="word-done"data-bind="text: done().length == 1 ? 'item' : 'items'"></span> </a> </span> </div> </div> <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <div class="display"> <input class="check" type="checkbox" data-bind="checked: done" /> <div class="todo-content" contenteditable="true" data-bind="text: content"></div> <span class="todo-destroy" data-bind="click: viewModel.remove"></span> </div> </div> </li> </script> Create Todo 14
16. <div id="todoapp"> <div class="content"> <div id="create-todo"> <input id="new-todo" data-bind="value: current, event: { keyup: add}"placeholder="What needs to be done?" type="text" /> <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span> </div> <div id="todos"> <ul id="todo-list" data-bind="template: { name: 'todoitemtemplate', foreach: todos() }"> </ul> </div> <div id="todo-stats" > <span class="todo-count" data-bind="visible: remaining().length > 0"> <span class="number" data-bind="text: remaining().length"></span> <span class="word" data-bind="text: remaining().length == 1 ? 'item' : 'items'"></span> left. </span> <span class="todo-clear" data-bind="visible: done().length > 0"> <a href="#" data-bind="click: viewModel.removeCompleted"> Clear <span class="number-done" data-bind="text: done().length"></span> completed <span class="word-done"data-bind="text: done().length == 1 ? 'item' : 'items'"></span> </a> </span> </div> </div> <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <div class="display"> <input class="check" type="checkbox" data-bind="checked: done" /> <div class="todo-content" contenteditable="true" data-bind="text: content"></div> <span class="todo-destroy" data-bind="click: viewModel.remove"></span> </div> </div> </li> </script> Create Todo List Todos 14
17. <div id="todoapp"> <div class="content"> <div id="create-todo"> <input id="new-todo" data-bind="value: current, event: { keyup: add}"placeholder="What needs to be done?" type="text" /> <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span> </div> <div id="todos"> <ul id="todo-list" data-bind="template: { name: 'todoitemtemplate', foreach: todos() }"> </ul> </div> <div id="todo-stats" > <span class="todo-count" data-bind="visible: remaining().length > 0"> <span class="number" data-bind="text: remaining().length"></span> <span class="word" data-bind="text: remaining().length == 1 ? 'item' : 'items'"></span> left. </span> <span class="todo-clear" data-bind="visible: done().length > 0"> <a href="#" data-bind="click: viewModel.removeCompleted"> Clear <span class="number-done" data-bind="text: done().length"></span> completed <span class="word-done"data-bind="text: done().length == 1 ? 'item' : 'items'"></span> </a> </span> </div> </div> <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <div class="display"> <input class="check" type="checkbox" data-bind="checked: done" /> <div class="todo-content" contenteditable="true" data-bind="text: content"></div> <span class="todo-destroy" data-bind="click: viewModel.remove"></span> </div> </div> </li> </script> Create Todo List Todos Todo Stats 14
18. <div id="todoapp"> <div class="content"> <div id="create-todo"> <input id="new-todo" data-bind="value: current, event: { keyup: add}"placeholder="What needs to be done?" type="text" /> <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span> </div> <div id="todos"> <ul id="todo-list" data-bind="template: { name: 'todoitemtemplate', foreach: todos() }"> </ul> </div> <div id="todo-stats" > <span class="todo-count" data-bind="visible: remaining().length > 0"> <span class="number" data-bind="text: remaining().length"></span> <span class="word" data-bind="text: remaining().length == 1 ? 'item' : 'items'"></span> left. </span> <span class="todo-clear" data-bind="visible: done().length > 0"> <a href="#" data-bind="click: viewModel.removeCompleted"> Clear <span class="number-done" data-bind="text: done().length"></span> completed <span class="word-done"data-bind="text: done().length == 1 ? 'item' : 'items'"></span> </a> </span> </div> </div> <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <div class="display"> <input class="check" type="checkbox" data-bind="checked: done" /> <div class="todo-content" contenteditable="true" data-bind="text: content"></div> <span class="todo-destroy" data-bind="click: viewModel.remove"></span> </div> </div> </li> </script> Create Todo List Todos Todo Stats Todo Template 14
19. There is hope. KO 1.3 allows for unobtrusive bindings. 15
20. <input data-bind="value: current, event: { keyup: add}" placeholder="What needs to be done?"/> View 16
21. <input data-bind="value: current, event: { keyup: add}" placeholder="What needs to be done?"/> View current: ko.observable(), add: function (event) { if (event.keyCode === 13) { var newTodo = new Todo(this.current()); this.todos.push(newTodo); this.current(""); } }, View-Model 16
22. <input data-bind="value: current, event: { keyup: add}" placeholder="What needs to be done?"/> View current: ko.observable(), add: function (event) { if (event.keyCode === 13) { var newTodo = new Todo(this.current()); this.todos.push(newTodo); this.current(""); } }, View-Model Model var Todo = function (text) { this.content = ko.observable(text); this.order = ko.observable(); this.done = ko.observable(false); } 16
23. <div> <ul data-bind="template: {name: 'todoitemtemplate', foreach: todos()}"> </ul> </div> 17
24. // rendered for each todo in viewModel.todos <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <input data-bind="checked: done" /> <div data-bind="text: content"> </div> <span data-bind="click: viewModel.remove"></span> </div> </li> </script> View 18
25. // rendered for each todo in viewModel.todos <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <input data-bind="checked: done" /> <div data-bind="text: content"> </div> <span data-bind="click: viewModel.remove"></span> </div> </li> </script> View Model var Todo = function (text) { this.content = ko.observable(text); this.order = ko.observable(); this.done = ko.observable(false); } 18
26. // rendered for each todo in viewModel.todos <script id="todoitemtemplate" type="text/html"> <li> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <input data-bind="checked: done" /> <div data-bind="text: content"> </div> <span data-bind="click: viewModel.remove"></span> </div> </li> </script> View Model var Todo = function (text) { this.content = ko.observable(text); this.order = ko.observable(); this.done = ko.observable(false); } remove: function (event) { viewModel.todos.remove(this); } View-Model 18
27. Other JS libraries • Batman.js - 567 watchers (like KO with focus on code organization) • Sproutcore 2.0 - 1430 watchers (like power of KO, look of Bb) • Spine - 975 watchers (Bb clone. GREAT documentation) • Angular - 255 watchers (Conceptually like KO) 19
28. Core Thesis 20
29. Core Thesis • Read the Bb source. 20
30. Core Thesis • Read the Bb source. • With backbone, we’re manually doing things the computer should do for us. 20
31. Core Thesis • Read the Bb source. • With backbone, we’re manually doing things the computer should do for us. • The more complex our views, the more work this is for us. 20
32. Core Thesis • Read the Bb source. • With backbone, we’re manually doing things the computer should do for us. • The more complex our views, the more work this is for us. • Backbone is great for simple apps and rocket scientists. For large apps by normal people, Bb might work but there are other options. 20