enterprise javascriptsession2

Enterprise JavaScriptSession 2 - Building Applications

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

• rockncoder@gmail.com

jssaturday.comNov. 10th, Long Beach Convention

CenterDiscount code: RiaConsultingLLC

Save $65!!!

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

• 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 = {});

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

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

• 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

• Easy to read

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

• Improves minification results

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

• Most of my current code uses Nested Namespacing

Namespaces

• Most of my current code uses Nested Namespacing

• My newest code uses IIFE

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.

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

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

• 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.

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

• 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

• 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

• 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

• 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

• 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

• 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

• Watch library based for_each

Loop Demos

Tip #2Learn 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

• 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/

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

• 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/Modify Source

• View HTML

• View/Modify Source

• Set breakpoints

Safari Remote Debugging

• Settings > Safari > Advanced

• Web Inspector = ON

• Safari > Develop > iPad > website

• Similar to using Chrome

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

• 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

• 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

The Code is Online

https://github.com/Rockncoder/EnterpriseJavaScript

Summary

• Namespacing

Summary

• Namespacing

• Design Patterns

Summary

• Namespacing

• Design Patterns

• Performance

Summary

• Namespacing

• Design Patterns

• Performance

• Debugging

enterprise javascriptsession2

myapp myapp

singleglobal object

object literal notation

global namespacewednesday

global namespace assist

unnamed function

entire application

todays agendawednesday

Documents

enterprise mentoring and enterprise 2.0

enterprise 2.0 and enterprise information management

the integrated enterprise: enterprise architecture ... ·...

alcatel-lucent enterprise portfolio enterprise … ·...

architecting the enterprise? enterprise...

appscend enterprise...

enterprise network enterprise network implementation

costcost--effective enterprise data securityeffective...

enterprise grade virtualization enterprise grade

wonderware enterprise integration application enterprise...

microsoft dynamics the connected enterprise€¦ · social...

enterprise pillar e3 – enterprise strategy...

oﬃcejet enterprise color x555 oﬃcejet enterprise color...

enterprise products enterprise products holdings llc ·...

enterprise architecture management tools - · pdf filesparx...

securing enterprise securing enterprise securing enterprise

introducing social enterprise -...

oakland enterprise zone enterprise zone

enterprise transformation services brochure - it · pdf...

isite isite enterprise enterprise