Stacks on Stacks
Ronak Raithatha
Software Engineer @ BoomTownROI
Week 1: Web Stack and NodeJS
Week 2: ExpressJS and API
Week 3: Frontend and AngularJS
Week 4: Mongo and Questions
At a minimum, a stack refers to a list of technologies/libraries/languages/operating systems required to the get a website up and running.
Examples:
DB
SERVER
CLIENT
Data?
DATA!!!
HTML, Javascript
Backend Logic
Php, ruby, python, Java, Javascript, etc.
Datastore
MySQL, MongoDB, PostgreSQL, etc.
Request
Generally JSON or XML payloads
Response
Generally JSON or XML, but can be pre-rendered HTML, PHTML, etc.
Client
Server
Architechture
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient to run as a web server.
Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
Source: https://nodejs.org/
V8 is Google's open source high-performance JavaScript engine, written in C++ and used in Google Chrome, the open source browser from Google
V8 compiles and executes JavaScript source code, handles memory allocation for objects, and garbage collects
Source: V8 Website
Other engines are:
Firefox: SpiderMonkey
Safari: Webkit
etc...
Event Driven Programming is a programming paradigm in which the flow of the program is determined by events triggered by an action that occur in the application.
Eg. Browser events firing function.
In
This is achieved just like in the browser, through callbacks and the event-loop.
Non-blocking I/O or Asynchronous js is a form of I/O that allows processing to continue without needing each command to complete.
Again, achieved by Javascript's native asynchronous abilities, callbacks and the event loop.
console.log("Hello World");
server.js
Async/Non-blocking code
console.log(1);
setTimeout(function(){
console.log(2);
}, 1000);
console.log(3);
Callbacks/EventDriven
setTimeout(function(){
console.log(2);
}, 1000);
WebServer
var http = require('http');
var server = http.createServer(function(request,response){
console.log("got a request");
response.write("Hi");
response.end();
});
server.listen(3000);
WebServer With Endpoints
var http= require('http');
var server = http.createServer(function(request,response){
if(request.url == '/'){
console.log("got a request");
response.write("Hi");
response.end();
return;
}
if(request.url == '/hello'){
console.log("got a request on /hello");
response.write("Hello");
response.end();
return;
}
});
server.listen(3000);
Node Package Manager
package.json
rm -rf node_modules && npm install
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for
Source: http://expressjs.com/
With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
Source: http://expressjs.com/
An API expresses a software component in terms of its operations, inputs, outputs, and underlying types.
An API defines functionalities that are independent of their respective implementations, which allows definitions and implementations to vary without compromising the interface.
A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together.
Describing libraries and classes, functions in those libraries
and classes, and the parameters and return types for those functions.
Documentation listing and describing each function in the library, the parameters it needs to perform those function and what it should return
Lists and describes all accessible endpoints for a given Representational State Transfer (REST) protocol implementation. Describes verbs and what body is required with those verbs.
URIs that execute desired code.
I.E Functions, but on the server. Where the function names are '/something/:id/something'
If the ENDPOINTS are the function name, the REQUEST BODY are like the parameters that we send to a function.
GET: Generally none, since you get everything.
POST: An object containing necessary information
PUT: An object containing information to be updated, and an id pointing to the object to update.
DELETE: An id to the object to delete.
Popular formats: JSON and XML
1XX: Hold on
2XX: Here you go
3XX: Go away
4XX: You messed up
5XX: I messed up
// Dependency Configuration
var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var morgan = require('morgan');
var methodOverride = require('method-override');
// Express Setup
var app = express();
// Middleware Setup
app.use(morgan("dev")); // Logs endpoint hit to console
app.use(bodyParser.json()); // Parses JSON in request body
app.use(methodOverride()); // Makes dealing with PUT and DELETE easier
// Data Setup
// This set is only for us, since we aren't using a database just yet.
var globalId = 2;
var todos = [{
"id":1,
"text": "Need to do this"
}];
//Start Server
app.listen(3000);
console.log("Up and running on port 3000");
// Data Setup
// ...
// Routes
// GET Endpoint
// This endpoint is triggered by hitting '/api/todos' with the GET verb.
// This endpoint return the array of todos
app.get('/api/todos', function(request, response){
// This function accepts request and response as parameters.
// These are supplied by Express and house important data and functions.
response.send(todos); // Is one way to return a request.
});
// Start Server
// ...
// GET Endpoint
// ...
// POST Endpoint
// This endpoint is triggered by hitting '/api/todos'
// with the POST verb, and passing data either in JSON or XML format
// This endpoint returns the array of todos with the new todo in it
app.post('/api/todos', function(request, response){
// The request parameter contains the data passed in the HTML request.
// It is accessed with request.body.<name of item passed>
// Create todo object like the todos schema above.
var todo = {
"id": globalId,
"text": request.body.text
};
// Add new todo to todos array
todos.push(todo);
// Increment Global Id in preparation for the next todo
globalId++;
// Send the todos array containing the new todo as the response.
response.send(todos);
});
// Start Server
// ...
// POST Endpoint
// ...
// PUT Endpoint
// This endpoint is triggered by hitting '/api/todos/:todo_id'
// with the PUT verb, and passing data either in JSON or XML format
// This endpoint will return a list of todos
// with the text in todos[todo_id] updated to what was passed in
app.put('/api/todos/:todo_id', function(request, response){
// Loop through the todos array to find the todo object being updated
for(var i=0; i<todos.length; i++){
// If the current todo's id matches the query parameter
if(todos[i].id == request.params.todo_id){
// update the text to what was sent in the body
todos[i].text = request.body.text;
// returns the updated list of todos
// The return is in the if statement so that the for loop doesn't
// run for longer than it needs to
response.send(todos);
}
};
});
// Start Server
// ...
// PUT Endpoint
// ...
// DELETE Endpoint
// This endpoint is triggered by hitting '/api/todos/:todo_id' with the DELETE verb
// This endpoint will return a list of todos with the todo at todos[todo_id] deleted
app.delete('/api/todos/:todo_id', function(request, response) {
// Loop through the todos array
for(var i=0; i<todos.length; i++){
// if the current todo's id matches the query parameter's
if(todos[i].id == request.params.todo_id){
// remove it from the array
todos.splice(i, 1);
// return the modified array
response.send(todos);
}
};
});
// Start Server
// ...
AngularJS is what HTML would have been, had it been designed for building web-apps.
Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great
testability story all implemented with pure client-side JavaScript!
Source: http://angularjs.org
Model-View-Controller
Models house the data
Views are the compiled HTML Templates
Controllers hold the application logic and drive changes between the view and model.
Synchronization between Model and View
Synchronization between Model and View
$scope:
<html>
<head>
<script src="../node_modules/angular/angular.min.js"></script>
</head>
<body ng-app>
<div>
<input type="text" ng-model="name" />
<h2>{{name}}</h2>
</div>
</body>
</html>
<html>
<head>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="todo">
<div ng-controller="mainCtrl">
<input type="text" ng-model="name" />
<h2>{{name}}</h2>
</div>
</body>
</html>
var app = angular.module('todo',[]);
app.controller('mainCtrl', function($scope){
$scope.name = "Default Name";
});
HTML
JS
MongoDB (from "humongous") is an open-source document database, and the leading NoSQL database.
MongoDB stores all data in documents, which are JSON-style data structures composed of field-and-value pairs