Your SlideShare is downloading. ×
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Anything But Typical: Learning to Love JavaScript Prototypes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Anything But Typical: Learning to Love JavaScript Prototypes

8,281

Published on

Frightened and confused by the term "prototype"? Tired of praying that there's some plugin for a framework that will do exactly what you need to do? Unlock a whole new world of interactivity with …

Frightened and confused by the term "prototype"? Tired of praying that there's some plugin for a framework that will do exactly what you need to do? Unlock a whole new world of interactivity with object-oriented JavaScript programming.

Published in: Business
3 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,281
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
427
Comments
3
Likes
16
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
  • Web was a scary placeBrowser compatibility and features all over the mapDevs hop from site to site grabbing snippets of code
  • JS libraries emerge several years agoSmooth over cross browser differencesMake complex behavior easyProvide frameworks for enhancement
  • New dependency on libraries and plugins is growingDevs spend a lot of time… (series)
  • Searching for a JS library extension that does what they need
  • Changing site to fit what the extension does
  • Brute-force coding requirements back in
  • Live in fear of repeating it allwhen make updateson the next project
  • One of JS most powerful featues goesUnusedIgnoredMisunderstoodAnd it can help
  • JS is OOP language
  • Objects are containers forProperties - DataMethods - BehaviorsWork with objects all the time
  • Template for properties + methodsWork with prototypes every dayEven if you don’t realize itDate, Array, etc
  • Code you writeCode loaded in memory
  • Easy to…BuildModifyExpand on complex interactions
  • Reference point that serves as basis for an objectTo understand prototypeNeed to understand property lookup chain
  • Simple exampleCreate a date var named “instance”Define a new property on the varCall several methods
  • PLC for instance var looks like thisInstance prototype = DateDate prototype = ObjectJS uses PLC to find values of referenced properties
  • Look up instance.fooJS finds it on the var itselfStops looking
  • Lookup instance.getTimeDoesn’t find it on the varFinds it on DateStops looking
  • Lookup instance.hasOwnPropertyDoesn’t find it on varDoesn’t find it on DateFinds it on Object
  • Prototypes are put together different than most
  • More complicated exampleRex is var instance of PoodlePoodle prototype = DogDog prototype = Object
  • Closer look at DogFunctionAll functions have prototype propertyPrototype defaults to ObjectConstructor is Function paired with NEW operatorUsed to create instances
  • Dog’s prototype property used to build the templateFunctions on a prototype are methodsNon-functions on a prototype are propertiesAnything defined on function’s prototype available to instances
  • Poodle is second typeFunction, just like DogInheritanceSet Poodle.prototype to new instance of DogCreates link between Poodle and Dog in PLCCreate properties on Poodle.prototypeAvailable to instances of Poodle
  • Rex is instance of PoodleProperty “name” defined on rex – instance propertyHas access to all of Poodle’s prototype propertiesAnd to other properties up PLC
  • Probably recognize THIS operatorLook at how THIS interacts with prototypeIn example:Socks and fluffy both instances of CatCat inherits from Object
  • When call socks.speakFinds speak property on Cat.prototypeInside of speak, encounter THISProperties on THIS walk PLC starting at instanceGreeting not a property of socks instanceGreeting is a property of Cat prototype
  • When call fluffy.speakSpeak function found on Cat.prototype, same as socksUnlike socks, fluffy has own greeting propertylookup stops at instance
  • Functions have call method that lets set execution contextTHIS operator refers back to execution context
  • When sayFoo called with exec context objTHIS = obj
  • Calling a method on an instance is same asUsing CALL to supply instance as exec context prototype method
  • Shown some basic examples so far, but don’t really take advantageDive deeper into inheritance
  • In example:Container type hasarray that it can store items inMethod to add itemsinherits from ObjectLimitedContainerInherits from ContainerChanges inherited behavior to limit how many items can be in array
  • Behavior in Container constructor creates items arrayTo get LC to also have that behaviorCALL Container constructor with THIS as exec context within LC constructor
  • Container’s addItem method just pushes into arrayWant to set a limit to how many items can be in arrayDefine new addItem method on LC prototypeThe new addItem is higher in the PLC, so it will be found before old oneAdd logic into new method to throw error if there are too many itemsCALL Container’s addItem method with THIS as exec context to get original behavior
  • Have kind of a patchwork natureCan take advantage of that to bring together lots of complicated behaviors
  • In example, CatDog borrows behavior from Cat and DogCat instances are furious when call swim methodDog instances are delightedCatDog is both delighted and furious when you call its swim method
  • May have noticed an issue in earlier examples
  • Have two types: Parent and ChildChild inherits from parent
  • When Child linked to ParentParent constructor is calledParent constructor has undesirable behaviorAlert goes off when set up inheritance
  • Get around issue with a simple helper function
  • Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
  • Prototypes have never been accused of being very prettyBut they are very powerful
  • Up to now, haven’t had any real world examplesLet’s see what they can really doEXAMPLEPretty standard HTML formCommon problem is validating a formLet’s do it with prototypes!
  • Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
  • Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
  • And do a really good job of itStart to get into trouble when depend totally on the libraryStart to get into bad trouble when depending totally on plugins
  • Easy to…BuildModifyExpand on complex interactions
  • Help you design the interactionthe way it needs to workand in a reusable, extensible way that plays well with others
  • Any questions?
  • Transcript

    • 1. Anything But Typical
      Learning to Love JavaScript Prototypes
      Page 1© 2010 Razorfish. All rights reserved.
      Dan Nichols
      March 14, 2010
    • 2. JavaScript
      Page 2© 2010 Razorfish. All rights reserved.
    • 3. Object-Oriented Programming
      Page 3© 2010 Razorfish. All rights reserved.
    • 4. class
      Page 4© 2010 Razorfish. All rights reserved.
    • 5. Inheritance
      Page 5© 2010 Razorfish. All rights reserved.
    • 6. prototype(not the library)
      Page 6© 2010 Razorfish. All rights reserved.
    • 7. The story so far…
      Page 7© 2010 Razorfish. All rights reserved.
    • 8. <a onclick=“javascript:alert(‘chaos!’)”>
      Page 8© 2010 Razorfish. All rights reserved.
    • 9. Page 9© 2010 Razorfish. All rights reserved.
    • 10. …except it wasn’t all good.
      Page 10© 2010 Razorfish. All rights reserved.
    • 11. Page 11© 2010 Razorfish. All rights reserved.
    • 12. Page 12© 2010 Razorfish. All rights reserved.
    • 13. Page 13© 2010 Razorfish. All rights reserved.
    • 14. Page 14© 2010 Razorfish. All rights reserved.
    • 15. Sound familiar?
      Page 15© 2010 Razorfish. All rights reserved.
    • 16. Page 16© 2010 Razorfish. All rights reserved.
      prototype(not the library) to the rescue!
    • 17. Page 17© 2010 Razorfish. All rights reserved.
      Everything is an object
    • 18. Page 18© 2010 Razorfish. All rights reserved.
      Every object has a prototype
    • 19. Page 19© 2010 Razorfish. All rights reserved.
      prototypes do good things
    • 20. Page 20© 2010 Razorfish. All rights reserved.
      Encourage modularityand reusability
    • 21. Page 21© 2010 Razorfish. All rights reserved.
      Provide a consistent wayto do (different) things
    • 22. Page 22© 2010 Razorfish. All rights reserved.
      Keep code to a minimum
    • 23. Page 23© 2010 Razorfish. All rights reserved.
      Make complexity easy
    • 24. What is a prototype, exactly?
      Page 24© 2010 Razorfish. All rights reserved.
    • 25. Page 25© 2010 Razorfish. All rights reserved.
      A reference point for other objects
    • 26. Property lookup chain
      Page 26© 2010 Razorfish. All rights reserved.
    • 27. Property lookup chain
      Page 27© 2010 Razorfish. All rights reserved.
      instance
      Date
      Object
    • 28. Property lookup chain
      Page 28© 2010 Razorfish. All rights reserved.
      instance
      Date
      Object
    • 29. Property lookup chain
      Page 29© 2010 Razorfish. All rights reserved.
      instance
      Date
      Object
    • 30. Property lookup chain
      Page 30© 2010 Razorfish. All rights reserved.
      instance
      Date
      Object
    • 31. Page 31© 2010 Razorfish. All rights reserved.
      JavaScript is different frommost other OOP languages
    • 32. Anatomy of a prototype
      Page 32© 2010 Razorfish. All rights reserved.
      rex
      Poodle
      Dog
      Object
    • 33. Anatomy of a prototype
      Page 33© 2010 Razorfish. All rights reserved.
      Constructor
    • 34. Anatomy of a prototype
      Page 34© 2010 Razorfish. All rights reserved.
      Property
      Method
    • 35. Anatomy of a prototype
      Page 35© 2010 Razorfish. All rights reserved.
      Constructor
      Inheritance
    • 36. Anatomy of a prototype
      Page 36© 2010 Razorfish. All rights reserved.
      Instance
      Instance Property
    • 37. this and the lookup chain
      Page 37© 2010 Razorfish. All rights reserved.
      fluffy
      socks
      Cat
      Object
    • 38. this and the lookup chain
      Page 38© 2010 Razorfish. All rights reserved.
      socks
      Cat
      Object
    • 39. this and the lookup chain
      Page 39© 2010 Razorfish. All rights reserved.
      fluffy
      Cat
      Object
    • 40. Execution context: this and call()
      Page 40© 2010 Razorfish. All rights reserved.
    • 41. Execution context: this and call()
      Page 41© 2010 Razorfish. All rights reserved.
    • 42. Execution context with instances
      Page 42© 2010 Razorfish. All rights reserved.
      Same outcome
    • 43. Page 43© 2010 Razorfish. All rights reserved.
      Inheritance
    • 44. Working with inherited behavior
      Page 44© 2010 Razorfish. All rights reserved.
      LimitedContainer
      Container
      Object
    • 45. Working with inherited behavior
      Page 45© 2010 Razorfish. All rights reserved.
      LimitedContainer
      Container
      Object
    • 46. Working with inherited behavior
      Page 46© 2010 Razorfish. All rights reserved.
      LimitedContainer
      Container
      Object
    • 47. Page 47© 2010 Razorfish. All rights reserved.
      JavaScript is the Frankensteinof the OOP world
    • 48. Borrowing from multiple prototypes
      Page 48© 2010 Razorfish. All rights reserved.
    • 49. Page 49© 2010 Razorfish. All rights reserved.
      One small problem
    • 50. The constructor problem
      Page 50© 2010 Razorfish. All rights reserved.
    • 51. The constructor problem
      Page 51© 2010 Razorfish. All rights reserved.
    • 52. Fixing the constructor problem
      Page 52© 2010 Razorfish. All rights reserved.
    • 53. Fixing the constructor problem
      Page 53© 2010 Razorfish. All rights reserved.
    • 54. Page 54© 2010 Razorfish. All rights reserved.
      prototype isn’t love at first sight
    • 55. Page 55© 2010 Razorfish. All rights reserved.
      Putting prototypes to work
    • 56. Requirements
      • Four kinds of rules on the form:
      • 57. Required
      • 58. Email
      • 59. Number
      • 60. Zip Code
      • 61. Multiple rules can apply to one field
      • 62. Rules need to be inferred from data-rich, standard HTML
      • 63. Error messages should be specific
      • 64. Flexible enough to be:
      • 65. Usable for all other forms on the site
      • 66. Extended for use in other projects
      Page 56© 2010 Razorfish. All rights reserved.
    • 67. The Plan
      • On load:
      Create validation rules for each field
      Set up submit handler
      • When form is submitted:
      Cycle through all rules
      If a field fails a rule
      Mark it invalid
      Create an error message for it
      Don’t check any more rules for that field
      Show all error messages
      Page 57© 2010 Razorfish. All rights reserved.
    • 68. Page 58© 2010 Razorfish. All rights reserved.
      NumberValidator
      EmailValidator
      RequiredValidator
      PatternValidator
      ValidatingForm
      Validator
      Object
    • 69. Page 59© 2010 Razorfish. All rights reserved.
      Libraries are there to make life easier
    • 70. Page 60© 2010 Razorfish. All rights reserved.
      Think about your approach
    • 71. Page 61© 2010 Razorfish. All rights reserved.
      Dive in!
    • 72. Thank You
      Dan Nichols
      dan.nichols@razorfish.com
      Blog: http://heydanno.com/blog
      Code demo: http://heydanno.com/sxsw
      Page 62© 2010 Razorfish. All rights reserved.

    ×