Rich UI with Knockout.js & Coffeescript

Amir Barylko MavenThought Inc.
AMIR BARYLKO
RICH UI WITH
KNOCKOUT.JS &
COFFEESCRIPT

INTRO
About me
Your expectations
Overview

WHO AM I?
• Software quality expert
• Architect
• Developer
• Mentor
• Great cook
• The one who’s entertaining you for the next hour!

RESOURCES
• Email: amir@barylko.com
• Twitter: @abarylko
• Blog: http://www.orthocoders.com
• Materials: http://www.orthocoders.com/presentations

YOUR EXPECTATIONS
• (your input here....)

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

RICH UI
What’s that?
Pros
Cons

WHAT’S A RICH UI?
• (good question)

PROS

CONS

COFFEESCRIPT
What is it?
Basic Constructs
Classes

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

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/

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}"

FUNCTIONS
•The arrow/lambda deﬁnes functions
square = (x) -> x * x
•Parenthesis are optional when passing
parameters
storageDelete movieId, true

FUNCTIONS II
•Implicit return
(the last expression is the return value)
•Multiple lines, indentation is important
deleteMovie = (e) ->
movieId = $(e.target)....
storageDelete(movieId)

OBJECTS AS HASHES
•Declared using indentation
config =
local:
user: 'dev'
pwd: 'dev123'
remote:
user: 'superdev'
pwd: "impossibleToGuess"

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]

CLASSES
class MovieRepository
constructor: (@baseUrl) ->
newMovie: ->
$.ajax
url: "#{@baseUrl}/movies/create"
success: (data) -> $(id).append data

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

MODELVIEWVIEW-MODEL
Deﬁnition
Pros
Cons

MODELVIEW CONTROLLER
Model
Controller
View
X

RESPONSIBILITIES
•Model provides data
•View provides visualization
•Controllers provides behaviour
•Controller communicates one to the other

CONS
•Hard to use
•Hard to maintain
•Lots of repetition

MODELVIEWVIEWMODEL
•Model provides data
•View provides visualization
•ViewModel provides one-to-one what the view
needs
•By convention uses binding to update

KNOCKOUT.JS
Intro
Bindings
Observables

INTRO
Simplify
dynamic
Javascript

UIs
by
applying
the
Model-
View-ViewModel
pattern
knockoutjs.com

SOME FEATURES
• Free and open source (MIT License)
• Pure Javascript
• Small & lightweight
• No dependencies
• Supports all mainstream browsers
• Good documentation

DESCRIPTIVE BINDINGS
• Use the html5 data-bind attribute
• Can have multiple functions
• They can be used for data, attributes, etc

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())

TEXT BINDING (1)
• Value of the markup element
• data-bind=‘text: name’

FOR EACH (2)
• Binds a collection to markup
• data-bind=‘foreach: movies’

CLICK EVENTS (3)
• Indicate handlers for click
• data-bind=‘click: handlerOnVm’

HIDE ELEMENTS (4)
• Visible binding hides markup
• data-bind=‘visible: editTitle’
• What happened? Does the input shows? Why?

OBSERVABLES (5)
• Subscribe / Publish model
• Notiﬁes when the value changes
• Updates markup
• Triggers notiﬁcations

OBSERVABLE VALUES (6)
• ko.observable
• Behaves like a function
• If you want the value you need to “evaluate”

VALUE
• Binds the value of the markup for inputs
• data-bind=‘value: title’

COMPUTED (7)
• Calculate values based on dependencies
• ko.computed(fnToUse)

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

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

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

SUMMARY

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

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?

RESOURCES
• Contact me: amir@barylko.com, @abarylko
• Download: http://www.orthocoders.com/presentations
• coffescript.org
• knockoutjs.com

Rich UI with Knockout.js & Coffeescript

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Rich UI with Knockout.js & Coffeescript

Ähnlich wie Rich UI with Knockout.js & Coffeescript (20)

Mehr von Amir Barylko

Mehr von Amir Barylko (20)