This talk is not about never writing JavaScript. It is about writing JavaScript when you actually need to and in a minimal fashion. This talk focuses on JavaScript in the browser.
13. Writing Better JavaScript
• Learn Vanilla JavaScript
• Read “JavaScript: The Good Parts” by Douglas Crockford
• Leverage available tools
• Leverage libraries/frameworks when they solve your problem
Do you write JS for visual presentation effects or for user interactions
Poll the group, see when they use JS
Example of changing styles when clicking
Have to bind to each button
Also have to set up styles on load which is slow
Scales to as many buttons as needed
Much easier to override as needed
Allows simple declarative markup with HTML
Separation of concerns
Each piece drives there other - they are interconnected yet separate
It’s hard to power a lot of JavaScript with a little CSS (tiny cog turning a large one)
CSS allows rich user interaction as well
CSS3 animations/transforms
Play 15 to 30 seconds
What is a namespace
Concatenating files using the same variable/function
Discuss the var keyword
Discuss functions and scope
Discuss the let and const keywords
Events or actions are when a user interacts with something in the browser.
The browser offers an API for DOM events.
Click, hover, mouseenter etc
Tooltips on buttons
Clicking for alerts
Events can be delegated (handled in a lazy fashion)
Instead of binding an event handler to an individual element, write a generic handler for all elements that need to react to it whenever they need to react.
Discuss double nested for loop bug which took 19 hours to debug
Static analysis prevents common mistakes
It enforces a common programming style
Static Analysis is 1st line of defense
Define behaviors with tests
Contract for behavior
More time consuming
Protects from unintentional changes and side-effects
Jasmine + Jasmine jQuery
Mocha
QUnit
I hear too often that JavaScript doesn’t need to be tested, but testing code helps protect it from accidental defects
Discuss component libraries, what they offer, and how they enable you to write less JavaScript
Discuss how Bootstrap is a style guide and component library
Recap separation of concerns
Recap using frameworks and component libraries
Recap Delegation
Recap Testing