SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy

107 views

Published on

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.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
107
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy

    1. 1. JavaScript is Great But Stop Writing It
    2. 2. Rory Hardy — @gneatgeek
    3. 3. When Do You Write JavaScript?
    4. 4. JavaScript $('button') .on('mousedown', function () { this.style.background = '#ccc'; }) .on('mouseup', function () { this.style.background = '#fff'; });
    5. 5. HTML + CSS <button>Button Text</button> button { background-color: #fff; } button:active { background-color: #ccc; }
    6. 6. Stop Writing JavaScript? Image Source: www.f-lohmueller.de/
    7. 7. Let's Talk About HTML5 Content • Form validation • Audio • Video • More
    8. 8. Let's Talk About CSS Presentation • Animation • Transforms • Flexbox • More Image Source: https://mdn.mozillademos.org
    9. 9. NES with CSS? http://codepen.io/onediv/pen/AsDev
    10. 10. Let's Talk About JavaScript Behavior and user interactivity
    11. 11. jQuery's Role in DOM Development • Abstraction of Document Object Model (DOM) • Not a JavaScript replacement
    12. 12. Snowball!!
    13. 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. 14. Globals BOOM! Plane image source: Mario Paint
    15. 15. Events Image Source: diylol.com
    16. 16. Delegation Image Source: digitalbrandinginstitute.com
    17. 17. Static Analysis (Linter) for (var i = 0; i < 10; i++) { for (var i = 0; i < 5; i++) { // logic } }
    18. 18. Static Analysis (Linter) • JSLint • JSHint • ESLint • More Image Source: memegenerator.net
    19. 19. Tests Image Source: memegenerator.net
    20. 20. Bootstrap Image Source: getbootstrap.com
    21. 21. Conclusion Image Source: imgur.com

    ×