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

Rich UI with Knockout.js & Coffeescript

on

  • 2,073 views

 

Statistics

Views

Total Views
2,073
Views on SlideShare
2,073
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 Rich UI with Knockout.js & Coffeescript Presentation Transcript

  • 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 entertaining you for the next hour! View slide
  • Amir Barylko MavenThought Inc.RESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Materials: http://www.orthocoders.com/presentations View slide
  • 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