Rich UI with Knockout.js & Coffeescript

Amir Barylko MavenThought Inc.

AMIR BARYLKO

RICH UI WITHKNOCKOUT.JS &COFFEESCRIPT


INTROAbout me

Your expectationsOverview


WHO AM I?

• Software quality expert

• Architect

• Developer

• Mentor

• Great cook

• The one who’s entertaining you for the next hour!


RESOURCES

• Email: [email protected]

• Twitter : @abarylko

• Blog: http://www.orthocoders.com

• Materials: http://www.orthocoders.com/presentations


YOUR EXPECTATIONS

• (your input here....)


DISAPPOINTMENT MANAGEMENT

• Define 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 UIWhat’s that?

ProsCons


WHAT’S A RICH UI?

• (good question)


PROS


CONS


COFFEESCRIPTWhat is it?

Basic ConstructsClasses


WHAT’S WRONG WITH JS

• Too verbose (too many { and } )

• Global Variables

• 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 defines functionssquare = (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 importantdeleteMovie = (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


MODEL VIEW VIEW-MODELDefinition

ProsCons


MODEL VIEW CONTROLLER

Model

Controller

ViewX


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


MODEL VIEW VIEWMODEL

•Model provides data

•View provides visualization

•ViewModel provides one-to-one what the view needs

•By convention uses binding to update


KNOCKOUT.JSIntro

BindingsObservables


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

• Notifies when the value changes

• Updates markup

• Triggers notifications


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


SUBSCRIBE TO EVENTS (9)

• Each observable also notifies events

• You can subscribe to trigger other calculations

• For example, clear the fields 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: [email protected], @abarylko

• Download: http://www.orthocoders.com/presentations

• coffescript.org

• knockoutjs.com

Rich UI with Knockout.js & Coffeescript

Documents

Transcript of Rich UI with Knockout.js & Coffeescript