Skip to content

Instantly share code, notes, and snippets.

@meagar
Last active December 30, 2015 09:09
Show Gist options
  • Save meagar/7807445 to your computer and use it in GitHub Desktop.
Save meagar/7807445 to your computer and use it in GitHub Desktop.
Managing JavaScript Complexity

Managing JavaScript Complexity

Jarrod Overson's excellent QConSF 2013 talk

Original slides: http://www.slideshare.net/JarrodOverson/complexity-28214103

Sort of Managing JavaScript Complexity

Matthew "Maverick" Eagar

Table of Contents

1. Speeeeeeech!

2. JavaScript's a real thing now

3. CoffeeScript... isn't

4. Matt Rambles for a bit

5. Stack Overflow

Speeech

JavaScript is a real language

JavaScript isn't a toy...

  • it's not 2003
  • no longer about jQuery animations

Except in Rails

  • Traditional request/response cycle
  • UJS
  • Bad support for managing JS complexity

JavaScript Apps are Big

  • and getting bigger
  • big apps, big codebases
  • big codebases -> complexity

Complexity

  • "Solved problem" in "traditional" languages
  • linting
  • maintainability index
  • bug rate

JavaScript...

  • Dynamic langauge with some (a lot?) of problems
    • rapid evoluation, leaving best practices behind
    • immature tooling
    • ECMA6... HOW??!

Plato!

If you're not automating it, you might as well not be doing it;
if you're not visualizing it, it might as well not be happening

-- Jarrod Overson <3

Plato !

Demo:

https://github.com/es-analysis/plato

  • static analysis and visualization
  • no code is good code (maintainability)

CoffeeScript </3

"CoffeeScript is a fantastic, awesome language, and an awful, dismal ecosystem"

CoffeeScript </3

"CoffeeScript is a fantastic, awesome language, and an awful, dismal ecosystem"

-- Maverick

CoffeeScript </3

  • No evolution
  • NO tooling
  • Rendered obsolete by ECMA6

Moving Forward...?

  • CS and JS can co-exist
  • Same tests
  • lint some, but not others

Stack Overflow

Linting is good

Stack Overflow makes you a human linter

THIS PROBLEM >:(

function get_user_id() {
  var user_id = null;
  
  $.get("/users/me", function(user) {
    user_id = user.id;
  });
  
  return user_id;
}

id = get_user_id(); // WHY U NO WORK?!??!11

Because of this:

http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call

SO MANY DUPLICATES

http://stackoverflow.com/questions/18127243/jquery-return-value-from-function

Ok, but...

    delete_visits = (ids_to_remove) ->
      dfds = []
  
      visits = []

      for id in ids_to_remove
        model = new Pam.Models.Visit({id: id})
        model.fetch().done =>
          dfd = model.destroy()
          dfds.push(dfd)
      
      $.when(dfds...)

Ok, but...

    delete_visits = (ids_to_remove) ->
1.    dfds = []
  
2.    visits = []

3.    for id in ids_to_remove
4.      model = new Pam.Models.Visit({id: id})
5.      model.fetch().done =>
  7.      dfd = model.destroy()
  8.      dfds.push(dfd)
      
6.    $.when(dfds...)

Sharpen your saw

  • Thought:Coding... 5:1?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment