Tweet
Tweet

Slide 1

Slide 1 text

OO JavaScript Class Construction Using The Prototype JavaScript Framework July 8th 2008 Ken Collins http://metaskills.net/ 1 Thursday, July 10, 2008

Slide 2

Slide 2 text

Topic Overview 2 Thursday, July 10, 2008

Slide 3

Slide 3 text

Topic Overview • Basic JavaScript Refresher 2 Thursday, July 10, 2008

Slide 4

Slide 4 text

Topic Overview • Basic JavaScript Refresher • The Ruby Object Model 2 Thursday, July 10, 2008

Slide 5

Slide 5 text

Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types 2 Thursday, July 10, 2008

Slide 6

Slide 6 text

Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types • Prototype Class Construction 2 Thursday, July 10, 2008

Slide 7

Slide 7 text

Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types • Prototype Class Construction • Review HomeMarks v2.0 2 Thursday, July 10, 2008

Slide 8

Slide 8 text

Basic JavaScript Refresher 3 Thursday, July 10, 2008

Slide 9

Slide 9 text

Basic JavaScript Refresher 4 Thursday, July 10, 2008

Slide 10

Slide 10 text

Basic JavaScript Refresher • JavaScript is a prototype-based language. 4 Thursday, July 10, 2008

Slide 11

Slide 11 text

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 5 Thursday, July 10, 2008

Slide 12

Slide 12 text

Basic JavaScript Refresher • JavaScript is a prototype-based language. 6 Thursday, July 10, 2008

Slide 13

Slide 13 text

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. 6 Thursday, July 10, 2008

Slide 14

Slide 14 text

JavaScript Object Model 7 Thursday, July 10, 2008

Slide 15

Slide 15 text

JavaScript Object Model 7 Thursday, July 10, 2008

Slide 16

Slide 16 text

• 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 8 Thursday, July 10, 2008

Slide 17

Slide 17 text

• 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 8 Thursday, July 10, 2008

Slide 18

Slide 18 text

http://getfirebug.com/releases/ 9 Thursday, July 10, 2008

Slide 19

Slide 19 text

10 Thursday, July 10, 2008

Slide 20

Slide 20 text

• 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 11 Thursday, July 10, 2008

Slide 21

Slide 21 text

• 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 11 Thursday, July 10, 2008

Slide 22

Slide 22 text

12 Thursday, July 10, 2008

Slide 23

Slide 23 text

• 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 13 Thursday, July 10, 2008

Slide 24

Slide 24 text

The Ruby Object Model Knowing Ruby’s object model will help you with Prototype’s class construction and how it mimics inheritance and mixins. 14 Thursday, July 10, 2008

Slide 25

Slide 25 text

Inheritance in Ruby 15 Thursday, July 10, 2008

Slide 26

Slide 26 text

Module Mixins in Ruby 16 Thursday, July 10, 2008

Slide 27

Slide 27 text

Prototyping in Ruby 17 Thursday, July 10, 2008

Slide 28

Slide 28 text

http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming 18 Thursday, July 10, 2008

Slide 29

Slide 29 text

JavaScript Code Usage/Organization Types 19 Thursday, July 10, 2008

Slide 30

Slide 30 text

JavaScript Code Usage/ Organization Types 20 Thursday, July 10, 2008

Slide 31

Slide 31 text

• Oh so uncool inline events. • Procedural functions at the window level. JavaScript Code Usage/ Organization Types 20 Thursday, July 10, 2008

Slide 32

Slide 32 text

Inheritance in Ruby 21 Thursday, July 10, 2008

Slide 33

Slide 33 text

• Oh so uncool inline events. • Procedural functions at the window level. JavaScript Code Usage/ Organization Types 22 Thursday, July 10, 2008

Slide 34

Slide 34 text

• 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 22 Thursday, July 10, 2008

Slide 35

Slide 35 text

Inheritance in Ruby 23 Thursday, July 10, 2008

Slide 36

Slide 36 text

• 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 24 Thursday, July 10, 2008

Slide 37

Slide 37 text

• 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 24 Thursday, July 10, 2008

Slide 38

Slide 38 text

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: 25 Thursday, July 10, 2008

Slide 39

Slide 39 text

• 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: 25 Thursday, July 10, 2008

Slide 40

Slide 40 text

• 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: 25 Thursday, July 10, 2008

Slide 41

Slide 41 text

• 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: 25 Thursday, July 10, 2008

Slide 42

Slide 42 text

Prototype Class Construction 26 Thursday, July 10, 2008

Slide 43

Slide 43 text

Prototype Class Construction 27 Thursday, July 10, 2008

Slide 44

Slide 44 text

• All examples from prototypejs.org Prototype Class Construction 27 Thursday, July 10, 2008

Slide 45

Slide 45 text

• All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/api Prototype Class Construction 27 Thursday, July 10, 2008

Slide 46

Slide 46 text

• All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/api • You must learn! Tips and tricks. http://www.prototypejs.org/learn Prototype Class Construction 27 Thursday, July 10, 2008

Slide 47

Slide 47 text

• All examples from prototypejs.org • Get very familiar with the whole API http://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 27 Thursday, July 10, 2008

Slide 48

Slide 48 text

Basic Class Constructor 28 Thursday, July 10, 2008

Slide 49

Slide 49 text

http://www.prototypejs.org/learn/class-inheritance 29 Thursday, July 10, 2008

Slide 50

Slide 50 text

Review 30 Thursday, July 10, 2008

Slide 51

Slide 51 text

HomeMarks v2.0 Review 31 Thursday, July 10, 2008

Slide 52

Slide 52 text

• Total rewrite for rails 2.1 HomeMarks v2.0 Review 31 Thursday, July 10, 2008

Slide 53

Slide 53 text

• 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 31 Thursday, July 10, 2008

Slide 54

Slide 54 text

• 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 31 Thursday, July 10, 2008

Slide 55

Slide 55 text

http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-pattern 32 Thursday, July 10, 2008

Slide 56

Slide 56 text

http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protection 33 Thursday, July 10, 2008

Slide 57

Slide 57 text

• 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 34 Thursday, July 10, 2008

Slide 58

Slide 58 text

• 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 34 Thursday, July 10, 2008

Slide 59

Slide 59 text

http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarks 35 Thursday, July 10, 2008

Slide 60

Slide 60 text

HomeMarks Follow Up 36 Thursday, July 10, 2008

Slide 61

Slide 61 text

• 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 36 Thursday, July 10, 2008

Slide 62

Slide 62 text

• 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 36 Thursday, July 10, 2008

Slide 63

Slide 63 text

• 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 36 Thursday, July 10, 2008

Slide 64

Slide 64 text

• 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 36 Thursday, July 10, 2008

Slide 65

Slide 65 text

• 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 36 Thursday, July 10, 2008

Slide 66

Slide 66 text

• 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 36 Thursday, July 10, 2008