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 Un.