MEAN Stack

View Github Repository Open presentation in a new window

grant

See all presentation from grant

MEAN Stack

0 0

MEAN-Stack-Slides

Slides for my MEAN Stack talk on 10/16

On Github grant / MEAN-Stack-Slides

MEAN Stack

DubHacks 10.16.2014

MEAN

  • MongoDB
  • Express
  • Angular
  • Node

I’m Grant.

  • CS, UW
  • Open web evangelist
  • @GrantTimmerman

DubHacks

On the menu

  • Node.js
  • Express.js
  • MongoDB
  • Live coding a web app

So, node.js?

  • It's just Javascript.
  • Server side JS on Google’s V8
  • Write scalable web apps
  • Single threaded
  • Everything is asynchronous
  • All I/O is non-blocking
Everything is asynchronous, don’t have to wait for slow IO or DB ops. All the libraries built for Node use non-blocking I/O. This is a really cool feature, which allows the single thread in Node to serve thousands of request per second. It even lets you run multiple servers in the same thread.

What can you do with node.js

  • JSON API's
  • Single page apps
  • Scalable web apps
  • Interact with filesystems
  • Data streaming
  • Heavy computations
  • General scripting

Who uses node.js

  • Google
  • Yahoo
  • PayPal
  • Uber
  • LinkedIn
  • AirBnb
  • A TON of startups

Projects, Applications, and Companies Using Node

Synchronous code

var data = readFromDatabase();
print(data);
doSomethingUnrelated();
Everything is blocked CPU cycles are wasted

Asynchronous code

readFromDatabase({
	print(data);
}
doSomethingUnrelated();
doSomethingUnrelated is called immediately print(data) will be called when done with reading (Almost) everything runs in parallel - Almost

What Node isn't

  • Full stack web framework
  • MVC framework
  • Pre-bundled with Database

Event loop

  • Code runs in an "event loop"
  • Stops only when no event listeners found
Explain with the weird hand movement. Wait for the request, do something. Repeat.

Hello world

cd p3/source/1/
node server.js

ExpressJS

  • Web application framework for node
  • Inspired by Sinatra (ruby)
  • Provides high-level API access to Node
  • npm install -g express
Talk about -g - globally and problem when move project to different computer. Projects come with binary (CLI tool), and express has one.

Hello world in ExpressJS

var express = require('express');

var app = express();

app.get('/hello.txt', function(req, res){
	res.send('Hello World');
});

app.listen(1337);
console.log('Listening on port 1337');

Connect Middleware

  • Middleware is basically a function which accepts request and response objects and a next function.
  • Connect is the heart of Express

express --help

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
    -V, --version       output the version number
    -s, --sessions      add session support
    -e, --ejs           add ejs engine support (defaults to jade)
    -J, --jshtml        add jshtml engine support (defaults to jade)
    -H, --hogan         add hogan.js engine support
    -c, --css   add stylesheet  support (less|stylus) (defaults to plain css)
    -f, --force         force on non-empty directory
					
express -s
(cd p3/source/2)
npm install
node app.js
Express CLI provides scaffolding. Provides sessions, CSS, templating etc. Walkthrough the project stub in 2-annotated.

MongoDB

  • NoSQL database
  • Well documented, huge community
  • Databases = Databases
  • Collections = Tables
  • Documents = Rows
  • Nested documents

NoSQL = no sql. Many different approaches.

A Document

{
    _id: 1234,
    author: { name: "Bob Davis", email : "bob@bob.com" },
    date: { $date: "2010-07-12 13:23UTC" },
    location: [ -121.2322, 42.1223222 ],
    comments: [
       { user: "jgs32@hotmail.com",
         upVotes: 22,
         downVotes: 14,
         text: "Great point! I agree" },
       { user: "holly.davidson@gmail.com",
         upVotes: 421,
         downVotes: 22,
         text: "You are a moron" }
    ]
}

Quickstart

mongod 	// start the mongo server
mongo 	// start the CLI
help 	// show help contents
show collections
use newdb 	// make the DB on the fly
show collections 	// show the collections in the DB
db.collection1.save({1: 'a', 2: 'b'});
db.collection1.find(); 	// return all documents
db.collection1.find({1: 'a'}); 	// search for documents

Mongoose

  • Mongoose extends native drivers to Node.js
  • Define your own schema (models) 
  • npm install mongoose

Ok so let's make something

Resources

http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js http://code.tutsplus.com/tutorials/build-a-complete-mvc-website-with-expressjs--net-34168 http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ http://howtonode.org/getting-started-with-express

That is all.

@GrantTimmerman

Questions?