devnexus 2016

DEBUGGING JAVASCRIPT LIKE A BOSSStephanie Brubaker, FullStory

I write a *lot* of UI code.

I work at

THE BEST DEFENSE IS A GOOD OFFENSE


Don’t write JavaScript

TypeScript

Abstract classes + InterfacesCompile-time checks

Static type analysis

Alternatives

GWT (Java to JS)

CoffeeScript

JSX


Use CSS to simplify code

USE CSS TO SIMPLIFY CODE

Javascript:

<div id="myDiv" onmouseover="document.getElementById('myDiv').style.background = ‘red’"onmouseout="document.getElementById('myDiv').style.background = ‘’"> Mouse over me!</div>

USE CSS TO SIMPLIFY CODE

CSS:

<div class=”myDiv”> Mouse over me!</div>

.myDiv:hover {background-color: red;

}


Optimize your environment

OPTIMIZE YOUR ENVIRONMENT

Run a compiling server

◦ Gulp◦ Grunt

OPTIMIZE YOUR ENVIRONMENT

Use an IDE◦ IntelliJ/WebStorm◦ Eclipse

...or a good editor◦ Sublime


◦ Change languages

◦ Use CSS

◦ Optimize your environment

DEV TOOLS ARE YOUR FRIEND


Add source maps


Use browser debugger


http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/


Repro error conditions


◦ Add source maps

◦ Use browser debugger

◦ Repro error conditions

PROTECT YOUR INVESTMENT

MY PRECIOUS


Create automated tests

Web Automation Frameworks

nightmare.js

Selenium/WebDriver

http://www.nightmarejs.org/

Test frameworks

Jasmine

QUnit

Mocha

nightmare.js + Mocha

CYPRESS.IO

Build Automation

JenkinsGrunt

Buildbot

Gulp


Require code reviews

NOT THIS

Code Reviews FTW

Maintain culture

Genuinely better code

Knowledge transfer


◦ Create automated tests

◦ Require code reviews

DEBUGGING JS LIKE A BOSS

Start with a good offense

Dev tools are your friend

Protect your investment

Thanks!

QUESTIONS?@[email protected]

devnexus 2016

Engineering