Seven Steps To Better JavaScript

Preview:

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.

Citation preview

DEN ODELL AKQA

#TECHINSIGHT TECHINSIGHT.IO

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

JAVASCRIPT

2004

2004

Basic page manipulation

Form validation

Code to work around cross-browser differences

2014

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

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

Recommended