Understanding Node.js-to-AngularJS Stack Components

A brief summary into the Node.js-to-AngularJS Stack Components (Node.js, MongoDB, AngularJS, and Express).

Transcript

1. Understanding Node.js-to-AngularJS Stack Components By @karlhadwen
2. –Aaron Hillegass, Big Nerd Ranch “Before going any further, assure yourself that you are not stupid and that some things are hard. Armed with this simple affirmation and a well-rested mind, you are ready to conquer <whatever>”
3. What we’ll be going over • Web development fundamentals • Node.js-to-AngularJS stack • Starting with Node.js then MongoDB and eventually AngularJS • Main components of any web framework
4. Main components of any web development framework • The user • Browser • Web server • Backend services 
 Websites obviously differ in appearance
5. Browser • Provide communication to and from the web server • Interpret the data from the server and render the view • Handle user interaction • HTTP defines the type of requests
6. Browser-to-web server communication • Consists of requests, so Hypertext Transfer Protocol (HTTP) and HTTPS protocols • HTTP defines the type of requests can be made • HTTP also defines the format of those requests/response
7. Three main types of requests • GET: Typically used to retrieve data from the server • POST: Used to send data to the server by submitting a form • AJAX: Asynchronous JavaScript and XML (AJAX) is actually just GET or POST requests done directly by JavaScript in the browser
8. Asynchronous, what does it mean? Tasks can be done whilst Huell is still waiting!
9. Rendering the browser view • What the user sees; often made up of different pieces of data • Document Object Model (DOM) • DOM is a tree structure object
10. Browser interpretation/Backend services • Various type of data from multiple web server requests to build the web page • HTML/CSS/Client side scripts (JS) • Data such as XML, JSON • HTTP headers • Backend services • Web servers/services extended with server-side scripts (PHP, C, C++, C#, Java & many more) • Main focus: requests from browsers
11. Node.js-to-AngularJS stack • Node.js provides platform for development • Backend services and server-side scripts are all written in Node.js • MongoDB provides the data store • Web server is defined by Express (also a Node.js module)
12. Node.js-to-AngularJS controlled/views • The view is defined and controlled by the AngularJS framework • AngularJS is an MVC framework • Model is made up of JSON or JavaScript objects • View is HTML/CSS • Controller is AngularJS JavaScript code
13. Node.js-to-AngularJS stack
14. Node.js • Based on Google’s V8 JavaScript engine and executes it (V8: written in C++ and JavaScript) • Write all, or most of your server-side code in Node.js • Web server can run directly together in the same server side application
15. Why Node.js is a great framework • JavaScript end-to-end • Event-driven scalability • Extensibility • Fast implementation
16. MongoDB • Mongo comes from the word humongous • Agile and very stable NoSQL database • Based on NoSQL document store model • Data is stored in the database as JSON objects rather than the traditional columns and rows of a relational database • Provides highly extendable backend storage for high traffic websites
17. MongoDB driver library • We’ll be using the MongoDB driver library to access MongoDB from Node.js • Why MongoDB fits well into the Node.js stack: • High performance • Highly available • Highly scalable
18. Express • Web application framework that provides a set of features for web and mobile applications • Acts as the web server; runs inside Node.js • Implement a web server in Node.js with only a few lines of code • Easy setup of destination routes (URLs) • Functionality for HTTPS request and response objects, including things like cookies, caching and HTTP headers
19. Express valuable features • Route management • Error handling • Easy integration • Cookies • Sessions
20. AngularJS • Client side framework developed by Google • Provides all functionality needed to handle user input in the browser • Written in JavaScript, with a reduced jQuery library • Makes it easy to implement web application using the MVC framework • Other JavaScript frameworks could be used…
21. Benefits of AngularJS • Data binding: AngularJS has a very clean method for binding data to HTML elements • AngularJS forces you to write clean, logical code that is reusable • Support: Google have lots of money to spend • Compatibility: based on JavaScript, has a close relationship with jQuery • Will be covering AngularJS fully in the 3rd part of the tutorial series Is Huell still waiting?
22. Summary • Covered the basics of the web development framework • Covered the basic interaction between the web server and the browser, as well as functionality • In-depth summary of Node.js, MongoDB, AngularJS and Express • I’m on Twitter, Karl Hadwen: @karlhadwen