Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Seven Steps To Better 
JavaScript 
DEN ODELL 
AKQA 
#TECHINSIGHT TECHINSIGHT.IO
@DENODELL 
BOOKS FOR PROFESSIONALS BY PROFESSIONALS® 
Pro JavaScript RIA Techniques: 
Best Practices, Performance, and Pre...
JAVASCRIPT
2004
2004 
Basic page manipulation 
Form validation 
Code to work around cross-browser differences
2014
2014 
Single Page Web Apps 
Full Screen API 
MVC/MVVM Frameworks 
Device Orientation, Direction and 
Motion Events 
Web Au...
GREAT USER 
EXPERIENCE
ONE CHANCE
YouTube
YouTube
Google Maps
Google Maps
Instagram
Instagram
NO RISKS
SEVEN STEPS 
TO BETTER 
JAVASCRIPT
1. CODE
Code Defensively
ECMAScript 5 Strict Mode
Use Well-Tested Libraries 
And Frameworks
Module Design Pattern - Sandbox
Separate Business Logic And Data 
From Layout Code
Improve Your UI With Web Sockets
Replace Nested Callbacks With 
JavaScript Promises
http://promisesaplus.com
https://github.com/denodell
2. DOCUMENT
Use Structured Block Comments 
e.g. YUIDoc, JSDoc
Use Markdown Format For Rich, Long 
Form Comments And Code Samples 
http://bit.ly/markdown_format
Use A Documentation Site Generator
http://bit.ly/yui_doc
3. ANALYSE
Perform Static Code Analysis Regularly
http://jshint.com
Enforce Coding Rules
Peer Code Review
http://bit.ly/crucible_tool
4. TEST
Write Unit Tests For Functions 
Don’t Forget Edge Cases
Logic DOM 
Unit Test Integration Test
http://bit.ly/jas_test
Run Unit Tests In Multiple Browsers 
Using BrowserStack, Sauce Labs, Or 
BrowserSwarm
http://browserstack.com
http://browserswarm.com
http://browserswarm.com
Don’t Forget Integration Testing 
e.g. Selenium
http://seleniumhq.org
5. MEASURE
Code Compliance
Run Code Coverage Tools On Unit Tests 
e.g. Istanbul
http://bit.ly/istanbul_cover
Maury Halstead
http://bit.ly/halstead_complex
Measure Code Complexity With Plato
http://bit.ly/platojs
Compliance, Coverage, Complexity: 
Measure And Improve
6. AUTOMATE
Use A Task Runner 
Auto-Generate Documentation, 
Analyse, Test And Measure Your Code
http://gulpjs.com http://gruntjs.com
7. CATCH
Capture And Log Runtime Errors
Fix The Issues
Ensure Same Bug Never Arises
NO RISKS
CODE 
DOCUMENT 
ANALYSE 
TEST 
MEASURE 
AUTOMATE 
CATCH
SEVEN STEPS 
TO BETTER 
JAVASCRIPT
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Seven Steps To Better JavaScript
Upcoming SlideShare
Loading in …5
×

Seven Steps To Better JavaScript

2,202 views

Published on

The volume of JavaScript used on the web is growing, yet a single, poorly written line of code has the potential to break an entire website, frustrating users and driving away potential customers. AKQA have been working over many years to find a set of steps to follow during development to ensure only the highest-quality code gets released. Join Den Odell, Head of Web Development at AKQA, as he presents the seven steps that will improve the quality of any JavaScript project, leaving code easier to manage and letting users browse without frustration.

Published in: Technology
  • Be the first to comment

Seven Steps To Better JavaScript

  1. 1. Seven Steps To Better JavaScript DEN ODELL AKQA #TECHINSIGHT TECHINSIGHT.IO
  2. 2. @DENODELL BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Pro JavaScript RIA Techniques: Best Practices, Performance, and Presentation Dear Reader, Many people are familiar with rich Internet applications (RIAs), those web sites that blur the line between desktop software and the web browser. Applications like webmail clients, photo editors, and social networking sites cross this boundary. They feature intuitive, user-friendly interfaces, without the need for page refreshes or other interruptions to the end user’s experience. It is widely regarded that this type of web site will continue to grow in popularity. I wrote this book to help web developers with some existing JavaScript skills suc-cessfully create their own professional, visually rich, dynamic, and performance-tuned RIAs. And following the guidelines in this book, you’ll be safe in the knowledge that your code is built according to best practices, adhering to web standards and accessibility guidelines. In this book, I will show you how best to build a solid, maintainable foundation of HTML, CSS, and JavaScript code for your RIAs, together with the Ajax techniques needed to provide the dynamic communication between the browser and web server behind the scenes. I will describe the performance limitations you may run into when building your web applications and how best to overcome these. And I’ll give you some tips for making your user interfaces feel more responsive, even when you can’t get around the performance limitations. You also will learn how to improve your RIA user interfaces by adding typo-graphical headings using custom fonts, multimedia playback components, customized form controls, and dynamic charting capabilities. Additionally, I will demonstrate how to continue running your web applications when the connection to the server is broken, how to use Ajax to read hidden data stored within binary files, and how to ensure the highest level of accessibility within your JavaScript web applications. Den Odell Companion eBook See last page for details on $10 eBook version SOURCE CODE ONLINE US $44.99 Shelve in Web Development User level: Intermediate–Advanced Pro JavaScript RIA Techniques Odell THE EXPERT’S VOICE® IN WEB DEVELOPMENT Pro JavaScript RIA Techniques Best Practices, Performance, and Presentation this print for content only—size & color not accurate spine = 0.844" 440 page count CYAN MAGENTA YELLOW BLACK PANTONE 123 C Den Odell Companion eBook Available www.apress.com Turn your JavaScript knowledge into beautiful, dynamic, and performance-tuned rich Internet applications ISBN 978-1-4302-1934-7 9 781430 219347 54499 RELATED TITLES DEN ODELL HEAD OF WEB DEVELOPMENT, AKQA
  3. 3. JAVASCRIPT
  4. 4. 2004
  5. 5. 2004 Basic page manipulation Form validation Code to work around cross-browser differences
  6. 6. 2014
  7. 7. 2014 Single Page Web Apps Full Screen API MVC/MVVM Frameworks Device Orientation, Direction and Motion Events Web Audio History API HTML5 Media APIs Modernizr Advanced User Interface Components Managing Offline Application Cache GeoLocation Canvas API Match Media API Web Workers Replacing Flash Responsive Foreground Images Parallax And Other Effects jQuery / Zepto AngularJS Grunt / Gulp Parallax And Other Effects Node.js Mobile App Development Touch Events Cross-domain Ajax Local Storage APIs Working around browser vendor prefixes WebRTC postMessage API Social Media Integration Drag & Drop API CSS Animation & Transition Events Web Sockets API RequireJS Polyfills
  8. 8. GREAT USER EXPERIENCE
  9. 9. ONE CHANCE
  10. 10. YouTube
  11. 11. YouTube
  12. 12. Google Maps
  13. 13. Google Maps
  14. 14. Instagram
  15. 15. Instagram
  16. 16. NO RISKS
  17. 17. SEVEN STEPS TO BETTER JAVASCRIPT
  18. 18. 1. CODE
  19. 19. Code Defensively
  20. 20. ECMAScript 5 Strict Mode
  21. 21. Use Well-Tested Libraries And Frameworks
  22. 22. Module Design Pattern - Sandbox
  23. 23. Separate Business Logic And Data From Layout Code
  24. 24. Improve Your UI With Web Sockets
  25. 25. Replace Nested Callbacks With JavaScript Promises
  26. 26. http://promisesaplus.com
  27. 27. https://github.com/denodell
  28. 28. 2. DOCUMENT
  29. 29. Use Structured Block Comments e.g. YUIDoc, JSDoc
  30. 30. Use Markdown Format For Rich, Long Form Comments And Code Samples http://bit.ly/markdown_format
  31. 31. Use A Documentation Site Generator
  32. 32. http://bit.ly/yui_doc
  33. 33. 3. ANALYSE
  34. 34. Perform Static Code Analysis Regularly
  35. 35. http://jshint.com
  36. 36. Enforce Coding Rules
  37. 37. Peer Code Review
  38. 38. http://bit.ly/crucible_tool
  39. 39. 4. TEST
  40. 40. Write Unit Tests For Functions Don’t Forget Edge Cases
  41. 41. Logic DOM Unit Test Integration Test
  42. 42. http://bit.ly/jas_test
  43. 43. Run Unit Tests In Multiple Browsers Using BrowserStack, Sauce Labs, Or BrowserSwarm
  44. 44. http://browserstack.com
  45. 45. http://browserswarm.com
  46. 46. http://browserswarm.com
  47. 47. Don’t Forget Integration Testing e.g. Selenium
  48. 48. http://seleniumhq.org
  49. 49. 5. MEASURE
  50. 50. Code Compliance
  51. 51. Run Code Coverage Tools On Unit Tests e.g. Istanbul
  52. 52. http://bit.ly/istanbul_cover
  53. 53. Maury Halstead
  54. 54. http://bit.ly/halstead_complex
  55. 55. Measure Code Complexity With Plato
  56. 56. http://bit.ly/platojs
  57. 57. Compliance, Coverage, Complexity: Measure And Improve
  58. 58. 6. AUTOMATE
  59. 59. Use A Task Runner Auto-Generate Documentation, Analyse, Test And Measure Your Code
  60. 60. http://gulpjs.com http://gruntjs.com
  61. 61. 7. CATCH
  62. 62. Capture And Log Runtime Errors
  63. 63. Fix The Issues
  64. 64. Ensure Same Bug Never Arises
  65. 65. NO RISKS
  66. 66. CODE DOCUMENT ANALYSE TEST MEASURE AUTOMATE CATCH
  67. 67. SEVEN STEPS TO BETTER JAVASCRIPT

×