JavaScript Programming

Function 54Rendering a Model 55Best Worst Practices 56Using the View Element in Backbone 56Accessing the View Element 56Referencing an Existing Element 57Creating a New View Element 59Using Nested Views in Backbone 59Creating a View for Each List Item 60Creating a Parent View for the List 60Linking the Parent and Child Views 61Tracking Changes in the Collection 63Putting It All Together 64Saving and Fetching Data 66Syncing a Model on the Server 66Saving the Model 66Fetching from the Server 67Providing Success and Error Callbacks 68Request Types 69Emulating HTTP and JSON 69Using the LocalStorage API with Backbone 70Saving a Collection on the Server 71Fetching a Collection 71Saving a Collection 72Putting It All Together 76Saving Collections in Bulk 77Using Backbonesync 78Working with Routers 79How Routes Work 79Setting Up Routers 80Creating Routes 80Setting Up the History API 80Navigating 81Setting Up Dynamic Routes 81PushState versus Hashchange 82Using PushState 82Enabling Backward Compatibility with Modernizr 83Best Practices for Using pushState 83More About Events 84Unbinding Events 84Triggering Events Manually 85Binding "this" 85The All Event 86Manipulating Collections 87Pulling Collection Items 87Pulling Collection Items by Index 87Matching Certain Collection Items 88Sorting a Collection 88Using "Sort By" Functions 88Creating Custom Sort Functions 88Manually Triggering Sorting 90Summary 90Additional Resources 91Chapter 4 Using JavaScript Templates 93Introduction to Templates 93Why Use Templates? 93Separation of Concerns 93Performance 93Understanding the Different Template Libraries 94Underscorejs 94Handlebarsjs 95Transparency 95Micro Templating 95Making the Right Choice 96Using Underscore Templates 96Underscore Template Basics 96Using Templates 96Interspersing Markup 97Using Different Interpolation Strings 99Reviewing Template Best Practices 99Separating Your Templates 99Using External Templates 100External versus Inline 102Using JavaScript in Templates 102Basic If-Then Conditionals 102Loops 103Each Loop 104Using Templates in Backbone 105Setting Up the Model and View Without Templates 105Rendering a View with Templates 106Summary 109Additional Resources 109Chapter 5 Creating Forms 111Understanding Progressive Enhancement 111The Progressive Enhancement Approach 111Why Progressive Enhancement? 111Deciding Which Environments to Support 112Letting HTML5 Do the Work for You 113HTML5 Input Types 113Widgets 113Contextual Keyboards 117Interactive Features 121Placeholder Text 121Autofocus 122Validation 122Using Polyfills for Older Browsers 125Finding Third-Party Polyfills 125Writing Your Own Polyfills 125General Approach 125Writing an Autofocus Polyfill 126Writing a Placeholder Polyfill 128Combining Polyfills and Widgets 133Connecting to a REST API 134Posting the Form 134Setting Up a Universal Function 136Forms in Backbone 137Setting Up the Form Model 137Setting Up the Form View 138Saving Form Fields to the Model 139Adding Validation 141Cleaning Up the Template 145Required Fields 146Submitting the Form 149Putting It All Together 151Summary 155Additional Resources 155Part III Working with Server-Side JavaScript 157Chapter 6 Intro to Nodejs 159Why Node? 159Using Node with Real-Time Apps 159Understanding How Node Works 160Using the V8 JavaScript Engine with Node 160Coming to Node from the Front End 161Installing Node 161Mac/Linux Installation 161Getting and Compiling the Source 162Using a Package Installer 162Using a Package Manager 162Compiling with Xcode 45 163Windows Installation 163Building a Windows Install 163Installing Without Building 163Using a Package Installer 164Checking Your Install 164Getting Started with Node 164Creating the Server 164Adding the Content 165Wrapping Things Up 165Running the Script 166Simplifying the Script 167Using the Node REPL 168REPL Features 168Additional REPL Commands 169Node Modules 170Including Modules 170External Modules and NPM 170Installing Modules with NPM 170Installing Modules Globally 171Installing Dependencies 171Finding Modules 172Node Patterns 173Modules and Global Variables 173Creating Your Own Modules 173Global Scope Among Modules 174Using Exports 174Asynchronous Patterns 177Synchronous Calls 178Nested Callbacks 178Streams 179Events 180Child Processes 182Using Child Processes 182Passing Variables to a Child Process 183Summary 184Additional Resources 184Chapter 7 Express Framework 187Getting Started with Express 187Installing Express 187Creating an Express App 187Setting Up Routes 188Existing Routes 189The Routes Directory 189The Render Function 190Creating Additional Routes 190Post, Put, and Delete 191Rendering Views 191Enabling Underscore Templates 191Jade Templates 191Underscore Templates and uinexpress 192Converting Jade Templates 192Creating Views 193The Homepage 194The About Page 195The Contact Page 196The Layout Template 198Handling Form Data 200Creating a Post Route 200Sending Feedback to the Template 202Validation 202Rendering Feedback in the Template 204Passing New Variables to the Template 205Sending an Email 207Connecting to an SMTP Server 207Building the Email Message 208Sending the Email 208Wrapping Up 209Summary 211Additional Resources 211Chapter 8 MongoDB 213What's So Good About NoSQL? 213Scalability 213Simplicity 213Getting Started with MongoDB 214Installing MongoDB 214Mac Installation 214Ubuntu Installation 215Windows Installation 215Running MongoDB 216Installing MongoDB Modules 217Creating a Database 217CRUD with MongoDB 217Creating Collections 218Adding a Collection 218The Unique Identifier 219Reading Data 220Selecting All Entries in a Collection 221Selecting Specific Entries 221More Advanced Query Selectors 222Limiting Entries 223Sorting Entries 223Updating Data 224Updating an Entire Entry 224Upserting 225Setting a Particular Field 225Find and Modify 226Deleting Data 226Removing Documents 226Dropping Collections 227Mongoose 228Getting Started with Mongoose 228Creating Models 229Creating a Schema 229Creating a Model 229Saving the Model 230Reading Data 231Finding All Models 232Finding Specific Models 233Accessing Fields from a Model 234Other Database Options 235Summary 235Additional Resources 235Part IV Pushing the Limits 237Chapter 9 Going Real-Time with WebSockets 239How WebSockets Work 239Problems with Polling 239A Balancing Act 239Enter Long Polling 240The WebSockets Solution 240Browser Support 240Getting Started with SocketIO 241SocketIO on the Server 241SocketIO on the Client 242Building a Real-Time Chat Room 244Creating the Chat Room View 244Submitting a Message to the Server 246Handling the Message on the Server 247Displaying the New Message on the Clients 248Adding Structure with Backbonejs 250Adding Scripts to Layouthtml 250Models and Collections 250Views 250Attaching Backbone to the App 252Adding Users 255Adding a Timestamp 258Persistence with MongoDB 260Connecting to MongoDB 260Saving Messages on MongoDB 261Loading Messages from MongoDB 261Closing the Connection 262Wrapping Up 262Summary 267Additional Resources 268Chapter 10 Going Mobile 269Setting Up a Mobile App 269Detecting Mobile 270Finding User Agents 270Discovering Orientation 270Using Media Queries to Resolve Layout Issues 271Styling a Mobile Site 271Viewport Script 271Another Viewport Script 272Responsive Images Script 272Mobile Frameworks 272Touch Screen Integration 273Basic Touch Events 273Creating a Single Touch Event 273Creating Multi-Touch Events 274Complex Touch Gestures 274Hammerjs Basics 274Slideshow with Hammerjs 275Hammerjs's Transform Gestures 282Geolocation 284Finding the User's Location 284Connecting with Google Maps 285Tracking Geolocation Changes 286Phone Numbers and SMS 287Static Phone Numbers and SMS Links 287Dialing Phone Numbers and Texting with JavaScript 288PhoneGap 289Pros and Cons of PhoneGap 289PhoneGap versus Native Code 289Native Apps versus Web Apps 290Getting Started with PhoneGap 290Connecting with the Camera 290Connecting with the Contact List 291Other APIs 291Summary 292Additional Resources 292Chapter 11 JavaScript Graphics 295Canvas Basics 295Drawing Basic Shapes 296Animating the Canvas 298Canvas Mouse Events 299SVG Basics 300Animating the SVG 301SVG Mouse Events 301Scripting SVG 302Raphaëljs 302Drawing Paths 303Drawing Curves 304Styling 305Animation 307Mouse Events 309Charting with gRaphaël 309Pie Charts 310Bar Chart 311Line Chart 3143D Canvas with WebGL 316Introducing Threejs 316Setting Up the Scene 316Adding a Camera 317Adding a Mesh 318Adding a Light 319Rendering the Scene 319Creating Texture with Images 320Animating 3D Canvas 322Adding Mouse Events 323Using a 2D Canvas Fallback 3243D Transforms in CSS 325Summary 327Additional Resources 328Inspiration 328Canvas 328SVG 328Raphaëljs 328WebGL 328Threejs 3293D Transforms in CSS3 329Chapter 12 Launching Your App 331Performance Checklist 331Where to Focus 331Testing Performance 331Repeated Code 332Actual Versus Perceived Performance 333Asset Management 333Minification 334Gzip Compression 334Hosting 335Animation Optimization 335CSS3 Animation 335Request Animation Frame 336Doing Less 339Avoiding Reflows 340Deployment 341Deploying Static Assets on a CDN 341Advantages of CDNs 341Disadvantages of CDNs 341Deploying Node Server on EC2 341The Launch 342Additional Resources 342Appendix A CSS Preprocessing with LESS 345Introducing LESS 345What's So Good About Preprocessing? 345Installing a LESS Compiler 346Compiling on the Server 346LESS Basics 346Variables 347Operators 347Nesting 348The & Symbol 349Nesting and Variable Scope 350Functions and Mixins 351Functions 351Mixins 351Writing Mixins 351Using Third-Party Mixins 352File Structure 352Using Imports 352Example File Structure 353Customizing the Structure 353Summary 354Additional Resources 354Index 357