seven steps to better javascript

77
DEN ODELL AKQA #TECHINSIGHT TECHINSIGHT.IO Seven Steps To Better JavaScript

Upload: den-odell

Post on 20-May-2015

1.473 views

Category:

Technology


2 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Seven Steps To Better JavaScript

DEN ODELL AKQA

#TECHINSIGHT TECHINSIGHT.IO

Seven Steps To Better JavaScript

Page 2: Seven Steps To Better JavaScript

@DENODELL

this print for content only—size & color not accurate spine = 0.844" 440 page count

BOOKS FOR PROFESSIONALS BY PROFESSIONALS®

Pro JavaScript RIA Techniques: Best Practices, Performance, and PresentationDear 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

US $44.99

Shelve in Web Development

User level: Intermediate–Advanced

OdellPro JavaScript RIA Techniques

THE EXPERT’S VOICE® IN WEB DEVELOPMENT

ProJavaScript RIA TechniquesBest Practices, Performance, and Presentation

CYAN MAGENTA

YELLOW BLACK PANTONE 123 C

Den Odell

Companion eBook Available

www.apress.comSOURCE CODE ONLINE

Companion eBook

See last page for details

on $10 eBook version

Turn your JavaScript knowledge into beautiful, dynamic, and performance-tuned rich Internet applications

ISBN 978-1-4302-1934-7

9 781430 219347

54499

RELA

TED

TITL

ES

DEN ODELL HEAD OF WEB DEVELOPMENT, AKQA

Page 3: Seven Steps To Better JavaScript

JAVASCRIPT

Page 4: Seven Steps To Better JavaScript

2004

Page 5: Seven Steps To Better JavaScript

2004

Basic page manipulation

Form validation

Code to work around cross-browser differences

Page 6: Seven Steps To Better JavaScript

2014

Page 7: Seven Steps To Better JavaScript

2014Single 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

Page 8: Seven Steps To Better JavaScript

GREAT USER EXPERIENCE

Page 9: Seven Steps To Better JavaScript

ONE CHANCE

Page 10: Seven Steps To Better JavaScript

YouTube

Page 11: Seven Steps To Better JavaScript

YouTube

Page 12: Seven Steps To Better JavaScript

Google Maps

Page 13: Seven Steps To Better JavaScript

Google Maps

Page 14: Seven Steps To Better JavaScript

Instagram

Page 15: Seven Steps To Better JavaScript

Instagram

Page 16: Seven Steps To Better JavaScript

NO RISKS

Page 17: Seven Steps To Better JavaScript

SEVEN STEPS TO BETTER

JAVASCRIPT

Page 18: Seven Steps To Better JavaScript

1. CODE

Page 19: Seven Steps To Better JavaScript

Code Defensively

Page 20: Seven Steps To Better JavaScript

ECMAScript 5 Strict Mode

Page 21: Seven Steps To Better JavaScript
Page 22: Seven Steps To Better JavaScript

Use Well-Tested Libraries

And Frameworks

Page 23: Seven Steps To Better JavaScript

Module Design Pattern - Sandbox

Page 24: Seven Steps To Better JavaScript
Page 25: Seven Steps To Better JavaScript

Separate Business Logic And Data

From Layout Code

Page 26: Seven Steps To Better JavaScript

Improve Your UI With Web Sockets

Page 27: Seven Steps To Better JavaScript

Replace Nested Callbacks With

JavaScript Promises

Page 28: Seven Steps To Better JavaScript
Page 29: Seven Steps To Better JavaScript

http://promisesaplus.com

Page 30: Seven Steps To Better JavaScript

https://github.com/denodell

Page 31: Seven Steps To Better JavaScript

2. DOCUMENT

Page 32: Seven Steps To Better JavaScript

Use Structured Block Comments

e.g. YUIDoc, JSDoc

Page 33: Seven Steps To Better JavaScript
Page 34: Seven Steps To Better JavaScript

Use Markdown Format For Rich, Long

Form Comments And Code Samples

http://bit.ly/markdown_format

Page 35: Seven Steps To Better JavaScript
Page 36: Seven Steps To Better JavaScript

Use A Documentation Site Generator

Page 37: Seven Steps To Better JavaScript

http://bit.ly/yui_doc

Page 38: Seven Steps To Better JavaScript

3. ANALYSE

Page 39: Seven Steps To Better JavaScript

Perform Static Code Analysis Regularly

Page 40: Seven Steps To Better JavaScript

http://jshint.com

Page 41: Seven Steps To Better JavaScript

Enforce Coding Rules

Page 42: Seven Steps To Better JavaScript

Peer Code Review

Page 43: Seven Steps To Better JavaScript

http://bit.ly/crucible_tool

Page 44: Seven Steps To Better JavaScript

4. TEST

Page 45: Seven Steps To Better JavaScript

Write Unit Tests For Functions

Don’t Forget Edge Cases

Page 46: Seven Steps To Better JavaScript
Page 47: Seven Steps To Better JavaScript

Logic DOM

Unit Test Integration Test

Page 48: Seven Steps To Better JavaScript

http://bit.ly/jas_test

Page 49: Seven Steps To Better JavaScript

Run Unit Tests In Multiple Browsers

Using BrowserStack, Sauce Labs, Or

BrowserSwarm

Page 50: Seven Steps To Better JavaScript

http://browserstack.com

Page 51: Seven Steps To Better JavaScript

http://browserswarm.com

Page 52: Seven Steps To Better JavaScript

http://browserswarm.com

Page 53: Seven Steps To Better JavaScript

Don’t Forget Integration Testing

e.g. Selenium

Page 54: Seven Steps To Better JavaScript

http://seleniumhq.org

Page 55: Seven Steps To Better JavaScript

5. MEASURE

Page 56: Seven Steps To Better JavaScript

Code Compliance

Page 57: Seven Steps To Better JavaScript

Run Code Coverage Tools On Unit Tests

e.g. Istanbul

Page 58: Seven Steps To Better JavaScript

http://bit.ly/istanbul_cover

Page 59: Seven Steps To Better JavaScript

Maury Halstead

Page 60: Seven Steps To Better JavaScript

http://bit.ly/halstead_complex

Page 61: Seven Steps To Better JavaScript

Measure Code Complexity With Plato

Page 62: Seven Steps To Better JavaScript

http://bit.ly/platojs

Page 63: Seven Steps To Better JavaScript

Compliance, Coverage, Complexity:

Measure And Improve

Page 64: Seven Steps To Better JavaScript
Page 65: Seven Steps To Better JavaScript

6. AUTOMATE

Page 66: Seven Steps To Better JavaScript

Use A Task Runner

Auto-Generate Documentation,

Analyse, Test And Measure Your Code

Page 67: Seven Steps To Better JavaScript

http://gulpjs.com http://gruntjs.com

Page 68: Seven Steps To Better JavaScript
Page 69: Seven Steps To Better JavaScript
Page 70: Seven Steps To Better JavaScript

7. CATCH

Page 71: Seven Steps To Better JavaScript

Capture And Log Runtime Errors

Page 72: Seven Steps To Better JavaScript

Fix The Issues

Page 73: Seven Steps To Better JavaScript

Ensure Same Bug Never Arises

Page 74: Seven Steps To Better JavaScript
Page 75: Seven Steps To Better JavaScript

NO RISKS

Page 76: Seven Steps To Better JavaScript

CODE

DOCUMENT

ANALYSE

TEST

MEASURE

AUTOMATE

CATCH

Page 77: Seven Steps To Better JavaScript

SEVEN STEPS TO BETTER

JAVASCRIPT