enterprise javascriptsession2
DESCRIPTION
TRANSCRIPT
Enterprise JavaScriptSession 2 - Building Applications
Wednesday, November 7, 12
Hi, I’m Troy
Wednesday, November 7, 12
Hi, I’m Troy
• Developing software Since 1979
• Initially Game Software in Assembly (6502 and x86)
• Currently JavaScript, C#, Java, Objective-C
Wednesday, November 7, 12
jssaturday.comNov. 10th, Long Beach Convention
CenterDiscount code: RiaConsultingLLC
Save $65!!!
Wednesday, November 7, 12
Today’s Agenda
Wednesday, November 7, 12
Today’s Agenda
• Namespacing
Wednesday, November 7, 12
Today’s Agenda
• Namespacing
• Design Patterns
Wednesday, November 7, 12
Today’s Agenda
• Namespacing
• Design Patterns
• Performance
Wednesday, November 7, 12
Today’s Agenda
• Namespacing
• Design Patterns
• Performance
• Debugging
Wednesday, November 7, 12
Namespacing
Wednesday, November 7, 12
NamespacingNamespacing 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
Hands-on Exercise
Wednesday, November 7, 12
Hands-on Exercise
• In jsFiddle.net
Wednesday, November 7, 12
Hands-on Exercise
• In jsFiddle.net
• Create a global var named “myApp”
Wednesday, November 7, 12
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
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
Answers
Wednesday, November 7, 12
Answers1. var myApp = myApp || {};
Wednesday, November 7, 12
Answers1. var myApp = myApp || {};
2. if(!myApp) myApp = {};
Wednesday, November 7, 12
Answers1. var myApp = myApp || {};
2. if(!myApp) myApp = {};
3. myApp || (myApp = {});
Wednesday, November 7, 12
Answers1. var myApp = myApp || {};
2. if(!myApp) myApp = {};
3. myApp || (myApp = {});
4. var myApp = myApp === undefined ? {} : myApp;
Wednesday, November 7, 12
Namespaces
Wednesday, November 7, 12
Namespaces
• Single global variables
Wednesday, November 7, 12
Namespaces
• Single global variables
• Object literal notation
Wednesday, November 7, 12
Namespaces
• Single global variables
• Object literal notation
• Nested namespacing
Wednesday, November 7, 12
Namespaces
• Single global variables
• Object literal notation
• Nested namespacing
• Immediately-Invoked Function Expressions
Wednesday, November 7, 12
Namespaces
• Single global variables
• Object literal notation
• Nested namespacing
• Immediately-Invoked Function Expressions
• Namespace Injection
Wednesday, November 7, 12
Single Global Variable
Wednesday, November 7, 12
Single Global Variable
• The entire application goes into a single global object, usually a function
Wednesday, November 7, 12
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
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
Single Global Variablevar myApplication = (function(){ function() { /*...*/ }, return{ /*...*/ };})();
Wednesday, November 7, 12
Object Literal Notation
Wednesday, November 7, 12
Object Literal Notation
• Doesn’t pollute the global namespace
Wednesday, November 7, 12
Object Literal Notation
• Doesn’t pollute the global namespace
• Assist in organizing code into logical parts
Wednesday, November 7, 12
Object Literal Notation
• Doesn’t pollute the global namespace
• Assist in organizing code into logical parts
• Easy to read
Wednesday, November 7, 12
Nested Namespacing
Wednesday, November 7, 12
Nested Namespacing
• An extension of object literal notiation
Wednesday, November 7, 12
Nested Namespacing
• An extension of object literal notiation
• Even if a namespace already exists, unlikely that the children do
Wednesday, November 7, 12
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
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
Immediately-Invoked Function Expressions
Wednesday, November 7, 12
Immediately-Invoked Function Expressions• Also known as “iffy”
Wednesday, November 7, 12
Immediately-Invoked Function Expressions• Also known as “iffy”
• An unnamed function which is immediately invoked after it’s been defined
Wednesday, November 7, 12
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
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
Namespace Injection
Wednesday, November 7, 12
Namespace Injection
• A variation of the IIFE
Wednesday, November 7, 12
Namespace Injection
• A variation of the IIFE
• Methods and properties get injected for a specific namespace
Wednesday, November 7, 12
Namespace Injection
• A variation of the IIFE
• Methods and properties get injected for a specific namespace
• A bit cumbersome
Wednesday, November 7, 12
Namespaces
Wednesday, November 7, 12
Namespaces
• Most of my current code uses Nested Namespacing
Wednesday, November 7, 12
Namespaces
• Most of my current code uses Nested Namespacing
• My newest code uses IIFE
Wednesday, November 7, 12
Design Patterns
Wednesday, November 7, 12
Design Patterns
Wednesday, November 7, 12
Design Patterns
• Singleton
Wednesday, November 7, 12
Design Patterns
• Singleton
• Chaining
Wednesday, November 7, 12
Design Patterns
• Singleton
• Chaining
• Observer
Wednesday, November 7, 12
Design Patterns
• Singleton
• Chaining
• Observer
• Hands-on Exercise
Wednesday, November 7, 12
SingletonThe singleton pattern is a design pattern that restricts the instantiation of a class to one object.
Wednesday, November 7, 12
When to Use a Singleton
Wednesday, November 7, 12
When to Use a Singleton
• For namespacing or modularizing code, it should be used as often as possible
Wednesday, November 7, 12
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
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
ChainingMethod 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
ChainingNot really a design pattern, more of a syntax hack, but its extensive use in JavaScript and JavaScript libraries requires explanation.
Wednesday, November 7, 12
Chaining
Wednesday, November 7, 12
Chaining
• There are generally two types of methods:
Wednesday, November 7, 12
Chaining
• There are generally two types of methods:
• Accessors - return a value
Wednesday, November 7, 12
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
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
Observer
Wednesday, November 7, 12
Observer
• Consist of three main components:
Wednesday, November 7, 12
Observer
• Consist of three main components:
• The Observer
Wednesday, November 7, 12
Observer
• Consist of three main components:
• The Observer
• The Observer List
Wednesday, November 7, 12
Observer
• Consist of three main components:
• The Observer
• The Observer List
• The Subject
Wednesday, November 7, 12
Hands-on Exercise
Wednesday, November 7, 12
Hands-on Exercise
• http://jsfiddle.net/rockncoder/FkDRV/2/
Wednesday, November 7, 12
Hands-on Exercise
• http://jsfiddle.net/rockncoder/FkDRV/2/
• Hook an event handler to the “Click Me” button
Wednesday, November 7, 12
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
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
Performance
Wednesday, November 7, 12
Performance
Wednesday, November 7, 12
Performance
• Big O-Notation
Wednesday, November 7, 12
Performance
• Big O-Notation
• Measuring Performance
Wednesday, November 7, 12
Performance
• Big O-Notation
• Measuring Performance
• 5 Performance Tips
Wednesday, November 7, 12
Performance
• Big O-Notation
• Measuring Performance
• 5 Performance Tips
• Hands-on Exercise
Wednesday, November 7, 12
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
Big O Notation
Wednesday, November 7, 12
Big O Notation
Wednesday, November 7, 12
Big O Notation
• O(1), Constant
Wednesday, November 7, 12
Big O Notation
• O(1), Constant
• O(n), Linear
Wednesday, November 7, 12
Big O Notation
• O(1), Constant
• O(n), Linear
• O(n ^ 2), Quadratic
Wednesday, November 7, 12
Big O Notation
• O(1), Constant
• O(n), Linear
• O(n ^ 2), Quadratic
• O(2 ^ n), Exponential
Wednesday, November 7, 12
Big O Notation
• O(1), Constant
• O(n), Linear
• O(n ^ 2), Quadratic
• O(2 ^ n), Exponential
• O(n!), Factorial
Wednesday, November 7, 12
Measuring Performance
Wednesday, November 7, 12
Measuring Performance
• JavaScript’s includes a Date object
Wednesday, November 7, 12
Measuring Performance
• JavaScript’s includes a Date object
• Date.getTime() measures time in milliseconds
Wednesday, November 7, 12
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
Measuring Performance
/* A simple performance measurer */
var elapsedTime, startTime = new Date().getTime();
/* Do some operations */
elapsedTime = new Date().getTime() - startTime;
Wednesday, November 7, 12
5 Performance Tips
Wednesday, November 7, 12
Tip #5Use as few files as
possible
Wednesday, November 7, 12
Use as few files as possible
Wednesday, November 7, 12
Use as few files as possible
• Browser can load multiple files at a time
Wednesday, November 7, 12
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
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
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
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
Tip #4Prefer local variables
Wednesday, November 7, 12
Prefer local variables
Wednesday, November 7, 12
Prefer local variables
• Variables in scope found quicker
Wednesday, November 7, 12
Prefer local variables
• Variables in scope found quicker
• JS search local scope, then global
Wednesday, November 7, 12
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
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
Global vs. Local Demo
Wednesday, November 7, 12
Prefer local variables
• Property chains similar to var scoping
• Objects closer in the chain found quicker
Wednesday, November 7, 12
Properties Demo
Wednesday, November 7, 12
Tip #3Reduce the work done
in loops
Wednesday, November 7, 12
Reduce the work done in loops
Wednesday, November 7, 12
Reduce the work done in loops
• No real speed difference between: for, while and do_while
Wednesday, November 7, 12
Reduce the work done in loops
• No real speed difference between: for, while and do_while
• Avoid for_in
Wednesday, November 7, 12
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
Loop Demos
Wednesday, November 7, 12
Tip #2Learn jQuery
Wednesday, November 7, 12
Learn jQuery
Wednesday, November 7, 12
Learn jQuery
• Know what jQuery does
Wednesday, November 7, 12
Learn jQuery
• Know what jQuery does
• Be sure to evaluate its use
Wednesday, November 7, 12
Learn jQuery
• Know what jQuery does
• Be sure to evaluate its use
• Cache the results of jQuery selectors
Wednesday, November 7, 12
jQuery Demo
Wednesday, November 7, 12
Tip #1Avoid the DOM
Wednesday, November 7, 12
Avoid the DOM
Wednesday, November 7, 12
Avoid the DOM
• The DOM is REALLY Slow
Wednesday, November 7, 12
Avoid the DOM
• The DOM is REALLY Slow
• Avoid accessing it when possible
Wednesday, November 7, 12
Avoid the DOM
• The DOM is REALLY Slow
• Avoid accessing it when possible
• Do work offline then update DOM
Wednesday, November 7, 12
DOM Access Demos
Wednesday, November 7, 12
Hands-on Exercise
Wednesday, November 7, 12
Hands-on Exercisehttp://jsfiddle.net/rockncoder/HDWRb/4/
Wednesday, November 7, 12
Hands-on Exercisehttp://jsfiddle.net/rockncoder/HDWRb/4/
Run the fiddle
Wednesday, November 7, 12
Hands-on Exercisehttp://jsfiddle.net/rockncoder/HDWRb/4/
Run the fiddle
Note the execution time
Wednesday, November 7, 12
Hands-on Exercisehttp://jsfiddle.net/rockncoder/HDWRb/4/
Run the fiddle
Note the execution time
Improve the time
Wednesday, November 7, 12
Hands-on Exercisehttp://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
Debugging
Wednesday, November 7, 12
Debugging
• Chrome Developer Tools
Wednesday, November 7, 12
Debugging
• Chrome Developer Tools
• Safari Remote Debugging
Wednesday, November 7, 12
Debugging
• Chrome Developer Tools
• Safari Remote Debugging
• Fiddler2
Wednesday, November 7, 12
Debugging
• Chrome Developer Tools
• Safari Remote Debugging
• Fiddler2
• Proxying an iPad
Wednesday, November 7, 12
Debugging
• Chrome Developer Tools
• Safari Remote Debugging
• Fiddler2
• Proxying an iPad
• Hands-on Exercise: Fiddler
Wednesday, November 7, 12
Chrome Developer Tools
Wednesday, November 7, 12
Chrome Developer Tools
• ctrl-shift-J brings up the console
Wednesday, November 7, 12
Chrome Developer Tools
• ctrl-shift-J brings up the console
• View HTML
Wednesday, November 7, 12
Chrome Developer Tools
• ctrl-shift-J brings up the console
• View HTML
• View/Modify Source
Wednesday, November 7, 12
Chrome Developer Tools
• ctrl-shift-J brings up the console
• View HTML
• View/Modify Source
• Set breakpoints
Wednesday, November 7, 12
Safari Remote Debugging
Wednesday, November 7, 12
Safari Remote Debugging
• Settings > Safari > Advanced
Wednesday, November 7, 12
Safari Remote Debugging
• Settings > Safari > Advanced
• Web Inspector = ON
Wednesday, November 7, 12
Safari Remote Debugging
• Settings > Safari > Advanced
• Web Inspector = ON
• Safari > Develop > iPad > website
Wednesday, November 7, 12
Safari Remote Debugging
• Settings > Safari > Advanced
• Web Inspector = ON
• Safari > Develop > iPad > website
• Similar to using Chrome
Wednesday, November 7, 12
Fiddler2
Wednesday, November 7, 12
Fiddler2
• http://www.fiddler2.com/fiddler2/
Wednesday, November 7, 12
Fiddler2
• http://www.fiddler2.com/fiddler2/
• Web Debugging Proxy
Wednesday, November 7, 12
Fiddler2
• http://www.fiddler2.com/fiddler2/
• Web Debugging Proxy
• View Web Traffic
Wednesday, November 7, 12
Fiddler2
• http://www.fiddler2.com/fiddler2/
• Web Debugging Proxy
• View Web Traffic
• Filter Web Traffic
Wednesday, November 7, 12
Fiddler2
• http://www.fiddler2.com/fiddler2/
• Web Debugging Proxy
• View Web Traffic
• Filter Web Traffic
• Inspect Requests
Wednesday, November 7, 12
Fiddler2
• http://www.fiddler2.com/fiddler2/
• Web Debugging Proxy
• View Web Traffic
• Filter Web Traffic
• Inspect Requests
• Inspect Responses
Wednesday, November 7, 12
Proxying an iPad
Wednesday, November 7, 12
Proxying an iPad
• Tools > Fiddler Options > Connections
Wednesday, November 7, 12
Proxying an iPad
• Tools > Fiddler Options > Connections
• Wi-Fi > (right arrow) > HTTP Proxy
Wednesday, November 7, 12
Proxying an iPad
• Tools > Fiddler Options > Connections
• Wi-Fi > (right arrow) > HTTP Proxy
• Set Server & Port
Wednesday, November 7, 12
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
Hands-on Exercise
Wednesday, November 7, 12
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
The Code is Online
https://github.com/Rockncoder/EnterpriseJavaScript
Wednesday, November 7, 12
Summary
Wednesday, November 7, 12
Summary
• Namespacing
Wednesday, November 7, 12
Summary
• Namespacing
• Design Patterns
Wednesday, November 7, 12
Summary
• Namespacing
• Design Patterns
• Performance
Wednesday, November 7, 12
Summary
• Namespacing
• Design Patterns
• Performance
• Debugging
Wednesday, November 7, 12