JavaScript Programming Pushing the Limits Pushing the Limits Series

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.

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&mdash,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 &ldquo,this&rdquo, ,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 &ldquo,Sort By&rdquo, 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&rsquo,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&rsquo,s Transform Gestures ,282 Geolocation ,284 Finding the User&rsquo,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&rsquo,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

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.