Maintainable JavaScript 2012

Nicholas Zakas
Nicholas ZakasFront End Guy at Box
flickr.com/photos/jontysewell/4526861658/




                Maintainable JavaScript
                   Nicholas C. Zakas | Chief Architect, WellFurnished
New
@slicknet
Maintainability
Why do we care?
http://flickr.com/photos/indraw/4857101224/




            Most of your time is spent maintaining code
Maintainability
  Who cares?
http://www.flickr.com/photos/jbiljr/1935937825/
Maintainable JavaScript 2012
http://flickr.com/photos/protestphotos1/4726566233/




                               We all want to be rock stars
                     "Don't mess with my process, man! It's about the music!"
http://flickr.com/photos/12832008@N04/3027812968/
Maintainability
What is maintainable code?
Maintainable code works for
      five years without major
      changes
                                             • Intuitive
                                             • Understandable
                                             • Adaptable
                                             • Extendable
                                             • Debuggable
                                             • Testable
http://flickr.com/photos/simax/3390895249/
Be kind to your future
self.

Chris Eppstein,
Creator of Compass
Code Conventions




                                Programming
Code Style                        Practices
Code Style Guide
Communicating with each other through
               code
Programs are meant to be
read by humans and
only incidentally for
computers to execute.

H. Abelson and G. Sussman,
The Structure and Interpretation
of Computer Programs
https://twitter.com/sh1mmer/status/21446028923
http://javascript.crockford.com/code.html
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
http://docs.jquery.com/JQuery_Core_Style_Guidelines
http://dojotoolkit.org/community/styleGuide
https://github.com/rwldrn/idiomatic.js/
http://flickr.com/photos/polinasergeeva/3052378826/




                                                        Tabs for
                                                      indentation




                    4 spaces for
                    indentation
if (wl && wl.length) {
            for (i = 0, l = wl.length; i < l; ++i) {
         p = wl[i];
         type = Y.Lang.type(r[p]);
         if (s.hasOwnProperty(p)) { if (merge && type
    == 'object') {

    Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
                    r[p] = s[p];
                }
            }
        }
    }
if (wl && wl.length) {
    for (i = 0, l = wl.length; i < l; ++i) {
        p = wl[i];
        type = Y.Lang.type(r[p]);
        if (s.hasOwnProperty(p)) {
            if (merge && type == 'object') {
                Y.mix(r[p], s[p]);
            } else if (ov || !(p in r)) {
                r[p] = s[p];
            }
        }
    }
}
https://twitter.com/slicknet/status/169903570047614977
if (found) { doSomething(); doSomethingElse(); }
else { doAThirdThing(); doAFourthThing(); }
if (found) {
    doSomething();
    doSomethingElse();
} else {
    doAThirdThing();
    doAFourthThing();
}
http://flickr.com/photos/polinasergeeva/3052378826/




                                                      Comments
https://twitter.com/slicknet/statuses/3559283285
/**
 * Returns a new object containing all of the properties of
 * all the supplied objects. The properties from later objects
 * will overwrite those in earlier objects. Passing in a
 * single object will create a shallow copy of it. For a deep
 * copy, use clone.
 * @method merge
 * @for YUI
 * @param arguments {Object*} the objects to merge.
 * @return {object} the new merged object.
 */
Y.merge = function() {
    var a = arguments, o = {}, i, l = a.length;
    for (i = 0; i < l; i = i + 1) {
        Y.mix(o, a[i], true);
    }
    return o;
};
                      Every method
if (mode) {
    switch (mode) {
        case 1: // proto to proto
            return Y.mix(r.prototype, s.prototype, ov, wl, 0,
                         merge);
        case 2: // object to object and proto to proto
            Y.mix(r.prototype, s.prototype, ov, wl, 0, merge);
            break; // pass through
        case 3: // proto to static
            return Y.mix(r, s.prototype, ov, wl, 0, merge);
        case 4: // static to proto
            return Y.mix(r.prototype, s, ov, wl, 0, merge);
        default: // object to object is what happens below
    }
}




              Difficult-to-understand code
while (element &&(element = element[axis])){ //NOTE: assignment
    if ( (all || element[TAG_NAME]) &&
       (!fn || fn(element)) ) {
            return element;
    }
}




          Code that might seem to be wrong
Naming
http://flickr.com/photos/kaatje/243834320/
Naming
• Use logical names for variables and functions
   – Don't worry about length
• Variable names should be nouns
• Function names should begin with a verb (i.e.
  getName())
   – Functions return booleans should begin with
     "is" or "has", such as isValid() or hasItem()
• Avoid useless names such as foo and temp
if (wl && wl.length) {
    for (i = 0, l = wl.length; i < l; ++i) {
        p = wl[i];
        type = Y.Lang.type(r[p]);
        if (s.hasOwnProperty(p)) {
            if (merge && type == 'object') {
                Y.mix(r[p], s[p]);
            } else if (ov || !(p in r)) {
                r[p] = s[p];
            }
        }
    }
}
// Variables, functions, properties methods
var myName = "Nicholas";

function sayName() {
    alert(myName);
}

var person = {
    name: "Nicholas",
    sayName: function() {
        alert(this.name);
    }
};




                       Camel Casing
What about acronyms?
var element = document.getElementById("my-div");

element.innerHTML = "Hello world!";      WTF?

var xhr = new XMLHttpRequest();
                                      No, seriously

                                      WTF?


                    Camel Casing
// Constant-like variables
var HOVER_CLASS = "mouse-over";

// Constructors
function Person(name) {
    this.name = name;
}

var me = new Person("Nicholas");




             Camel Casing- Exceptions
Programming Practices
Small patterns for common problems
There are two ways of
constructing a software
design: One way is to make it
so simple that there are
obviously no deficiencies and
the other way is to make it so
complicated that there are no
obvious deficiencies.

C.A.R. Hoare,
Quicksort Developer
Front End Layers



Presentation      Behavior
    (CSS)       (JavaScript)
                 Base JS
       Data/Structure
          (HTML)
Don’t cross the
streams
<button onclick="doSomething()">Click Me</button>




      Keep JavaScript out of HTML
var element = document.getElementById("container");
element.innerHTML = "<div class="popup"></div>";




              Keep HTML out of JavaScript
.foo {
    width: expression(document.offsetWidth + "px");
}




               Keep JavaScript out of CSS
var element = document.getElementById("container");
element.style.color = "red";
element.style.cssText = "background:blue;border:1px solid red";




               Keep CSS out of JavaScript
//the wrong way!!!
function handleClick(event){

    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";

}




      Event handlers should only handle events
//better, but still wrong
function handleClick(event){
    showPopup(event);
}

function showPopup(event){
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}




          Don't pass the event object around
//win!!
function handleClick(event){
    showPopup(event.clientX, event.clientY);
}

function showPopup(x, y){
    var popup = document.getElementById("popup");
    popup.style.left = x + "px";
    popup.style.top = y + "px";
    popup.className = "reveal";
}




          Properly separated event handling
//don't add new methods
Array.prototype.awYeah = function(){
    alert("Aw yeah!");
};

//don't override methods
YUI.use = function(){
    alert("Aw yeah!");
};




         Don't modify objects you don't own
          If you didn't define the object yourself, you don't own it
http://nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/
function handleClick(event){
    showPopup(event.clientX, event.clientY);
}

function showPopup(x, y){
    var popup = document.getElementById("popup");
    popup.style.left = x + "px";
    popup.style.top = y + "px";
    popup.className = "reveal";
}




         Avoid global functions and variables
var Controller = {
    handleClick: function(event){
        this.showPopup(event.clientX, event.clientY);
    },

     showPopup: function (x, y){
         var popup = document.getElementById("popup");
         popup.style.left = x + "px";
         popup.style.top = y + "px";
         popup.className = "reveal";
     }
};




           Avoid global functions and variables
         Create a single global (if necessary) and attach everything to it
var Controller = {
    addClass: function(element, className){
        element.className += " " + className;
    }
};




                 Throw your own errors
                  When you know a function will fail
var Controller = {
    addClass: function(element, className){
        if (!element) {
            throw new Error("addClass: 1st argument missing.");
        }
        element.className += " " + className;
    }
};




                 Throw your own errors
                  When you know a function will fail
var Controller = {
    process: function(items){
        if (items != null){
            items.sort();
            items.forEach(function(item){
                //do something
            });
        }
    }
};




                 Avoid null comparisons
var Controller = {
    process: function(items){
        if (items instanceof Array){
            items.sort();
            items.forEach(function(item){
                //do something
            });
        }
    }
};




                   Avoid null comparisons
           Test for precisely what you want to know if it matters
Avoid null comparisons
• Use instanceof to test for specific object types
   – object instanceof MyType
• Use typeof to test for primitive types
   – typeof value == "string"
   – BEWARE: typeof null == "object"
function validate(value) {
    if (!value) {
        alert("Invalid value");
        location.href = "/errors/invalid.php";
    }
}




               Separate config data
var config = {
    urls: {
        invalid: "/errors/invalid.php"
    },
    strs: {
        invalidmsg: "Invalid value"
    }
};


function validate(value) {
    if (!value) {
        alert(config.strs.invalidmsg);
        location.href = config.urls.invalid;
    }
}


                    Separate config data
Separate Config Data
•   All URLs needed by the JavaScript
•   Any strings that are displayed to the user
•   Any HTML that needs to be created from JavaScript
•   Settings (i.e., items per page)
•   Repeated unique values
•   Any value that may change in the future
https://github.com/nzakas/props2js
Automation
Make everyone’s life easier
Build Process




  Build
Build
 Add/Remove               Validate
  Debugging                Code

 Concatenate
                         Test Code
    Files

  Generate
                         Minify Files
Documentation

                Deploy
                 Files
Add/Remove
                                          Debugging




https://github.com/moxiecode/js-build-tools
Generate
                      Documentation




http://usejsdoc.org
Generate
                                         Documentation




http://yuilibrary.com/projects/yuidoc/
Generate
                                     Documentation




http://jashkenas.github.com/docco/
Validate
                     Code




http://jslint.com
Validate
                     Code




http://jshint.com
Minify Files




http://yuilibrary.com/projects/yuicompressor/
Minify Files




https://github.com/mishoo/UglifyJS/
Minify Files




https://developers.google.com/closure/compiler/
Build




https://ant.apache.org
Build




http://www.julienlecomte.net/blog/2007/09/16/
Build




https://github.com/cowboy/grunt
Build




http://weblog.bocoup.com/introducing-grunt/
Build


Development      Testing       Deployment
 Add/Remove     Add/Remove      Add/Remove
  Debugging      Debugging       Debugging
   Validate      Validate        Validate
    Code          Code            Code

  Test Code      Test Code       Test Code

  Generate      Concatenate     Concatenate
Documentation      Files           Files

                Minify Files    Minify Files

                                  Deploy
                                   Files
Recap
Remember
• Code style guidelines ensure everyone's speaking
  the same language
• Loose coupling of layers make changes and
  debugging easier
• Good programming practices allow for easier
  debugging
• Code organization and automation help to bring
  sanity to an otherwise crazy process
https://twitter.com/kylerichter/status/15101151292694529
Etcetera
•My company:     wellfurnished.com
•My blog:        nczonline.net
•Twitter:        @slicknet
•These Slides:   slideshare.net/nzakas
1 of 85

Recommended

Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K by
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs
13.6K views39 slides
jQuery Anti-Patterns for Performance & Compression by
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionPaul Irish
25.2K views68 slides
jQuery PPT by
jQuery PPTjQuery PPT
jQuery PPTDominic Arrojado
20.4K views12 slides
Django Heresies by
Django HeresiesDjango Heresies
Django HeresiesSimon Willison
34K views83 slides
jQuery Loves Developers - Oredev 2009 by
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
3.5K views128 slides
jQuery in 15 minutes by
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutesSimon Willison
41.5K views14 slides

More Related Content

What's hot

jQuery UI and Plugins by
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and PluginsMarc Grabanski
6.7K views94 slides
jQuery from the very beginning by
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
11.8K views73 slides
Drupal Best Practices by
Drupal Best PracticesDrupal Best Practices
Drupal Best Practicesmanugoel2003
5.4K views47 slides
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ by
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
1.1K views83 slides
jQuery For Beginners - jQuery Conference 2009 by
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
35.6K views73 slides
jQuery Features to Avoid by
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
1.6K views46 slides

What's hot(20)

jQuery from the very beginning by Anis Ahmad
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad11.8K views
Drupal Best Practices by manugoel2003
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
manugoel20035.4K views
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ by Leonardo Balter
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Leonardo Balter1.1K views
jQuery For Beginners - jQuery Conference 2009 by Ralph Whitbeck
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
Ralph Whitbeck35.6K views
jQuery Features to Avoid by dmethvin
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
dmethvin1.6K views
Unobtrusive javascript with jQuery by Angel Ruiz
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
Angel Ruiz1.1K views
jQuery Proven Performance Tips & Tricks by Addy Osmani
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
Addy Osmani175.6K views
jQuery Performance Tips and Tricks (2011) by Addy Osmani
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)
Addy Osmani5.1K views
jQuery introduction by Tomi Juhola
jQuery introductionjQuery introduction
jQuery introduction
Tomi Juhola32.3K views
jQuery Plugin Creation by benalman
jQuery Plugin CreationjQuery Plugin Creation
jQuery Plugin Creation
benalman22.7K views
Plugin jQuery, Design Patterns by Robert Casanova
Plugin jQuery, Design PatternsPlugin jQuery, Design Patterns
Plugin jQuery, Design Patterns
Robert Casanova19.8K views
How to make Ajax work for you by Simon Willison
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
Simon Willison44.2K views
Getting the Most Out of jQuery Widgets by velveeta_512
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
velveeta_5125K views
Best Practices in Plugin Development (WordCamp Seattle) by andrewnacin
Best Practices in Plugin Development (WordCamp Seattle)Best Practices in Plugin Development (WordCamp Seattle)
Best Practices in Plugin Development (WordCamp Seattle)
andrewnacin27.1K views
SharePoint and jQuery Essentials by Mark Rackley
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley12.5K views
ActiveWeb: Chicago Java User Group Presentation by ipolevoy
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
ipolevoy2K views
HTML5: where flash isn't needed anymore by Remy Sharp
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp2.5K views

Viewers also liked

Scalable JavaScript Application Architecture by
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
176.2K views108 slides
Enterprise JavaScript Error Handling (Ajax Experience 2008) by
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Nicholas Zakas
72.5K views52 slides
Scalable JavaScript Application Architecture 2012 by
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
94K views114 slides
Writing Efficient JavaScript by
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
88.3K views139 slides
Maintainable JavaScript 2011 by
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
12.1K views53 slides
JavaScript APIs you’ve never heard of (and some you have) by
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
51.4K views67 slides

Viewers also liked(20)

Scalable JavaScript Application Architecture by Nicholas Zakas
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
Nicholas Zakas176.2K views
Enterprise JavaScript Error Handling (Ajax Experience 2008) by Nicholas Zakas
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Nicholas Zakas72.5K views
Scalable JavaScript Application Architecture 2012 by Nicholas Zakas
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas94K views
Writing Efficient JavaScript by Nicholas Zakas
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
Nicholas Zakas88.3K views
Maintainable JavaScript 2011 by Nicholas Zakas
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
Nicholas Zakas12.1K views
JavaScript APIs you’ve never heard of (and some you have) by Nicholas Zakas
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
Nicholas Zakas51.4K views
Browser Wars Episode 1: The Phantom Menace by Nicholas Zakas
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas77.4K views
Real-time Web with Rails and XMPP by Li Cai
Real-time Web with Rails and XMPPReal-time Web with Rails and XMPP
Real-time Web with Rails and XMPP
Li Cai4.5K views
High Performance JavaScript (CapitolJS 2011) by Nicholas Zakas
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas57.5K views
Speed Up Your JavaScript by Nicholas Zakas
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
Nicholas Zakas17.6K views
Progressive Enhancement 2.0 (Conference Agnostic) by Nicholas Zakas
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas42.5K views
High Performance JavaScript - WebDirections USA 2010 by Nicholas Zakas
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas59.7K views
High Performance JavaScript 2011 by Nicholas Zakas
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas10.1K views
Unobtrusive JavaScript with jQuery by Simon Willison
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
Simon Willison17.3K views
Mobile gotcha by phegaro
Mobile gotchaMobile gotcha
Mobile gotcha
phegaro4.1K views
Maintainable JavaScript by Nicholas Zakas
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
Nicholas Zakas10.2K views
High Performance JavaScript (YUIConf 2010) by Nicholas Zakas
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas61.8K views
High Performance JavaScript - Fronteers 2010 by Nicholas Zakas
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas4.2K views
JavaScript in the Real World by Andrew Nesbitt
JavaScript in the Real WorldJavaScript in the Real World
JavaScript in the Real World
Andrew Nesbitt1.3K views

Similar to Maintainable JavaScript 2012

Secrets of JavaScript Libraries by
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Librariesjeresig
41.5K views78 slides
Javascript Design Patterns by
Javascript Design PatternsJavascript Design Patterns
Javascript Design PatternsSubramanyan Murali
18.7K views33 slides
Art of Javascript by
Art of JavascriptArt of Javascript
Art of JavascriptTarek Yehia
1.4K views98 slides
jQuery introduction by
jQuery introductionjQuery introduction
jQuery introductionStijn Van Minnebruggen
1.3K views107 slides
JavaScript Abstraction by
JavaScript AbstractionJavaScript Abstraction
JavaScript Abstraction☆ Milan Adamovsky ☆
3.1K views41 slides

Similar to Maintainable JavaScript 2012(20)

Secrets of JavaScript Libraries by jeresig
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
jeresig41.5K views
Art of Javascript by Tarek Yehia
Art of JavascriptArt of Javascript
Art of Javascript
Tarek Yehia1.4K views
Scti 2011 minicurso jquery by ciberglo
Scti 2011 minicurso jqueryScti 2011 minicurso jquery
Scti 2011 minicurso jquery
ciberglo819 views
the next web now by zulin Gu
the next web nowthe next web now
the next web now
zulin Gu438 views
jQuery Data Manipulate API - A source code dissecting journey by Huiyi Yan
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
Huiyi Yan45 views
Everything is Permitted: Extending Built-ins by Andrew Dupont
Everything is Permitted: Extending Built-insEverything is Permitted: Extending Built-ins
Everything is Permitted: Extending Built-ins
Andrew Dupont8K views
The Beauty Of Java Script V5a by rajivmordani
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
rajivmordani899 views
Javascript Ks by ssetem
Javascript KsJavascript Ks
Javascript Ks
ssetem449 views
Building High Performance Web Applications and Sites by goodfriday
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sites
goodfriday451 views
Art & music vs Google App Engine by thomas alisi
Art & music vs Google App EngineArt & music vs Google App Engine
Art & music vs Google App Engine
thomas alisi1.6K views
Modern JavaScript Programming by Wildan Maulana
Modern JavaScript Programming Modern JavaScript Programming
Modern JavaScript Programming
Wildan Maulana927 views
SystemVerilog OOP Ovm Features Summary by Amal Khailtash
SystemVerilog OOP Ovm Features SummarySystemVerilog OOP Ovm Features Summary
SystemVerilog OOP Ovm Features Summary
Amal Khailtash8.4K views
Adding a modern twist to legacy web applications by Jeff Durta
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Jeff Durta354 views

More from Nicholas Zakas

Enough with the JavaScript already! by
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
260K views84 slides
The Pointerless Web by
The Pointerless WebThe Pointerless Web
The Pointerless WebNicholas Zakas
7K views64 slides
JavaScript Timers, Power Consumption, and Performance by
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
54.4K views128 slides
Mobile Web Speed Bumps by
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
13.4K views101 slides
High Performance JavaScript (Amazon DevCon 2011) by
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
4.6K views155 slides
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) by
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
10.1K views124 slides

More from Nicholas Zakas(15)

Enough with the JavaScript already! by Nicholas Zakas
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas260K views
JavaScript Timers, Power Consumption, and Performance by Nicholas Zakas
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas54.4K views
Mobile Web Speed Bumps by Nicholas Zakas
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas13.4K views
High Performance JavaScript (Amazon DevCon 2011) by Nicholas Zakas
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas4.6K views
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) by Nicholas Zakas
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas10.1K views
YUI Test The Next Generation (YUIConf 2010) by Nicholas Zakas
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
Nicholas Zakas3.7K views
Nicholas' Performance Talk at Google by Nicholas Zakas
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
Nicholas Zakas4.6K views
Performance on the Yahoo! Homepage by Nicholas Zakas
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas7.9K views
High Performance JavaScript - jQuery Conference SF Bay Area 2010 by Nicholas Zakas
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas47.7K views
Extreme JavaScript Compression With YUI Compressor by Nicholas Zakas
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
Nicholas Zakas43.4K views
JavaScript Variable Performance by Nicholas Zakas
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
Nicholas Zakas5.2K views
The New Yahoo! Homepage and YUI 3 by Nicholas Zakas
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3
Nicholas Zakas4.7K views
Test Driven Development With YUI Test (Ajax Experience 2008) by Nicholas Zakas
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)
Nicholas Zakas31.1K views

Recently uploaded

Adopting Karpenter for Cost and Simplicity at Grafana Labs.pdf by
Adopting Karpenter for Cost and Simplicity at Grafana Labs.pdfAdopting Karpenter for Cost and Simplicity at Grafana Labs.pdf
Adopting Karpenter for Cost and Simplicity at Grafana Labs.pdfMichaelOLeary82
13 views74 slides
What is Authentication Active Directory_.pptx by
What is Authentication Active Directory_.pptxWhat is Authentication Active Directory_.pptx
What is Authentication Active Directory_.pptxHeenaMehta35
15 views7 slides
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf by
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdfBronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdfThomasBronack
31 views31 slides
The Power of Heat Decarbonisation Plans in the Built Environment by
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built EnvironmentIES VE
85 views20 slides
NTGapps NTG LowCode Platform by
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform Mustafa Kuğu
474 views30 slides
Generative AI: Shifting the AI Landscape by
Generative AI: Shifting the AI LandscapeGenerative AI: Shifting the AI Landscape
Generative AI: Shifting the AI LandscapeDeakin University
78 views55 slides

Recently uploaded(20)

Adopting Karpenter for Cost and Simplicity at Grafana Labs.pdf by MichaelOLeary82
Adopting Karpenter for Cost and Simplicity at Grafana Labs.pdfAdopting Karpenter for Cost and Simplicity at Grafana Labs.pdf
Adopting Karpenter for Cost and Simplicity at Grafana Labs.pdf
MichaelOLeary8213 views
What is Authentication Active Directory_.pptx by HeenaMehta35
What is Authentication Active Directory_.pptxWhat is Authentication Active Directory_.pptx
What is Authentication Active Directory_.pptx
HeenaMehta3515 views
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf by ThomasBronack
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdfBronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf
ThomasBronack31 views
The Power of Heat Decarbonisation Plans in the Built Environment by IES VE
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built Environment
IES VE85 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu474 views
The Coming AI Tsunami.pptx by johnhandby
The Coming AI Tsunami.pptxThe Coming AI Tsunami.pptx
The Coming AI Tsunami.pptx
johnhandby14 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays59 views
PCCC23:日本AMD株式会社 テーマ2「AMD EPYC™ プロセッサーを用いたAIソリューション」 by PC Cluster Consortium
PCCC23:日本AMD株式会社 テーマ2「AMD EPYC™ プロセッサーを用いたAIソリューション」PCCC23:日本AMD株式会社 テーマ2「AMD EPYC™ プロセッサーを用いたAIソリューション」
PCCC23:日本AMD株式会社 テーマ2「AMD EPYC™ プロセッサーを用いたAIソリューション」
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De... by Moses Kemibaro
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Moses Kemibaro38 views
"Package management in monorepos", Zoltan Kochan by Fwdays
"Package management in monorepos", Zoltan Kochan"Package management in monorepos", Zoltan Kochan
"Package management in monorepos", Zoltan Kochan
Fwdays37 views
Future of AR - Facebook Presentation by Rob McCarty
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
Rob McCarty66 views
Business Analyst Series 2023 - Week 4 Session 8 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8
DianaGray10180 views
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... by ShapeBlue
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
ShapeBlue120 views
The Power of Generative AI in Accelerating No Code Adoption.pdf by Saeed Al Dhaheri
The Power of Generative AI in Accelerating No Code Adoption.pdfThe Power of Generative AI in Accelerating No Code Adoption.pdf
The Power of Generative AI in Accelerating No Code Adoption.pdf
Saeed Al Dhaheri44 views

Maintainable JavaScript 2012

Editor's Notes

  1. Over the past couple of years, we&apos;ve seen JavaScript development earn recognition as a true discipline. The idea that you should architect your code, use patterns and good programming practices has really elevated the role of the front end engineer. In my opinion, part of this elevation has been the adoption of what has traditionally been considered back end methodologies. We now focus on performance and algorithms, there&apos;s unit testing for JavaScript, and so much more. One of the areas that I&apos;ve seen a much slower than adoption that I&apos;d like is in the area of error handling.How many people have an error handling strategy for their backend? How many have dashboards that display problems with uptime and performance? How many have anything similar for the front end?Typically, the front end has been this black hole of information. You may get a few customer reports here and there, but you have no information about what&apos;s going on, how often it&apos;s occurring, or how many people have been affected.
  2. So what have we talked about? Maintainable JavaScript is made up of four components.First is Code Conventions that describe the format of the code you’re writing.Second is Loose Coupling – keeping HTML, JavaScript, and CSS on separate layers and keeping application logic out of event handlers.Third is Programming Practices that ensure your code is readable and easily debugged.Fourth is creating a Build Process