Upload
den-odell
View
1.471
Download
2
Tags:
Embed Size (px)
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
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