• Like
  • Save
Detangling Your JavaScript
Upcoming SlideShare
Loading in...5
×
 

Detangling Your JavaScript

on

  • 2,307 views

This is an introduction to refactoring techniques for JavaScript code that works but is legacy, poorly written or otherwise "tangled."

This is an introduction to refactoring techniques for JavaScript code that works but is legacy, poorly written or otherwise "tangled."

Statistics

Views

Total Views
2,307
Views on SlideShare
2,266
Embed Views
41

Actions

Likes
4
Downloads
15
Comments
1

5 Embeds 41

http://speakerrate.com 24
http://paper.li 10
http://twitter.com 4
https://twitter.com 2
http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

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

Detangling Your JavaScript Detangling Your JavaScript Presentation Transcript

  • Detangling Your JavaScriptAn Intro to JS Refactoring
  • Chris PowersConsultant with //obtivahttp://obtiva.com@chrisjpowers
  • 3 Kinds of People Deal with Tangled Code
  • Consultants
  • New Hires
  • ...and Everyone Else!
  • We all work withTangled code on a daily basis
  • What is “Tangled” JavaScript?
  • It is not BAD code!
  • Bad code doesn’t work.
  • Tangled code does work!
  • Tangled code willbecome “bad” codeeventually because...
  • Tangled code is hard to read and understand.
  • Tangled code is hard to update and maintain.
  • Tangled code is easy to accidentally break.
  • “Tangled code iscode based on lost requirements.” - Noel Rappin
  • Got Tangled Code? Do you...
  • Option #1:Big Bang Rewrite
  • Option #2:Detangle (Refactor)
  • ALWAYS Detangle! NEVER Rewrite!
  • Rewrites are tempting
  • Coders want to Code!
  • Writing codeis easier thanreading code.
  • You CANNOT rewrite code you don’t understand.
  • Your rewrite will likely miss requirements
  • In your client’s eyes,your rewrite will be worse than the original.
  • What is Refactoring?
  • Methodically improving code quality without altering behavior.
  • Making yourcomplex code simple.
  • Simple code is...
  • #1Tested
  • #2Reveals Intent
  • #3DRY - Each piece ofknowledge exists in only one place
  • #4Small
  • Let’s Start Detangling...
  • First Things First: Set a Goal
  • How much code needs to be refactored? How deeply?
  • Write a Test!
  • Why write tests?
  • Makes the code simple
  • Ensures BehaviorDoes Not Change
  • Forces Developer to Understand Requirements
  • Refactoring #1Name the Anonymous Functions
  • Refactoring #2 DocumentResponsibilities with Comments
  • Refactoring #3Extract Methods
  • Refactoring #4Improve Variable Names
  • Refactoring #5Add Local Vars toImprove Legibility
  • Keep Extracting Functions
  • Refactoring #6Add Clarity with Underscore.js
  • Refactoring #7Isolate Display Logic
  • Refactoring #8 Isolate DOM Manipulation
  • Refactoring #9 Hide “Private”Methods in Closures
  • Refactoring #10Scope Public Methods in Namespaces
  • Refactoring #11 Use TieredSub-Namespaces
  • Refactoring #12Extend Namespaces (Don’t Overwrite)
  • Refactoring #13DRY Up Namespace Initialization
  • Resources
  • http://pivotal.github.com/jasmine/
  • http://obtiva.com/blog
  • http://javascriptmasters.com
  • http://javascriptmasters.comSignup Code: ccc2011 ccc2011
  • Got questions?@chrisjpowers