MEAP Edition Manning Early Access Program Getting MEAN with Mongo, Express, Angular, and Node Version 2 Copyright 2013 Manning Publications For more information on this and other Manning titles go to www.manning.com ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> Welcome Thank you for purchasing the MEAP for Getting MEAN with Mongo, Express, Angular, and Node. I’m excited to see the book reach this stage and look forward to its continued development and eventual release. This is an intermediate book, designed for anyone with web-development experience – particularly with some exposure to JavaScript – who wants to learn how to be a full-stack developer or see how the whole MEAN stack fits together. I’ve strived to make the content both approachable and meaningful, and to explain not just how to do things with the MEAN stack but also why things are done the way they are. I feel it is important to know about each part of the MEAN stack and to have a quick refresher on the important and relevant parts of JavaScript before diving in to building an application. We’re releasing the first two chapters to start. Chapter 1 covers what full stack development means, and what it looks like using the MEAN stack. By the end of Chapter 1 you’ll have a good vision of how MongoDB, Express, AngularJS and Node.js work together to form the MEAN stack, understanding the role each part plays. Chapter 2 takes a look at the most important parts of JavaScript, showing some best practices and exploring some of the concepts that are central to developing on the MEAN stack. By the end of Chapter 2 you should be confident in your ability to use the key concepts of writing JavaScript, and understand why the best practices are considered best practices. Looking ahead, Part 2 of the book will cover building a responsive, data-driven web application using Node.js, Express and MongoDB, with a cast of supporting technologies. Part 3 will complete the MEAN stack by adding an AngularJS front-end to the application. As you’re reading, I hope you’ll take advantage of the Author Online forum. I’ll be reading your comments and responding, and your feedback is helpful in the development process. —Simon Holmes ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> brief contents PART 1: SETTING THE BASELINE 1 Introducing full stack development 2 Reintroducing JavaScript PART 2: BUILDING A NODE WEB APPLICATION 3 Creating and setting up a MEAN project 4 Developing a static site with Node.js and Express 5 Building a data model with MongoDB and Mongoose 6 Writing an API: Exposing your MongoDB database to the application 7 Using your API from inside your application 8 Logging in users with Facebook and Twitter PART 3: ADDING A DYNAMIC FRONT-END WITH ANGULARJS 9 Doing cool stuff with data in the browser 10 Changing pages without reloading APPENDIXES: Appendix A: Installing the stack Appendix B: Installing and preparing the supporting cast ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> 1 1 Introducing full stack development This chapter covers • The benefits of full stack development • An overview of the components making up the MEAN stack • What makes the MEAN stack so compelling • A preview of the application we’ll build throughout this book If you’re like me, then you’re probably impatient to dive into some code and get on with building something. But let’s take a moment first to clarify what we mean by “full stack development” and look at the component parts of the stack to make sure we’ve got everything covered. When we talk about “full stack development” we are really talking about developing all parts of a website or application. The full stack starts with the database and web-server in the back end, contains application logic and control in the middle and goes all the way through to the user interface at the front end. The MEAN stack is comprised of four main technologies, with a cast of supporting tech. The ‘M’, ‘E’, ‘A’ and ‘N’ are: • MongoDB – the database • Express – the web framework • AngularJS – the front-end framework • Node.js – the web server MongoDB has been around since 2007, and is actively maintained by MongoDB Inc – previously known as 10gen. ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> 2 Express was first released in 2009 by TJ Holowaychuk and has since become the most popular framework for Node.js. It is open-sourced with over 100 contributors and is actively developed and supported. AngularJS is open-source and backed by Google. It has been around since 2010 and is being constantly developed and extended. Node.js was created in 2009, and has it development and maintenance sponsored by Joyent. Node.js uses Google’s open-source V8 JavaScript engine at its core. 1.1 Why learn the full stack? So indeed, why learn the full stack? It sounds like an awful lot of work! Well yes, it is quite a lot of work, but it is also very rewarding. And with the MEAN stack it is not as hard as you might think. 1.1.1 A very brief history of web development Back in the early days of the web, people didn’t have high expectations of websites. Not much emphasis was given to presentation, it was much more about what was going on behind the scenes. Typically, if you knew something like Perl and could string together a bit of HTML, then you were a web developer. As usage of the Internet started to spread, businesses started to take more of an interest in how their online presence portrayed them. In combination with the increased browser support of CSS and JavaScript this desire started to lead to more complicated front-end implementations. It was no longer a case of being able to string HTML together, you needed to spend time on CSS and JavaScript, making sure it looked right and worked as expected. And all of this needed to work in different browsers, which were much less compliant than they are today. This is where the distinction between front-end developer and back-end developer came in. Figure 1.1 illustrates this separation over time. ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> 3 Figure 1.1 The divergence of front-end and back-end developers over time So while the back-end developers were focused on the mechanics behind the scenes, the front-end developers focused on building a good user experience. As time went on higher expectations were made of both camps encouraging this trend to continue. Developers often had to choose an expertise and focus on it. HELPING DEVELOPERS WITH LIBRARIES AND FRAMEWORKS During the 2000’s libraries and frameworks started to become popular and prevalent for the most common languages, on both the front-end and back-end. Think Dojo and jQuery for front-end JavaScript, CodeIgniter for PHP or Ruby on Rails. These frameworks were designed to make your life as a developer easier, lowering the barriers to entry. A good library or framework abstracts away some of the complexities of development, allowing you to code faster and requiring less in-depth expertise. This trend towards simplification has resulted in a resurgence of full-stack developers, who build both the front-end and the application logic behind it, as we can see in Figure 1.2. ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> 4 Figure 1.2 Impact of frameworks on the separated web development factions Figure 1.2 illustrates a trend rather than proclaiming a definitive “all web developers should be full-stack developers” maxim. There were of course full-stack developers throughout the entire time so far, and moving forward it is most likely that some developers will choose to specialize on either front-end or back-end development. The intention is to show that through the use of frameworks and modern tools that you no longer have to choose one side or the other to be a good web developer. A huge advantage of embracing the framework approach is that individuals can be incredibly productive, as they have an all-encompassing vision of the application and how it ties together. MOVING THE APPLICATION CODE FORWARD IN THE STACK Following on with the trend for frameworks, the last few years have seen an increasing tendency for moving the application logic away from the server and into the front-end. You can think of it as coding the back-end in the front-end. Some of the more popular JavaScript frameworks doing this are AngularJS, Backbone and Ember. Tightly coupling the application code to the front-end like this really starts to blur the lines between the traditional front-end developers and back-end developers. One of the reasons that people like to use this approach is that it reduces the load on your servers, thus reducing cost. What you are in effect doing is crowd-sourcing the computational power required for your application by pushing into the users’ browsers. We will discuss the pros and cons of this approach later in this book, and cover when it may or may not be appropriate to use one of these technologies. ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> 5 1.1.2 The trend toward full stack developers As we have seen, the paths of front-end developers and back-end developers are coming back together, and it is entirely possible to be fully proficient in both disciplines. If you are a freelancer, consultant or part of a small team being multi-skilled is extremely useful, increasing the value that you can provide for your clients. Being able to develop the full scope of a website or application gives you better overall control, and can help the different parts work seamlessly together as they have not been built in isolation by separate teams. If you work as part of a large team then the chances are that you will need to specialize in (or at least focus on) one area. It is, however, generally advisable to understand how your component fits with other components, giving you a greater appreciation of the requirements and goals of other teams and the overall project. In the end, building on the full stack by yourself is very rewarding. Each part comes with its own challenges and problems to solve, keeping things interesting. The technology and tools available to us today enhance this experience, and empower us to build great web applications relatively quickly and easily. 1.1.3 Why the MEAN stack specifically? The MEAN stack pulls together some of the ‘best of breed’ modern web technologies into a very powerful and flexible stack. One of the great things about the MEAN stack is that it not only uses JavaScript in the browser, it uses JavaScript throughout. Using the MEAN stack you code both the front-end and the back-end in the same language. The principle technology allowing this to happen is Node.js, bringing JavaScript to the back-end. 1.2 Introducing Node.js: the web server/platform Node.js is the ‘N’ in MEAN. Being last doesn’t mean that it is the least important - it is actually the foundation of the stack! In a nutshell, Node.js is a software platform that allows you to create your own webserver and build web applications on top of it. Node.js is not itself a webserver, nor is it a language. It contains a built-in HTTP server library, meaning that you don’t need to run a separate web server program such as Apache or IIS. This ultimately gives you greater control over how your web server works, but does increase the complexity of getting it up and running – particularly in a live environment. With PHP for example, you can easily find a shared-server webhost running Apache, send some files up over FTP and – all being well – your site is running. This works because the webhost has already configured Apache for you and others to use. With Node.js this is not the case, as you configure the Node.js server when you create the application. Many of the traditional webhosts are behind the curve on Node.js support, but a number of new ‘Platform as a Service’ hosts are springing up to address this need. These include Heroku, Nodejitsu and Modulus. The approach to deploying live sites on these is different to the old FTP model, ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]> 6 but is quite easy when you get the hang of it. We’ll be deploying a site live to Heroku as we go through the book. An alternative approach to hosting a Node.js application is to do it all yourself on a dedicated server onto which you can install anything you need. But production server administration is a whole other book! And while you could independently swap out any of the other components with an alternative technology, if you take Node.js out then everything that sits on top of it would change. 1.2.1 JavaScript: the single language through the stack One of the main reasons that Node.js is gaining broad popularity is that you code it in a language that most web developers are already familiar with – JavaScript. Up until now, if you wanted to be a full stack developer you had to be proficient in at least two languages – JavaScript on the front-end and something else like PHP or Ruby on the backend. Microsoft’s foray into server-side JavaScript In the late 1990’s Microsoft released Active Server Pages (now known as Classic ASP). ASP could be written in either VBScript or JavaScript, but the JavaScript version didn’t really take off. This is largely because, at the time, a lot of people were familiar with Visual Basic, which VBScript looks like. This leads to the majority of books and online resources were for VBScript, so it snowballed into becoming the ‘standard’ language for Classic ASP. Now, with the release of Node.js you can leverage what you already know and put it to use on the server. One of the hardest parts of learning a new technology like this is learning the language, but if you already know some JavaScript then you’re one step ahead already! There is of course a learning curve when taking on Node.js, even if you are an experienced front-end JavaScript developer. The challenges and obstacles in server-side programming are different to those in the front-end, but you’ll face those no matter what technology you use. In the front-end you might be concerned about making sure everything works in a variety of different browsers on different devices. On the server you are more likely to be aware of the flow of the code, to ensure that nothing gets held up and that you don’t waste system resources. 1.2.2 Fast, efficient and scalable Another reason for the popularity of Node.js, is that – when coded correctly – it is extremely fast and makes very efficient use of system resources. This enables a Node.js application to serve more users on fewer server resources than most of the other mainstream server technologies. So business owners also like the idea of Node.js as it can reduce their running costs, even at a large scale. ©Manning Publications Co. We welcome reader comments about anything in the manuscript - other than typos and other simple mistakes. These will be cleaned up during production of the book by copyeditors and proofreaders. http://www.manning-sandbox.com/forum.jspa?forumID=898 Licensed to Van Luu Dao <[email protected]>