SlideShare a Scribd company logo
Enterprise JavaScript Development: Oxymoron?
 Part 1 of 2




                            Jeremy Likness (@JeremyLikness)
                            Principal Consultant
                            jlikness@wintellect.com
                                                                Copyright © 2012




consulting   training   design   debugging                    wintellect.com
what we do
    consulting     training    design     debugging

 who we are
   Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins –
   we pull out all the stops to help our customers achieve their goals through advanced
   software-based consulting and training solutions.

 how we do it                                           Training
                                                        •   On-site instructor-led training
   Consulting & Debugging                               •   Virtual instructor-led training
   •   Architecture, analysis, and design services      •   Devscovery conferences
   •   Full lifecycle custom software development
   •   Content creation                                 Design
   •   Project management                               •   User Experience Design
   •   Debugging & performance tuning                   •   Visual & Content Design
                                                        •   Video & Animation Production


consulting    training    design     debugging                                   wintellect.com
Agenda

 • Introduction
 • The bad. The ugly.
 • The good.
 • Part 2: More of the good.


consulting   training   design   debugging   wintellect.com
Introduction – JavaScript




consulting   training   design   debugging   wintellect.com
JavaScript – A Brief History
 • 1995 – Netscape, “make Java more accessible to non-Java
   programmers”
 • Goal was to make it easy to tie into page elements without the need
   for a compiler or knowledge of object-oriented design
 • Loosely-typed scripting language
 • Codenamed “Mocha” started out as “LiveScript” then renamed to
   “JavaScript” (oops, this caused a little bit of confusion, some think this
   was an intentional marketing move between Netscape and Sun)
 • Moved from manipulation of Java applets to manipulation of DOM
   elements
 • 1996 – Microsoft does this a little differently (surprise!) and releases
   VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998)
 • 1997 - ECMAScript adopted (ISO in 1998)
 • 2006 – jQuery (no, it‟s not JavaScript, but it is certainly ubiquitous)

consulting   training   design   debugging                         wintellect.com
JavaScript – What is It?
 • Dynamic – variables are not bound to types, only values
 • Object-based (not oriented) – arrays and prototypes
      – myObj.foo = myObj[“foo”]
 •   Interpreted, not compiled
 •   Functional
 •   Supports anonymous functions
 •   Closures
 •   Global scope
 •   Unfortunately, not consistently implemented




consulting   training   design     debugging                 wintellect.com
The Bad - Incompatibilities
 • Blur – when an element loses focus – not consistently implemented
 • Change – buggy implementation in IE5 – IE8
 • Focus – Firefox on Mac, Safari, and Chrome don‟t consistently support
   this event
 • Keydown – not properly implemented in Opera
 • Keypress – not properly implemented in FireFox
 • Mouseenter/Mouseleave - Firefox, Safari, and Chrome don‟t
   implement despite being in the spec – used for child elements
 • Cut/copy/paste/selection – not consistently implemented as well
 • DOM – the lifecycle is different and events will fire at different times
   and have a different state of readiness between browsers (this is why
   jQuery uses document.ready to provide a common ground)



consulting   training   design   debugging                       wintellect.com
The Ugly
 •   Variables are scoped to values, not types
 •   Case sensitivity makes it really tough to track typos
 •   Null doesn‟t mean Undefined, Undefined does
 •   Setting a property to undefined doesn‟t remove the definition
 •   You can‟t trust your built-in functions
 •   Parameters are just syntactic sugar for an array of objects
 •   Scope is based on functions, not blocks
 •   Arrays are easy to clobber
 •   Semi-colon completion means position (and style) matter
 •   Spaces count – for example, string continuations
 •   Position doesn‟t matter for the increment/decrement operators
 •   Variable and function definitions are hoisted


consulting   training   design   debugging                     wintellect.com
Values are … What?! (1 of 2)
   false.toString();

   [1,2,3].toString();

   "2".toString();

   2.toString();

   02.toString();

   2 .toString();




consulting   training   design   debugging   wintellect.com
Values are … What?! (2 of 2)
   var one = 1;                              var one = [1,2,3];
   one;                                      one;
   typeof one;                               typeof one;

   var two = '2',                            var two = ['1', '2', '3']
   two;                                      two;
   typeof two;                               typeof two;

   var three = one + two;                    one[0] == two[0];
   three;                                    one[0] === two[0];
   typeof three;
                                             var three = one + two;
   var three = Number(one) +                 typeof three;
   Number(two);                              three;
   typeof three;
   three;                                    var three = one.concat(two);
                                             typeof three;
                                             three;


consulting   training   design   debugging                        wintellect.com
Case Sensitive? At least tell me!
   var myObj = { foo : 1, Bar: 2 };
   var result = myObj.foo + myObj.bar;
   typeof result;
   result;




consulting   training   design   debugging   wintellect.com
I‟m not Null, I‟m just Undefined
   null;
   undefined;
   null == undefined;
   null === undefined;
   typeof null;
   typeof undefined;




consulting   training   design   debugging   wintellect.com
I may be Undefined, but I‟m still here
   var myObj = { foo : 1, bar : 2 };
   myObj;
   myObj.foo = undefined;
   myObj;

   delete myObj.foo;




consulting   training   design   debugging   wintellect.com
Nothing is Sacred
   var myObj = { foo : 1 };
   myObj.hasOwnProperty("foo");
   myObj.hasOwnProperty = function(args) {
      return false;
   };
   myObj.hasOwnProperty("foo");

   Object.prototype.hasOwnProperty.call(myObj, "foo");




consulting   training   design   debugging               wintellect.com
Parameters … more like “Guidelines”
   var myFunc = function(something) {
      console.log(something); return 1; };
   myfunc();
   myFunc('test');
   myFunc(myFunc);
   myFunc('test', myFunc);

   var myFunc = function() {
   console.log(Array.prototype.slice.call(arguments)); };

   myFunc();
   myFunc('test', 2);




consulting   training   design   debugging                  wintellect.com
Scope is not a Block Party
   var foo = 42;
   function test() { foo = 21; console.log(foo); };
   test();
   foo;
   var foo = 42;
   function test() { var foo = 21; console.log(foo); };
   test();
   foo;

   for(var i = 0; i < 10; i++) {
     setTimeout(function() {
        console.log(i);}, 1000);};
   for (var i = 0; i < 10; i++) {
      (function(e) {
        setTimeout(function() { console.log(e); },
         1000); })(i); };


consulting   training   design   debugging                wintellect.com
Arrays have Split Personalities
   var list = [1,2,3,4,5,6];
   list;
   list.length;
   list.length = 2;
   list;

   var list = new Array(1,2,3);
   list;
   var list = new Array(3);
   list;




consulting   training   design   debugging   wintellect.com
Return to Sender
   (function() {
      return {
          foo: "bar"
      }
   })();

   (function() {
      return
         {
             foo: "bar"
         }
   })();




consulting   training   design   debugging   wintellect.com
Return to Sender
   (function() {
      return {
          foo: "bar"
      };
   })();

   (function() {
      return;
         {
              foo: "bar"
         };
   })();




consulting   training   design   debugging   wintellect.com
Can you Spot the Error?
   var myString = "this is a multi-line string 
        if you know what I mean";

   var myString = "this is another multi-line string 
        if you know what I mean";




consulting   training   design   debugging               wintellect.com
Who Knows How to Count?
   for (var x = 0; x < 5; x++) {
       console.log(x);
   }

   for (var x = 0; x < 5; ++x) {
       console.log(x);
   }




consulting   training   design   debugging   wintellect.com
Can You Guess the Result?
   (function() {
       logMe();
       var logMe = function() {
           console.log('Welcome to Devscovery.');
       };
       logMe();

        function logMe() {
            console.log('Devscovery is a great place to be.');
        }
        logMe();

       console.log(parseInt('0114602653'));
   })();




consulting   training   design   debugging                 wintellect.com
Can You Guess the Result?
                                             Variable declaration was hoisted
   (function() {                       Function declaration was hoisted
      var logMe;
      function logMe() {
          console.log('Devscovery is a great place to be.');
      }
      logMe();
      logMe = function() {
          console.log('Welcome to Devscovery.');
      }                                     parseInt assumes Octal
      logMe();
      logMe();
      console.log(parseInt('0114602653'));
   })();




consulting   training   design   debugging                           wintellect.com
The Good
 •   JSLint / JSHint – personal style is for fashion, not code
 •   jQuery – one API to bind them all
 •   JSON and Web API – flexible information on demand
 •   Twitter Bootstrap – one layout to rule them all
 •   Underscore.js – the Swiss army knife of JavaScript
 •   Backbone.js – MVC on the client
 •   RequireJS – dependency resolution
 •   MVVM (for example, Kendo UI) – “Gotta keep „em separated”
 •   Amplify.js – publisher/subscriber for the client
 •   … and many more great projects we won‟t have time to discuss today




consulting   training   design   debugging                    wintellect.com
Questions?




                            Jeremy Likness (@JeremyLikness)
                            Principal Consultant
                            jlikness@wintellect.com



consulting   training   design   debugging                    wintellect.com

More Related Content

Viewers also liked

Web security
Web securityWeb security
Web security
Jin Castor
 
Sterling for Windows Phone 7
Sterling for Windows Phone 7Sterling for Windows Phone 7
Sterling for Windows Phone 7
Jeremy Likness
 
Visual State Manager
Visual State ManagerVisual State Manager
Visual State Manager
Jeremy Likness
 
Wintellect - Windows 8 for the Silverlight and WPF Developer
Wintellect   - Windows 8 for the Silverlight and WPF DeveloperWintellect   - Windows 8 for the Silverlight and WPF Developer
Wintellect - Windows 8 for the Silverlight and WPF Developer
Jeremy Likness
 
20100606 d760 finaldoc_v03_f_02
20100606 d760 finaldoc_v03_f_0220100606 d760 finaldoc_v03_f_02
20100606 d760 finaldoc_v03_f_02
Allen Cochran
 
Human deve & gender
Human deve & genderHuman deve & gender
Human deve & gender
VIBHUTI PATEL
 
Windows 8: A Tale of Two Stacks
Windows 8: A Tale of Two StacksWindows 8: A Tale of Two Stacks
Windows 8: A Tale of Two Stacks
Jeremy Likness
 
Janata july 5 2015
Janata july 5 2015Janata july 5 2015
Janata july 5 2015
VIBHUTI PATEL
 
2013 Professional Portfolio
2013 Professional Portfolio2013 Professional Portfolio
2013 Professional Portfolio
Allen Cochran
 
Allenjcochran 04 pilot02
Allenjcochran 04 pilot02Allenjcochran 04 pilot02
Allenjcochran 04 pilot02
Allen Cochran
 
I server duress system design
 I server duress system design I server duress system design
I server duress system design
QBsoft Solutions
 
Selling Online - Tips from a Seller - Not a Consultant!
Selling Online - Tips from a Seller - Not a Consultant!Selling Online - Tips from a Seller - Not a Consultant!
Selling Online - Tips from a Seller - Not a Consultant!
Purchase.ie
 
Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...
Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...
Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...
VIBHUTI PATEL
 
Advanced SEO Queries HC Training jan 2012
Advanced SEO Queries HC Training jan 2012Advanced SEO Queries HC Training jan 2012
Advanced SEO Queries HC Training jan 2012
Gaël Breton
 
Vibhuti patel on gender audit of budgets in india, nivedini, 2010
Vibhuti patel on gender audit of budgets in india, nivedini, 2010Vibhuti patel on gender audit of budgets in india, nivedini, 2010
Vibhuti patel on gender audit of budgets in india, nivedini, 2010
VIBHUTI PATEL
 
Harmony at the workplace
Harmony at the  workplaceHarmony at the  workplace
Harmony at the workplace
VIBHUTI PATEL
 

Viewers also liked (16)

Web security
Web securityWeb security
Web security
 
Sterling for Windows Phone 7
Sterling for Windows Phone 7Sterling for Windows Phone 7
Sterling for Windows Phone 7
 
Visual State Manager
Visual State ManagerVisual State Manager
Visual State Manager
 
Wintellect - Windows 8 for the Silverlight and WPF Developer
Wintellect   - Windows 8 for the Silverlight and WPF DeveloperWintellect   - Windows 8 for the Silverlight and WPF Developer
Wintellect - Windows 8 for the Silverlight and WPF Developer
 
20100606 d760 finaldoc_v03_f_02
20100606 d760 finaldoc_v03_f_0220100606 d760 finaldoc_v03_f_02
20100606 d760 finaldoc_v03_f_02
 
Human deve & gender
Human deve & genderHuman deve & gender
Human deve & gender
 
Windows 8: A Tale of Two Stacks
Windows 8: A Tale of Two StacksWindows 8: A Tale of Two Stacks
Windows 8: A Tale of Two Stacks
 
Janata july 5 2015
Janata july 5 2015Janata july 5 2015
Janata july 5 2015
 
2013 Professional Portfolio
2013 Professional Portfolio2013 Professional Portfolio
2013 Professional Portfolio
 
Allenjcochran 04 pilot02
Allenjcochran 04 pilot02Allenjcochran 04 pilot02
Allenjcochran 04 pilot02
 
I server duress system design
 I server duress system design I server duress system design
I server duress system design
 
Selling Online - Tips from a Seller - Not a Consultant!
Selling Online - Tips from a Seller - Not a Consultant!Selling Online - Tips from a Seller - Not a Consultant!
Selling Online - Tips from a Seller - Not a Consultant!
 
Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...
Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...
Vibhuti Patel Gender Budgeting, Journal of Asian Business Management, Vol. 7,...
 
Advanced SEO Queries HC Training jan 2012
Advanced SEO Queries HC Training jan 2012Advanced SEO Queries HC Training jan 2012
Advanced SEO Queries HC Training jan 2012
 
Vibhuti patel on gender audit of budgets in india, nivedini, 2010
Vibhuti patel on gender audit of budgets in india, nivedini, 2010Vibhuti patel on gender audit of budgets in india, nivedini, 2010
Vibhuti patel on gender audit of budgets in india, nivedini, 2010
 
Harmony at the workplace
Harmony at the  workplaceHarmony at the  workplace
Harmony at the workplace
 

Similar to Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

Dutch PHP Conference 2013: Distilled
Dutch PHP Conference 2013: DistilledDutch PHP Conference 2013: Distilled
Dutch PHP Conference 2013: Distilled
Zumba Fitness - Technology Team
 
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Fwdays
 
Down With JavaScript!
Down With JavaScript!Down With JavaScript!
Down With JavaScript!
Garth Gilmour
 
SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)
SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)
SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)
ruthmcdavitt
 
Oxente BDD
Oxente BDDOxente BDD
Oxente BDD
Milfont Consulting
 
Functional solid
Functional solidFunctional solid
Functional solid
Matt Stine
 
Drupal Auckland Meetup; Debug like a pro
Drupal Auckland Meetup; Debug like a proDrupal Auckland Meetup; Debug like a pro
Drupal Auckland Meetup; Debug like a pro
Gareth Hall
 
Code Quality Practice and Tools
Code Quality Practice and ToolsCode Quality Practice and Tools
Code Quality Practice and Tools
Bob Paulin
 
The Present and Future of the Web Platform
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web Platform
C4Media
 
Code Refactoring
Code RefactoringCode Refactoring
Code Refactoring
Milan Vukoje
 
Leveling Up at JavaScript
Leveling Up at JavaScriptLeveling Up at JavaScript
Leveling Up at JavaScript
Raymond Camden
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
David Padbury
 
How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design Patterns
Ran Mizrahi
 
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip CalçadoJustjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Paulo Silveira
 
JS class slides (2016)
JS class slides (2016)JS class slides (2016)
JS class slides (2016)
Yves-Emmanuel Jutard
 
JS Class 2016
JS Class 2016JS Class 2016
JS Class 2016
Yves-Emmanuel Jutard
 
Tdd is not about testing
Tdd is not about testingTdd is not about testing
Tdd is not about testing
Gianluca Padovani
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
Kevin Read
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8
Kevin Read
 
L04 Software Design Examples
L04 Software Design ExamplesL04 Software Design Examples
L04 Software Design Examples
Ólafur Andri Ragnarsson
 

Similar to Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2 (20)

Dutch PHP Conference 2013: Distilled
Dutch PHP Conference 2013: DistilledDutch PHP Conference 2013: Distilled
Dutch PHP Conference 2013: Distilled
 
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
 
Down With JavaScript!
Down With JavaScript!Down With JavaScript!
Down With JavaScript!
 
SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)
SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)
SoTWLG Intro to Code Bootcamps 2016 (Roger Nesbitt)
 
Oxente BDD
Oxente BDDOxente BDD
Oxente BDD
 
Functional solid
Functional solidFunctional solid
Functional solid
 
Drupal Auckland Meetup; Debug like a pro
Drupal Auckland Meetup; Debug like a proDrupal Auckland Meetup; Debug like a pro
Drupal Auckland Meetup; Debug like a pro
 
Code Quality Practice and Tools
Code Quality Practice and ToolsCode Quality Practice and Tools
Code Quality Practice and Tools
 
The Present and Future of the Web Platform
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web Platform
 
Code Refactoring
Code RefactoringCode Refactoring
Code Refactoring
 
Leveling Up at JavaScript
Leveling Up at JavaScriptLeveling Up at JavaScript
Leveling Up at JavaScript
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design Patterns
 
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip CalçadoJustjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
 
JS class slides (2016)
JS class slides (2016)JS class slides (2016)
JS class slides (2016)
 
JS Class 2016
JS Class 2016JS Class 2016
JS Class 2016
 
Tdd is not about testing
Tdd is not about testingTdd is not about testing
Tdd is not about testing
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8
 
L04 Software Design Examples
L04 Software Design ExamplesL04 Software Design Examples
L04 Software Design Examples
 

Recently uploaded

zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 

Recently uploaded (20)

zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
Artificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic WarfareArtificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic Warfare
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 

Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2

  • 1. Enterprise JavaScript Development: Oxymoron? Part 1 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012 consulting training design debugging wintellect.com
  • 2. what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Production consulting training design debugging wintellect.com
  • 3. Agenda • Introduction • The bad. The ugly. • The good. • Part 2: More of the good. consulting training design debugging wintellect.com
  • 4. Introduction – JavaScript consulting training design debugging wintellect.com
  • 5. JavaScript – A Brief History • 1995 – Netscape, “make Java more accessible to non-Java programmers” • Goal was to make it easy to tie into page elements without the need for a compiler or knowledge of object-oriented design • Loosely-typed scripting language • Codenamed “Mocha” started out as “LiveScript” then renamed to “JavaScript” (oops, this caused a little bit of confusion, some think this was an intentional marketing move between Netscape and Sun) • Moved from manipulation of Java applets to manipulation of DOM elements • 1996 – Microsoft does this a little differently (surprise!) and releases VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998) • 1997 - ECMAScript adopted (ISO in 1998) • 2006 – jQuery (no, it‟s not JavaScript, but it is certainly ubiquitous) consulting training design debugging wintellect.com
  • 6. JavaScript – What is It? • Dynamic – variables are not bound to types, only values • Object-based (not oriented) – arrays and prototypes – myObj.foo = myObj[“foo”] • Interpreted, not compiled • Functional • Supports anonymous functions • Closures • Global scope • Unfortunately, not consistently implemented consulting training design debugging wintellect.com
  • 7. The Bad - Incompatibilities • Blur – when an element loses focus – not consistently implemented • Change – buggy implementation in IE5 – IE8 • Focus – Firefox on Mac, Safari, and Chrome don‟t consistently support this event • Keydown – not properly implemented in Opera • Keypress – not properly implemented in FireFox • Mouseenter/Mouseleave - Firefox, Safari, and Chrome don‟t implement despite being in the spec – used for child elements • Cut/copy/paste/selection – not consistently implemented as well • DOM – the lifecycle is different and events will fire at different times and have a different state of readiness between browsers (this is why jQuery uses document.ready to provide a common ground) consulting training design debugging wintellect.com
  • 8. The Ugly • Variables are scoped to values, not types • Case sensitivity makes it really tough to track typos • Null doesn‟t mean Undefined, Undefined does • Setting a property to undefined doesn‟t remove the definition • You can‟t trust your built-in functions • Parameters are just syntactic sugar for an array of objects • Scope is based on functions, not blocks • Arrays are easy to clobber • Semi-colon completion means position (and style) matter • Spaces count – for example, string continuations • Position doesn‟t matter for the increment/decrement operators • Variable and function definitions are hoisted consulting training design debugging wintellect.com
  • 9. Values are … What?! (1 of 2) false.toString(); [1,2,3].toString(); "2".toString(); 2.toString(); 02.toString(); 2 .toString(); consulting training design debugging wintellect.com
  • 10. Values are … What?! (2 of 2) var one = 1; var one = [1,2,3]; one; one; typeof one; typeof one; var two = '2', var two = ['1', '2', '3'] two; two; typeof two; typeof two; var three = one + two; one[0] == two[0]; three; one[0] === two[0]; typeof three; var three = one + two; var three = Number(one) + typeof three; Number(two); three; typeof three; three; var three = one.concat(two); typeof three; three; consulting training design debugging wintellect.com
  • 11. Case Sensitive? At least tell me! var myObj = { foo : 1, Bar: 2 }; var result = myObj.foo + myObj.bar; typeof result; result; consulting training design debugging wintellect.com
  • 12. I‟m not Null, I‟m just Undefined null; undefined; null == undefined; null === undefined; typeof null; typeof undefined; consulting training design debugging wintellect.com
  • 13. I may be Undefined, but I‟m still here var myObj = { foo : 1, bar : 2 }; myObj; myObj.foo = undefined; myObj; delete myObj.foo; consulting training design debugging wintellect.com
  • 14. Nothing is Sacred var myObj = { foo : 1 }; myObj.hasOwnProperty("foo"); myObj.hasOwnProperty = function(args) { return false; }; myObj.hasOwnProperty("foo"); Object.prototype.hasOwnProperty.call(myObj, "foo"); consulting training design debugging wintellect.com
  • 15. Parameters … more like “Guidelines” var myFunc = function(something) { console.log(something); return 1; }; myfunc(); myFunc('test'); myFunc(myFunc); myFunc('test', myFunc); var myFunc = function() { console.log(Array.prototype.slice.call(arguments)); }; myFunc(); myFunc('test', 2); consulting training design debugging wintellect.com
  • 16. Scope is not a Block Party var foo = 42; function test() { foo = 21; console.log(foo); }; test(); foo; var foo = 42; function test() { var foo = 21; console.log(foo); }; test(); foo; for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i);}, 1000);}; for (var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); }; consulting training design debugging wintellect.com
  • 17. Arrays have Split Personalities var list = [1,2,3,4,5,6]; list; list.length; list.length = 2; list; var list = new Array(1,2,3); list; var list = new Array(3); list; consulting training design debugging wintellect.com
  • 18. Return to Sender (function() { return { foo: "bar" } })(); (function() { return { foo: "bar" } })(); consulting training design debugging wintellect.com
  • 19. Return to Sender (function() { return { foo: "bar" }; })(); (function() { return; { foo: "bar" }; })(); consulting training design debugging wintellect.com
  • 20. Can you Spot the Error? var myString = "this is a multi-line string if you know what I mean"; var myString = "this is another multi-line string if you know what I mean"; consulting training design debugging wintellect.com
  • 21. Who Knows How to Count? for (var x = 0; x < 5; x++) { console.log(x); } for (var x = 0; x < 5; ++x) { console.log(x); } consulting training design debugging wintellect.com
  • 22. Can You Guess the Result? (function() { logMe(); var logMe = function() { console.log('Welcome to Devscovery.'); }; logMe(); function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
  • 23. Can You Guess the Result? Variable declaration was hoisted (function() { Function declaration was hoisted var logMe; function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); logMe = function() { console.log('Welcome to Devscovery.'); } parseInt assumes Octal logMe(); logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
  • 24. The Good • JSLint / JSHint – personal style is for fashion, not code • jQuery – one API to bind them all • JSON and Web API – flexible information on demand • Twitter Bootstrap – one layout to rule them all • Underscore.js – the Swiss army knife of JavaScript • Backbone.js – MVC on the client • RequireJS – dependency resolution • MVVM (for example, Kendo UI) – “Gotta keep „em separated” • Amplify.js – publisher/subscriber for the client • … and many more great projects we won‟t have time to discuss today consulting training design debugging wintellect.com
  • 25. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com

Editor's Notes

  1. false.toString();[1,2,3].toString();&quot;2&quot;.toString();2.toString(); 02.toString();2 .toString();
  2. var one = 1;one;typeof one;var two = &apos;2&apos;,two;typeof two;var three = one + two;three;typeof three; var three = Number(one) + Number(two);typeof three;three;var one = [1,2,3];one;typeof one;var two = [&apos;1&apos;, &apos;2&apos;, &apos;3&apos;]two;typeof two;one[0] == two[0];one[0] === two[0];var three = one + two;typeof three;three;var three = one.concat(two);three;typeof three;
  3. varmyObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
  4. null;undefined;null == undefined;null === undefined;typeof null;typeof undefined;
  5. varmyObj = { foo : 1, bar : 2 };myObj;myObj.foo = undefined;myObj;delete myObj.foo;
  6. varmyObj = { foo : 1 };myObj.hasOwnProperty(&quot;foo&quot;);myObj.hasOwnProperty = function(args) { return false; };myObj.hasOwnProperty(&quot;foo&quot;);Object.prototype.hasOwnProperty.call(myObj, &quot;foo&quot;);
  7. varmyFunc = function(something) { console.log(something); return 1; };myfunc();myFunc(&apos;test&apos;);myFunc(myFunc);myFunc(&apos;test&apos;, myFunc);varmyFunc = function() { console.log(Array.prototype.slice.call(arguments)); };myFunc();myFunc(&apos;test&apos;, 2);
  8. var foo = 42;function test() { foo = 21; console.log(foo); };test();foo;(clear the screen) var foo = 42;function test() { var foo = 21; console.log(foo); };test();foo; for(vari = 0; i &lt; 10; i++) { setTimeout(function() { console.log(i);}, 1000);};for (vari = 0; i &lt; 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); };
  9. var list = [1,2,3,4,5,6];list;list.length;list.length = 2;list;var list = new Array(1,2,3);list;var list = new Array(3);list;
  10. (function() { return { foo: &quot;bar&quot; }})(); (function() { return { foo: &quot;bar&quot; }})();
  11. varmyString = &quot;this is a multi-line string \\ if you know what I mean&quot;; varmyString = &quot;this is another multi-line string \\ if you know what I mean&quot;;
  12. for (var x = 0; x &lt; 5; x++) { console.log(x); }for (var x = 0; x &lt; 5; ++x) { console.log(x);}
  13. (function() {logMe();varlogMe = function() { console.log(&apos;Welcome to Devscovery.&apos;); };logMe(); function logMe() { console.log(&apos;Devscovery is a great place to be.&apos;); }logMe(); console.log(parseInt(&apos;0114602653&apos;));})();