3. Amir Barylko MavenThought Inc.
WHO AM I?
⢠Software quality expert
⢠Architect
⢠Developer
⢠Mentor
⢠Great cook
⢠The one whoâs entertaining you for the next hour!
4. Amir Barylko MavenThought Inc.
RESOURCES
⢠Email: amir@barylko.com
⢠Twitter: @abarylko
⢠Blog: http://www.orthocoders.com
⢠Materials: http://www.orthocoders.com/presentations
6. Amir Barylko MavenThought Inc.
DISAPPOINTMENT
MANAGEMENT
⢠DeďŹne Rich / Responsive UI
⢠Intro to Coffeescript
⢠Intro to Knockout.js
⢠Intro to MVVM
⢠Why binding is a good idea
⢠Why binding to classes is even better
12. Amir Barylko MavenThought Inc.
WHATâS WRONG WITH JS
⢠Too verbose (too many { and } )
⢠GlobalVariables
⢠Lacks support for classes
⢠Hard to make inheritance
⢠Automatic type conversion between strings and numbers
⢠NaN is not a number, however it is a number
13. Amir Barylko MavenThought Inc.
WHAT IS IT?
âCoffeeScript is a little language that compiles
into JavaScript. Underneath all those awkward
braces and semicolons, JavaScript has always
had a gorgeous object model at its heart.
CoffeeScript is an attempt to expose the good
parts of JavaScript in a simple way.â
http://coffeescript.org/
14. Amir Barylko MavenThought Inc.
STRING INTERPOLATION
â˘You can concatenate inside a double quote string
using the â#â and â{ }â
"The result is #{3}" == "The result is 3"
â˘Or use any expression
"/movies/#{id}"
15. Amir Barylko MavenThought Inc.
FUNCTIONS
â˘The arrow/lambda deďŹnes functions
square = (x) -> x * x
â˘Parenthesis are optional when passing
parameters
storageDelete movieId, true
16. Amir Barylko MavenThought Inc.
FUNCTIONS II
â˘Implicit return
(the last expression is the return value)
â˘Multiple lines, indentation is important
deleteMovie = (e) ->
movieId = $(e.target)....
storageDelete(movieId)
17. Amir Barylko MavenThought Inc.
OBJECTS AS HASHES
â˘Declared using indentation
config =
local:
user: 'dev'
pwd: 'dev123'
remote:
user: 'superdev'
pwd: "impossibleToGuess"
18. Amir Barylko MavenThought Inc.
ARRAYS
â˘Arrays are declared with â[ ]â
deploy = ['local', 'remote', 'uat']
fib = [1, 3, 5, 8, 13, 21]
â˘Slicing
first = fib[0..3]
noLast = fib[0..-2]
19. Amir Barylko MavenThought Inc.
CLASSES
class MovieRepository
constructor: (@baseUrl) ->
newMovie: ->
$.ajax
url: "#{@baseUrl}/movies/create"
success: (data) -> $(id).append data
20. Amir Barylko MavenThought Inc.
INHERITANCE
⢠One class can extend another
class Shape
constructor: (@width) ->
class Square extends Shape
computeArea: -> Math.pow @width, 2
class Circle extends Shape
radius: -> @width / 2
computeArea: -> Math.PI * Math.pow @radius(), 2
23. Amir Barylko MavenThought Inc.
RESPONSIBILITIES
â˘Model provides data
â˘View provides visualization
â˘Controllers provides behaviour
â˘Controller communicates one to the other
25. Amir Barylko MavenThought Inc.
MODELVIEWVIEWMODEL
â˘Model provides data
â˘View provides visualization
â˘ViewModel provides one-to-one what the view
needs
â˘By convention uses binding to update
27. Amir Barylko MavenThought Inc.
INTRO
Simplify
 dynamic
 Javascript
Â
UIs
 by
 applying
 the
 Model-Â
View-ÂViewModel
 pattern
knockoutjs.com
28. Amir Barylko MavenThought Inc.
SOME FEATURES
⢠Free and open source (MIT License)
⢠Pure Javascript
⢠Small & lightweight
⢠No dependencies
⢠Supports all mainstream browsers
⢠Good documentation
29. Amir Barylko MavenThought Inc.
DESCRIPTIVE BINDINGS
⢠Use the html5 data-bind attribute
⢠Can have multiple functions
⢠They can be used for data, attributes, etc
30. Amir Barylko MavenThought Inc.
STEPS
⢠Write a view model class
⢠Write a view with special markup that references the view
model
⢠Apply the bindings in order to be parsed
⢠ko.appplyBindings(new MovieLibraryViewModel())
31. Amir Barylko MavenThought Inc.
TEXT BINDING (1)
⢠Value of the markup element
⢠data-bind=âtext: nameâ
32. Amir Barylko MavenThought Inc.
FOR EACH (2)
⢠Binds a collection to markup
⢠data-bind=âforeach: moviesâ
33. Amir Barylko MavenThought Inc.
CLICK EVENTS (3)
⢠Indicate handlers for click
⢠data-bind=âclick: handlerOnVmâ
34. Amir Barylko MavenThought Inc.
HIDE ELEMENTS (4)
⢠Visible binding hides markup
⢠data-bind=âvisible: editTitleâ
⢠What happened? Does the input shows? Why?
35. Amir Barylko MavenThought Inc.
OBSERVABLES (5)
⢠Subscribe / Publish model
⢠NotiďŹes when the value changes
⢠Updates markup
⢠Triggers notiďŹcations
36. Amir Barylko MavenThought Inc.
OBSERVABLE VALUES (6)
⢠ko.observable
⢠Behaves like a function
⢠If you want the value you need to âevaluateâ
37. Amir Barylko MavenThought Inc.
VALUE
⢠Binds the value of the markup for inputs
⢠data-bind=âvalue: titleâ
38. Amir Barylko MavenThought Inc.
COMPUTED (7)
⢠Calculate values based on dependencies
⢠ko.computed(fnToUse)
39. Amir Barylko MavenThought Inc.
OBSERVABLE ARRAYS (8)
⢠Same idea as values
⢠But are collections that notify events
⢠No need to track adding and removing
⢠The binding updates that for you
40. Amir Barylko MavenThought Inc.
SUBSCRIBETO EVENTS (9)
⢠Each observable also notiďŹes events
⢠You can subscribe to trigger other calculations
⢠For example, clear the ďŹelds every time before edit a new
movie
41. Amir Barylko MavenThought Inc.
KNOCKOUT MAPPING
⢠Easy to transform JSON data into observables
⢠read from JSON with fromJS
⢠export to JSON with toJS
⢠customize your mapping to suit your needs
43. Amir Barylko MavenThought Inc.
BENEFITS
⢠Short learning curve compared to other frameworks
⢠Easy to implement two way binding
⢠Supports binding templates
⢠Custom bindings
⢠Lots of documentation
⢠Coffeescript adds OOP
44. Amir Barylko MavenThought Inc.
DRAWBACKS
⢠The HTML may be harder to read
⢠ViewModel scope can get out of hand
⢠No particular structure enforced (is it really a drawback?)
⢠Other?
45. Amir Barylko MavenThought Inc.
RESOURCES
⢠Contact me: amir@barylko.com, @abarylko
⢠Download: http://www.orthocoders.com/presentations
⢠coffescript.org
⢠knockoutjs.com