Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Knockout.js Lightning Talk

Knockout.js Lightning Talk

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

Avatar for scottmessinger

scottmessinger

October 11, 2011
Tweet

Other Decks in Technology

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. The Model var Todo = function (text) { this.content =

    ko.observable(text); this.order = ko.observable(); this.done = ko.observable(false); } 12
  4. <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
  5. <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
  6. <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
  7. <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
  8. <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
  9. <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
  10. <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
  11. // 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
  12. // 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
  13. // 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
  14. 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
  15. Core Thesis • Read the Bb source. • With backbone,

    we’re manually doing things the computer should do for us. 20
  16. 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
  17. 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