JavaScript Great But Stop Writing
•Download as PPTX, PDF•
2 likes•428 views
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.
Recommended
More Related Content
What's hot
What's hot (8)
Viewers also liked
Viewers also liked (20)
Similar to JavaScript Great But Stop Writing
Similar to JavaScript Great But Stop Writing (20)
More from Sencha
More from Sencha (14)
Recently uploaded
Recently uploaded (20)
JavaScript Great But Stop Writing
- 1. JavaScript is Great But Stop Writing It
- 2. Rory Hardy — @gneatgeek
- 3. When Do You Write JavaScript?
- 4. JavaScript $('button') .on('mousedown', function () { this.style.background = '#ccc'; }) .on('mouseup', function () { this.style.background = '#fff'; });
- 5. HTML + CSS <button>Button Text</button> button { background-color: #fff; } button:active { background-color: #ccc; }
- 6. Stop Writing JavaScript? Image Source: www.f-lohmueller.de/
- 7. Let's Talk About HTML5 Content • Form validation • Audio • Video • More
- 8. Let's Talk About CSS Presentation • Animation • Transforms • Flexbox • More Image Source: https://mdn.mozillademos.org
- 10. Let's Talk About JavaScript Behavior and user interactivity
- 11. jQuery's Role in DOM Development • Abstraction of Document Object Model (DOM) • Not a JavaScript replacement
- 12. Snowball!!
- 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
- 14. Globals BOOM! Plane image source: Mario Paint
- 17. Static Analysis (Linter) for (var i = 0; i < 10; i++) { for (var i = 0; i < 5; i++) { // logic } }
- 18. Static Analysis (Linter) • JSLint • JSHint • ESLint • More Image Source: memegenerator.net
Editor's Notes
- 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