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