Learning Web Application Development Semmy Purewal DEDICATION To my parents. Thanks for all of your support and encouragement over the years! Preface In early 2008, after about six years of grad school and teaching part-time, I found myself hoping to land a job as a full-time computer science professor. It didn’t take me long to realize that professor jobs are really hard to come by, and obtaining a good one has almost as much to do with luck as it has to do with anything else. So I did what any self-respecting academic does when faced with a scary academic job market: I decided to make myself employable by learning how to develop web applications. This may sound a little strange. After all, I had been studying computer science for about nine years at that point, and had been teaching students how to develop software for about six years. Shouldn’t I have already known how to build web applications? It turns out that there’s a pretty large gap between practical, everyday software engineering and programming as taught by computer science departments at colleges and universities. In fact, my knowledge of web development was limited to HTML and a little CSS that I had taught myself at the time. Fortunately, I had several friends who were actively working in the web development world, and most of them seemed to be talking about a (relatively) new framework called Ruby on Rails. It seemed like a good place to focus my efforts. So I purchased several books on the topic and started reading online tutorials to get up to speed. And after a couple months of really trying to get it, I nearly gave up. Why? Because most of the books and tutorials started out with the assumption that I had already been developing web apps for years! And even though I had a pretty solid background in computer programming, I found all of the material extremely terse and difficult to follow. For example, it turns out you can take an awful lot of computer science classes without ever coming across the Model- View-Controller design pattern, and some of the books assumed you understood that in the first chapter! Nevertheless, I managed to learn enough about web app development to get a Nevertheless, I managed to learn enough about web app development to get a few consulting gigs to support me until I managed to land a professor job. And through that, I realized I enjoyed the practical aspects of the field so much that I continued consulting outside of teaching. After a few years of doing both, I was offered the opportunity to teach my first class in Web Application Development at the University of North Carolina at Asheville. My initial inclination was to start with Ruby on Rails, but when I started reading the latest books and tutorials, I realized that they hadn’t improved much over the years. This isn’t to say that they aren’t good resources for people who already have a background in the basics, it’s just that they didn’t seem suitable for the students I was teaching. Sadly, but not surprisingly, the academic books on web development are far worse! Many of them contain outdated concepts and idioms, and don’t cover the topics in a way that make platforms like Ruby on Rails more accessible. I even reviewed one book that was updated in 2011 and still used table-based layouts and the <font> tag! I didn’t have much of a choice but to develop my course from scratch, creating all the material myself. I had done a little work in some consulting gigs with Node.js (server-side JavaScript) at the time, so I thought it would be interesting to try to teach a course that covered the same language on the client and server. Furthermore, I made it my goal to give the students enough background to launch into the self-study of Ruby on Rails if they decided to continue. This book consists largely of the material that I created while I was teaching this course at UNCA. It shows how to build a basic database-backed web application from scratch using JavaScript. This includes a basic web-development workflow (using a text editor and version control), the basics of client-side technologies (HTML, CSS, jQuery, JavaScript), the basics of server-side technologies (Node.js, HTTP, Databases), the basics of cloud deployment (Cloud Foundry), and some essential good code practices (functions, MVC, DRY). Along the way we’ll get to explore some of the fundamentals of the JavaScript language, how to program using arrays and objects, and the mental models that come along with this type of software development. Technology Choices For version control, I picked Git, because—well—it’s Git and it’s awesome. Plus, it gave my students the opportunity to learn to use GitHub, which is becoming immensely popular. Although I don’t cover GitHub in this book, it’s pretty easy to pick up once you get the hang of Git. I decided to use jQuery on the client because it’s still relatively popular and I enjoy working with it. I didn’t use any other frameworks on the client, although I do mention Twitter Bootstrap and Zurb Foundation in Chapter 3. I chose to stay away from modern client-side frameworks like Backbone or Ember, because I think they are confusing for people who are just starting out. Like Rails, however, you should be able to easily dive into them after reading this book. On the server-side, I chose Express because it’s (relatively) lightweight and unopinionated. I decided against covering client-and server-side templating, because I think it’s essential to learn to do things by hand first. I decided against relational databases because it seemed like I couldn’t give a meaningful overview of the topic in the time I allotted to that aspect of the course. Instead, I chose MongoDB because it is widely used in the Node.js community and uses JavaScript as a query language. I also just happen to really like Redis so I provided coverage of that as well. I selected Cloud Foundry as the deployment platform because it was the only one of the three that I considered (including Heroku and Nodejitsu) that offered a free trial and didn’t require a credit card to set up external services. That said, the differences between the platforms aren’t huge, and going from one to another shouldn’t be too hard. Is This Book for You? This book is not designed to make you a “ninja” or a “rock star” or even a particularly good computer programmer. It won’t prepare you for immediate employment, nor can I promise that it will show you “the right way” to do things. On the other hand, it will give you a solid foundation in the essential topics that you’ll need in order to understand how the pieces of a modern web app fit together, and it will provide a launching point to further study on the topic. If you work your way through this book, you’ll know everything that I wish I had known when I was first starting out with Rails. You’ll get the most out of this book if you have a little experience programming and no previous experience with web development. At minimum, you probably should have seen basic programming constructs like if-else statements, loops, variables, and data types. That said, I won’t assume that you have any experience with object-oriented programming, nor any particular programming language. You can obtain the necessary background by following tutorials on Khan Academy or Code Academy, or by taking a programming course at your local community college. In addition to being used for self-study, I hope that this book can serve as a textbook for community classes in web application development, or perhaps a one-semester (14-week) college-level course. Learning with This Book Developing web applications is definitely a skill that you’ll need to learn by doing. With that in mind, I’ve written this book to be read actively. What this means is that you’ll get the most out of it if you’re sitting at a computer while reading it, and if you actually type in all the examples. Of course, this particular approach is fraught with peril—there is a danger that the code examples will not work if you don’t type them exactly as they appear. To alleviate that risk, I’ve created a GitHub repository with all of the examples in this book in working order. You can view them on the Web at http://www.github.com/semmypurewal/LearningWebAppDev. Because the full examples live there, I try to avoid redundantly including full code listings throughout. In addition, I leave big portions of the projects open-ended. When I do that, it’s because I want you to try to finish them on your own. I encourage you to do that before looking at the full examples I’ve posted online. Every chapter concludes with a set of practice problems and pointers to more information, so I encourage you to complete those as well. Teaching with This Book When I teach this material in a 14-week class, I usually spend about 2–3 weeks on the material in the first three chapters, and 3–4 weeks on the material in the last three. That means I spend the majority of the time on the middle three chapters, which cover JavaScript programming, jQuery, AJAX, and Node.js. The students that I teach seem to struggle the most with arrays and objects, so I spend extra time on those because I think they are so essential to computer programming in general. I definitely cover things in a more computer-sciency way than most books on this topic, so it might be a good fit for a course in computer science programs. Specifically, I cover mental models such as trees and hierarchical systems, and I try to emphasize functional programming approaches where they make sense (although I try not to draw attention to this in the narrative). If you find yourself teaching in a computer science program, you might choose to focus more clearly on these aspects of the material. I currently have no plans to post solutions to the practice problems (although that may change if I get a lot of requests), so you can feel comfortable assigning them as homework and out-of-class projects. Where to Go for Help As mentioned before, there is a GitHub repository with all of the code samples contained in this book. In addition, you can check out http://learningwebappdev.com for errata and other updates as they are necessary. I also try to stay pretty accessible and would be glad to help if you need it. Feel free to tweet at me (@semmypurewal) with quick questions/comments, or email me any time ([email protected]) with longer questions. I also encourage you to use the “issues” feature of our GitHub repository to ask questions. I’ll do my best to respond as quickly as I can. General Comments on Code I’ve done my best to stay idiomatic and clear wherever possible. That said, those two goals are sometimes in conflict with each other. Therefore, there are times when I didn’t do things “the right way” for pedagogical reasons. I hope that those places are self-evident to experienced developers, and that they don’t cause any grief for novice developers in the long run. All of the code should work fine in modern web browsers, and I’ve tested everything in Chrome. Obviously, I can’t guarantee things will work in older versions of Internet Explorer. Please let me know if you find any browser compatibility issues in the Internet Explorer 10+ or modern versions of any other browser. For the most part, I’ve followed idiomatic JavaScript, but there are a few places I’ve strayed. For example, I preferred double quotes instead of single quotes for strings, primarily because I’ve been working under the assumption that students may be coming from a Java/C++ background. I choose to use quotes around property names in object literals so that JSON doesn’t look too different from JavaScript objects. I also use $ as the first character in variables that are pointing to jQuery objects. I find that it maintains clarity and makes the code a little more readable for novices. Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values determined by context. TIP This element signifies a tip or suggestion. NOTE This element signifies a general note. WARNING This element indicates a warning or caution. Using Code Examples Supplemental material (code examples, exercises, etc.) is available for download at http://www.github.com/semmypurewal/LearningWebAppDev. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD- ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book