• Save
Bringing the light to the client with KnockoutJS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Bringing the light to the client with KnockoutJS

on

  • 1,136 views

My talk about KnockoutJS, which I did at JSSaturday Sofia on 13.04.2013

My talk about KnockoutJS, which I did at JSSaturday Sofia on 13.04.2013

Statistics

Views

Total Views
1,136
Views on SlideShare
1,042
Embed Views
94

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 94

http://moodle.openfmi.net 94

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Bringing the light to the client with KnockoutJS Presentation Transcript

  • 1. Bringing the light to the client with KnockoutJSvar speaker = { name: “Boyan Mihaylov”, company: “Ebita.dk”};
  • 2. About me Software Developer @ Ebita.dk  Software architectures / system integration  Best practices  Web trends (Almost) Ms.c. in Computer Science @ The University of Copenhagen Teaching assistant @ UCPH  Principles of Computer System Design
  • 3. What‟s there for today? Why JavaScript Why MV* patterns What is KnockoutJS How it works Extensibility
  • 4. Why is JavaScript so popular? Runs in the browser  No 3rd-party software Considerably fast (in the latest browsers) Low entry barriers  a.k.a. (reasonably) low learning curve Still in the game with HTML5
  • 5. Why people hate JavaScript? “Few” programming misunderstandings  Global variables  The proper “this” in functions  … Browser (in)compatibility Especially the blue guy behind
  • 6. jQuery for the win! Rich API for DOM manipulation  Traversing  Event handling  Animations Browser compatibility
  • 7. Before & after jQueryif (document.getElementById) ...else if (document.layers) … Beforeelse if (document.all) …$(‟#my_id‟) After
  • 8. But... Too much of a good thing is not a good thing
  • 9. The rise of MV* patterns MV* stands for Model-View-(many variations)  MVC (Model-View-Controller)  MVVM (Model-View-ViewModel) Separation between the data and how it is displayed
  • 10. MVC vs. MVVM MVC MVVM User User Determines View Controller Passes calls to View Fires events ViewModel State Fires Fires events queries eventsManipulates Manipulates Model Model
  • 11. MV* libraries & frameworks http://todomvc.com
  • 12. What is KnockoutJS? MVVM JavaScript library MIT license No dependencies Supports all mainstream browsers Active community
  • 13. Key concepts Declarative Automatic UI bindings refresh Dependency Templating tracking
  • 14. First steps: data binding (1) The magic of data-bind attribute<span data-bind=“text: name”></span> Apply the bindingsko.applyBindings(viewModel);
  • 15. First steps: data binding (2) The syntax data-bind=“binding1: value1, binding2: value2,…” Pre-defined bindings  text – displays text in an element (span, div, ....)  value – for form elements (input, textarea, ...)  click – associates a function  visible – whether to display an element or not  [ more on Knockout‟s website ]
  • 16. Meet the observables var name = ko.observable(„Boyan‟); Functions Provide getters and setters  name() is getter, name(„Peter‟) is setter Cache values Notify on changes  name.subscribe(function(newValue) { … })
  • 17. Computed observables (1)var firstName = ko.observable(„Boyan‟);var lastName = ko.observable(„Mihaylov‟);var fullName = ko.computed(function() { return firstName() + „ „ + lastName();});
  • 18. Computed observables (2) Track dependencies Reevaluate on changes in the dependencies Can provide only getter or both getter and setter NOTE: Beware of circular dependencies
  • 19. Observable arrays var names = ko.observableArray( [Boyan, Peter, Elena]); Same as normal observables, but … Provide array utility functions  push, pop, remove, slice, etc.
  • 20. How to display an array? Indeed, how?? Display each item in the array Meet the foreach binding  Repeat the children template for each array item  Efficient DOM manipulation - update only the changed parts  Special context parameter - $parent
  • 21. Extensibility: make it your way
  • 22. Extend the observables Custom functionality associated with an observable What can we do?  Validation  Custom event  … var age = ko.observable(10) .extend({ numeric: true });
  • 23. Integration with other libraries Can we use Knockout with jQuery? I don‟t Yes, yes, yes! know…
  • 24. Custom bindings (1)<div data-bind="myBinding: data">…</div>
  • 25. Custom bindings (2)ko.bindingHandlers.myBinding = { // Set initial state for the DOM element // or register event handlers init: function(element, valueAccessor) { }, // Whenever the value changes update: function(element, valueAccessor) { }};
  • 26. Custom bindings (3) Parameters  element – the bound DOM element  valueAccessor – a function, which returns the value (an observable or a plain value)  allBindingsAccessor – a function, which returns all other bindings set to the element  [ some more parameters on Knockout‟s website ]
  • 27. Custom providers (1) Looks nice <div data-bind="text: name"></div>
  • 28. Custom providers (2) Getting a bit messy<div data-bind="text: name, visible: items().length > 0 && amICool(), customBinding: { item: 5 }, click: showMeMoreCoolStuff"></div>
  • 29. Custom providers (3) A complete disaster!<div data-bind="text: name, visible: items().length > 0 && amICool(), customBinding: { item: 5, count: getGount }, click: showMeMoreCoolStuff, children: { showOnly: myChildren().length > 5, deleteOn: „mouseover‟ }, reset: „onleave‟"></div>
  • 30. Custom providers (4) Don‟t like the data-bind attributes? Your markup is too messy? All designers in the company hate you? …
  • 31. Custom providers (5) We have a solution for you!var myBindingProvider = { // does a node have bindings? nodeHasBindings: function(node) { }, // give me the bindings! getBindings: function(node, context) {}};
  • 32. Custom providers (6) Use id/class for attaching bindings  Knockout.Unobtrusive plugin Store bindings in jQuery $.data on the elements Use more specific attributes  e.g., data-bind-text, data-bind-image, …
  • 33. Nice to read http://www.knockoutjs.com http://www.knockmeout.net http://groups.google.com/group/knockoutjs
  • 34. Questions
  • 35. Expect very soon: SharePoint Saturday!  Saturday, June 8, 2013  Same familiar format – 1 day filled with sessions focused on SharePoint technologies  Best SharePoint professionals in the region  Registrations will be open next week (15th)!  www.SharePointSaturday.eu
  • 36. Thanks to our Sponsors:Diamond Sponsor:Platinum Sponsors:Gold Sponsors:Swag Sponsors:Media Partners: