Your Code Sucks: Best Practices for Enterprise JavaScript Development

Slide 1

Slide 1 text

Best Practices for Enterprise JavaScript Applications YOUR CODE SUCKS

Slide 2

Slide 2 text

WHO AM I? •  Arthur Kay •  Solutions Engineer @ Sencha, Inc. •  Web Development ~15 years •  www.akawebdesign.com •  @arthurakay

Slide 3

Slide 3 text

AGENDA •  Improving application performance •  Increasing code stability •  Scaling applications for enterprise •  Tools •  Advice

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

IMPROVING APPLICATION PERFORMANCE Part 1

Slide 6

Slide 6 text

CACHING

Slide 7

Slide 7 text

THIS CODE SUCKS

Slide 8

Slide 8 text

DO THIS INSTEAD •  Cache values (references) •  Avoid using document.getElementById() and other global queries

Slide 9

Slide 9 text

DO THIS INSTEAD

Slide 10

Slide 10 text

OVER NESTING

Slide 11

Slide 11 text

THIS CODE SUCKS

Slide 12

Slide 12 text

DO THIS INSTEAD •  Use lightweight containers (reduce DOM) •  Lazy Rendering

Slide 13

Slide 13 text

DO THIS INSTEAD

Slide 14

Slide 14 text

MEMORY LEAKS

Slide 15

Slide 15 text

THIS CODE SUCKS

Slide 16

Slide 16 text

DO THIS INSTEAD

Slide 17

Slide 17 text

INCREASING CODE STABILITY Part 2

Slide 18

Slide 18 text

SYNTAX ERRORS

Slide 19

Slide 19 text

THIS CODE SUCKS

Slide 20

Slide 20 text

DO THIS INSTEAD •  Use JSLint (or something else) •  AUTOMATE SYNTAX CHECKING

Slide 21

Slide 21 text

ONE CLASS PER FILE

Slide 22

Slide 22 text

THIS CODE SUCKS

Slide 23

Slide 23 text

DO THIS INSTEAD •  Organize your file system •  Files and folders should match namespacing •  MVC (or something) •  Development loader / Production builder

Slide 24

Slide 24 text

NAMES HAVE MEANING

Slide 25

Slide 25 text

THIS CODE SUCKS

Slide 26

Slide 26 text

DO THIS INSTEAD •  Descriptive names on everything (except iterators) •  Common naming conventions (camelCase vs TitleCase vs nocase) •  Exceptions for •  constants ( SOME_CONSTANT ) •  constructors ( MyClass ) •  sub-namespaces ( Foo.bar.Class )_

Slide 27

Slide 27 text

COMMENTS / DOCUMENTATION

Slide 28

Slide 28 text

THIS CODE SUCKS

Slide 29

Slide 29 text

DO THIS INSTEAD •  Comment top-level structures •  Add notes whenever logic is not obvious •  Build your docs into a searchable tool

Slide 30

Slide 30 text

SCALING APPLICATIONS FOR ENTERPRISE Part 3

Slide 31

Slide 31 text

AVOID DUPLICATION

Slide 32

Slide 32 text

THIS CODE SUCKS

Slide 33

Slide 33 text

DO THIS INSTEAD •  Abstraction! •  Use mixins when possible •  Apply stuff to prototypes •  Have similar classes/methods? •  call() and apply()

Slide 34

Slide 34 text

DO THIS INSTEAD

Slide 35

Slide 35 text

SMALLER FILES. WHITE SPACE.

Slide 36

Slide 36 text

THIS CODE SUCKS

Slide 37

Slide 37 text

DO THIS INSTEAD •  Keep methods under 50 lines •  Keep files under 500 lines •  Use as much whitespace as possible.

Slide 38

Slide 38 text

UNIT TESTS

Slide 39

Slide 39 text

THIS CODE SUCKS

Slide 40

Slide 40 text

DO THIS INSTEAD •  Write “testable” code •  Focus on important / trouble areas •  AUTOMATE UNIT TESTING •  Don’t insist on UI (integration/iteraction) tests * Test Driven JavaScript Development by Christian Johansen

Slide 41

Slide 41 text

TOOLS Stuff You Should Know About

Slide 42

Slide 42 text

IDE

Slide 43

Slide 43 text

INSPECT ELEMENT

Slide 44

Slide 44 text

YSLOW

Slide 45

Slide 45 text

JS DUCK

Slide 46

Slide 46 text

PHANTOM.JS

Slide 47

Slide 47 text

ADVICE Things I’ve Learned

Slide 48

Slide 48 text

SPECIFICATION – NOT TDD

Slide 49

Slide 49 text

NEVER STOP LEARNING

Slide 50

Slide 50 text

BREAK (SOME) RULES

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

ADDITIONAL RESOURCES •  “Maintainable JavaScript” by Nicholas Zakas •  http://www.slideshare.net/nzakas/maintainable-javascript-2012 •  “Code Conventions for JS” by Douglass Crockford •  http://javascript.crockford.com/code.html •  “JavaScript Performance Tips & Tricks” by Grgur Grisogono •  http://moduscreate.com/javascript-performance-tips-tricks/