• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Enterprise javascriptsession2
 

Enterprise javascriptsession2

on

  • 534 views

 

Statistics

Views

Total Views
534
Views on SlideShare
534
Embed Views
0

Actions

Likes
1
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Enterprise javascriptsession2 Enterprise javascriptsession2 Presentation Transcript

    • Enterprise JavaScript Session 2 - Building ApplicationsWednesday, November 7, 12
    • Hi, I’m TroyWednesday, 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.comWednesday, November 7, 12
    • jssaturday.com Nov. 10th, Long Beach Convention Center Discount code: RiaConsultingLLC Save $65!!!Wednesday, November 7, 12
    • Today’s AgendaWednesday, November 7, 12
    • Today’s Agenda • NamespacingWednesday, November 7, 12
    • Today’s Agenda • Namespacing • Design PatternsWednesday, November 7, 12
    • Today’s Agenda • Namespacing • Design Patterns • PerformanceWednesday, November 7, 12
    • Today’s Agenda • Namespacing • Design Patterns • Performance • DebuggingWednesday, November 7, 12
    • NamespacingWednesday, November 7, 12
    • Namespacing Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace. Theyre also extremely useful for helping organize blocks of functionality in your application into easily manageable groups that can be uniquely identified. -- Addy OsmaniWednesday, November 7, 12
    • Hands-on ExerciseWednesday, November 7, 12
    • Hands-on Exercise • In jsFiddle.netWednesday, 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 instanceWednesday, 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 literalWednesday, November 7, 12
    • AnswersWednesday, November 7, 12
    • Answers 1. var myApp = myApp || {};Wednesday, November 7, 12
    • Answers 1. var myApp = myApp || {}; 2. if(!myApp) myApp = {};Wednesday, November 7, 12
    • Answers 1. var myApp = myApp || {}; 2. if(!myApp) myApp = {}; 3. myApp || (myApp = {});Wednesday, November 7, 12
    • Answers 1. var myApp = myApp || {}; 2. if(!myApp) myApp = {}; 3. myApp || (myApp = {}); 4. var myApp = myApp === undefined ? {} : myApp;Wednesday, November 7, 12
    • NamespacesWednesday, November 7, 12
    • Namespaces • Single global variablesWednesday, November 7, 12
    • Namespaces • Single global variables • Object literal notationWednesday, November 7, 12
    • Namespaces • Single global variables • Object literal notation • Nested namespacingWednesday, November 7, 12
    • Namespaces • Single global variables • Object literal notation • Nested namespacing • Immediately-Invoked Function ExpressionsWednesday, November 7, 12
    • Namespaces • Single global variables • Object literal notation • Nested namespacing • Immediately-Invoked Function Expressions • Namespace InjectionWednesday, November 7, 12
    • Single Global VariableWednesday, November 7, 12
    • Single Global Variable • The entire application goes into a single global object, usually a functionWednesday, 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 functionWednesday, 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 decomposedWednesday, November 7, 12
    • Single Global Variable var myApplication = (function(){ function() { /*...*/ }, return{ /*...*/ }; })();Wednesday, November 7, 12
    • Object Literal NotationWednesday, November 7, 12
    • Object Literal Notation • Doesn’t pollute the global namespaceWednesday, November 7, 12
    • Object Literal Notation • Doesn’t pollute the global namespace • Assist in organizing code into logical partsWednesday, November 7, 12
    • Object Literal Notation • Doesn’t pollute the global namespace • Assist in organizing code into logical parts • Easy to readWednesday, November 7, 12
    • Nested NamespacingWednesday, November 7, 12
    • Nested Namespacing • An extension of object literal notiationWednesday, November 7, 12
    • Nested Namespacing • An extension of object literal notiation • Even if a namespace already exists, unlikely that the children doWednesday, 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 GoogleWednesday, 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 dingWednesday, November 7, 12
    • Immediately-Invoked Function ExpressionsWednesday, 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 definedWednesday, 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 hidingWednesday, 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 resultsWednesday, November 7, 12
    • Namespace InjectionWednesday, November 7, 12
    • Namespace Injection • A variation of the IIFEWednesday, November 7, 12
    • Namespace Injection • A variation of the IIFE • Methods and properties get injected for a specific namespaceWednesday, November 7, 12
    • Namespace Injection • A variation of the IIFE • Methods and properties get injected for a specific namespace • A bit cumbersomeWednesday, November 7, 12
    • NamespacesWednesday, November 7, 12
    • Namespaces • Most of my current code uses Nested NamespacingWednesday, November 7, 12
    • Namespaces • Most of my current code uses Nested Namespacing • My newest code uses IIFEWednesday, November 7, 12
    • Design PatternsWednesday, November 7, 12
    • Design PatternsWednesday, November 7, 12
    • Design Patterns • SingletonWednesday, November 7, 12
    • Design Patterns • Singleton • ChainingWednesday, November 7, 12
    • Design Patterns • Singleton • Chaining • ObserverWednesday, November 7, 12
    • Design Patterns • Singleton • Chaining • Observer • Hands-on ExerciseWednesday, November 7, 12
    • Singleton The singleton pattern is a design pattern that restricts the instantiation of a class to one object.Wednesday, November 7, 12
    • When to Use a SingletonWednesday, November 7, 12
    • When to Use a Singleton • For namespacing or modularizing code, it should be used as often as possibleWednesday, 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 namespaceWednesday, 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 togetherWednesday, November 7, 12
    • 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
    • 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
    • ChainingWednesday, 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 valueWednesday, 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 chainingWednesday, 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
    • ObserverWednesday, November 7, 12
    • Observer • Consist of three main components:Wednesday, November 7, 12
    • Observer • Consist of three main components: • The ObserverWednesday, November 7, 12
    • Observer • Consist of three main components: • The Observer • The Observer ListWednesday, November 7, 12
    • Observer • Consist of three main components: • The Observer • The Observer List • The SubjectWednesday, November 7, 12
    • Hands-on ExerciseWednesday, 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” buttonWednesday, 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” eventWednesday, 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
    • PerformanceWednesday, November 7, 12
    • PerformanceWednesday, November 7, 12
    • Performance • Big O-NotationWednesday, November 7, 12
    • Performance • Big O-Notation • Measuring PerformanceWednesday, November 7, 12
    • Performance • Big O-Notation • Measuring Performance • 5 Performance TipsWednesday, November 7, 12
    • Performance • Big O-Notation • Measuring Performance • 5 Performance Tips • Hands-on ExerciseWednesday, 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. KnuthWednesday, November 7, 12
    • Big O NotationWednesday, November 7, 12
    • Big O NotationWednesday, November 7, 12
    • Big O Notation • O(1), ConstantWednesday, November 7, 12
    • Big O Notation • O(1), Constant • O(n), LinearWednesday, November 7, 12
    • Big O Notation • O(1), Constant • O(n), Linear • O(n ^ 2), QuadraticWednesday, November 7, 12
    • Big O Notation • O(1), Constant • O(n), Linear • O(n ^ 2), Quadratic • O(2 ^ n), ExponentialWednesday, November 7, 12
    • Big O Notation • O(1), Constant • O(n), Linear • O(n ^ 2), Quadratic • O(2 ^ n), Exponential • O(n!), FactorialWednesday, November 7, 12
    • Measuring PerformanceWednesday, November 7, 12
    • Measuring Performance • JavaScript’s includes a Date objectWednesday, November 7, 12
    • Measuring Performance • JavaScript’s includes a Date object • Date.getTime() measures time in millisecondsWednesday, 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 timesWednesday, 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 TipsWednesday, November 7, 12
    • Tip #5 Use as few files as possibleWednesday, November 7, 12
    • Use as few files as possibleWednesday, November 7, 12
    • Use as few files as possible • Browser can load multiple files at a timeWednesday, November 7, 12
    • Use as few files as possible • Browser can load multiple files at a time • But only one JS file at a timeWednesday, 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 oneWednesday, 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 filesWednesday, 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 fileWednesday, November 7, 12
    • Tip #4 Prefer local variablesWednesday, November 7, 12
    • Prefer local variablesWednesday, November 7, 12
    • Prefer local variables • Variables in scope found quickerWednesday, November 7, 12
    • Prefer local variables • Variables in scope found quicker • JS search local scope, then globalWednesday, 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 localWednesday, 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 levelWednesday, November 7, 12
    • Global vs. Local DemoWednesday, November 7, 12
    • Prefer local variables • Property chains similar to var scoping • Objects closer in the chain found quickerWednesday, November 7, 12
    • Properties DemoWednesday, November 7, 12
    • Tip #3 Reduce the work done in loopsWednesday, November 7, 12
    • Reduce the work done in loopsWednesday, November 7, 12
    • Reduce the work done in loops • No real speed difference between: for, while and do_whileWednesday, November 7, 12
    • Reduce the work done in loops • No real speed difference between: for, while and do_while • Avoid for_inWednesday, 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_eachWednesday, November 7, 12
    • Loop DemosWednesday, November 7, 12
    • Tip #2 Learn jQueryWednesday, November 7, 12
    • Learn jQueryWednesday, November 7, 12
    • Learn jQuery • Know what jQuery doesWednesday, November 7, 12
    • Learn jQuery • Know what jQuery does • Be sure to evaluate its useWednesday, November 7, 12
    • Learn jQuery • Know what jQuery does • Be sure to evaluate its use • Cache the results of jQuery selectorsWednesday, November 7, 12
    • jQuery DemoWednesday, November 7, 12
    • Tip #1 Avoid the DOMWednesday, November 7, 12
    • Avoid the DOMWednesday, November 7, 12
    • Avoid the DOM • The DOM is REALLY SlowWednesday, November 7, 12
    • Avoid the DOM • The DOM is REALLY Slow • Avoid accessing it when possibleWednesday, November 7, 12
    • Avoid the DOM • The DOM is REALLY Slow • Avoid accessing it when possible • Do work offline then update DOMWednesday, November 7, 12
    • DOM Access DemosWednesday, November 7, 12
    • Hands-on ExerciseWednesday, November 7, 12
    • Hands-on Exercise http://jsfiddle.net/rockncoder/HDWRb/4/Wednesday, November 7, 12
    • Hands-on Exercise http://jsfiddle.net/rockncoder/HDWRb/4/ Run the fiddleWednesday, November 7, 12
    • Hands-on Exercise http://jsfiddle.net/rockncoder/HDWRb/4/ Run the fiddle Note the execution timeWednesday, November 7, 12
    • Hands-on Exercise http://jsfiddle.net/rockncoder/HDWRb/4/ Run the fiddle Note the execution time Improve the timeWednesday, November 7, 12
    • Hands-on Exercise http://jsfiddle.net/rockncoder/HDWRb/4/ Run the fiddle Note the execution time Improve the time Have a question? Call me overWednesday, November 7, 12
    • DebuggingWednesday, November 7, 12
    • Debugging • Chrome Developer ToolsWednesday, November 7, 12
    • Debugging • Chrome Developer Tools • Safari Remote DebuggingWednesday, November 7, 12
    • Debugging • Chrome Developer Tools • Safari Remote Debugging • Fiddler2Wednesday, November 7, 12
    • Debugging • Chrome Developer Tools • Safari Remote Debugging • Fiddler2 • Proxying an iPadWednesday, November 7, 12
    • Debugging • Chrome Developer Tools • Safari Remote Debugging • Fiddler2 • Proxying an iPad • Hands-on Exercise: FiddlerWednesday, November 7, 12
    • Chrome Developer ToolsWednesday, November 7, 12
    • Chrome Developer Tools • ctrl-shift-J brings up the consoleWednesday, November 7, 12
    • Chrome Developer Tools • ctrl-shift-J brings up the console • View HTMLWednesday, November 7, 12
    • Chrome Developer Tools • ctrl-shift-J brings up the console • View HTML • View/Modify SourceWednesday, November 7, 12
    • Chrome Developer Tools • ctrl-shift-J brings up the console • View HTML • View/Modify Source • Set breakpointsWednesday, November 7, 12
    • Safari Remote DebuggingWednesday, November 7, 12
    • Safari Remote Debugging • Settings > Safari > AdvancedWednesday, November 7, 12
    • Safari Remote Debugging • Settings > Safari > Advanced • Web Inspector = ONWednesday, November 7, 12
    • Safari Remote Debugging • Settings > Safari > Advanced • Web Inspector = ON • Safari > Develop > iPad > websiteWednesday, November 7, 12
    • Safari Remote Debugging • Settings > Safari > Advanced • Web Inspector = ON • Safari > Develop > iPad > website • Similar to using ChromeWednesday, November 7, 12
    • Fiddler2Wednesday, November 7, 12
    • Fiddler2 • http://www.fiddler2.com/fiddler2/Wednesday, November 7, 12
    • Fiddler2 • http://www.fiddler2.com/fiddler2/ • Web Debugging ProxyWednesday, November 7, 12
    • Fiddler2 • http://www.fiddler2.com/fiddler2/ • Web Debugging Proxy • View Web TrafficWednesday, November 7, 12
    • Fiddler2 • http://www.fiddler2.com/fiddler2/ • Web Debugging Proxy • View Web Traffic • Filter Web TrafficWednesday, November 7, 12
    • Fiddler2 • http://www.fiddler2.com/fiddler2/ • Web Debugging Proxy • View Web Traffic • Filter Web Traffic • Inspect RequestsWednesday, November 7, 12
    • Fiddler2 • http://www.fiddler2.com/fiddler2/ • Web Debugging Proxy • View Web Traffic • Filter Web Traffic • Inspect Requests • Inspect ResponsesWednesday, November 7, 12
    • Proxying an iPadWednesday, November 7, 12
    • Proxying an iPad • Tools > Fiddler Options > ConnectionsWednesday, November 7, 12
    • Proxying an iPad • Tools > Fiddler Options > Connections • Wi-Fi > (right arrow) > HTTP ProxyWednesday, November 7, 12
    • Proxying an iPad • Tools > Fiddler Options > Connections • Wi-Fi > (right arrow) > HTTP Proxy • Set Server & PortWednesday, 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 easyWednesday, November 7, 12
    • Hands-on ExerciseWednesday, 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 resultsWednesday, November 7, 12
    • The Code is Online https://github.com/Rockncoder/EnterpriseJavaScriptWednesday, November 7, 12
    • SummaryWednesday, November 7, 12
    • Summary • NamespacingWednesday, November 7, 12
    • Summary • Namespacing • Design PatternsWednesday, November 7, 12
    • Summary • Namespacing • Design Patterns • PerformanceWednesday, November 7, 12
    • Summary • Namespacing • Design Patterns • Performance • DebuggingWednesday, November 7, 12