• +353-1-415-1241(GMT OFFICE HOURS)
  • 1-800-526-8630(US/CAN TOLL FREE)
  • 1-917-300-0470(EST OFFICE HOURS)
JavaScript Programming. Pushing the Limits - Product Image

JavaScript Programming. Pushing the Limits

  • Published: August 2013
  • Region: Global
  • 404 Pages
  • John Wiley and Sons Ltd

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 READ MORE >

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 Home
Page  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 Canvas322

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

Jon Raasch Jon Raasch Web Design.

Note: Product cover images may vary from those shown

RELATED PRODUCTS

Our Clients

Our clients' logos