Rich UI with Knockout.js & Coffeescript
Upcoming SlideShare
Loading in...5
×
 

Rich UI with Knockout.js & Coffeescript

on

  • 2,126 views

 

Statistics

Views

Total Views
2,126
Views on SlideShare
2,126
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

Rich UI with Knockout.js & Coffeescript Presentation 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