single page web applications

MANNING

Michael S. Mikowski

Josh C. Powell

FOREWORD BY Gregory D. Benson

JavaScript end-to-end

www.it-ebooks.info

Single Page Web Applications

www.it-ebooks.info

www.it-ebooks.info

Single Page Web

Applications

JAVASCRIPT END-TO-END

MICHAEL S. MIKOWSKI

JOSH C. POWELL

MANNING

Shelter Island

www.it-ebooks.info

For online information and ordering of this and other Manning books, please visit

www.manning.com. The publisher offers discounts on this book when ordered in quantity.

For more information, please contact

Special Sales Department

Manning Publications Co.

20 Baldwin Road

PO Box 261

Shelter Island, NY 11964

Email: [email protected]

©2014 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in

any form or by means electronic, mechanical, photocopying, or otherwise, without prior written

permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are

claimed as trademarks. Where those designations appear in the book, and Manning

Publications was aware of a trademark claim, the designations have been printed in initial caps

or all caps.

Recognizing the importance of preserving what has been written, it is Manning’s policy to have

the books we publish printed on acid-free paper, and we exert our best efforts to that end.

Recognizing also our responsibility to conserve the resources of our planet, Manning books are

printed on paper that is at least 15 percent recycled and processed without the use of elemental

chlorine.

Manning Publications Co. Development editor: Karen Miller

20 Baldwin Road Technical proofreader: John J. Ryan III

Shelter Island, NY 11964 Production editor: Janet Vail

Copyeditor: Benjamin Berg

Proofreader: Toma Mulligan

Typesetter: Gordan Salinovic

Cover designer: Marija Tudor

ISBN 9781617290756

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 – MAL – 18 17 16 15 14 13

www.it-ebooks.info

To my parents, wife, and children.

You have taught me so much, and I love you all.

—M.S.M.

To my wife, Marianne. Thank you for your extraordinary patience

with all the time I took writing the book. I love you.

—J.C.P.

www.it-ebooks.info

www.it-ebooks.info

vii

brief contents

PART 1 INTRODUCING SPAS . .......................................................1

1 ■ Our first single page application 3

2 ■ Reintroducing JavaScript 23

PART 2 THE SPA CLIENT ...........................................................59

3 ■ Develop the Shell 61

4 ■ Add feature modules 95

5 ■ Build the Model 139

6 ■ Finish the Model and Data modules 178

PART 3 THE SPA SERVER .........................................................227

7 ■ The web server 229

8 ■ The server database 265

9 ■ Readying our SPA for production 313

www.it-ebooks.info

www.it-ebooks.info

ix

contents

foreword xv

preface xvii

acknowledgments xviii

about this book xx

about the cover illlustration xxiv

PART 1 INTRODUCING SPAS ...............................................1

1 Our first single page application 3

1.1 Definition, a little history, and some focus 4

A little history 4 ■ What took JavaScript SPAs so long? 5

Our focus 8

1.2 Build our first SPA 9

Define the goal 9 ■ Start the file structure 10 ■ Set up Chrome

Developer Tools 10 ■ Develop the HTML and CSS 11 ■ Add

the JavaScript 12 ■ Inspect our application using Chrome

Developer Tools 17

1.3 The user benefits of a well-written SPA 20

1.4 Summary 21

www.it-ebooks.info

x CONTENTS

2 Reintroducing JavaScript 23

2.1 Variable scope 25

2.2 Variable hoisting 28

2.3 Advanced variable hoisting and the execution context

object 29

Hoisting 29 ■ Execution context and the execution context object 31

2.4 The scope chain 34

2.5 JavaScript objects and the prototype chain 37

The prototype chain 40

2.6 Functions—a deeper look 45

Functions and anonymous functions 45 ■ Self-executing anonymous

functions 46 ■ The module pattern—bringing private variables to

JavaScript 49vClosures 54

2.7 Summary 57

PART 2 THE SPA CLIENT..................................................59

3 Develop the Shell 61

3.1 Grok the Shell 62

3.2 Set up the files and namespaces 63

Create the file structure 63 ■ Write the application HTML 64

Create the root CSS namespace 65 ■ Create the root JavaScript

namespace 67

3.3 Create the feature containers 68

Pick a strategy 69 ■ Write the Shell HTML 69 ■ Write the Shell

CSS 70

3.4 Render the feature containers 72

Convert the HTML to JavaScript 72 ■ Add an HTML template to

our JavaScript 74 ■ Write the Shell stylesheet 75 ■ Direct the

application to use the Shell 77

3.5 Manage the feature containers 78

Write a method to extend or retract the chat slider 78 ■ Add the chat

slider click event handler 81

3.6 Manage application state 85

Understand the behavior browser users expect 85 ■ Pick a strategy

to manage history controls 85 ■ Change the anchor when a history

event occurs 86 ■ Use the anchor to drive the application state 88

3.7 Summary 94

www.it-ebooks.info

CONTENTS xi

4 Add feature modules 95

4.1 The feature module strategy 96

A comparison with third-party modules 97 ■ Feature modules and

fractal MVC pattern 99

4.2 Set up feature module files 101

Plan the file structure 101 ■ Populate the files 102 ■ What

we’ve wrought 107

4.3 Design method APIs 108

The anchor interface pattern 109 ■ Chat configuration

APIs 109 ■ The Chat initialization API 111 ■ The Chat

setSliderPosition API 112 ■ Configuration and initialization

cascade 112

4.4 Implement the feature API 114

The stylesheets 114 ■ Modify Chat 119 ■ Clean up the

Shell 125 ■ Walk through the execution 130

4.5 Add frequently needed methods 132

The removeSlider method 132 ■ The handleResize method 134

4.6 Summary 137

5 Build the Model 139

5.1 Understand the Model 140

What we’re going to build 141 ■ What the Model does 142

What the Model does not do 142

5.2 Set up the Model and other files 143

Plan the file structure 143 ■ Populate the files 145

Use the unified touch-mouse library 150

5.3 Design the people object 150

Design the person objects 151 ■ Design the people object API 153

Document the people object API 156

5.4 Build the people object 157

Create a fake people list 157 ■ Start the people object 159

Finish the people object 163 ■ Test the people object API 170

5.5 Enable sign-in and sign-out in the Shell 172

Design the user sign-in experience 173 ■ Update the Shell

JavaScript 173 ■ Update the Shell stylesheet 175 ■ Test sign-in

and sign-out using the UI 176

5.6 Summary 177

www.it-ebooks.info

xii CONTENTS

6 Finish the Model and Data modules 178

6.1 Design the chat object 179

Design methods and events 179 ■ Document the chat object API 182

6.2 Build the chat object 183

Start the chat object with the join method 183 ■ Update Fake to

respond to chat.join 185 ■ Test the chat.join method 187 ■ Add

messaging to the chat object 188 ■ Update Fake to emulate

messaging 193 ■ Test chat messaging 195

6.3 Add Avatar support to the Model 196

Add Avatar support to the chat object 196 ■ Modify Fake to

emulate avatars 198 ■ Test avatar support 199 ■ Test-driven

development 199

6.4 Complete the Chat feature module 201

Update the Chat JavaScript 202 ■ Update the stylesheets 209

Test the Chat UI 213

6.5 Create the Avatar feature module 214

Create the Avatar JavaScript 215 ■ Create the Avatar stylesheet 219

Update the Shell and the browser document 220 ■ Test the Avatar

feature module 221

6.6 Data binding and jQuery 222

6.7 Create the Data module 223

6.8 Summary 226

PART 3 THE SPA SERVER ...............................................227

7 The web server 229

7.1 The role of the server 229

Authentication and authorization 230 ■ Validation 230

Preservation and synchronization of data 231

7.2 Node.js 231

Why Node.js? 231 ■ Create ‘Hello World’ using Node.js 232

Install and use Connect 236 ■ Add Connect middleware 237

Install and use Express 237 ■ Add Express middleware 240

Use environments with Express 241 ■ Serving static files with

Express 242

7.3 Advanced routing 243

User CRUD routes 243 ■ Generic CRUD routing 249 ■ Place

routing in a separate Node.js module 251

www.it-ebooks.info

CONTENTS xiii

7.4 Adding authentication and authorization 255

Basic Authentication 256

7.5 Web sockets and Socket.IO 257

Simple Socket.IO 257 ■ Socket.IO and messaging servers 260

Updating JavaScript with Socket.IO 261

7.6 Summary 264

8 The server database 265

8.1 The role of the database 266

Select the data store 266 ■ Eliminate data transformations 266

Move the logic where you need it 267

8.2 An introduction to MongoDB 268

Document-oriented storage 268 ■ Dynamic document

structure 269 ■ Get started with MongoDB 270

8.3 Use the MongoDB driver 271

Prepare the project files 271 ■ Install and connect to MongoDB 272

Use MongoDB CRUD methods 274 ■ Add CRUD to the server

application 277

8.4 Validate client data 281

Validate the object type 281 ■ Validate the object 283

8.5 Create a separate CRUD module 290

Prepare the file structure 291 ■ Move CRUD into its own module 293

8.6 Build the Chat module 299

Start the chat module 299 ■ Create the adduser message handler 302

Create the updatechat message handler 306 ■ Create disconnect message

handlers 308 ■ Create the updateavatar message handler 309

8.7 Summary 312

9 Readying our SPA for production 313

9.1 Optimize our SPA for search engines 314

How Google crawls an SPA 314

9.2 The cloud and third-party services 317

Site analytics 317 ■ Logging client-side errors 319 ■ Content

delivery networks 321

9.3 Caching and cache busting 322

Caching opportunities 322 ■ Web storage 323 ■ HTTP

caching 324 ■ Server caching 327 ■ Database query caching 333

9.4 Summary 334

www.it-ebooks.info

xiv CONTENTS

appendix A JavaScript coding standard 335

A.1 Why we need a coding standard 335

A.2 Code layout and comments 336

Lay out your code for readability 336 ■ Comment to explain and

document 343

A.3 Variable names 345

Reduce and improve comments with a naming convention 346

Use naming guidelines 347 ■ Put the guidelines to use 354

A.4 Variable declaration and assignment 354

A.5 Functions 356

A.6 Namespaces 358

A.7 File names and layout 359

A.8 Syntax 360

Labels 360 ■ Statements 360 ■ Other syntax 363

A.9 Validating code 363

Install JSLint 364 ■ Configure JSLint 364 ■ Use JSLint 365

A.10 A template for modules 366

A.11 Summary 368

appendix B Testing an SPA 369

B.1 Set up test modes 370

B.2 Select a test framework 373

B.3 Set up nodeunit 374

B.4 Create the test suite 375

Get Node.js to load our modules 375 ■ Set up a single nodeunit

test 378 ■ Create our first real test 379 ■ Map the events and

tests 380 ■ Create the test suite 382

B.5 Adjust SPA modules for tests 392

B.6 Summary 395

index 397

www.it-ebooks.info