Learning Web App Development: Build Quickly with Proven JavaScript Techniques

by Semmy Purewal

Overview

Grasp the fundamentals of web application development by building a simple database-backed app from scratch, using HTML, JavaScript, and other open source tools. Through hands-on tutorials, this practical guide shows inexperienced web app developers how to create a user interface, write a server, build client-server communication, and use a cloud-based service to deploy the application.

Each chapter includes practice problems, full examples, and mental models of the development workflow. Ideal for a college-level course, this book helps you get started with web app development by providing you with a solid grounding in the process.

• Set up a basic workflow with a text editor, version control system, and web browser
• Structure a user interface with HTML, and include styles with CSS
• Use JQuery and JavaScript to add interactivity to your application
• Link the client to the server with AJAX, JavaScript objects, and JSON
• Learn the basics of server-side programming with Node.js
• Store data outside your application with Redis and MongoDB
• Share your application by uploading it to the cloud with CloudFoundry
• Get basic tips for writing maintainable code on both client and server

Product Details

ISBN-13:	9781449370190
Publisher:	O'Reilly Media, Incorporated
Publication date:	03/10/2014
Pages:	303
Product dimensions:	7.00(w) x 9.10(h) x 0.70(d)

About the Author

Semmy Purewal spent about a decade teaching computer science and working as a freelance JavaScript consultant. During that time, he worked with a diverse group of clients that included startups, nonprofits, and research labs. These days, he primarily works as a software engineer in San Jose, CA.

Table of Contents

Preface xi

1 The Workflow 1

Text Editors 1

Installing Sublime Text 2

Sublime Text Basics 4

Version Control 6

Installing Git 7

Unix Command-Line Basics 8

Git Basics 12

Browsers 20

Installing Chrome 20

Summary 21

More Practice and Further Reading 21

Memorization 21

Sublime Text 22

Emacs and Vim 22

Unix Command Line 23

More About Git 23

GitHub 23

2 The Structure 25

Hello, HTML! 25

Tags Versus Content 26

Is for Paragraph 27

Comments 28

Headings and Anchors and Lists, Oh My! 29

Generalizations 32

The Document Object Model and Trees 33

Using HTML Validation to Identify Problems 35

Amazeriffic 38

Identifying Structure 39

Visualizing Structure with a Tree 41

Implementing the Structure with Our Workflow 42

Structuring the Main Content 46

Structuring the Footer 48

Summary 49

More Practice and Further Reading 49

Memorization 50

Tree Diagrams 50

Build the FAQ Page for Amazeriffic 51

More About HTML 51

3 The Style 53

Hello, CSS! 53

Rulesets 56

Comments 57

Padding, Border, and Margin 57

Selectors 60

Classes 61

Pseudoclasses 62

More Complex Selectors 63

Cascading Rules 64

Inheritance 65

Layouts with Floats 66

The clear Property 71

Working with Fonts 72

Resetting Browser Inconsistencies 76

Using CSS Lint to Identify Potential Problems 78

Interacting and Troubleshooting with the Chrome Developer Tools 80

Styling Amazeriffic 82

The Grid 86

Creating the Columns 90

Adding and Manipulating Fonts 92

A Few More Modifications 92

Summary 92

More Practice and Further Reading 93

Memorization 93

CSS Selectors Practice 93

Style the FAQ Page for Amazeriffic 94

Cascading Rules 95

Responsiveness and Responsive Libraries 95

4 The Interactivity 97

Hello, JavaScript! 97

Our First Interactive App 99

The Structure 100

The Style 102

The Interactivity 102

jQuery Generalizations 111

Setting Up a Project 111

Comments 112

Selectors 112

DOM Manipulation 112

Events and Asynchronicity 117

JavaScript Generalizations 120

Interacting with JavaScript in the Chrome JavaScript Console 120

Variables and Types 122

Functions 122

Selection 124

Iteration 125

Arrays 127

Using JSLint to Identify Potential Problems 128

Adding Interactivity to Amazeriffic 131

Getting Started 133

The Structure and Style 133

The Interactivity 134

Summary 140

More Practice and Further Reading 141

Memorization 141

jQuery Plug-ins 141

jQuery Selectors 142

FizzBuzz 143

Array Practice 143

Project Euler 146

Other JavaScript References 146

5 The Bridge 149

Hello, JavaScript Objects! 149

Representing Playing Cards 150

Generalizations 152

Communication Between Computers 154

JSON 154

AJAX 155

Accessing an External JSON File 155

Overcoming Browser Security Restrictions 156

The get JSON Function 157

A JSON Array 158

So What? 159

Getting Images from Flickr 160

Adding a Tags Feature to Amazeriffic 163

The map Function 165

Adding a Tags Tab 166

Building the UI 167

Creating an Intermediate Tags Data Structure 169

Tags as Part of Our Input 173

Summary 175

More Practice and Further Reading 176

Flickr Slideshow 176

Object Practice 177

Other APIs 180

6 The Server 181

Setting Up Your Environment 181

Installing VirtualBox and Vagrant 182

Building Your Virtual Machine 183

Connecting to Your Virtual Machine with SSH 184

Hello, Node.js! 186

Mental Models 187

Clients and Servers 187

Hosts and Guests 188

Practicalities 189

Hello, HTTP! 139

Modules and Express 191

Installing Express with NPM 192

Our First Express Server 192

Sending Your Client App 193

Generalizations 195

Counting Tweets 195

Getting Your Twitter Credentials 195

Connecting to the Twitter API 197

What's Happening Here? 198

Storing Counts 198

Modularizing Our Tweet Counter 201

Importing Our Module Into Express 201

Setting Up a Client 202

Creating a Server for Amazeriffic 204

Setting Up Our Directories 204

Initializing a Git Repository 204

Building the Server 204

Running the Server 205

Posting Information to the Server 205

Summary 208

More Practice and Further Reading 209

Installing Node.js Locally 209

JSHint and CSS Lint via NPM 209

Generalizing Our Tweet Counter Code 210

Poker API 212

7 The Data Store 215

NoSQL Versus SQL 215

Redis 216

Interacting with the Redis Command-Line Client 216

Installing the Redis Module via a package.json File 217

Interacting with Redis in Our Code 219

Initializing the Counts from the Redis Store 220

Using mget to Get Multiple Values 222

MongoDB 222

Interacting with the MongoDB Command-Line Client 223

Modeling Data with Mongoose 226

Storing Amazeriffic ToDos 229

Summary 230

More Practice and Further Reading 231

Poker API 231

Other Database References 231

8 The Platform 233

Cloud Foundry 233

Creating an Account 234

Getting Your App Ready for Deployment 234

Deploying Our App 235

Getting Information About Your Apps 237

Updating Your App 239

Deleting Apps from Cloud Foundry 240

Dependencies and package.json 240

Binding Redis to Your App 241

Binding MongoDB to Your App 245

Summary 246

More Practice and Further Reading 246

Poker API 246

Other Platforms 247

9 The Application 249

Refactoring Our Client 249

Generalizing Meaningful Concepts 250

AJAXifying Our Tabs 253

Ridding Ourselves of Hacks 254

Handling AJAX Errors 256

Refactoring Our Server 257

Code Organization 257

HTTP Verbs, CRUD, and REST 259

Setting Up Routes by ID 260

Using jQuery for put and delete Requests 261

HTTP Response Codes 262

Model-View-Controller 263

Adding Users to Amazeriffic 264

Building the User Model 264

Building the User Controller 265

Setting Up Routes 266

Improving Our ToDo Controller Actions 268

Summary 270

More Practice and Further Reading 271

Removing ToDos 271

Adding a User Admin Page 272

Views Using EJS and Jade 273

Build Another App 273

Ruby on Rails 273

Index 275