enterprise javascriptsession2

Enterprise JavaScriptSession 2 - Building Applications

Wednesday, November 7, 12

Hi, I’m Troy


Hi, I’m Troy

• Developing software Since 1979

• Initially Game Software in Assembly (6502 and x86)

• Currently JavaScript, C#, Java, Objective-C

• [email protected]


mailto:[email protected]

mailto:[email protected]

jssaturday.comNov. 10th, Long Beach Convention

CenterDiscount code: RiaConsultingLLC

Save $65!!!


Today’s Agenda


Today’s Agenda

• Namespacing


Today’s Agenda

• Namespacing

• Design Patterns


Today’s Agenda

• Namespacing

• Design Patterns

• Performance


Today’s Agenda

• Namespacing

• Design Patterns

• Performance

• Debugging


Namespacing


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


Hands-on Exercise


Hands-on Exercise

• In jsFiddle.net


Hands-on Exercise

• In jsFiddle.net

• Create a global var named “myApp”


Hands-on Exercise

• In jsFiddle.net


• If it has been defined already, make it equal to its previous instance


Hands-on Exercise

• In jsFiddle.net


• 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


Answers


Answers1. var myApp = myApp || {};



2. if(!myApp) myApp = {};




3. myApp || (myApp = {});




3. myApp || (myApp = {});

4. var myApp = myApp === undefined ? {} : myApp;


Namespaces


Namespaces

• Single global variables


Namespaces


• Object literal notation


Namespaces



• Nested namespacing


Namespaces




• Immediately-Invoked Function Expressions


Namespaces




• Immediately-Invoked Function Expressions

• Namespace Injection


Single Global Variable



• The entire application goes into a single global object, usually a function




• An object literal is returned by the function




• An object literal is returned by the function

• Not well suited for team development since not easily decomposed


Single Global Variablevar myApplication = (function(){ function() { /*...*/ }, return{ /*...*/ };})();


Object Literal Notation



• Doesn’t pollute the global namespace




• Assist in organizing code into logical parts




• Assist in organizing code into logical parts

• Easy to read


Nested Namespacing


Nested Namespacing

• An extension of object literal notiation


Nested Namespacing


• Even if a namespace already exists, unlikely that the children do


Nested Namespacing



• Used extensively by JavaScript API vendors like Yahoo and Google


Nested Namespacing



• Used extensively by JavaScript API vendors like Yahoo and Google

• Negligible performance ding


Immediately-Invoked Function Expressions


Immediately-Invoked Function Expressions• Also known as “iffy”



• An unnamed function which is immediately invoked after it’s been defined




• Allows for information hiding




• Allows for information hiding

• Improves minification results


Namespace Injection


Namespace Injection

• A variation of the IIFE


Namespace Injection


• Methods and properties get injected for a specific namespace


Namespace Injection


• Methods and properties get injected for a specific namespace

• A bit cumbersome


Namespaces


Namespaces

• Most of my current code uses Nested Namespacing


Namespaces

• Most of my current code uses Nested Namespacing

• My newest code uses IIFE


Design Patterns


Design Patterns

• Singleton


Design Patterns

• Singleton

• Chaining


Design Patterns

• Singleton

• Chaining

• Observer


Design Patterns

• Singleton

• Chaining

• Observer

• Hands-on Exercise


SingletonThe singleton pattern is a design pattern that restricts the instantiation of a class to one object.


http://en.wikipedia.org/wiki/Design_pattern_(computer_science)


http://en.wikipedia.org/wiki/Instantiation_(computer_science)

http://en.wikipedia.org/wiki/Instantiation_(computer_science)

http://en.wikipedia.org/wiki/Object-oriented_programming


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 simple projects, a singleton can be used a a namespace

• In larger projects, it can be used to group related code together


ChainingMethod chaining, also known as named parameter idiom, is a common technique for invoking multiple method calls in object-oriented programming languages.






ChainingNot really a design pattern, more of a syntax hack, but its extensive use in JavaScript and JavaScript libraries requires explanation.


Chaining


Chaining

• There are generally two types of methods:


Chaining


• Accessors - return a value


Chaining


• Accessors - return a value

• Mutators - modify a property on the object and return “this” to enable chaining


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.






http://en.wikipedia.org/wiki/Object_(computer_science)#Objects_in_object-oriented_programming

http://en.wikipedia.org/wiki/Object_(computer_science)#Objects_in_object-oriented_programming

http://en.wikipedia.org/wiki/Method_(computer_science)

http://en.wikipedia.org/wiki/Method_(computer_science)

http://en.wikipedia.org/wiki/Event_handling

http://en.wikipedia.org/wiki/Event_handling

Observer


Observer

• Consist of three main components:


Observer


• The Observer


Observer


• The Observer

• The Observer List


Observer


• The Observer

• The Observer List

• The Subject


Hands-on Exercise


Hands-on Exercise

• http://jsfiddle.net/rockncoder/FkDRV/2/


http://jsfiddle.net/rockncoder/FkDRV/2/


Hands-on Exercise


• Hook an event handler to the “Click Me” button




Hands-on Exercise



• Have it some how cause the “log.me” event




Hands-on Exercise



• Have it some how cause the “log.me” event

• Remember to pass a message, (msg)




Performance


Performance

• Big O-Notation


Performance

• Big O-Notation

• Measuring Performance


Performance

• Big O-Notation


• 5 Performance Tips


Performance

• Big O-Notation


• 5 Performance Tips

• Hands-on Exercise


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


Big O Notation


Big O Notation

• O(1), Constant


Big O Notation

• O(1), Constant

• O(n), Linear


Big O Notation

• O(1), Constant

• O(n), Linear

• O(n ^ 2), Quadratic


Big O Notation

• O(1), Constant

• O(n), Linear


• O(2 ^ n), Exponential


Big O Notation

• O(1), Constant

• O(n), Linear


• O(2 ^ n), Exponential

• O(n!), Factorial


Measuring Performance



• JavaScript’s includes a Date object




• Date.getTime() measures time in milliseconds




• Date.getTime() measures time in milliseconds

• Resolution is not fine enough so we do things multiple times



/* A simple performance measurer */

var elapsedTime, startTime = new Date().getTime();

/* Do some operations */

elapsedTime = new Date().getTime() - startTime;


5 Performance Tips


Tip #5Use as few files as

possible


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






• Compress JS files

• Prefer JS at the bottom of the HTML file


Tip #4Prefer local variables


Prefer local variables



• Variables in scope found quicker




• JS search local scope, then global





• with creates a new scope level ahead of local





• with creates a new scope level ahead of local

• closures also create new scope level


Global vs. Local Demo



• Property chains similar to var scoping

• Objects closer in the chain found quicker


Properties Demo


Tip #3Reduce the work done

in loops


Reduce the work done in loops



• No real speed difference between: for, while and do_while




• Avoid for_in




• Avoid for_in

• Watch library based for_each


Loop Demos


Tip #2Learn jQuery


Learn jQuery


Learn jQuery

• Know what jQuery does


Learn jQuery


• Be sure to evaluate its use


Learn jQuery


• Be sure to evaluate its use

• Cache the results of jQuery selectors


jQuery Demo


Tip #1Avoid the DOM


Avoid the DOM


Avoid the DOM

• The DOM is REALLY Slow


Avoid the DOM


• Avoid accessing it when possible


Avoid the DOM


• Avoid accessing it when possible

• Do work offline then update DOM


DOM Access Demos


Hands-on Exercise


Hands-on Exercisehttp://jsfiddle.net/rockncoder/HDWRb/4/


http://jsfiddle.net/rockncoder/HDWRb/4/



Run the fiddle





Run the fiddle

Note the execution time





Run the fiddle


Improve the time





Run the fiddle


Improve the time

Have a question? Call me over




Debugging


Debugging

• Chrome Developer Tools


Debugging


• Safari Remote Debugging


Debugging



• Fiddler2


Debugging



• Fiddler2

• Proxying an iPad


Debugging



• Fiddler2

• Proxying an iPad

• Hands-on Exercise: Fiddler


Chrome Developer Tools



• ctrl-shift-J brings up the console




• View HTML




• View HTML

• View/Modify Source




• View HTML

• View/Modify Source

• Set breakpoints


Safari Remote Debugging



• Settings > Safari > Advanced




• Web Inspector = ON





• Safari > Develop > iPad > website





• Safari > Develop > iPad > website

• Similar to using Chrome


Fiddler2


Fiddler2

• http://www.fiddler2.com/fiddler2/


http://www.fiddler2.com/fiddler2/


Fiddler2


• Web Debugging Proxy




Fiddler2



• View Web Traffic




Fiddler2




• Filter Web Traffic




Fiddler2





• Inspect Requests




Fiddler2





• Inspect Requests

• Inspect Responses




Proxying an iPad


Proxying an iPad

• Tools > Fiddler Options > Connections


Proxying an iPad


• Wi-Fi > (right arrow) > HTTP Proxy


Proxying an iPad



• Set Server & Port


Proxying an iPad



• Set Server & Port

• Unfortunately Proxying an Android device is not as easy


Hands-on Exercise


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


http://search.twitter.com/search




The Code is Online

https://github.com/Rockncoder/EnterpriseJavaScript




Summary


Summary

• Namespacing


Summary

• Namespacing

• Design Patterns


Summary

• Namespacing

• Design Patterns

• Performance


Summary

• Namespacing

• Design Patterns

• Performance

• Debugging


enterprise javascriptsession2

Documents

myapp myapp

singleglobal object

object literal notation

global namespacewednesday

global namespace assist

unnamed function

entire application

todays agendawednesday