Full Stack Javascript: Learn Backbone - JS, Node - Js and Mongodb Second Edition
Full Stack Javascript: Learn Backbone - JS, Node - Js and Mongodb Second Edition
Full Stack Javascript: Learn Backbone - JS, Node - Js and Mongodb Second Edition
JavaScript
Learn Backbone.js, Node.js
and MongoDB
Second Edition
Azat Mardan
Full Stack JavaScript: Learn Backbone.js, Node.js and MongoDB
Copyright © 2015 by Azat Mardan
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part
of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations,
recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission
or information storage and retrieval, electronic adaptation, computer software, or by similar or
dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are
brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for
the purpose of being entered and executed on a computer system, for exclusive use by the purchaser
of the work. Duplication of this publication or parts thereof is permitted only under the provisions
of the Copyright Law of the Publisher’s location, in its current version, and permission for use must
always be obtained from Springer. Permissions for use may be obtained through RightsLink at the
Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law.
ISBN-13 (pbk): 978-1-4842-1750-4
ISBN-13 (electronic): 978-1-4842-1751-1
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and
images only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they
are not identified as such, is not to be taken as an expression of opinion as to whether or not they are
subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal responsibility
for any errors or omissions that may be made. The publisher makes no warranty, express or implied,
with respect to the material contained herein.
■
■Chapter 1: Basics��������������������������������������������������������������������������� 1
■
■Chapter 2: Setup��������������������������������������������������������������������������� 21
■
■Chapter 3: jQuery and Parse.com������������������������������������������������� 43
■
■Chapter 4: Intro to Backbone.js���������������������������������������������������� 79
■
■Chapter 5: Backbone.js and Parse.com�������������������������������������� 121
■
■Chapter 6: Intro to Node.js��������������������������������������������������������� 137
■
■Chapter 7: Intro to MongoDB������������������������������������������������������ 155
■
■Chapter 8: Putting It All Together����������������������������������������������� 167
■
■Appendix A: Conclusion and Further Reading���������������������������� 187
Index���������������������������������������������������������������������������������������������� 193
v
Contents
■
■Chapter 1: Basics��������������������������������������������������������������������������� 1
Front-End Definitions������������������������������������������������������������������������������ 1
Web Request Cycle��������������������������������������������������������������������������������������������������� 2
Mobile Development������������������������������������������������������������������������������������������������� 3
HyperText Markup Language������������������������������������������������������������������������������������ 4
Cascading Style Sheets�������������������������������������������������������������������������������������������� 6
JavaScript����������������������������������������������������������������������������������������������������������������� 7
Agile Methodologies������������������������������������������������������������������������������ 13
Scrum��������������������������������������������������������������������������������������������������������������������� 13
Test-Driven Development��������������������������������������������������������������������������������������� 14
Continuous Deployment and Integration���������������������������������������������������������������� 14
Pair Programming��������������������������������������������������������������������������������������������������� 15
Back-End Definitions����������������������������������������������������������������������������� 15
Node.js�������������������������������������������������������������������������������������������������������������������� 15
NoSQL and MongoDB��������������������������������������������������������������������������������������������� 16
Cloud Computing���������������������������������������������������������������������������������������������������� 16
vii
■ Contents
Summary����������������������������������������������������������������������������������������������� 19
■
■Chapter 2: Setup��������������������������������������������������������������������������� 21
Local Setup������������������������������������������������������������������������������������������� 21
Development Folder����������������������������������������������������������������������������������������������� 22
Browsers���������������������������������������������������������������������������������������������������������������� 23
IDEs and Text Editors���������������������������������������������������������������������������������������������� 25
Version Control Systems����������������������������������������������������������������������������������������� 26
Cloud Setup������������������������������������������������������������������������������������������� 36
SSH Keys���������������������������������������������������������������������������������������������������������������� 36
GitHub��������������������������������������������������������������������������������������������������������������������� 37
Windows Azure������������������������������������������������������������������������������������������������������� 38
Heroku�������������������������������������������������������������������������������������������������������������������� 40
Summary����������������������������������������������������������������������������������������������� 41
■
■Chapter 3: jQuery and Parse.com������������������������������������������������� 43
Definitions��������������������������������������������������������������������������������������������� 44
JavaScript Object Notation������������������������������������������������������������������������������������� 44
AJAX����������������������������������������������������������������������������������������������������������������������� 45
Cross-Domain Calls������������������������������������������������������������������������������������������������ 45
jQuery Functions����������������������������������������������������������������������������������� 46
Twitter Bootstrap����������������������������������������������������������������������������������� 47
viii
■ Contents
LESS������������������������������������������������������������������������������������������������������ 50
LESS Variables�������������������������������������������������������������������������������������������������������� 51
LESS Mix-ins���������������������������������������������������������������������������������������������������������� 52
LESS Operations����������������������������������������������������������������������������������������������������� 53
ix
■ Contents
■
■Chapter 5: Backbone.js and Parse.com�������������������������������������� 121
Message Board with Parse.com: JavaScript SDK and
Backbone.js Version���������������������������������������������������������������������������� 121
Taking Message Board Further����������������������������������������������������������� 134
Summary��������������������������������������������������������������������������������������������� 135
■
■Chapter 6: Intro to Node.js��������������������������������������������������������� 137
Building “Hello World” in Node.js�������������������������������������������������������� 137
Node.js Core Modules�������������������������������������������������������������������������� 139
http����������������������������������������������������������������������������������������������������������������������� 139
util������������������������������������������������������������������������������������������������������������������������ 140
querystring����������������������������������������������������������������������������������������������������������� 140
url������������������������������������������������������������������������������������������������������������������������� 140
fs��������������������������������������������������������������������������������������������������������������������������� 140
npm Node Package Manager������������������������������������������������������������������������������� 141
x
■ Contents
■
■Chapter 8: Putting It All Together����������������������������������������������� 167
Adding CORS for Different Domain Deployment���������������������������������� 168
Message Board UI������������������������������������������������������������������������������� 169
Message Board API����������������������������������������������������������������������������� 174
Deployment to Heroku������������������������������������������������������������������������� 178
Same Domain Deployment Server������������������������������������������������������ 179
Deployment to Amazon Web Services������������������������������������������������� 182
Summary��������������������������������������������������������������������������������������������� 185
■
■Appendix A: Conclusion and Further Reading���������������������������� 187
Conclusion������������������������������������������������������������������������������������������� 187
Further Reading����������������������������������������������������������������������������������� 188
JavaScript Resources and Free E-Books�������������������������������������������������������������� 188
JavaScript Books�������������������������������������������������������������������������������������������������� 189
Node.js Resources and Free E-Books������������������������������������������������������������������� 190
Node.js Books������������������������������������������������������������������������������������������������������� 190
Interactive Online Classes and Courses��������������������������������������������������������������� 191
Startup Books and Blogs�������������������������������������������������������������������������������������� 191
Index���������������������������������������������������������������������������������������������� 193
xi
About the Author
xiii
■ About the Author
Azat is also the author of Pro Express.js, Practical Node.js and Node Program, and
others. Azat is the creator of open source Node.js projects, including ExpressWorks,
mongoui, and HackHall.
You can reach Azat and say hi using one of these methods:
Twitter: [@azat_co](https://twitter.com/azat_co) - Azat loves getting "Hi" on
Twitter
Facebook
Blog: webapplog.com
GitHub: github.com/azat-co/fullstack-javascript
Share on Twitter
Tweet “I’m starting FullStack JavaScript by @azat_co @Apress ” by opening this link
http://ctt.ec/he3Ug.
xiv
Acknowledgments
I would like to thank the team of early Node contributors bringing JavaScript to the
servers. Without them, the full stack JavaScript development wouldn’t be possible.
I’m grateful to my copy and content editors at Apress specifially to James Markham,
Mark Powers, Teresa Horton, and Karen Jameson. They accomplished an amazing feat by
bringing this book to life in a span of a few weeks.
Also, I’m grateful to the students of Hack Reactor, Marakana, pariSOMA, and General
Assembly where I taught and used early Full Stack JavaScript (or its parts) training
material.
xv
Preface
I’m writing this as I’m sitting at the San Francisco airport waiting for my flight to Portland,
Oregon, for the biggest Node.js conference. I’ll be speaking there about Node.js. It’s scary
and funny at the same time to think that I started to learn Node only three years ago. Yes,
I remember how I decided that the best way to learn is to teach others. For this reason
I started teaching my first Node classes and writing this book. The book was mostly for
me, so I could remember how to push Heroku or how to create Node servers that talk to
MongoDB. It was called Rapid Prototyping with JS back then. Three years sped away; I
published a few more Node books as well as released several Node apps in production;
and a few months ago Apress approached me wanting to publish an updated edition
under a new title.
The main reason I bet my time and energy on JavaScript and Node in the first place
is that I felt both intuitively and logically the potential of the full stack JavaScript. The one
language to rule the whole stack across all the layers. Logically I understood the code
reuse, expressiveness, and performance advantages of Node.js and the ever-increasing
importance of front-end development with MVC-like frameworks such as Backbone.
Intuitively, I just freaking fell in love with JavaScript both on the browser and on the
server.
Yes, I used JavaScript for many years but it was more pain than fun. Not anymore.
I was able to get a sense of what’s going on at the front end while at the same time getting
all the power and flexibility on the server. My brain started to think 5, maybe 10 times
faster than before because I started to remember all the obscure methods from Array or
String objects. I stopped having Mozilla Developer Network or Google open next to my
code editor. And what a relief when you don’t need to wait for the compiler each time that
you want to test something really quickly.
The airline crew announced my boarding. I need to get on the plane, but I hope this
easy, beginner-friendly manual will open the world of full stack JavaScript and cloud
computing. Jump on the train of this amazing technology with me.
xvii
Introduction
xix
■ Introduction
What to Expect
A typical reader of Full Stack JavaScript should expect a collection of quick start guides,
tutorials, and suggestions (e.g., Git workflow). There is a lot of coding and not much
theory. All the theory we cover is directly related to some of the practical aspects and is
essential for better understanding of technologies and specific approaches in dealing
with them, for example, JSONP and cross-domain calls.
In addition to coding examples, the book covers virtually all setup and deployment
step by step.
You’ll learn on the examples of Chat web/mobile applications starting with front-
end components. There are a few versions of these applications, but by the end we’ll put
front end and back end together and deploy to the production environment. The Chat
application contains all of the necessary components typical for a basic web app and
will give you enough confidence to continue developing on your own, apply for a job/
promotion, or build a startup!
xx
■ Introduction
Prerequisites
We recommend the following things to get the full advantage of the examples and
materials covered:
• Knowledge of the fundamental programming concepts such as
objects, functions, data structures (arrays, hashes), loops
(for, while), conditions (if/else, switch)
• Basic web development skills including, but not limited to,
HTML and CSS
• Mac OS X or UNIX/Linux systems are highly recommended
for this book’s examples and for web development in general,
although it’s still possible to hack your way on a Windows-based
system
xxi
■ Introduction
xxii
■ Introduction
Examples
All of the source code for examples used in this book is available in the book itself
for the most part, as well as at the book’s apress.com product page (www.apress.
com/9781484217504) and in a public GitHub repository (github.com/azat-co/fullstack-
javascript). You can also download files as a ZIP archive or use Git to pull them. More
on how to install and use Git will be covered later in the book. The source code files, folder
structure, and deployment files are supposed to work locally and/or remotely on PaaS
solutions, that is, Windows Azure and Heroku, with minor or no modifications.
Source code that is in the book is technically limited by the platform to the width
of about 70 characters. We tried our best to preserve the best JavaScript and HTML
formatting styles, but from time to time you might see backslashes (\). There is nothing
wrong with the code. Backslashes are line escape characters, and if you copy-paste the
code into the editor, the example should work just fine. Please note that code in GitHub
and in the book might differ in formatting.
xxiii
■ Introduction
Last, let me (and others) know if you spot any bugs, by submitting an issue to
GitHub! Please, don’t send me bugs in an e-mail, because a public forum like GH Issue
will help others, prevent duplicates, and keep everything organized.
Notation
This is what source code blocks look like:
Terms
For the purposes of this book, we’re using some terms interchangeably. Depending on
the context, they might not mean exactly the same thing. For example, function = method
= call, attribute = property = member = key, value = variable, object = hash = class,
list = array, framework = library = module.
Additionally, “full stack” is listed as fullstack within code snippets.
xxiv