• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rich UI with Knockout.js & Coffeescript

Rich UI with Knockout.js & Coffeescript






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

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.

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

    Rich UI with Knockout.js & Coffeescript Rich UI with Knockout.js & Coffeescript Presentation Transcript

    • Amir Barylko MavenThought Inc.INTROAbout meYour 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.DISAPPOINTMENTMANAGEMENT• 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 } )• 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
    • Amir Barylko MavenThought Inc.WHAT IS IT?“CoffeeScript is a little language that compilesinto JavaScript. Underneath all those awkwardbraces and semicolons, JavaScript has alwayshad a gorgeous object model at its heart.CoffeeScript is an attempt to expose the goodparts of JavaScript in a simple way.”http://coffeescript.org/
    • Amir Barylko MavenThought Inc.STRING INTERPOLATION•You can concatenate inside a double quote stringusing 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 passingparametersstorageDelete 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 indentationconfig =local:user: devpwd: dev123remote:user: superdevpwd: "impossibleToGuess"
    • Amir Barylko MavenThought Inc.ARRAYS•Arrays are declared with “[ ]”deploy = [local, remote, uat]fib = [1, 3, 5, 8, 13, 21]•Slicingfirst = fib[0..3]noLast = fib[0..-2]
    • Amir Barylko MavenThought Inc.CLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}/movies/create"success: (data) -> $(id).append data
    • Amir Barylko MavenThought Inc.INHERITANCE• One class can extend anotherclass Shapeconstructor: (@width) ->class Square extends ShapecomputeArea: -> Math.pow @width, 2class Circle extends Shaperadius: -> @width / 2computeArea: -> Math.PI * Math.pow @radius(), 2
    • Amir Barylko MavenThought Inc.MODELVIEWVIEW-MODELDefinitionProsCons
    • Amir Barylko MavenThought Inc.MODELVIEW CONTROLLERModelControllerViewX
    • 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.MODELVIEWVIEWMODEL•Model provides data•View provides visualization•ViewModel provides one-to-one what the viewneeds•By convention uses binding to update
    • Amir Barylko MavenThought Inc.KNOCKOUT.JSIntroBindingsObservables
    • Amir Barylko MavenThought Inc.INTROSimplify  dynamic  Javascript  UIs  by  applying  the  Model-­View-­ViewModel  patternknockoutjs.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 viewmodel• 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.SUBSCRIBETO EVENTS (9)• Each observable also notifies events• You can subscribe to trigger other calculations• For example, clear the fields every time before edit a newmovie
    • 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