Title Details

Jon Raasch (Portland, OR) is a front-end web developer and designer. He loves all things JavaScript, jQuery and UX and has been programming for the web since he was 14. Using modern programming techniques, he designs beautiful user interfaces that are dynamic and engaging without the loss of search engine spiderability. Fully integrating the overall message into intuitive web hallways where the design, development and branding work as one; he makes websites that are as accessible to users as they are to Googlebot. This well?rounded approach allows him to build websites that stick out amongst the crowd to become pillars in their online communities. He specializes in jQuery and JavaScript programming as well as CSS/HTML.

Dedication vii

About the Contributor ix

Acknowledgments x

Introduction 1

Part I Starting From a Firm Foundation 3

Chapter 1 Best Practices 5

Loose Coupling 5

Problems with Tight Coupling 5

Advantages of Loose Coupling 6

JavaScript MVCs and Templates 6

MVCs 7

Model 7

View 8

Controller 8

Putting It All Together 8

Templates 9

How to Use Templates 9

Why Use Templates 9

Development Tools 10

WebKit Developer Tools 10

Breakpoints 10

Watch Expressions 12

DOM Inspector 13

Network Panel 14

Keyboard Shortcuts 14

Weinre 15

Setting Up Weinre 15

Using Weinre 16

Version Control 17

CSS Preprocessing 17

Testing 17

Using Grunt 18

Building packagejson and Installing Grunt Plugins 19

Building the Gruntfile and Creating Tasks 19

Using QUnit 23

QUnit Basics 23

Digging into QUnit 24

Setting Up Your Own QUnit Tests 26

Summary 26

Additional Resources 27

Chapter 2 Libraries, Frameworks, and Plugins 29

Choosing the Right JavaScript Library 29

jQuery 30

Advantages of jQuery 30

jQuery Community 30

Including jQuery from a Universal CDN 31

Zepto 32

Advantages of Zepto 32

No IE Support 32

Vanilla DOM 33

Pros and Cons of Vanilla DOM 33

Adding Third-Party Utilities 35

Using a Framework 35

Bootstrap 35

jQuery UI 36

Mobile Frameworks 36

Miscellaneous Scripts 36

Modernizr 36

HTML5 Shiv 37

HTML5 Boilerplate 37

Finding jQuery Plugins 38

Where (and Where Not) to Look 38

What to Look for—A Ten-Point Inspection 38

Summary 40

Additional Resources 40

Part II Building the Front End 43

Chapter 3 Backbonejs 45

Getting Started with Backbone 45

What Is Backbone? 45

Why Should You Use Backbone? 46

Backbone Basics 46

When to Use Backbone 47

Setting Up Backbone 47

Models in Backbone 47

Creating a Model 48

Creating Computed Attributes 48

Setting Defaults 49

Using the Initialize Function 49

Using Backbone Events 50

Binding Events to Your Model 50

Tracking Model Changes 50

Validating Your Model 51

Working with Collections in Backbone 52

Creating a Collection 52

Creating Collection Events 52

Understading Backbone Views 53

Creating a View 53

Using Render Functions 54

Calling the Render Function 54

Rendering a Model 55

Best Worst Practices 56

Using the View Element in Backbone 56

Accessing the View Element 56

Referencing an Existing Element 57

Creating a New View Element 59

Using Nested Views in Backbone 59

Creating a View for Each List Item 60

Creating a Parent View for the List 60

Linking the Parent and Child Views 61

Tracking Changes in the Collection 63

Putting It All Together 64

Saving and Fetching Data 66

Syncing a Model on the Server 66

Saving the Model 66

Fetching from the Server 67

Providing Success and Error Callbacks 68

Request Types 69

Emulating HTTP and JSON 69

Using the LocalStorage API with Backbone 70

Saving a Collection on the Server 71

Fetching a Collection 71

Saving a Collection 72

Putting It All Together 76

Saving Collections in Bulk 77

Using Backbonesync 78

Working with Routers 79

How Routes Work 79

Setting Up Routers 80

Creating Routes 80

Setting Up the History API 80

Navigating 81

Setting Up Dynamic Routes 81

PushState versus Hashchange 82

Using PushState 82

Enabling Backward Compatibility with Modernizr 83

Best Practices for Using pushState 83

More About Events 84

Unbinding Events 84

Triggering Events Manually 85

Binding “this” 85

The All Event 86

Manipulating Collections 87

Pulling Collection Items 87

Pulling Collection Items by Index 87

Matching Certain Collection Items 88

Sorting a Collection 88

Using “Sort By” Functions 88

Creating Custom Sort Functions 88

Manually Triggering Sorting 90

Summary 90

Additional Resources 91

Chapter 4 Using JavaScript Templates 93

Introduction to Templates 93

Why Use Templates? 93

Separation of Concerns 93

Performance 93

Understanding the Different Template Libraries 94

Underscorejs 94

Handlebarsjs 95

Transparency 95

Micro Templating 95

Making the Right Choice 96

Using Underscore Templates 96

Underscore Template Basics 96

Using Templates 96

Interspersing Markup 97

Using Different Interpolation Strings 99

Reviewing Template Best Practices 99

Separating Your Templates 99

Using External Templates 100

External versus Inline 102

Using JavaScript in Templates 102

Basic If-Then Conditionals 102

Loops 103

Each Loop 104

Using Templates in Backbone 105

Setting Up the Model and View Without Templates 105

Rendering a View with Templates 106

Summary 109

Additional Resources 109

Chapter 5 Creating Forms 111

Understanding Progressive Enhancement 111

The Progressive Enhancement Approach 111

Why Progressive Enhancement? 111

Deciding Which Environments to Support 112

Letting HTML5 Do the Work for You 113

HTML5 Input Types 113

Widgets 113

Contextual Keyboards 117

Interactive Features 121

Placeholder Text 121

Autofocus 122

Validation 122

Using Polyfills for Older Browsers 125

Finding Third-Party Polyfills 125

Writing Your Own Polyfills 125

General Approach 125

Writing an Autofocus Polyfill 126

Writing a Placeholder Polyfill 128

Combining Polyfills and Widgets 133

Connecting to a REST API 134

Posting the Form 134

Setting Up a Universal Function 136

Forms in Backbone 137

Setting Up the Form Model 137

Setting Up the Form View 138

Saving Form Fields to the Model 139

Adding Validation 141

Cleaning Up the Template 145

Required Fields 146

Submitting the Form 149

Putting It All Together 151

Summary 155

Additional Resources 155

Part III Working with Server-Side JavaScript 157

Chapter 6 Intro to Nodejs 159

Why Node? 159

Using Node with Real-Time Apps 159

Understanding How Node Works 160

Using the V8 JavaScript Engine with Node 160

Coming to Node from the Front End 161

Installing Node 161

Mac/Linux Installation 161

Getting and Compiling the Source 162

Using a Package Installer 162

Using a Package Manager 162

Compiling with Xcode 45 163

Windows Installation 163

Building a Windows Install 163

Installing Without Building 163

Using a Package Installer 164

Checking Your Install 164

Getting Started with Node 164

Creating the Server 164

Adding the Content 165

Wrapping Things Up 165

Running the Script 166

Simplifying the Script 167

Using the Node REPL 168

REPL Features 168

Additional REPL Commands 169

Node Modules 170

Including Modules 170

External Modules and NPM 170

Installing Modules with NPM 170

Installing Modules Globally 171

Installing Dependencies 171

Finding Modules 172

Node Patterns 173

Modules and Global Variables 173

Creating Your Own Modules 173

Global Scope Among Modules 174

Using Exports 174

Asynchronous Patterns 177

Synchronous Calls 178

Nested Callbacks 178

Streams 179

Events 180

Child Processes 182

Using Child Processes 182

Passing Variables to a Child Process 183

Summary 184

Additional Resources 184

Chapter 7 Express Framework 187

Getting Started with Express 187

Installing Express 187

Creating an Express App 187

Setting Up Routes 188

Existing Routes 189

The Routes Directory 189

The Render Function 190

Creating Additional Routes 190

Post, Put, and Delete 191

Rendering Views 191

Enabling Underscore Templates 191

Jade Templates 191

Underscore Templates and uinexpress 192

Converting Jade Templates 192

Creating Views 193

The Homepage 194

The About Page 195

The Contact Page 196

The Layout Template 198

Handling Form Data 200

Creating a Post Route 200

Sending Feedback to the Template 202

Validation 202

Rendering Feedback in the Template 204

Passing New Variables to the Template 205

Sending an Email 207

Connecting to an SMTP Server 207

Building the Email Message 208

Sending the Email 208

Wrapping Up 209

Summary 211

Additional Resources 211

Chapter 8 MongoDB 213

What’s So Good About NoSQL? 213

Scalability 213

Simplicity 213

Getting Started with MongoDB 214

Installing MongoDB 214

Mac Installation 214

Ubuntu Installation 215

Windows Installation 215

Running MongoDB 216

Installing MongoDB Modules 217

Creating a Database 217

CRUD with MongoDB 217

Creating Collections 218

Adding a Collection 218

The Unique Identifier 219

Reading Data 220

Selecting All Entries in a Collection 221

Selecting Specific Entries 221

More Advanced Query Selectors 222

Limiting Entries 223

Sorting Entries 223

Updating Data 224

Updating an Entire Entry 224

Upserting 225

Setting a Particular Field 225

Find and Modify 226

Deleting Data 226

Removing Documents 226

Dropping Collections 227

Mongoose 228

Getting Started with Mongoose 228

Creating Models 229

Creating a Schema 229

Creating a Model 229

Saving the Model 230

Reading Data 231

Finding All Models 232

Finding Specific Models 233

Accessing Fields from a Model 234

Other Database Options 235

Summary 235

Additional Resources 235

Part IV Pushing the Limits 237

Chapter 9 Going Real-Time with WebSockets 239

How WebSockets Work 239

Problems with Polling 239

A Balancing Act 239

Enter Long Polling 240

The WebSockets Solution 240

Browser Support 240

Getting Started with SocketIO 241

SocketIO on the Server 241

SocketIO on the Client 242

Building a Real-Time Chat Room 244

Creating the Chat Room View 244

Submitting a Message to the Server 246

Handling the Message on the Server 247

Displaying the New Message on the Clients 248

Adding Structure with Backbonejs 250

Adding Scripts to Layouthtml 250

Models and Collections 250

Views 250

Attaching Backbone to the App 252

Adding Users 255

Adding a Timestamp 258

Persistence with MongoDB 260

Connecting to MongoDB 260

Saving Messages on MongoDB 261

Loading Messages from MongoDB 261

Closing the Connection 262

Wrapping Up 262

Summary 267

Additional Resources 268

Chapter 10 Going Mobile 269

Setting Up a Mobile App 269

Detecting Mobile 270

Finding User Agents 270

Discovering Orientation 270

Using Media Queries to Resolve Layout Issues 271

Styling a Mobile Site 271

Viewport Script 271

Another Viewport Script 272

Responsive Images Script 272

Mobile Frameworks 272

Touch Screen Integration 273

Basic Touch Events 273

Creating a Single Touch Event 273

Creating Multi-Touch Events 274

Complex Touch Gestures 274

Hammerjs Basics 274

Slideshow with Hammerjs 275

Hammerjs’s Transform Gestures 282

Geolocation 284

Finding the User’s Location 284

Connecting with Google Maps 285

Tracking Geolocation Changes 286

Phone Numbers and SMS 287

Static Phone Numbers and SMS Links 287

Dialing Phone Numbers and Texting with JavaScript 288

PhoneGap 289

Pros and Cons of PhoneGap 289

PhoneGap versus Native Code 289

Native Apps versus Web Apps 290

Getting Started with PhoneGap 290

Connecting with the Camera  290

Connecting with the Contact List 291

Other APIs 291

Summary 292

Additional Resources 292

Chapter 11 JavaScript Graphics 295

Canvas Basics 295

Drawing Basic Shapes 296

Animating the Canvas 298

Canvas Mouse Events 299

SVG Basics 300

Animating the SVG 301

SVG Mouse Events 301

Scripting SVG 302

Raphaëljs 302

Drawing Paths 303

Drawing Curves 304

Styling 305

Animation 307

Mouse Events 309

Charting with gRaphaël 309

Pie Charts 310

Bar Chart 311

Line Chart 314

3D Canvas with WebGL 316

Introducing Threejs 316

Setting Up the Scene 316

Adding a Camera 317

Adding a Mesh 318

Adding a Light 319

Rendering the Scene 319

Creating Texture with Images 320

Animating 3D Canvas 322

Adding Mouse Events 323

Using a 2D Canvas Fallback 324

3D Transforms in CSS 325

Summary 327

Additional Resources 328

Inspiration 328

Canvas 328

SVG 328

Raphaëljs 328

WebGL 328

Threejs 329

3D Transforms in CSS3 329

Chapter 12 Launching Your App  331

Performance Checklist 331

Where to Focus 331

Testing Performance 331

Repeated Code 332

Actual Versus Perceived Performance 333

Asset Management 333

Minification 334

Gzip Compression 334

Hosting 335

Animation Optimization 335

CSS3 Animation 335

Request Animation Frame 336

Doing Less 339

Avoiding Reflows 340

Deployment 341

Deploying Static Assets on a CDN 341

Advantages of CDNs 341

Disadvantages of CDNs 341

Deploying Node Server on EC2 341

The Launch 342

Additional Resources 342

Appendix A CSS Preprocessing with LESS 345

Introducing LESS 345

What’s So Good About Preprocessing? 345

Installing a LESS Compiler 346

Compiling on the Server 346

LESS Basics 346

Variables 347

Operators 347

Nesting 348

The & Symbol 349

Nesting and Variable Scope 350

Functions and Mixins 351

Functions 351

Mixins 351

Writing Mixins 351

Using Third-Party Mixins 352

File Structure 352

Using Imports 352

Example File Structure 353

Customizing the Structure 353

Summary 354

Additional Resources 354

Index 357