View
2.169
Download
2
Category
Preview:
DESCRIPTION
Citation preview
Amir Barylko MavenThought Inc.
AMIR BARYLKO
RICH UI WITHKNOCKOUT.JS &COFFEESCRIPT
Amir Barylko MavenThought Inc.
INTROAbout me
Your expectationsOverview
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!
Amir Barylko MavenThought Inc.
RESOURCES
• Email: amir@barylko.com
• Twitter : @abarylko
• Blog: http://www.orthocoders.com
• Materials: http://www.orthocoders.com/presentations
Amir Barylko MavenThought Inc.
YOUR EXPECTATIONS
• (your input here....)
Amir Barylko MavenThought Inc.
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
Amir Barylko MavenThought Inc.
RICH UIWhat’s that?
ProsCons
Amir Barylko MavenThought Inc.
WHAT’S A RICH UI?
• (good question)
Amir Barylko MavenThought Inc.
PROS
Amir Barylko MavenThought Inc.
CONS
Amir Barylko MavenThought Inc.
COFFEESCRIPTWhat is it?
Basic ConstructsClasses
Amir Barylko MavenThought Inc.
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
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/
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}"
Amir Barylko MavenThought Inc.
FUNCTIONS
•The arrow/lambda defines functionssquare = (x) -> x * x
•Parenthesis are optional when passing parameters storageDelete movieId, true
Amir Barylko MavenThought Inc.
FUNCTIONS II
•Implicit return(the last expression is the return value)
•Multiple lines, indentation is importantdeleteMovie = (e) -> movieId = $(e.target).... storageDelete(movieId)
Amir Barylko MavenThought Inc.
OBJECTS AS HASHES
•Declared using indentation
config = local: user: 'dev' pwd: 'dev123' remote: user: 'superdev' pwd: "impossibleToGuess"
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]
Amir Barylko MavenThought Inc.
CLASSES
class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append data
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
Amir Barylko MavenThought Inc.
MODEL VIEW VIEW-MODELDefinition
ProsCons
Amir Barylko MavenThought Inc.
MODEL VIEW CONTROLLER
Model
Controller
ViewX
Amir Barylko MavenThought Inc.
RESPONSIBILITIES
•Model provides data
•View provides visualization
•Controllers provides behaviour
•Controller communicates one to the other
Amir Barylko MavenThought Inc.
CONS
•Hard to use
•Hard to maintain
•Lots of repetition
Amir Barylko MavenThought Inc.
MODEL VIEW VIEWMODEL
•Model provides data
•View provides visualization
•ViewModel provides one-to-one what the view needs
•By convention uses binding to update
Amir Barylko MavenThought Inc.
KNOCKOUT.JSIntro
BindingsObservables
Amir Barylko MavenThought Inc.
INTRO
Simplify dynamic Javascript UIs by applying the Model-View-ViewModel pattern
knockoutjs.com
Amir Barylko MavenThought Inc.
SOME FEATURES
• Free and open source (MIT License)
• Pure Javascript
• Small & lightweight
• No dependencies
• Supports all mainstream browsers
• Good documentation
Amir Barylko MavenThought Inc.
DESCRIPTIVE BINDINGS
• Use the html5 data-bind attribute
• Can have multiple functions
• They can be used for data, attributes, etc
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())
Amir Barylko MavenThought Inc.
TEXT BINDING (1)
• Value of the markup element
• data-bind=‘text: name’
Amir Barylko MavenThought Inc.
FOR EACH (2)
• Binds a collection to markup
• data-bind=‘foreach: movies’
Amir Barylko MavenThought Inc.
CLICK EVENTS (3)
• Indicate handlers for click
• data-bind=‘click: handlerOnVm’
Amir Barylko MavenThought Inc.
HIDE ELEMENTS (4)
• Visible binding hides markup
• data-bind=‘visible: editTitle’
• What happened? Does the input shows? Why?
Amir Barylko MavenThought Inc.
OBSERVABLES (5)
• Subscribe / Publish model
• Notifies when the value changes
• Updates markup
• Triggers notifications
Amir Barylko MavenThought Inc.
OBSERVABLE VALUES (6)
• ko.observable
• Behaves like a function
• If you want the value you need to “evaluate”
Amir Barylko MavenThought Inc.
VALUE
• Binds the value of the markup for inputs
• data-bind=‘value: title’
Amir Barylko MavenThought Inc.
COMPUTED (7)
• Calculate values based on dependencies
• ko.computed(fnToUse)
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
Amir Barylko MavenThought Inc.
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
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
Amir Barylko MavenThought Inc.
SUMMARY
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
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?
Amir Barylko MavenThought Inc.
RESOURCES
• Contact me: amir@barylko.com, @abarylko
• Download: http://www.orthocoders.com/presentations
• coffescript.org
• knockoutjs.com
Recommended