JavaScript Programming
Pushing the Limits
Published on 12. August 2013
Book
Paperback/Softback
404 pages
978-1-118-52456-5 (ISBN)
Unfortunately, price unknown
Article exhausted; check different version
Description
Take your JavaScript knowledge as far as it can go
JavaScript has grown up, and it's a hot topic. Newer and faster JavaScript VMs and frameworks built upon them have increased the popularity of JavaScript for server-side web applications, and rich JS applications are being developed for mobile devices. This book delivers a compelling tutorial, showing you how to build a real-world app from the ground up. Experienced developers who want to master the latest techniques and redefine their skills will find this deep dive into JavaScript's hidden functionalities gives them the tools to create truly amazing and complex applications.
* JavaScript has evolved into much more than simple client-side scripting; this book delves into advanced topics not generally found in other more intermediate JS development books
* Expert author delivers an in-depth tutorial showing how to build a real-world app that is loosely coupled, with each component built to exist separately
* Explores how to build a backbone app, the importance of JavaScript templates, Node.js and MongoDB, 3D Canvas using WebGL / Three.js, how to convert a desktop app into a dedicated mobile app, and much more
* Ideal for experienced developers with a deep knowledge of JavaScript as well as online developers with strong graphic design skills who are experienced in HTML/CSS and want to develop their front-end skills
JavaScript Programming: Pushing the Limits will arm you with the skills to create killer apps for the 21st Century.
JavaScript has grown up, and it's a hot topic. Newer and faster JavaScript VMs and frameworks built upon them have increased the popularity of JavaScript for server-side web applications, and rich JS applications are being developed for mobile devices. This book delivers a compelling tutorial, showing you how to build a real-world app from the ground up. Experienced developers who want to master the latest techniques and redefine their skills will find this deep dive into JavaScript's hidden functionalities gives them the tools to create truly amazing and complex applications.
* JavaScript has evolved into much more than simple client-side scripting; this book delves into advanced topics not generally found in other more intermediate JS development books
* Expert author delivers an in-depth tutorial showing how to build a real-world app that is loosely coupled, with each component built to exist separately
* Explores how to build a backbone app, the importance of JavaScript templates, Node.js and MongoDB, 3D Canvas using WebGL / Three.js, how to convert a desktop app into a dedicated mobile app, and much more
* Ideal for experienced developers with a deep knowledge of JavaScript as well as online developers with strong graphic design skills who are experienced in HTML/CSS and want to develop their front-end skills
JavaScript Programming: Pushing the Limits will arm you with the skills to create killer apps for the 21st Century.
More details
Other editions
Additional editions
Person
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.
Content
About the Author vi
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
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