0
Amir Barylko MavenThought Inc.AMIR BARYLKORICH UI WITHKNOCKOUT.JS &COFFEESCRIPT
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 ...
Amir Barylko MavenThought Inc.RESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Ma...
Amir Barylko MavenThought Inc.YOUR EXPECTATIONS• (your input here....)
Amir Barylko MavenThought Inc.DISAPPOINTMENTMANAGEMENT• Define Rich / Responsive UI• Intro to Coffeescript• Intro to Knocko...
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 cl...
Amir Barylko MavenThought Inc.WHAT IS IT?“CoffeeScript is a little language that compilesinto JavaScript. Underneath all t...
Amir Barylko MavenThought Inc.STRING INTERPOLATION•You can concatenate inside a double quote stringusing the “#” and “{ }”...
Amir Barylko MavenThought Inc.FUNCTIONS•The arrow/lambda defines functionssquare = (x) -> x * x•Parenthesis are optional wh...
Amir Barylko MavenThought Inc.FUNCTIONS II•Implicit return(the last expression is the return value)•Multiple lines, indent...
Amir Barylko MavenThought Inc.OBJECTS AS HASHES•Declared using indentationconfig =local:user: devpwd: dev123remote:user: s...
Amir Barylko MavenThought Inc.ARRAYS•Arrays are declared with “[ ]”deploy = [local, remote, uat]fib = [1, 3, 5, 8, 13, 21]...
Amir Barylko MavenThought Inc.CLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}/mo...
Amir Barylko MavenThought Inc.INHERITANCE• One class can extend anotherclass Shapeconstructor: (@width) ->class Square ext...
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 behavi...
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...
Amir Barylko MavenThought Inc.KNOCKOUT.JSIntroBindingsObservables
Amir Barylko MavenThought Inc.INTROSimplify	  dynamic	  Javascript	  UIs	  by	  applying	  the	  Model-­View-­ViewModel	  ...
Amir Barylko MavenThought Inc.SOME FEATURES• Free and open source (MIT License)• Pure Javascript• Small & lightweight• No ...
Amir Barylko MavenThought Inc.DESCRIPTIVE BINDINGS• Use the html5 data-bind attribute• Can have multiple functions• They c...
Amir Barylko MavenThought Inc.STEPS• Write a view model class• Write a view with special markup that references the viewmo...
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 happen...
Amir Barylko MavenThought Inc.OBSERVABLES (5)• Subscribe / Publish model• Notifies when the value changes• Updates markup• ...
Amir Barylko MavenThought Inc.OBSERVABLE VALUES (6)• ko.observable• Behaves like a function• If you want the value you nee...
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 ...
Amir Barylko MavenThought Inc.SUBSCRIBETO EVENTS (9)• Each observable also notifies events• You can subscribe to trigger ot...
Amir Barylko MavenThought Inc.KNOCKOUT MAPPING• Easy to transform JSON data into observables• read from JSON with fromJS• ...
Amir Barylko MavenThought Inc.SUMMARY
Amir Barylko MavenThought Inc.BENEFITS• Short learning curve compared to other frameworks• Easy to implement two way bindi...
Amir Barylko MavenThought Inc.DRAWBACKS• The HTML may be harder to read• ViewModel scope can get out of hand• No particula...
Amir Barylko MavenThought Inc.RESOURCES• Contact me: amir@barylko.com, @abarylko• Download: http://www.orthocoders.com/pre...
Upcoming SlideShare
Loading in...5
×

Rich UI with Knockout.js & Coffeescript

1,672

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,672
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Rich UI with Knockout.js & Coffeescript"

  1. 1. Amir Barylko MavenThought Inc.AMIR BARYLKORICH UI WITHKNOCKOUT.JS &COFFEESCRIPT
  2. 2. Amir Barylko MavenThought Inc.INTROAbout meYour expectationsOverview
  3. 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. 4. Amir Barylko MavenThought Inc.RESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Materials: http://www.orthocoders.com/presentations
  5. 5. Amir Barylko MavenThought Inc.YOUR EXPECTATIONS• (your input here....)
  6. 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. 7. Amir Barylko MavenThought Inc.RICH UIWhat’s that?ProsCons
  8. 8. Amir Barylko MavenThought Inc.WHAT’S A RICH UI?• (good question)
  9. 9. Amir Barylko MavenThought Inc.PROS
  10. 10. Amir Barylko MavenThought Inc.CONS
  11. 11. Amir Barylko MavenThought Inc.COFFEESCRIPTWhat is it?Basic ConstructsClasses
  12. 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. 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. 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. 15. Amir Barylko MavenThought Inc.FUNCTIONS•The arrow/lambda defines functionssquare = (x) -> x * x•Parenthesis are optional when passingparametersstorageDelete movieId, true
  16. 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. 17. Amir Barylko MavenThought Inc.OBJECTS AS HASHES•Declared using indentationconfig =local:user: devpwd: dev123remote:user: superdevpwd: "impossibleToGuess"
  18. 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. 19. Amir Barylko MavenThought Inc.CLASSESclass MovieRepositoryconstructor: (@baseUrl) ->newMovie: ->$.ajaxurl: "#{@baseUrl}/movies/create"success: (data) -> $(id).append data
  20. 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. 21. Amir Barylko MavenThought Inc.MODELVIEWVIEW-MODELDefinitionProsCons
  22. 22. Amir Barylko MavenThought Inc.MODELVIEW CONTROLLERModelControllerViewX
  23. 23. Amir Barylko MavenThought Inc.RESPONSIBILITIES•Model provides data•View provides visualization•Controllers provides behaviour•Controller communicates one to the other
  24. 24. Amir Barylko MavenThought Inc.CONS•Hard to use•Hard to maintain•Lots of repetition
  25. 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. 26. Amir Barylko MavenThought Inc.KNOCKOUT.JSIntroBindingsObservables
  27. 27. Amir Barylko MavenThought Inc.INTROSimplify  dynamic  Javascript  UIs  by  applying  the  Model-­View-­ViewModel  patternknockoutjs.com
  28. 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. 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. 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. 31. Amir Barylko MavenThought Inc.TEXT BINDING (1)• Value of the markup element• data-bind=‘text: name’
  32. 32. Amir Barylko MavenThought Inc.FOR EACH (2)• Binds a collection to markup• data-bind=‘foreach: movies’
  33. 33. Amir Barylko MavenThought Inc.CLICK EVENTS (3)• Indicate handlers for click• data-bind=‘click: handlerOnVm’
  34. 34. Amir Barylko MavenThought Inc.HIDE ELEMENTS (4)• Visible binding hides markup• data-bind=‘visible: editTitle’• What happened? Does the input shows? Why?
  35. 35. Amir Barylko MavenThought Inc.OBSERVABLES (5)• Subscribe / Publish model• Notifies when the value changes• Updates markup• Triggers notifications
  36. 36. Amir Barylko MavenThought Inc.OBSERVABLE VALUES (6)• ko.observable• Behaves like a function• If you want the value you need to “evaluate”
  37. 37. Amir Barylko MavenThought Inc.VALUE• Binds the value of the markup for inputs• data-bind=‘value: title’
  38. 38. Amir Barylko MavenThought Inc.COMPUTED (7)• Calculate values based on dependencies• ko.computed(fnToUse)
  39. 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. 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. 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. 42. Amir Barylko MavenThought Inc.SUMMARY
  43. 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. 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. 45. Amir Barylko MavenThought Inc.RESOURCES• Contact me: amir@barylko.com, @abarylko• Download: http://www.orthocoders.com/presentations• coffescript.org• knockoutjs.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×