3. Hi, I’m Troy
• Developing software Since 1979
• Initially Game Software in Assembly (6502
and x86)
• Currently JavaScript, C#, Java, Objective-C
• rockncoder@gmail.com
Wednesday, November 7, 12
4. jssaturday.com
Nov. 10th, Long Beach Convention
Center
Discount code: RiaConsultingLLC
Save $65!!!
Wednesday, November 7, 12
11. Namespacing
Namespacing is a technique employed to
avoid collisions with other objects or
variables in the global namespace. They're
also extremely useful for helping organize
blocks of functionality in your application
into easily manageable groups that can be
uniquely identified.
-- Addy Osmani
Wednesday, November 7, 12
14. Hands-on Exercise
• In jsFiddle.net
• Create a global var named “myApp”
Wednesday, November 7, 12
15. Hands-on Exercise
• In jsFiddle.net
• Create a global var named “myApp”
• If it has been defined already, make it equal
to its previous instance
Wednesday, November 7, 12
16. Hands-on Exercise
• In jsFiddle.net
• Create a global var named “myApp”
• If it has been defined already, make it equal
to its previous instance
• If it hasn’t been defined, make it equal to an
empty object literal
Wednesday, November 7, 12
29. Single Global Variable
• The entire application goes into a single
global object, usually a function
Wednesday, November 7, 12
30. Single Global Variable
• The entire application goes into a single
global object, usually a function
• An object literal is returned by the function
Wednesday, November 7, 12
31. Single Global Variable
• The entire application goes into a single
global object, usually a function
• An object literal is returned by the function
• Not well suited for team development since
not easily decomposed
Wednesday, November 7, 12
32. Single Global Variable
var myApplication = (function(){
function() {
/*...*/
},
return{
/*...*/
};
})();
Wednesday, November 7, 12
35. Object Literal Notation
• Doesn’t pollute the global namespace
• Assist in organizing code into logical parts
Wednesday, November 7, 12
36. Object Literal Notation
• Doesn’t pollute the global namespace
• Assist in organizing code into logical parts
• Easy to read
Wednesday, November 7, 12
38. Nested Namespacing
• An extension of object literal notiation
Wednesday, November 7, 12
39. Nested Namespacing
• An extension of object literal notiation
• Even if a namespace already exists, unlikely
that the children do
Wednesday, November 7, 12
40. Nested Namespacing
• An extension of object literal notiation
• Even if a namespace already exists, unlikely
that the children do
• Used extensively by JavaScript API vendors
like Yahoo and Google
Wednesday, November 7, 12
41. Nested Namespacing
• An extension of object literal notiation
• Even if a namespace already exists, unlikely
that the children do
• Used extensively by JavaScript API vendors
like Yahoo and Google
• Negligible performance ding
Wednesday, November 7, 12
43. Immediately-Invoked
Function Expressions
• Also known as “iffy”
Wednesday, November 7, 12
44. Immediately-Invoked
Function Expressions
• Also known as “iffy”
• An unnamed function which is immediately
invoked after it’s been defined
Wednesday, November 7, 12
45. Immediately-Invoked
Function Expressions
• Also known as “iffy”
• An unnamed function which is immediately
invoked after it’s been defined
• Allows for information hiding
Wednesday, November 7, 12
46. Immediately-Invoked
Function Expressions
• Also known as “iffy”
• An unnamed function which is immediately
invoked after it’s been defined
• Allows for information hiding
• Improves minification results
Wednesday, November 7, 12
49. Namespace Injection
• A variation of the IIFE
• Methods and properties get injected for a
specific namespace
Wednesday, November 7, 12
50. Namespace Injection
• A variation of the IIFE
• Methods and properties get injected for a
specific namespace
• A bit cumbersome
Wednesday, November 7, 12
60. Singleton
The singleton pattern is a design pattern that
restricts the instantiation of a class to one
object.
Wednesday, November 7, 12
61. When to Use a Singleton
Wednesday, November 7, 12
62. When to Use a Singleton
• For namespacing or modularizing code, it
should be used as often as possible
Wednesday, November 7, 12
63. When to Use a Singleton
• For namespacing or modularizing code, it
should be used as often as possible
• In simple projects, a singleton can be used a
a namespace
Wednesday, November 7, 12
64. When to Use a Singleton
• For namespacing or modularizing code, it
should be used as often as possible
• In simple projects, a singleton can be used a
a namespace
• In larger projects, it can be used to group
related code together
Wednesday, November 7, 12
65. Chaining
Method chaining, also known as named
parameter idiom, is a common technique for
invoking multiple method calls in object-
oriented programming languages.
Wednesday, November 7, 12
66. Chaining
Not really a design pattern, more of a syntax
hack, but its extensive use in JavaScript and
JavaScript libraries requires explanation.
Wednesday, November 7, 12
68. Chaining
• There are generally two types of methods:
Wednesday, November 7, 12
69. Chaining
• There are generally two types of methods:
• Accessors - return a value
Wednesday, November 7, 12
70. Chaining
• There are generally two types of methods:
• Accessors - return a value
• Mutators - modify a property on the object
and return “this” to enable chaining
Wednesday, November 7, 12
71. Observer
The observer pattern is a software design
pattern in which an object, called the
subject, maintains a list of its dependents,
called observers, and notifies them
automatically of any state changes, usually by
calling one of their methods. It is mainly used
to implement distributed event handling
systems.
Wednesday, November 7, 12
78. Hands-on Exercise
• http://jsfiddle.net/rockncoder/FkDRV/2/
Wednesday, November 7, 12
79. Hands-on Exercise
• http://jsfiddle.net/rockncoder/FkDRV/2/
• Hook an event handler to the “Click Me”
button
Wednesday, November 7, 12
80. Hands-on Exercise
• http://jsfiddle.net/rockncoder/FkDRV/2/
• Hook an event handler to the “Click Me”
button
• Have it some how cause the “log.me” event
Wednesday, November 7, 12
81. Hands-on Exercise
• http://jsfiddle.net/rockncoder/FkDRV/2/
• Hook an event handler to the “Click Me”
button
• Have it some how cause the “log.me” event
• Remember to pass a message, (msg)
Wednesday, November 7, 12
84. Performance
• Big O-Notation
Wednesday, November 7, 12
85. Performance
• Big O-Notation
• Measuring Performance
Wednesday, November 7, 12
86. Performance
• Big O-Notation
• Measuring Performance
• 5 Performance Tips
Wednesday, November 7, 12
87. Performance
• Big O-Notation
• Measuring Performance
• 5 Performance Tips
• Hands-on Exercise
Wednesday, November 7, 12
88. We should forget about small efficiencies, say
about 97% of the time: premature optimization
is the root of all evil.Yet we should not pass up
our opportunities in that critical 3%.
D. Knuth
Wednesday, November 7, 12
97. Measuring Performance
• JavaScript’s includes a Date object
Wednesday, November 7, 12
98. Measuring Performance
• JavaScript’s includes a Date object
• Date.getTime() measures time in
milliseconds
Wednesday, November 7, 12
99. Measuring Performance
• JavaScript’s includes a Date object
• Date.getTime() measures time in
milliseconds
• Resolution is not fine enough so we do
things multiple times
Wednesday, November 7, 12
100. Measuring Performance
/* A simple performance measurer */
var elapsedTime,
startTime = new Date().getTime();
/* Do some operations */
elapsedTime = new Date().getTime() -
startTime;
Wednesday, November 7, 12
102. Tip #5
Use as few files as
possible
Wednesday, November 7, 12
103. Use as few files as
possible
Wednesday, November 7, 12
104. Use as few files as
possible
• Browser can load multiple files at a time
Wednesday, November 7, 12
105. Use as few files as
possible
• Browser can load multiple files at a time
• But only one JS file at a time
Wednesday, November 7, 12
106. Use as few files as
possible
• Browser can load multiple files at a time
• But only one JS file at a time
• Concatenate multiple JS file into one
Wednesday, November 7, 12
107. Use as few files as
possible
• Browser can load multiple files at a time
• But only one JS file at a time
• Concatenate multiple JS file into one
• Compress JS files
Wednesday, November 7, 12
108. Use as few files as
possible
• Browser can load multiple files at a time
• But only one JS file at a time
• Concatenate multiple JS file into one
• Compress JS files
• Prefer JS at the bottom of the HTML file
Wednesday, November 7, 12
109. Tip #4
Prefer local variables
Wednesday, November 7, 12
112. Prefer local variables
• Variables in scope found quicker
• JS search local scope, then global
Wednesday, November 7, 12
113. Prefer local variables
• Variables in scope found quicker
• JS search local scope, then global
• with creates a new scope level ahead of
local
Wednesday, November 7, 12
114. Prefer local variables
• Variables in scope found quicker
• JS search local scope, then global
• with creates a new scope level ahead of
local
• closures also create new scope level
Wednesday, November 7, 12
120. Reduce the work done
in loops
• No real speed difference between: for, while
and do_while
Wednesday, November 7, 12
121. Reduce the work done
in loops
• No real speed difference between: for, while
and do_while
• Avoid for_in
Wednesday, November 7, 12
122. Reduce the work done
in loops
• No real speed difference between: for, while
and do_while
• Avoid for_in
• Watch library based for_each
Wednesday, November 7, 12
137. Hands-on Exercise
http://jsfiddle.net/rockncoder/HDWRb/4/
Wednesday, November 7, 12
138. Hands-on Exercise
http://jsfiddle.net/rockncoder/HDWRb/4/
Run the fiddle
Wednesday, November 7, 12
139. Hands-on Exercise
http://jsfiddle.net/rockncoder/HDWRb/4/
Run the fiddle
Note the execution time
Wednesday, November 7, 12
140. Hands-on Exercise
http://jsfiddle.net/rockncoder/HDWRb/4/
Run the fiddle
Note the execution time
Improve the time
Wednesday, November 7, 12
141. Hands-on Exercise
http://jsfiddle.net/rockncoder/HDWRb/4/
Run the fiddle
Note the execution time
Improve the time
Have a question? Call me over
Wednesday, November 7, 12
168. Proxying an iPad
• Tools > Fiddler Options > Connections
• Wi-Fi > (right arrow) > HTTP Proxy
• Set Server & Port
Wednesday, November 7, 12
169. Proxying an iPad
• Tools > Fiddler Options > Connections
• Wi-Fi > (right arrow) > HTTP Proxy
• Set Server & Port
• Unfortunately Proxying an Android device
is not as easy
Wednesday, November 7, 12
171. Hands-on Exercise
• Twitter’s Search API is Open
• The URL is http://search.twitter.com/
search.json?q={subject}
• Using Fiddler make a request to Twitter
about “sandy”
• Use the JSON view to inspect the results
Wednesday, November 7, 12
172. The Code is Online
https://github.com/Rockncoder/EnterpriseJavaScript
Wednesday, November 7, 12
