SlideShare a Scribd company logo
1 of 46
Download to read offline
Enterprise Strength
 Mobile JavaScript
Unit Testing and Debugging in the Real World
      LA C#.NET - 4 September 2012
       SoCal.NET - 5 September 2012
jssaturday.com
Nov. 10th, Long Beach Convention
             Center
 Discount code: RiaConsultingLLC
The Agenda
• The Rise of JavaScript
• Best Practices
• Unit Testing
• Debugging
The Rise of JavaScript
• Why JavaScript is so important?
• Why JavaScript Sucks?
• Why is Good JavaScript So Hard To Do?
• The Browser Wars I, II, and III
Why JavaScript is so
   important?
2002
2012
Why JavaScript Sucks?
• The DOM
• The Internet’s Long Tail
• Java is to JavaScript...
The DOM
• The Document Object Model is a cross-
  platform and language-independent
  convention for representing and interacting
  with objects in HTML
• The DOM is not JavaScript
The Internet’s Long Tail
• It easy to change websites, hard to change
  browsers
• Standards are hard to change
• Ecma International
 • Move slow
 • Fearful of breaking code in production
Java is to JavaScript as
    Car is to Carpet
• First version built in 10 days by Brendan
  Eich and named LiveScript
• Influenced greatly by Scheme
• Marketing won over Engineering
 • Changed into a curly brace language
 • Renamed to JavaScript for marketing
    appeal
Scheme
;The first program
(begin
  (display "Hello, World!")
  (newline))
Why is Good JavaScript
 So Hard to Write?
It’s Your Fault!
Why, It’s Your Fault
• JavaScript is a language that engineers don’t
  bother to learn
• It is changed not embraced
• For years the page load has protected you
The Browser Wars
Browser War I
• Microsoft vs. Netscape
• Internet Explorer vs. Navigator
• Control of the Internet
• Proprietary Additions
• Netscape no longer exists
Browser War II
• Microsoft vs. Mozilla vs. Google vs. Apple
• IE vs FireFox vs Chrome vs Safari
• Search and Referrals
• Microsoft is losing massive market share
Browser War III
• Microsoft vs. Apple vs. Google
• Mobile IE vs Mobile Safari vs The Browser
  named Browser
• Mobile Search and Referrals
• Implementation of HTML5/CSS3
• Two way tie between Apple and Google
Use Best Practices
Use Best Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns
Avoid Sloppy JavaScript
• JavaScript is a Harsh Mistress
• Always use ‘===’ & ‘!==’
• Code in JavaScript not C#, Java, Ruby, etc.
• Use JSLint or JSHint or Google Closure
Avoid the Global Space
• Minimize Use of Global Variables
• Use Namespacing
• Use Anonymous/Immediate Functions
  When Appropriate
Use Design Patterns
• Singleton
• Chaining
• Revealing Module Structure
• + many more
jQuery Chaining

$('#mypanel')
  .find('TABLE .firstCol')
  .removeClass('.firstCol')
  .css('background' : 'red')
  .append('<span>This cell is now red</span>');
C# LINQ Chaining
using System;
using System.Linq;

namespace StringMethodChaining
{
    class Program
    {
        static void Main(string[] args)
        {
            "aardvarks AND antelopes AND hippopotami"
                .Replace("antelopes", "centipedes")
                .Substring("aardvarks".Length)
                .ToLower()
                .Trim()
                .Split(new[] {"and"}, StringSplitOptions.None)
                .ToList()
                .ForEach(item => Console.WriteLine(item.Trim()));
            Console.ReadLine();
        }
    }
}
Unit Testing
• Introduction to Unit Testing
• Headless Unit Testing
• JS Unit Testers
A unit test is a piece of
code that tests a piece of
production code.
Unit Test
• Sets up one or a few more objects in a
  known state
• Exercises them
• Inspects the results
• Must be fast and easy to run
Beware of headless unit
        tests
Headless Unit Testing
• Ruby, Rhino, and JSUnit
• Visual Studio (using plug-ins)
JS Unit Testers
• Jasmine (JSUnit obsolete)
• QUnit
• YUI 3 Test
• jsTestDriver
• + lots more
JSTestDriver &
         Visual Studio

http://slmoloch.blogspot.com/2009/08/how-to-
run-jstestdriver-with-visual_02.html
Some Tips
• Involve your team in Unit Tester choice
• 100% coverage is tough and not practical
• Test should be public within your team, the
  more eyes the better
Debugging
• What’s the Problem?
• Analogues
• WEINRE & Adobe Shadow
• iWebInspector
• Opera Mobile Emulator
What’s the Problem?
• Every device has a different browser and
  none have development tools
• The alert box - freezes the browser
• Console.log - better but not easy to
• Breakpoints
Analogues

In biochemistry, an analog is a substance that
is similar, but not identical, to another.
For us, it is a browser that is similar, but not
identical, to the one we wish to test.
Analogues
• iPhone - Safari
• Android - Chrome
• Windows Phone 7 - IE
• Blackberry - Safari/Chrome
Analogs


Don’t assume that if it works on the analog,
it will work on the device. Always test on a
device.
WEINRE
• Created by Patrick Mueller in JavaScript
• WEb INspector REmote (pronounced like
  winery)
• WebKit Only! (It uses built in hooks)
• Allows for inspection of HTML/CSS
• Remote console.log
• NOT A DEBUGGER
Adobe Shadow
• Chrome Extension + iOS app & Android
  app
• WEINRE with a better UI
• Inspection of HTML/CSS
• Remote console.log
• NOT A DEBUGGER
iWebInspector

• Runs only on the iOS Simulator
• Inspection of HTML/CSS
• Remote console.log
• True Remote Debugging
Opera Mobile Emulator
• Runs using desktop Opera & Opera Mobile
  or Opera Mobile Emulator
• Inspection of HTML/CSS
• Remote console.log
• True Remote Debugger
Summary
• JavaScript is tough, but overly so
• Use the Best Tools
• Be Pragmatic, not Dogmatic
Useful URLs
• http://www.JSLint.com
• http://www.JSHint.com
• https://developers.google.com/closure/
  utilities/
• http://code.google.com/p/js-test-driver/
• http://people.apache.org/~pmuellr/weinre/
  docs/1.x/1.5.0/
Useful URLs
• http://yuilibrary.com/yui/docs/test/
• http://qunitjs.com/
• http://pivotallabs.com/what/mobile/
  overview
• http://siliconforks.com/jscoverage/

More Related Content

What's hot

Angular from a Different Angle
Angular from a Different AngleAngular from a Different Angle
Angular from a Different AngleJeremy Likness
 
Testing Code.org's Interactive CS Curriculum
Testing Code.org's Interactive CS CurriculumTesting Code.org's Interactive CS Curriculum
Testing Code.org's Interactive CS CurriculumBrian Jordan
 
Making cross browser tests beautiful
Making cross browser tests beautifulMaking cross browser tests beautiful
Making cross browser tests beautifulMeaghan Lewis
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With JestBen McCormick
 
Selenium Best Practices with Jason Huggins
Selenium Best Practices with Jason HugginsSelenium Best Practices with Jason Huggins
Selenium Best Practices with Jason HugginsSauce Labs
 
Getting By Without "QA"
Getting By Without "QA"Getting By Without "QA"
Getting By Without "QA"Dave King
 
Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...
Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...
Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...Sargis Sargsyan
 
Advanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksAdvanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksJeremy Likness
 
Next generation frontend tooling
Next generation frontend toolingNext generation frontend tooling
Next generation frontend toolingpksjce
 
Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With CypressKnoldus Inc.
 
Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Hong Tat Yew
 
The JavaScript Delusion
The JavaScript DelusionThe JavaScript Delusion
The JavaScript DelusionJUGBD
 
Real World Selenium Testing
Real World Selenium TestingReal World Selenium Testing
Real World Selenium TestingMary Jo Sminkey
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Jeremy Likness
 
A tale of 3 databases
A tale of 3 databasesA tale of 3 databases
A tale of 3 databasesChris Skardon
 
Jest: Frontend Testing richtig gemacht @WebworkerNRW
Jest: Frontend Testing richtig gemacht @WebworkerNRWJest: Frontend Testing richtig gemacht @WebworkerNRW
Jest: Frontend Testing richtig gemacht @WebworkerNRWHolger Grosse-Plankermann
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsSeth McLaughlin
 
MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...
MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...
MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...PROIDEA
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
 
Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)Faichi Solutions
 

What's hot (20)

Angular from a Different Angle
Angular from a Different AngleAngular from a Different Angle
Angular from a Different Angle
 
Testing Code.org's Interactive CS Curriculum
Testing Code.org's Interactive CS CurriculumTesting Code.org's Interactive CS Curriculum
Testing Code.org's Interactive CS Curriculum
 
Making cross browser tests beautiful
Making cross browser tests beautifulMaking cross browser tests beautiful
Making cross browser tests beautiful
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With Jest
 
Selenium Best Practices with Jason Huggins
Selenium Best Practices with Jason HugginsSelenium Best Practices with Jason Huggins
Selenium Best Practices with Jason Huggins
 
Getting By Without "QA"
Getting By Without "QA"Getting By Without "QA"
Getting By Without "QA"
 
Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...
Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...
Better Page Object Handling with Loadable Component Pattern - SQA Days 20, Be...
 
Advanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksAdvanced AngularJS Tips and Tricks
Advanced AngularJS Tips and Tricks
 
Next generation frontend tooling
Next generation frontend toolingNext generation frontend tooling
Next generation frontend tooling
 
Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With Cypress
 
Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)
 
The JavaScript Delusion
The JavaScript DelusionThe JavaScript Delusion
The JavaScript Delusion
 
Real World Selenium Testing
Real World Selenium TestingReal World Selenium Testing
Real World Selenium Testing
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
A tale of 3 databases
A tale of 3 databasesA tale of 3 databases
A tale of 3 databases
 
Jest: Frontend Testing richtig gemacht @WebworkerNRW
Jest: Frontend Testing richtig gemacht @WebworkerNRWJest: Frontend Testing richtig gemacht @WebworkerNRW
Jest: Frontend Testing richtig gemacht @WebworkerNRW
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.js
 
MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...
MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...
MCE^3 - Konstantin Raev - React Native: Open Source Continuous Build and Deli...
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)
 

Similar to Enterprise Strength Mobile JavaScript

Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angularBasarat Syed
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conferencedmethvin
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)Jia Mi
 
Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...Niels Frydenholm
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testingMats Bryntse
 
Javascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumJavascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumTechday7
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overviewJesse Warden
 
Unit testing and Android
Unit testing and AndroidUnit testing and Android
Unit testing and AndroidTomáš Kypta
 
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer Sarah Dutkiewicz
 
Continuous integration by Rémy Virin
Continuous integration by Rémy VirinContinuous integration by Rémy Virin
Continuous integration by Rémy VirinCocoaHeads France
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project Elad Hirsch
 
Unit Testing in JavaScript
Unit Testing in JavaScriptUnit Testing in JavaScript
Unit Testing in JavaScriptRob Scaduto
 
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Gil Irizarry
 
Growing Trends of Open Source UI Frameworks
Growing Trends of Open Source UI FrameworksGrowing Trends of Open Source UI Frameworks
Growing Trends of Open Source UI FrameworksSmartBear
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for EngineersBrian LeRoux
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...Malin Weiss
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...Speedment, Inc.
 
Starting from scratch in 2017
Starting from scratch in 2017Starting from scratch in 2017
Starting from scratch in 2017Stefano Bonetta
 

Similar to Enterprise Strength Mobile JavaScript (20)

Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 
Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
 
Javascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumJavascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to Titanium
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
 
Unit testing and Android
Unit testing and AndroidUnit testing and Android
Unit testing and Android
 
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
 
Continuous integration by Rémy Virin
Continuous integration by Rémy VirinContinuous integration by Rémy Virin
Continuous integration by Rémy Virin
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
33rd degree
33rd degree33rd degree
33rd degree
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Unit Testing in JavaScript
Unit Testing in JavaScriptUnit Testing in JavaScript
Unit Testing in JavaScript
 
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
 
Growing Trends of Open Source UI Frameworks
Growing Trends of Open Source UI FrameworksGrowing Trends of Open Source UI Frameworks
Growing Trends of Open Source UI Frameworks
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
 
Starting from scratch in 2017
Starting from scratch in 2017Starting from scratch in 2017
Starting from scratch in 2017
 

More from Troy Miles

Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web ServersTroy Miles
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot CampTroy Miles
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with KotlinTroy Miles
 
React Native One Day
React Native One DayReact Native One Day
React Native One DayTroy Miles
 
React Native Evening
React Native EveningReact Native Evening
React Native EveningTroy Miles
 
Intro to React
Intro to ReactIntro to React
Intro to ReactTroy Miles
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN StackTroy Miles
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application TestingTroy Miles
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?Troy Miles
 
Angular Weekend
Angular WeekendAngular Weekend
Angular WeekendTroy Miles
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScriptTroy Miles
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in ClojureTroy Miles
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-upTroy Miles
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You KnewTroy Miles
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Troy Miles
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutesTroy Miles
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEANTroy Miles
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveXTroy Miles
 

More from Troy Miles (20)

Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web Servers
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot Camp
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with Kotlin
 
React Native One Day
React Native One DayReact Native One Day
React Native One Day
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScript
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in Clojure
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You Knew
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutes
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEAN
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveX
 

Recently uploaded

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Recently uploaded (20)

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

Enterprise Strength Mobile JavaScript

  • 1. Enterprise Strength Mobile JavaScript Unit Testing and Debugging in the Real World LA C#.NET - 4 September 2012 SoCal.NET - 5 September 2012
  • 2. jssaturday.com Nov. 10th, Long Beach Convention Center Discount code: RiaConsultingLLC
  • 3. The Agenda • The Rise of JavaScript • Best Practices • Unit Testing • Debugging
  • 4. The Rise of JavaScript • Why JavaScript is so important? • Why JavaScript Sucks? • Why is Good JavaScript So Hard To Do? • The Browser Wars I, II, and III
  • 5. Why JavaScript is so important?
  • 8. Why JavaScript Sucks? • The DOM • The Internet’s Long Tail • Java is to JavaScript...
  • 9. The DOM • The Document Object Model is a cross- platform and language-independent convention for representing and interacting with objects in HTML • The DOM is not JavaScript
  • 10. The Internet’s Long Tail • It easy to change websites, hard to change browsers • Standards are hard to change • Ecma International • Move slow • Fearful of breaking code in production
  • 11. Java is to JavaScript as Car is to Carpet • First version built in 10 days by Brendan Eich and named LiveScript • Influenced greatly by Scheme • Marketing won over Engineering • Changed into a curly brace language • Renamed to JavaScript for marketing appeal
  • 12. Scheme ;The first program (begin (display "Hello, World!") (newline))
  • 13. Why is Good JavaScript So Hard to Write?
  • 15. Why, It’s Your Fault • JavaScript is a language that engineers don’t bother to learn • It is changed not embraced • For years the page load has protected you
  • 17. Browser War I • Microsoft vs. Netscape • Internet Explorer vs. Navigator • Control of the Internet • Proprietary Additions • Netscape no longer exists
  • 18. Browser War II • Microsoft vs. Mozilla vs. Google vs. Apple • IE vs FireFox vs Chrome vs Safari • Search and Referrals • Microsoft is losing massive market share
  • 19. Browser War III • Microsoft vs. Apple vs. Google • Mobile IE vs Mobile Safari vs The Browser named Browser • Mobile Search and Referrals • Implementation of HTML5/CSS3 • Two way tie between Apple and Google
  • 21. Use Best Practices • Avoid sloppy JavaScript • Avoid the Global Space • Encapsulate Code into Objects • Use Design Patterns
  • 22. Avoid Sloppy JavaScript • JavaScript is a Harsh Mistress • Always use ‘===’ & ‘!==’ • Code in JavaScript not C#, Java, Ruby, etc. • Use JSLint or JSHint or Google Closure
  • 23. Avoid the Global Space • Minimize Use of Global Variables • Use Namespacing • Use Anonymous/Immediate Functions When Appropriate
  • 24. Use Design Patterns • Singleton • Chaining • Revealing Module Structure • + many more
  • 25. jQuery Chaining $('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('<span>This cell is now red</span>');
  • 26. C# LINQ Chaining using System; using System.Linq; namespace StringMethodChaining { class Program { static void Main(string[] args) { "aardvarks AND antelopes AND hippopotami" .Replace("antelopes", "centipedes") .Substring("aardvarks".Length) .ToLower() .Trim() .Split(new[] {"and"}, StringSplitOptions.None) .ToList() .ForEach(item => Console.WriteLine(item.Trim())); Console.ReadLine(); } } }
  • 27. Unit Testing • Introduction to Unit Testing • Headless Unit Testing • JS Unit Testers
  • 28. A unit test is a piece of code that tests a piece of production code.
  • 29. Unit Test • Sets up one or a few more objects in a known state • Exercises them • Inspects the results • Must be fast and easy to run
  • 30. Beware of headless unit tests
  • 31. Headless Unit Testing • Ruby, Rhino, and JSUnit • Visual Studio (using plug-ins)
  • 32. JS Unit Testers • Jasmine (JSUnit obsolete) • QUnit • YUI 3 Test • jsTestDriver • + lots more
  • 33. JSTestDriver & Visual Studio http://slmoloch.blogspot.com/2009/08/how-to- run-jstestdriver-with-visual_02.html
  • 34. Some Tips • Involve your team in Unit Tester choice • 100% coverage is tough and not practical • Test should be public within your team, the more eyes the better
  • 35. Debugging • What’s the Problem? • Analogues • WEINRE & Adobe Shadow • iWebInspector • Opera Mobile Emulator
  • 36. What’s the Problem? • Every device has a different browser and none have development tools • The alert box - freezes the browser • Console.log - better but not easy to • Breakpoints
  • 37. Analogues In biochemistry, an analog is a substance that is similar, but not identical, to another. For us, it is a browser that is similar, but not identical, to the one we wish to test.
  • 38. Analogues • iPhone - Safari • Android - Chrome • Windows Phone 7 - IE • Blackberry - Safari/Chrome
  • 39. Analogs Don’t assume that if it works on the analog, it will work on the device. Always test on a device.
  • 40. WEINRE • Created by Patrick Mueller in JavaScript • WEb INspector REmote (pronounced like winery) • WebKit Only! (It uses built in hooks) • Allows for inspection of HTML/CSS • Remote console.log • NOT A DEBUGGER
  • 41. Adobe Shadow • Chrome Extension + iOS app & Android app • WEINRE with a better UI • Inspection of HTML/CSS • Remote console.log • NOT A DEBUGGER
  • 42. iWebInspector • Runs only on the iOS Simulator • Inspection of HTML/CSS • Remote console.log • True Remote Debugging
  • 43. Opera Mobile Emulator • Runs using desktop Opera & Opera Mobile or Opera Mobile Emulator • Inspection of HTML/CSS • Remote console.log • True Remote Debugger
  • 44. Summary • JavaScript is tough, but overly so • Use the Best Tools • Be Pragmatic, not Dogmatic
  • 45. Useful URLs • http://www.JSLint.com • http://www.JSHint.com • https://developers.google.com/closure/ utilities/ • http://code.google.com/p/js-test-driver/ • http://people.apache.org/~pmuellr/weinre/ docs/1.x/1.5.0/
  • 46. Useful URLs • http://yuilibrary.com/yui/docs/test/ • http://qunitjs.com/ • http://pivotallabs.com/what/mobile/ overview • http://siliconforks.com/jscoverage/

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. Here is a state of the web page from 10 years ago, yes only 10 years. It was built mostly on the server with some backing JavaScript.\n
  7. Then these web apps happened. While these sites also have heavy server components, they also fully embrace and use JavaScript on the client\n Google - September 1998\n GMail - April 2004\n Google Maps - February 2005\n Facebook - February 2004\n Twitter - July 2006\n LinkedIn - May 2003\n Netflix - October 2008 (streaming)\n\n
  8. So if all of the big name companies are making so many billions off JavaScript heavy web apps, why does it suck so badly?\n\n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. Hence the rise of all of these compiles to JavaScript languages: CoffeeScript, Coco, Caffeine, Dart, Narcissus, and dozens more.\nThe page load aka document.location - flushes the browser and quietly buries your dead bodies with cement shoes into the ocean.\n
  16. \n
  17. People sometimes \n
  18. Still ongoing Google is currently on top, but by the slimmest of margins.\n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. The alert box freezes the browser - timers stop ticking\nconsole.log is better but can only see on iPhone (and it can screw up your UI)\nbreakpoints don&amp;#x2019;t normally exist in mobile browsers\n
  37. \n
  38. Yes - blackberry use webkit too. Microsoft is the lone hold out\nImportant to note that webkit is not an open source browser, \nbut an open source browser engine kit. \nSafari and Chrome are not identical.\n
  39. Test, test, test.\nAnalogs are a convenience tool but not a substitute for device testing. \n(turn phone side ways)\n
  40. JavaScript is important to note because it explains a lot of its shortcomings.\nAll of these tools are free!\n
  41. Very similar to WEINRE in function. I thought it was WEINRE version 2.0 or something at first\n
  42. This is a must have if you are supporting the iPhone!\n\n
  43. \n
  44. \n
  45. \n
  46. \n