JavaScript Application Design: A Build First Approach

by Nicolas Bevacqua

Overview

Summary

JavaScript Application Design: A Build First Approach introduces JavaScript developers to techniques that will improve the quality of their software as well as their web development workflow. You'll begin by learning how to establish build processes that are appropriate for JavaScript-driven development. Then, you'll walk through best practices for productive day-to-day development, like running tasks when your code changes, deploying applications with a single command, and monitoring the state of your application once it's in production.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Book

The fate of most applications is often sealed before a single line of code has been written. How is that possible? Simply, bad design assures bad results. Good design and effective processes are the foundation on which maintainable applications are built, scaled, and improved. For JavaScript developers, this means discovering the tooling, modern libraries, and architectural patterns that enable those improvements.

JavaScript Application Design: A Build First Approach introduces techniques to improve software quality and development workflow. You'll begin by learning how to establish processes designed to optimize the quality of your work. You'll execute tasks whenever your code changes, run tests on every commit, and deploy in an automated fashion. Then you'll focus on designing modular components and composing them together to build robust applications.

This book assumes readers understand the basics of JavaScript.

What's Inside

• Automated development, testing, and deployment processes
• JavaScript fundamentals and modularity best practices
• Modular, maintainable, and well-tested applications
• Master asynchronous flows, embrace MVC, and design a REST API

About the Author

Nicolas Bevacqua is a freelance developer with a focus on modular JavaScript, build processes, and sharp design. He maintains a blog at ponyfoo.com.

Table of Contents

Introduction to Build First
1. Composing build tasks and flows
2. Mastering environments and the development workflow
3. Release, deployment, and monitoring
Embracing modularity and dependency management
4. Understanding asynchronous flow control methods in JavaScript
5. Leveraging the Model-View-Controller
6. Testing JavaScript components
7. REST API design and layered service architectures

Product Details

ISBN-13:	9781617291951
Publisher:	Manning
Publication date:	02/16/2015
Edition description:	1st Edition
Pages:	344
Product dimensions:	7.30(w) x 9.20(h) x 0.90(d)

About the Author

Nicolas Bevacqua is a freelance developer with a focus on modular JavaScript, build processes, and sharp design.

Table of Contents

foreword xv

preface xvii

acknowledgments xix

about this book xxi

about the author xxv

about the cover illustration xxvi

Part 1 Build Processes 1

1 Introduction to Build First 3

1.1 When things go wrong 4

How to lose $172,222 a second for 45 minutes 5

Build First 5

Rites of initiation 6

1.2 Planning ahead with Build First 7

Core principles in Build First 7

1.3 Build processes 9

1.4 Handling application complexity and design 11

1.5 Diving into Build First 15

Keeping code quality in check 16

Lint in the command line 19

1.6 Summary 22

2 Composing build tasks and flows 23

2.1 Introducing Grunt 24

Installing Grunt 26

Setting up your first Grunt task 28

Using Grunt to manage the build process 29

2.2 Preprocessing and static asset optimization 31

Discussing preprocessing 31

Doing LESS 34

Bundling static assets 37

Static asset minification 38

Implementing image sprites 41

2.3 Setting up code integrity 43

Cleaning up your working directory 43

Lint, lint, lint! 44

Automating unit testing 45

2.4 Writing your first build task 46

2.5 Case study: database tasks 47

2.6 Summary 49

3 Mastering environments and the development workflow 50

3.1 Application environments 51

Configuring build distributions 51

Environment-level configuration 56

What's so special about development? 58

3.2 Configuring environments 58

Storing configuration in a waterfall 59

Using encryption to harden environment configuration security 61

Setting environment-level configuration at the OS level 62

Merging configuration as a waterfall in code 64

3.3 Automating tedious first-time setup tasks 65

3.4 Working in continuous development 66

Waste no time, use a watch! 66

Monitoring for changes to the Node app 67

A text editor that cares 69

Browser refresh is so Y2K 69

3.5 Summary 70

4 Release, deployment, and monitoring 71

4.1 Releasing your application 73

Image optimization 73

Static asset caching 75

Inlining critical above-the-fold CSS 77

Testing before a deployment 78

4.2 Predeployment operations 79

Semantic versioning 80

Using changelogs 81

Bumping changelogs 81

4.3 Deploying to Heroku 82

Deploying builds 85

Managing environments 85

4.4 Continuous integration 86

Hosted CI using Travis 86

Continuous deployments 88

4.5 Monitoring and diagnostics 89

Logging and notifications 89

Debugging Node applications 92

Adding performance analytics 93

Uptime and process management 94

4.6 Summary 95

Part 2 Managing Complexity 97

5 Embracing modularity and dependency management 99

5.1 Working with code encapsulation 101

Understanding the Single Responsibility Principle 101

Information hiding and in interfaces 104

Scoping and this keyword 106

Strict mode 109

Variable hoisting 110

5.2 JavaScript modules 111

Closures and the module pattern 111

Prototypal modularity 112

CommonJS modules 113

5.3 Using dependency management 114

Dependency graphs 114

Introducing RequireJS 117

Browserify: CJS in the browser 119

The Angular way 120

5.4 Understanding package management 122

Introducing Bower 122

Big libraries, small components 124

Choosing the right module system 125

Learning about circular dependencies 126

5.5 Harmony: a glimpse of ECMAScript 6 127

Traceur as a Grunt task 127

Modules in Harmony 128

Let there be block scope 129

5.6 Summary 129

6 Understanding asynchronous flow control methods in JavaScript 131

6.1 Using callbacks 132

Avoiding callback hell 133

Untangling the callback jumble 134

Requests upon requests 136

Asynchronous error handling 138

6.2 Using the async library 141

Waterfall, series, or parallel? 141

Asynchronous functional tasks 145

Asynchronous task queues 147

Flow composition and dynamic flows 147

6.3 Making Promises 150

Promise fundamentals 150

Chaining Promises 153

Controlling the flow 155

Handling rejected Promises 156

6.4 Understanding events 157

Events and the DOM 157

Creating your own event emitters 158

6.5 Glimpse of the future: ES6 generators 161

Creating your first generator 161

Asynchronicitx and generators 163

6.6 Summary 165

7 Leveraging the Model-View-Controller 166

7.1 jQuery isn't enough 167

7.2 Model-View-Controller in JavaScript 170

Why Backbone'? 170

Installing Backbone 172

Browserifying your Backbone module with Grunt 172

7.3 Introduction to Backbone 174

Backbone views 175

Creating Backbone models 177

Organizing-models with Backbone collections 179

Adding Backbone routers 180

7.4 Case study: the shopping list 183

Starting with a static shopping list 183

This time with remove buttons 185

Adding items to your cart 187

Using inline editing 191

A service layer and view routing 197

7.5 Backbone and Rendr: server/client shared rendering 199

Diving into Rendr 199

Understanding boilerplate, in Rendr 201

A simple Rendr application 203

7.6 Summary 210

8 Testing JavaScript components 211

8.1 JavaScript testing crash course 212

Logical units in isolation 212

Using the Test Anything Protocol (TAP) 213

Putting together our first unit test 214

Tape in the browser 214

Arrange, Act, Assert 215

Unit, testing 216

Convenience over convention 217

Case study: unit testing an event emitter 217

Testing the event emitter 218

Testing for the on method 219

Mocks, spies, and proxies 221

Mocking 222

Introducing Sin on.js 223

Spying on function calls 223

Proxying require calls 224

8.2 Testing in the browser 226

Faking XHR and server communication 227

Case study: testing DOM interaction 229

8.3 Case study: unit testing the MVC shopping list 238

Testing the view router 238

Testing validation on a view model 243

8.4 Automating Tape tests 245

Automating Tape tests for the browser 246

Continuous testing 247

8.5 Integration, visual, and performance testing 247

Integration testing 247

Visual testing 248

Performance testing 249

8.6 Summary 250

9 REST API design and layered service architectures 251

9.1 Avoiding API design pitfalls 252

9.2 Learning REST API design 253

Endpoints, HTTP verbs, and versioning 254

Requests, responses, and status codes 257

Paging, caching, and throttling 260

Documenting an API 263

9.3 Implementing layered service architectures 264

Routing Layer 265

Service layer 265

Data layer 265

Routing layer 266

Service layer 266

Data layer 267

9.4 Consuming a REST API on the client side 267

The request handling layer 268

Shooting down old requests 268

Consistent AJAX error management 269

9.5 Summary 271

appendix A Modules in Node.js 273

appendix B Introduction to Grunt 276

appendix C Picking your build tool 284

appendix D JavaScript code quality guide 293

index 307