Maintainable JavaS cript

        Nicholas C . Zakas
   S r. Frontend E ngineer, M y
              Yahoo!
Why?
                     Writing New
                        Code




Maintaining
   Code
Who cares ?
• Your employer
• Your co-workers, present and future
• D evelopment community
What is maintainability?
•   Understandable
•   Intuitive
•   Adaptable
•   E xtendable
•   D ebuggable
C ode C onventions
     M aintainable JavaS cript
R eadable code
• Indent your code
• C omment your code
  –   E ach method
  –   Large sections of code
  –   D ifficult-to...
Naming
• Use logical names for variables and
  functions
  – D on’t worry about length
• Variable names should be nouns (i...
Indicate variable type
• Initialization
  var found = false;


• Hungarian Notation
  var sName = quot;Nicholasquot;;


• ...
Loos e C oupling
     M aintainable JavaS cript
C lient-s ide Layers

  Behavior       Presentation
(JavaScript)        (CSS)

          Structure
          (HTML)
S eparate HTML and
           JavaS cript
• JavaS cript in HTM L
 <a onclick=quot;sayHi()quot;>text</a>


• HTM L in JavaS...
S eparate C S S and
             JavaS cript
• JavaS cript in C S S
  div.hd {
    width:
        expression(ref.offsetWid...
E vent handlers handle
           events
function handleKeyPress(event){
  if (event.keyCode == 13){
     var value = 5 *
...
E vent handlers handle
           events
function handleKeyPress(event){
  if (event.keyCode == 13){
     performCalculati...
Prog ramming Practices
    M aintainable JavaS cript
Don’t Modify Objects You
         Don’t Own
• D on’t add methods
• D on’t override methods

• You don’t own O bject, Array...
Avoid g lobals
• All publicly-accessible
  functions/ variables should be attached
  to an object
• Namespace your objects...
Don’t overus e popular
          techniques
• C losures/nested functions
  – Use sparingly
• O bject literals
  – S inglet...
Throw your own errors
function add5(value) {
  if (arguments.length < 1) {
   throw new
      Error(quot;add5: Not enough ...
Avoid null comparis ons
function sortArray(value) {
  if (value != null) {
     value.sort();
  }
}
Avoid null comparis ons
function sortArray(value) {
  if (value instanceof Array) {
     value.sort();
  }
}
Avoid null comparis ons
function sortArray(value) {
  if (value instanceof Array) {
     value.sort();
  } else {
     thr...
Avoid null comparis ons
• Use instanceof for specific types of
  objects
 if (value instanceof
 constructor){


• Use type...
Us e C ons tants
function validate(value) {
  if (!value) {
    alert(quot;Invalid valuequot;);
    location.href =
      ...
Us e C ons tants
var Constants = {
   INVALID_MSG : quot;Invalid valuequot;,
   INVALID_URL : quot;/errors/invalid.phpquot...
Us e C ons tants
•   R epeated unique values
•   UI strings
•   UR Ls
•   Any value that may change in the future
B uild Proces s
     M aintainable JavaS cript
B uild Proces s


    Source Files


       Build
R ecommendations
• O ne object or object definition per file
  – Indicate dependencies
• Use a build step
  – C ombine fil...
S ummary
    M aintainable JavaS cript
S ummary
•   C ode C onventions
•   Loose C oupling
•   P rogramming P ractices
•   B uild P rocess
Ques tions and Ans wers
     M aintainable JavaS cript
E tcetera
• M y email:   nzakas@ yahoo-inc.com
• M y blog:    www.nczonline.net
Upcoming SlideShare
Loading in...5
×

Maintainable JavaScript

14,404

Published on

Explains how to write JavaScript in a way that creates the most value for your company, making it maintainable.

Published in: Technology
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,404
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
257
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide

Maintainable JavaScript

  1. 1. Maintainable JavaS cript Nicholas C . Zakas S r. Frontend E ngineer, M y Yahoo!
  2. 2. Why? Writing New Code Maintaining Code
  3. 3. Who cares ? • Your employer • Your co-workers, present and future • D evelopment community
  4. 4. What is maintainability? • Understandable • Intuitive • Adaptable • E xtendable • D ebuggable
  5. 5. C ode C onventions M aintainable JavaS cript
  6. 6. R eadable code • Indent your code • C omment your code – E ach method – Large sections of code – D ifficult-to-understand algorithms – Hacks
  7. 7. Naming • Use logical names for variables and functions – D on’t worry about length • Variable names should be nouns (i.e., car) • Function names should begin with a verb (i.e., getName()) – For functions returning Boolean values, prefix with “is”, such as isValid() • Avoid useless names such as foo, bar, temp
  8. 8. Indicate variable type • Initialization var found = false; • Hungarian Notation var sName = quot;Nicholasquot;; • Type C omments var cost /*:float*/ = 5.23;
  9. 9. Loos e C oupling M aintainable JavaS cript
  10. 10. C lient-s ide Layers Behavior Presentation (JavaScript) (CSS) Structure (HTML)
  11. 11. S eparate HTML and JavaS cript • JavaS cript in HTM L <a onclick=quot;sayHi()quot;>text</a> • HTM L in JavaS cript element.innerHTML = quot;<div>quot; + quot;<a href=quot;/js/quot;>text</a></div>quot;;
  12. 12. S eparate C S S and JavaS cript • JavaS cript in C S S div.hd { width: expression(ref.offsetWidth+quot;pxquot;); } • C S S in JavaS cript element.style.color = quot;redquot;;
  13. 13. E vent handlers handle events function handleKeyPress(event){ if (event.keyCode == 13){ var value = 5 * parseInt(txt.value); div.innerHTML = value; alert(quot;Updatedquot;); } }
  14. 14. E vent handlers handle events function handleKeyPress(event){ if (event.keyCode == 13){ performCalculation(); updateUI(); } }
  15. 15. Prog ramming Practices M aintainable JavaS cript
  16. 16. Don’t Modify Objects You Don’t Own • D on’t add methods • D on’t override methods • You don’t own O bject, Array, R egE xp, S tring, Number, B oolean, D ate, Function
  17. 17. Avoid g lobals • All publicly-accessible functions/ variables should be attached to an object • Namespace your objects – D on’t go overboard – Three levels is enough YAHOO.Way.Too.Long.Namespace
  18. 18. Don’t overus e popular techniques • C losures/nested functions – Use sparingly • O bject literals – S ingletons – P ass data
  19. 19. Throw your own errors function add5(value) { if (arguments.length < 1) { throw new Error(quot;add5: Not enough argsquot;); } return value + 5; }
  20. 20. Avoid null comparis ons function sortArray(value) { if (value != null) { value.sort(); } }
  21. 21. Avoid null comparis ons function sortArray(value) { if (value instanceof Array) { value.sort(); } }
  22. 22. Avoid null comparis ons function sortArray(value) { if (value instanceof Array) { value.sort(); } else { throw new Error(quot;sortArray: argument must be an array.quot;); } }
  23. 23. Avoid null comparis ons • Use instanceof for specific types of objects if (value instanceof constructor){ • Use typeof to test for string, number, B oolean if (typeof value == quot;stringquot;) {
  24. 24. Us e C ons tants function validate(value) { if (!value) { alert(quot;Invalid valuequot;); location.href = quot;/errors/invalid.phpquot;; } }
  25. 25. Us e C ons tants var Constants = { INVALID_MSG : quot;Invalid valuequot;, INVALID_URL : quot;/errors/invalid.phpquot; }; function validate(value) { if (!value) { alert(Constants.INVALID_MSG); location.href = Constants.INVALID_URL; } }
  26. 26. Us e C ons tants • R epeated unique values • UI strings • UR Ls • Any value that may change in the future
  27. 27. B uild Proces s M aintainable JavaS cript
  28. 28. B uild Proces s Source Files Build
  29. 29. R ecommendations • O ne object or object definition per file – Indicate dependencies • Use a build step – C ombine files in appropriate order – S trip comments/ whitespace – Validate code
  30. 30. S ummary M aintainable JavaS cript
  31. 31. S ummary • C ode C onventions • Loose C oupling • P rogramming P ractices • B uild P rocess
  32. 32. Ques tions and Ans wers M aintainable JavaS cript
  33. 33. E tcetera • M y email: nzakas@ yahoo-inc.com • M y blog: www.nczonline.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×