Download as PDF, PPTX
![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]](https://image.slidesharecdn.com/richuiknockoutcoffeescript-130426050404-phpapp02/85/Rich-UI-with-Knockout-js-amp-Coffeescript-18-320.jpg)
![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]](https://image.slidesharecdn.com/richuiknockoutcoffeescript-130426050404-phpapp02/75/Rich-UI-with-Knockout-js-amp-Coffeescript-18-2048.jpg)
Uploaded byAmir Barylko
Rich UI with Knockout.js & Coffeescript
This document outlines a presentation on building rich user interfaces using Knockout.js and CoffeeScript. It introduces the speaker, Amir Barylko, and provides an overview of the topics to be covered, including introductions to CoffeeScript, Knockout.js, MVVM pattern, bindings, observables and computed values. Expectations from the audience are requested and resources including contact details and additional materials are listed.
Rich UI with Knockout.js & Coffeescript
- 1. Amir Barylko MavenThoughtInc. AMIR BARYLKO RICH UI WITH KNOCKOUT.JS & COFFEESCRIPT
- 2. Amir Barylko MavenThoughtInc. INTRO About me Your expectations Overview
- 3. Amir Barylko MavenThoughtInc. WHO AM I? • Software quality expert • Architect • Developer • Mentor • Great cook • The one who’s entertaining you for the next hour!
- 4. Amir Barylko MavenThoughtInc. RESOURCES • Email: amir@barylko.com • Twitter: @abarylko • Blog: http://www.orthocoders.com • Materials: http://www.orthocoders.com/presentations
- 5. Amir Barylko MavenThoughtInc. YOUR EXPECTATIONS • (your input here....)
- 6. Amir Barylko MavenThoughtInc. 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
- 7. Amir Barylko MavenThoughtInc. RICH UI What’s that? Pros Cons
- 8. Amir Barylko MavenThoughtInc. WHAT’S A RICH UI? • (good question)
- 9. Amir Barylko MavenThoughtInc. PROS
- 10. Amir Barylko MavenThoughtInc. CONS
- 11. Amir Barylko MavenThoughtInc. COFFEESCRIPT What is it? Basic Constructs Classes
- 12. Amir Barylko MavenThoughtInc. 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 MavenThoughtInc. 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/
- 14. Amir Barylko MavenThoughtInc. 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}"
- 15. Amir Barylko MavenThoughtInc. FUNCTIONS •The arrow/lambda defines functions square = (x) -> x * x •Parenthesis are optional when passing parameters storageDelete movieId, true
- 16. Amir Barylko MavenThoughtInc. FUNCTIONS II •Implicit return (the last expression is the return value) •Multiple lines, indentation is important deleteMovie = (e) -> movieId = $(e.target).... storageDelete(movieId)
- 17. Amir Barylko MavenThoughtInc. OBJECTS AS HASHES •Declared using indentation config = local: user: 'dev' pwd: 'dev123' remote: user: 'superdev' pwd: "impossibleToGuess"
- 18. Amir Barylko MavenThoughtInc. 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]
- 19. Amir Barylko MavenThoughtInc. CLASSES class MovieRepository constructor: (@baseUrl) -> newMovie: -> $.ajax url: "#{@baseUrl}/movies/create" success: (data) -> $(id).append data
- 20. Amir Barylko MavenThoughtInc. 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
- 21. Amir Barylko MavenThoughtInc. MODELVIEWVIEW-MODEL Definition Pros Cons
- 22. Amir Barylko MavenThoughtInc. MODELVIEW CONTROLLER Model Controller View X
- 23. Amir Barylko MavenThoughtInc. RESPONSIBILITIES •Model provides data •View provides visualization •Controllers provides behaviour •Controller communicates one to the other
- 24. Amir Barylko MavenThoughtInc. CONS •Hard to use •Hard to maintain •Lots of repetition
- 25. Amir Barylko MavenThoughtInc. MODELVIEWVIEWMODEL •Model provides data •View provides visualization •ViewModel provides one-to-one what the view needs •By convention uses binding to update
- 26. Amir Barylko MavenThoughtInc. KNOCKOUT.JS Intro Bindings Observables
- 27. Amir Barylko MavenThoughtInc. INTRO Simplify dynamic Javascript UIs by applying the Model- View-ViewModel pattern knockoutjs.com
- 28. Amir Barylko MavenThoughtInc. SOME FEATURES • Free and open source (MIT License) • Pure Javascript • Small & lightweight • No dependencies • Supports all mainstream browsers • Good documentation
- 29. Amir Barylko MavenThoughtInc. DESCRIPTIVE BINDINGS • Use the html5 data-bind attribute • Can have multiple functions • They can be used for data, attributes, etc
- 30. Amir Barylko MavenThoughtInc. 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())
- 31. Amir Barylko MavenThoughtInc. TEXT BINDING (1) • Value of the markup element • data-bind=‘text: name’
- 32. Amir Barylko MavenThoughtInc. FOR EACH (2) • Binds a collection to markup • data-bind=‘foreach: movies’
- 33. Amir Barylko MavenThoughtInc. CLICK EVENTS (3) • Indicate handlers for click • data-bind=‘click: handlerOnVm’
- 34. Amir Barylko MavenThoughtInc. HIDE ELEMENTS (4) • Visible binding hides markup • data-bind=‘visible: editTitle’ • What happened? Does the input shows? Why?
- 35. Amir Barylko MavenThoughtInc. OBSERVABLES (5) • Subscribe / Publish model • Notifies when the value changes • Updates markup • Triggers notifications
- 36. Amir Barylko MavenThoughtInc. OBSERVABLE VALUES (6) • ko.observable • Behaves like a function • If you want the value you need to “evaluate”
- 37. Amir Barylko MavenThoughtInc. VALUE • Binds the value of the markup for inputs • data-bind=‘value: title’
- 38. Amir Barylko MavenThoughtInc. COMPUTED (7) • Calculate values based on dependencies • ko.computed(fnToUse)
- 39. Amir Barylko MavenThoughtInc. 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 MavenThoughtInc. 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 new movie
- 41. Amir Barylko MavenThoughtInc. 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 MavenThoughtInc. SUMMARY
- 43. Amir Barylko MavenThoughtInc. 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 MavenThoughtInc. 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 MavenThoughtInc. RESOURCES • Contact me: amir@barylko.com, @abarylko • Download: http://www.orthocoders.com/presentations • coffescript.org • knockoutjs.com