oo java script class construction
DESCRIPTION
TRANSCRIPT
OO JavaScript Class Construction
Using The Prototype JavaScript Framework
July 8th 2008Ken Collins http://metaskills.net/
1Thursday, July 10, 2008
Topic Overview
2Thursday, July 10, 2008
Topic Overview
• Basic JavaScript Refresher
2Thursday, July 10, 2008
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
2Thursday, July 10, 2008
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
2Thursday, July 10, 2008
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
• Prototype Class Construction
2Thursday, July 10, 2008
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
• Prototype Class Construction
• Review HomeMarks v2.0
2Thursday, July 10, 2008
Basic JavaScript Refresher
3Thursday, July 10, 2008
Basic JavaScript Refresher
4Thursday, July 10, 2008
Basic JavaScript Refresher
• JavaScript is a prototype-based language.
4Thursday, July 10, 2008
Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior
reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that
serve as prototypes. This model can also be known as class-less, prototype-oriented or instance-based programming.
http://en.wikipedia.org/wiki/Prototype-based_programming
5Thursday, July 10, 2008
Basic JavaScript Refresher
• JavaScript is a prototype-based language.
6Thursday, July 10, 2008
Basic JavaScript Refresher
• JavaScript is a prototype-based language.
• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.
6Thursday, July 10, 2008
JavaScript Object Model
7Thursday, July 10, 2008
JavaScript Object Model
7Thursday, July 10, 2008
• JavaScript is a prototype-based language.
• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.
Basic JavaScript Refresher
8Thursday, July 10, 2008
• JavaScript is a prototype-based language.
• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.
• Get firebug and use console.log() liberally!
Basic JavaScript Refresher
8Thursday, July 10, 2008
http://getfirebug.com/releases/
9Thursday, July 10, 2008
10Thursday, July 10, 2008
• JavaScript is a prototype-based language.
• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.
• Get firebug and use console.log() liberally!
Basic JavaScript Refresher
11Thursday, July 10, 2008
• JavaScript is a prototype-based language.
• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.
• Get firebug and use console.log() liberally!
• Remember, that functions are objects too. With non-strict argument options.
Basic JavaScript Refresher
11Thursday, July 10, 2008
12Thursday, July 10, 2008
• JavaScript is a prototype-based language.
• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.
• Get firebug and use console.log() liberally!
• Remember, that functions are objects too. With non-strict argument options.
• Knowing what “this” is can save you lots of debugging and headaches. (another topic)
Basic JavaScript Refresher
13Thursday, July 10, 2008
The Ruby Object ModelKnowing Ruby’s object model will help you with Prototype’s class construction and how it mimics
inheritance and mixins.
14Thursday, July 10, 2008
Inheritance in Ruby
15Thursday, July 10, 2008
Module Mixins in Ruby
16Thursday, July 10, 2008
Prototyping in Ruby
17Thursday, July 10, 2008
http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming
18Thursday, July 10, 2008
JavaScript Code Usage/Organization
Types
19Thursday, July 10, 2008
JavaScript Code Usage/Organization Types
20Thursday, July 10, 2008
• Oh so uncool inline events.
• Procedural functions at the window level.
JavaScript Code Usage/Organization Types
20Thursday, July 10, 2008
Inheritance in Ruby
21Thursday, July 10, 2008
• Oh so uncool inline events.
• Procedural functions at the window level.
JavaScript Code Usage/Organization Types
22Thursday, July 10, 2008
• Oh so uncool inline events.
• Procedural functions at the window level.
• Namespaced modules. Essentially just a hash of stateless functions.
JavaScript Code Usage/Organization Types
22Thursday, July 10, 2008
Inheritance in Ruby
23Thursday, July 10, 2008
• Oh so uncool inline events.
• Procedural functions at the window level.
• Namespaced modules. Essentially just a hash of stateless functions.
JavaScript Code Usage/Organization Types
24Thursday, July 10, 2008
• Oh so uncool inline events.
• Procedural functions at the window level.
• Namespaced modules. Essentially just a hash of stateless functions.
• GO FULL OO IN JAVASCRIPT!
JavaScript Code Usage/Organization Types
24Thursday, July 10, 2008
Do not think about DOM elements that have events attached to them,
but instead think in terms of JavaScript objects that are instances of classes
modeled in your domain which know about:
25Thursday, July 10, 2008
• The DOM element(s) they represent.
Do not think about DOM elements that have events attached to them,
but instead think in terms of JavaScript objects that are instances of classes
modeled in your domain which know about:
25Thursday, July 10, 2008
• The DOM element(s) they represent.
• The behavior needed to change the page.
Do not think about DOM elements that have events attached to them,
but instead think in terms of JavaScript objects that are instances of classes
modeled in your domain which know about:
25Thursday, July 10, 2008
• The DOM element(s) they represent.
• The behavior needed to change the page.
• The state changes to report to the application server. (with ajax)
Do not think about DOM elements that have events attached to them,
but instead think in terms of JavaScript objects that are instances of classes
modeled in your domain which know about:
25Thursday, July 10, 2008
PrototypeClass
Construction
26Thursday, July 10, 2008
Prototype Class Construction
27Thursday, July 10, 2008
• All examples from prototypejs.org
Prototype Class Construction
27Thursday, July 10, 2008
• All examples from prototypejs.org
• Get very familiar with the whole APIhttp://www.prototypejs.org/api
Prototype Class Construction
27Thursday, July 10, 2008
• All examples from prototypejs.org
• Get very familiar with the whole APIhttp://www.prototypejs.org/api
• You must learn! Tips and tricks.http://www.prototypejs.org/learn
Prototype Class Construction
27Thursday, July 10, 2008
• All examples from prototypejs.org
• Get very familiar with the whole APIhttp://www.prototypejs.org/api
• You must learn! Tips and tricks.http://www.prototypejs.org/learn
• Focus on classes and inheritance.http://www.prototypejs.org/learn/class-inheritance
Prototype Class Construction
27Thursday, July 10, 2008
Basic Class Constructor
28Thursday, July 10, 2008
http://www.prototypejs.org/learn/class-inheritance
29Thursday, July 10, 2008
Review
30Thursday, July 10, 2008
HomeMarks v2.0 Review
31Thursday, July 10, 2008
• Total rewrite for rails 2.1
HomeMarks v2.0 Review
31Thursday, July 10, 2008
• Total rewrite for rails 2.1
• Completely Restful. App focuses solely on the data’s state change. Like an web service.
HomeMarks v2.0 Review
31Thursday, July 10, 2008
• Total rewrite for rails 2.1
• Completely Restful. App focuses solely on the data’s state change. Like an web service.
• Articles on MetaSkills.net
HomeMarks v2.0 Review
31Thursday, July 10, 2008
http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-pattern
32Thursday, July 10, 2008
http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protection
33Thursday, July 10, 2008
• Total rewrite for rails 2.1
• Completely Restful. App focuses solely on the data’s state change. Like an web service.
• Articles on MetaSkills.net
HomeMarks v2.0 Review
34Thursday, July 10, 2008
• Total rewrite for rails 2.1
• Completely Restful. App focuses solely on the data’s state change. Like an web service.
• Articles on MetaSkills.net
• Focus on these class files in the Github project.
HomeMarks v2.0 Review
34Thursday, July 10, 2008
http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarks
35Thursday, July 10, 2008
HomeMarks Follow Up
36Thursday, July 10, 2008
• JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box...
HomeMarks Follow Up
36Thursday, July 10, 2008
• JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box...
• All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know:
HomeMarks Follow Up
36Thursday, July 10, 2008
• JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box...
• All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know:
Shared knowledge of DOM elements common to all.
HomeMarks Follow Up
36Thursday, July 10, 2008
• JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box...
• All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know:
Shared knowledge of DOM elements common to all.
How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor.
HomeMarks Follow Up
36Thursday, July 10, 2008
• JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box...
• All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know:
Shared knowledge of DOM elements common to all.
How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor.
A this.flash() function to send dashboard messages.
HomeMarks Follow Up
36Thursday, July 10, 2008
• JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box...
• All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know:
Shared knowledge of DOM elements common to all.
How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor.
A this.flash() function to send dashboard messages.
Access to this.modal() for any fancy modal displays.
HomeMarks Follow Up
36Thursday, July 10, 2008