Rich UI with Knockout.js & Coffeescript

  • 1,503 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,503
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Amir Barylko MavenThought Inc.AMIR BARYLKORICH UI WITHKNOCKOUT.JS &COFFEESCRIPT
  • 2. Amir Barylko MavenThought Inc.INTROAbout meYour expectationsOverview
  • 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
  • 5. Amir Barylko MavenThought Inc.YOUR EXPECTATIONS• (your input here....)
  • 6. 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
  • 7. Amir Barylko MavenThought Inc.RICH UIWhat’s that?ProsCons
  • 8. Amir Barylko MavenThought Inc.WHAT’S A RICH UI?• (good question)
  • 9. Amir Barylko MavenThought Inc.PROS
  • 10. Amir Barylko MavenThought Inc.CONS
  • 11. Amir Barylko MavenThought Inc.COFFEESCRIPTWhat is it?Basic ConstructsClasses
  • 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 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/
  • 14. 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}"
  • 15. Amir Barylko MavenThought Inc.FUNCTIONS•The arrow/lambda defines functionssquare = (x) -> x * x•Parenthesis are optional when passingparametersstorageDelete movieId, true
  • 16. 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)
  • 17. Amir Barylko MavenThought Inc.OBJECTS AS HASHES•Declared using indentationconfig =local:user: devpwd: dev123remote:user: superdevpwd: "impossibleToGuess"
  • 18. 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]
  • 19. Amir Barylko MavenThought Inc.CLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}/movies/create"success: (data) -> $(id).append data
  • 20. 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
  • 21. Amir Barylko MavenThought Inc.MODELVIEWVIEW-MODELDefinitionProsCons
  • 22. Amir Barylko MavenThought Inc.MODELVIEW CONTROLLERModelControllerViewX
  • 23. Amir Barylko MavenThought Inc.RESPONSIBILITIES•Model provides data•View provides visualization•Controllers provides behaviour•Controller communicates one to the other
  • 24. Amir Barylko MavenThought Inc.CONS•Hard to use•Hard to maintain•Lots of repetition
  • 25. 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
  • 26. Amir Barylko MavenThought Inc.KNOCKOUT.JSIntroBindingsObservables
  • 27. Amir Barylko MavenThought Inc.INTROSimplify  dynamic  Javascript  UIs  by  applying  the  Model-­View-­ViewModel  patternknockoutjs.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 viewmodel• 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• Notifies when the value changes• Updates markup• Triggers notifications
  • 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 notifies events• You can subscribe to trigger other calculations• For example, clear the fields every time before edit a newmovie
  • 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
  • 42. Amir Barylko MavenThought Inc.SUMMARY
  • 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