Best Practices for
Enterprise JavaScript Applications
November 14, 2013
Slide 3
Slide 3 text
Arthur Kay
•
Solutions Architect
@ Sencha, Inc.
•
Web Development ~15 years
•
www.akawebdesign.com
•
@arthurakay
Slide 4
Slide 4 text
Jay Garcia
•
CTO @ Modus Create
•
Author
•
Ext JS in Action
•
Sencha Touch in Action
•
www.moduscreate.com
•
@modusjesus
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Top Ten List
Best Practices for Enterprise JavaScript Applications
Slide 7
Slide 7 text
10. Well Formed Code
Slide 8
Slide 8 text
Bad Practice
Slide 9
Slide 9 text
Best Practice
•
Use JSLint (or something else)
•
JSHint
•
Esprima
•
…and many more…
•
AUTOMATE!
Slide 10
Slide 10 text
9. Nesting callbacks == nightmare
Slide 11
Slide 11 text
Why is this bad?
Slide 12
Slide 12 text
Nesting callbacks == nightmare
•
Difficult to
•
Read
•
Comprehend
•
Follow
•
Debug
•
Code “pyramids” are just over-all bad practice
Slide 13
Slide 13 text
Best practice: use SCOPE
Slide 14
Slide 14 text
8. Caching & References
Slide 15
Slide 15 text
Bad Practice
Slide 16
Slide 16 text
JSPerf
http://jsperf.com/cache-deep-reference/2
Slide 17
Slide 17 text
Best Practice
•
Use references!
•
Avoid using:
•
document.getElementById()
•
Ext.getCmp()
•
and other global queries
Slide 18
Slide 18 text
Best Practice
Slide 19
Slide 19 text
7. Indentation
Slide 20
Slide 20 text
Improperly indented & wasteful code
Slide 21
Slide 21 text
Improperly indented & wasteful code
Too much!
Inconsistent
Waste
Slide 22
Slide 22 text
Properly indented & optimized code
Slide 23
Slide 23 text
Best practice: Always code for readability!
Slide 24
Slide 24 text
6. One Class Per File
Slide 25
Slide 25 text
Bad Practice
Slide 26
Slide 26 text
Best Practice
•
Organize your file system
•
Files and folders should match namespacing
•
MVC (or something)
•
Abstraction!
•
Development loader / Production builder
Slide 27
Slide 27 text
5. Too much work to return
Slide 28
Slide 28 text
This code is not wrong,
but could be better
Slide 29
Slide 29 text
We’re starting to get there…
Slide 30
Slide 30 text
Yup, this is it!
Add braces for
readability
May be hard
to read at first
glance.
Slide 31
Slide 31 text
4. Comments / Documentation
Slide 32
Slide 32 text
Bad Practice
Slide 33
Slide 33 text
Best Practice
•
Comment top-level structures
•
Use Meaningful names
•
“self documenting” code
•
Add notes whenever logic is not obvious
•
Build your docs into a searchable tool
•
JSDuck
•
…other tools…
Slide 34
Slide 34 text
3. “===“ !== “==“
Slide 35
Slide 35 text
Truthy and Falsy
•
When using “==“ or “!=“, JavaScript has room to coerce values
•
Tests are boiled down to “Falsy” and “Truthy”
•
Process is called coercion
Slide 36
Slide 36 text
“===“ || “!==“
•
Leaves no room for coercion
•
All are false!
Slide 37
Slide 37 text
2. Be Lazy
Slide 38
Slide 38 text
Bad Practice
Slide 39
Slide 39 text
Best Practice
•
Lazy initialization
•
Add items/views only when necessary
•
Lazy rendering
•
Save the browser some time!
•
Reuse things
•
Save yourself some time!
Slide 40
Slide 40 text
1. Knowing this!
Slide 41
Slide 41 text
Two rules for “this”
•
When a function is executed via a var reference,
the default execution context (“this”) is “window.
•
When a function is executed via an object key,
the execution context (“this”) is the object.
Slide 42
Slide 42 text
The “var” rule
•
When a function is
executed via a var
reference, the default
execution context
(“this”) is “window”.
Slide 43
Slide 43 text
The object “key” rule
•
When a function is
executed via an object
key, the execution
context (“this”) is that
object.
Slide 44
Slide 44 text
Two rules for “this” (review)
•
When a function is executed via a var reference,
the default execution context (“this”) is “window.
•
When a function is executed via an object key,
the execution context (“this”) is the object.
Slide 45
Slide 45 text
Mixing and matching
What is
the
context?
Slide 46
Slide 46 text
Mixing and matching
What is
the
context?
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 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/
Slide 49
Slide 49 text
Thanks!
Arthur Kay | @arthurakay
Jay Garcia | @modusjesus