Full Stack JavaScript Learn Backbone.js, Node.js, and MongoDB — Second Edition — Azat Mardan
Full Stack JavaScript Learn Backbone.js, Node.js, and MongoDB Second Edition Azat Mardan
Full Stack JavaScript: Learn Backbone.js, Node.js, and MongoDB ISBN-13 (pbk): 978-1-4842-3717-5 ISBN-13 (electronic): 978-1-4842-3718-2 https://doi.org/10.1007/978-1-4842-3718-2 Library of Congress Control Number: 2018962263 Copyright © 2018 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. 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. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by eStudioCalamar Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@ springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail rights@apress.com, or visit http://www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484237175. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper Azat Mardan San Francisco, California, USA
To my parents, Almas and Alsu, who bought me my first computer, and let me use the phone line for dial-up Internet.
v Table of Contents Part I: Quick Start ������������������������������������������������������������������������1 Chapter 1: Basics����������������������������������������������������������������������������������3 Front-End Definitions ��������������������������������������������������������������������������������������������4 Web Request Cycle ������������������������������������������������������������������������������������������5 Mobile Development ����������������������������������������������������������������������������������������6 HyperText Markup Language ���������������������������������������������������������������������������8 Cascading Style Sheets ���������������������������������������������������������������������������������12 JavaScript ������������������������������������������������������������������������������������������������������14 Agile Methodologies ��������������������������������������������������������������������������������������������27 Scrum ������������������������������������������������������������������������������������������������������������27 Test-Driven Development ������������������������������������������������������������������������������29 Continuous Deployment and Integration �������������������������������������������������������29 Pair Programming������������������������������������������������������������������������������������������30 Back-End Definitions ������������������������������������������������������������������������������������������31 Node�js �����������������������������������������������������������������������������������������������������������31 NoSQL and MongoDB ������������������������������������������������������������������������������������33 Cloud Computing �������������������������������������������������������������������������������������������33 About the Author ���������������������������������������������������������������������������������xi Acknowledgments �����������������������������������������������������������������������������xiii Preface �����������������������������������������������������������������������������������������������xv Introduction ��������������������������������������������������������������������������������������xvii
vi HTTP Requests and Responses ���������������������������������������������������������������������34 RESTful API ����������������������������������������������������������������������������������������������������35 Summary�������������������������������������������������������������������������������������������������������������37 Chapter 2: Setup ���������������������������������������������������������������������������������39 Local Setup ���������������������������������������������������������������������������������������������������������40 Development Folder ��������������������������������������������������������������������������������������40 Browsers �������������������������������������������������������������������������������������������������������42 IDEs and Text Editors �������������������������������������������������������������������������������������43 Version Control Systems ��������������������������������������������������������������������������������45 Local HTTP Servers ���������������������������������������������������������������������������������������������46 Database: MongoDB ��������������������������������������������������������������������������������������47 Required Components �����������������������������������������������������������������������������������52 Node�js Installation ����������������������������������������������������������������������������������������52 Browser JavaScript Libraries ������������������������������������������������������������������������54 Less App ��������������������������������������������������������������������������������������������������������55 Cloud Setup ���������������������������������������������������������������������������������������������������������55 SSH Keys �������������������������������������������������������������������������������������������������������55 GitHub �����������������������������������������������������������������������������������������������������������������58 Microsoft Azure ���������������������������������������������������������������������������������������������������59 Heroku�����������������������������������������������������������������������������������������������������������������61 Summary�������������������������������������������������������������������������������������������������������������63 Part II: Front-End Prototyping����������������������������������������������������65 Chapter 3: Getting Data from Backend Using jQuery and Parse ���������67 Definitions �����������������������������������������������������������������������������������������������������������68 JavaScript Object Notation ����������������������������������������������������������������������������68 AJAX ��������������������������������������������������������������������������������������������������������������70 Cross-Domain Calls ���������������������������������������������������������������������������������������71 Table of ConTenTs
vii jQuery Functions �������������������������������������������������������������������������������������������������72 Bootstrap�������������������������������������������������������������������������������������������������������������74 Less ���������������������������������������������������������������������������������������������������������������������79 Less Variables ������������������������������������������������������������������������������������������������79 Less Mix-ins ��������������������������������������������������������������������������������������������������80 Less Operations ���������������������������������������������������������������������������������������������82 An Example Using a Third-Party API (OpenWeatherMap) and jQuery ������������������84 Parse �������������������������������������������������������������������������������������������������������������������96 Message Board with Parse Overview ���������������������������������������������������������������107 Message Board with Parse: REST API and jQuery Version ��������������������������109 Pushing to GitHub ����������������������������������������������������������������������������������������119 Deployment to Microsoft Azure �������������������������������������������������������������������������121 Deployment of Weather App to Heroku �������������������������������������������������������������122 Updating and Deleting Messages ���������������������������������������������������������������������125 Summary�����������������������������������������������������������������������������������������������������������126 Chapter 4: Intro to Backbone�js ��������������������������������������������������������127 Setting Up a Backbone�js App from Scratch �����������������������������������������������������128 Backbone�js Dependencies �������������������������������������������������������������������������������128 Working with Backbone�js Collections ��������������������������������������������������������������133 Backbone�js Event Binding ��������������������������������������������������������������������������������141 Backbone�js Views and Subviews with Underscore�js ��������������������������������������147 Refactoring Backbone�js Code ��������������������������������������������������������������������������159 AMD and Require�js for Backbone�js Development �������������������������������������������168 Require�js for Backbone�js Production ��������������������������������������������������������������179 Super Simple Backbone�js Starter Kit ���������������������������������������������������������������185 Summary�����������������������������������������������������������������������������������������������������������185 Table of ConTenTs
viii Chapter 5: Backbone�js and Parse ����������������������������������������������������187 Message Board with Parse: JavaScript SDK and Backbone�js Version �������������188 Taking Message Board Further �������������������������������������������������������������������������208 Summary�����������������������������������������������������������������������������������������������������������209 Part III: Back-End Prototyping �������������������������������������������������211 Chapter 6: Intro to Node�js����������������������������������������������������������������213 Building “Hello World” in Node�js ����������������������������������������������������������������������214 Node�js Core Modules ���������������������������������������������������������������������������������������216 http ��������������������������������������������������������������������������������������������������������������216 util ���������������������������������������������������������������������������������������������������������������217 querystring ��������������������������������������������������������������������������������������������������218 url ����������������������������������������������������������������������������������������������������������������218 fs������������������������������������������������������������������������������������������������������������������218 npm Node�js Package Manager ������������������������������������������������������������������������219 Deploying “Hello World” to PaaS �����������������������������������������������������������������������222 Deploying to Microsoft Azure ����������������������������������������������������������������������������222 Deploying to Heroku ������������������������������������������������������������������������������������������223 Message Board with Node�js: Memory Store Version ����������������������������������225 Unit Testing Node�js �������������������������������������������������������������������������������������225 Summary�����������������������������������������������������������������������������������������������������������237 Chapter 7: Intro to MongoDB ������������������������������������������������������������239 MongoDB Shell ��������������������������������������������������������������������������������������������������240 BSON Object ID �������������������������������������������������������������������������������������������������242 MongoDB Native Driver �������������������������������������������������������������������������������������243 MongoDB on Heroku: MongoLab �����������������������������������������������������������������������246 Message Board: MongoDB Version �������������������������������������������������������������������252 Summary�����������������������������������������������������������������������������������������������������������256 Table of ConTenTs
ix Chapter 8: Putting Frontend and Backend Together �������������������������257 Adding CORS for Different-Domain Deployment �����������������������������������������������258 Message Board UI ���������������������������������������������������������������������������������������������260 Message Board API �������������������������������������������������������������������������������������������268 Deployment to Heroku ��������������������������������������������������������������������������������������274 Same-Domain Deployment Server ��������������������������������������������������������������������275 Deployment to Amazon Web Services ���������������������������������������������������������������282 Summary�����������������������������������������������������������������������������������������������������������287 Chapter 9: Conclusion �����������������������������������������������������������������������289 Appendix: Further Reading ���������������������������������������������������������������291 Free JavaScript and Node Resources ���������������������������������������������������������������291 Good JavaScript Books �������������������������������������������������������������������������������������292 Good Node�js Books ������������������������������������������������������������������������������������������292 Interactive Online Classes and Courses ������������������������������������������������������������293 Startup Books and Blogs �����������������������������������������������������������������������������������293 Index �������������������������������������������������������������������������������������������������295 Table of ConTenTs
xi Azat Mardan has over 18 years of experience in web, mobile, and software development. With a Bachelor’s degree in Informatics and a Master of Science degree in Information Systems Technology, Azat possesses deep academic knowledge as well as extensive practical experience. Azat is an experienced software engineer, author, and educator. He has published 16 books and counting. Currently, Azat works as a Software Engineering Leader at Indeed.com, the number one job search site. Before Azat worked as a Technology Fellow at Capital One Financial Corporation, a top 10 USA bank. Even before that, Azat was a Team Lead at DocuSign, where his team rebuilt 50 million user products (DocuSign web app) using the tech stack of Node.js, Express.js, Backbone.js, CoffeeScript, Jade, Stylus, and Redis. Recently, he worked as a senior engineer at the curated social media news aggregator web site, Storify.com (now part of Adobe), which is used by BBC, NBC, CNN, the White House, and others. Storify runs everything on Node.js unlike other companies. It’s the maintainer of the open source library jade browser. Before that, Azat worked as a CTO/Cofounder at Gizmo—an enterprise cloud platform for mobile marketing campaigns, and has undertaken the prestigious 500 Startups business accelerator program. About the Author
xii Azat also has past experience developing mission-critical applications for government agencies in Washington, DC, including the National Institutes of Health, the National Center for Biotechnology Information, and the Federal Deposit Insurance Corporation, as well as for Lockheed Martin. Azat is a frequent attendee at Bay Area tech meet-ups and hackathons (AngelHack hackathon ’12 finalist with team FashionMetric.com, which went on to raise venture capital from Mark Cuban and TechStars). In addition, Azat teaches technical classes at General Assembly, Hack Reactor, pariSOMA, and Marakana (acquired by Twitter) to much acclaim. In his spare time, he writes about technology on his blog: Webapplog. com, which was a number one in “express.js tutorial” Google search results for some time. Azat is also the author of Pro Express.js, Practical Node.js, Node Program (http://nodeprogram.com/) 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: @azatmardan https://twitter.com/azatmardan - Azat loves getting “Hi” on Twitter LinkedIn: linkedin.com/in/azatm Blog: webapplog.com GitHub: github.com/azat-co/fullstack-javascript abouT The auThor
xiii 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. Thank you to the supporters of my Kickstarter campaign to write the second edition of this book and do so in the open on GitHub. Without you I probably would have not worked on this release so hard and maybe not worked at all. You are AWESOME because you made this new edition a reality and not only that but you have made this edition and previous edition available on GitHub for the entire world to read and learn Node which is the greatest technology for building web applications ever. In particular, very great many thanks to individual Kickstarter supporters (who will soon get the signed print books and other rewards or maybe already have them): Matthew Amacker, Jordan Horiuchi, Tim Chen, Alexey Bushnev, Aleksey Maksimov, Maurice van Cooten, Ryan, Ng Yao Min, Kommana Karteek, Elias Yousef, Arhuman, Javier Armendariz, Dave Anderson, Edithson Abelard. You guys are brilliant! I cannot not mention the biggest supporter DevelopIntelligence, which is one of the best if not the best tech training companies in the world (http://www.developintelligence.com). So if you need to train your software engineers in… anything! Then email them. Seriously, Develop Intelligence has been around for 10+ years, and they have great teachers with great technical classes. I was one of their instructors so I know. :) I’m grateful to my copy and content editors at Apress, specifically to James Markham, Louise Corrigan, Teresa Horton, and Karen Jameson. They accomplished an amazing feat by bringing this book to life in a span of a few weeks.
xiv 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. Once again, big thanks goes to Develop Intelligence who backed my effort to open source the manuscript of this book and allowed me to work in the open with early readers. I taught many corporate workshop on React, Node, cloud, and JavaScript to clients of Develop Intelligence. If you wants a world-class on-site tech training, go to developintelligence.com and book the class. aCknowledgmenTs
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 in 2014, Apress approached me wanting to publish an updated edition under a new title. I can't believe this is the second editon of the book. It's 2018 and a lot of thing changes. I am glad for the evolution of JavaScript and innovation in the Node.js space. 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
xvi 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 board this amazing technology with me. PrefaCe
xvii Introduction The kind of programming that C provides will probably remain similar absolutely or slowly decline in usage, but rela- tively, JavaScript or its variants, or XML, will continue to become more central. — Dennis Ritchie In this introduction, we cover: • Reasons behind full stack JavaScript development in general and for the writing of this book • What to expect and what not to expect, and what are the prerequisites • Suggestions on how to use the book and examples • Explanation of the book’s notation format Full Stack JavaScript is a hands-on book that introduces you to rapid software prototyping using the latest cutting-edge web and mobile technologies including Node.js, MongoDB, Twitter Bootstrap, LESS, jQuery, Parse.com, Heroku, and others. Why This Book? This book was borne out of frustration. I have been in software engineering for many years, and when I started learning Node.js and Backbone.js, I learned the hard way that their official documentation and the Internet lack good quick start guides and examples. Needless to say, it was virtually impossible to find all of the tutorials for JS-related modern technologies in one place.
xviii The best way to learn is to do, right? Therefore, I used the approach of small, simple examples (that is, quick start guides) to expose myself to the new cool tech. After I was done with the basic apps, I needed some references and organization. I started to write this manual mostly for myself, so I could understand the concepts better and refer to the samples later. Then StartupMonthly and I taught a few two-day intensive classes on the same subject—helping experienced developers to jump-start their careers with only-one-language development, that is, JavaScript. The manual we used was updated and iterated many times based on the feedback received. The end result is this book. Why Go Full Stack JavaScript? The reasons I love developing with full stack JavaScript, or as others call it universal or isomorphic JavaScript, are numerous: • Code reuse: I can share my libraries, templates, and models between the browser and the server. • No context switch: My brain learns and thinks faster, leaving me more time to work on the actual tasks at hand. • Great ecosystem: npm! • Vibrant community: They are approachable and eager to help. • Great masters: A treasure chest of knowledge and best practices has accumulated through the years of browser JavaScript. • Tons of tutorials and good books: JavaScript is the most popular language, hence more people are writing about it. InTroduCTIon
xix • No compilation: Development is faster with interpreted platforms. • Good performance: Node’s non-blocking I/O is fast. • Evolving standard: EMCA is constantly pushing new and better versions of JavaScript. I’m sure I’ve missed a few points, but you got the idea. Whatever the drawbacks of ES5 (the language most of us know as JavaScript) are, they were fixed in ES6/ES2015 and newer versions. The future for JavaScript is so bright we all will have to code with sunglasses on. What to Expect Full Stack JavaScript readers should expect a collection of quick start guides, tutorials, and suggestions (for example, 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 to 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 the Message Board application starting with front-end components. There are a few versions of these applications, but by the end of the book we’ll put the front end and back end together and deploy to the production environment. The Message Board application contains all of the necessary components typical for a basic web app, and building it will give you enough confidence to continue developing on your own, apply for a job/promotion, or build a startup! InTroduCTIon
xx Who This Book Is For The book is designed for advanced-beginner and intermediate-level web and mobile developers: somebody who has been (or still is) an expert in other languages like Ruby on Rails, PHP, Perl, Python, or/and Java. He/she is the type of developer, who quickly wants to learn more about JavaScript and Node.js-related techniques for building web and mobile application prototypes. The target reader doesn’t have time to dig through voluminous (or tiny, at the other extreme) official documentation. The goal of Full Stack JavaScript is not to make an expert out of a reader, but to help him/ her to start building apps as soon as possible. As the full title indicates, Full Stack JavaScript: Learn Backbone.js, Node. js and MongoDB is about turning your idea into a functional prototype in the form of a web or mobile application as fast as possible. This approach adheres to the Lean Startup methodology; therefore, this book would be more valuable to startup founders, but big companies’ employees will also find it useful, especially if they plan to add new skills to their resumes. What This Book Is Not Full Stack JavaScript is neither a comprehensive book on several frameworks, libraries, or technologies (or just a particular one), nor a reference for all the tips and tricks of web development. Examples similar to ones in this book might be publicly available online. More importantly, if you’re not familiar with fundamental programming concepts like loops, if/else statements, arrays, hashes, objects, and functions, you should be aware that you won’t find them covered in Full Stack JavaScript. Additionally, it would be challenging to follow the examples. Many volumes of great books have been written on fundamental topics — the list of such resources is at the end of the book in the chapter “Further Reading.” The purpose of Full Stack JavaScript is to give agile tools without replicating theory of programming and computer science. InTroduCTIon
xxi Prerequisites I recommend the following prerequisites to get the full advantage of the examples and materials covered in this book: • Knowledge of fundamental programming concepts such as objects, functions, data structures (arrays, hashes), loops (for, while), and conditions (if/else, switch) • Basic web development skills including, but not limited to, HTML and CSS • Using macOS or UNIX/Linux systems 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 • Access to the Internet • 5-20 hours of time • A credit/debit card, which is required by some cloud services even for free accounts How to Use the Book The digital version of this book comes in two formats: 1. PDF: Suited for printing; opens in Adobe Reader, Mac OS X Preview, iOS apps, and other PDF viewers. 2. mobi: Suited for Kindles of all generations as well as desktop and mobile Amazon Kindle apps and Amazon Cloud Reader; to copy to devices use Whispernet or a USB cable, or e-mail it to yourself. InTroduCTIon
Loading comments...
Reply to Comment
Edit Comment