Express.js

We'll write a blog today.

The (Modern) Model of the Web
JavaScript
Node.js
Handling URLS
ejs
Static Assets
MongoDB
User Sessions

Model of The Web

Where everything fits in

An oversimplified model

JavaScript

In 10 minutes

Logging


console.log("anything", "any number of things");

Variables


var x = 5;
var str = "A string";
var a_bool = true;
var nothing = null;
var arr = [1,2,3,4];
var obj = {
    property: "An object attribute",
    numerical_property: 1
}
var any_arr = [1, "string", [1,2], {}];

C-like stuff


if(correct){
    doThis();
}else if(partially_correct){
    doThese();
}else{
    doThat();
}

switch(a){
    case 1:
    console.log("eh");
    break;
    default:
    console.log("er");
    break;
}

for(var i = 0; i < 10; i++){
    console.log(i);
}

Functions


function a_func(param1, param2){
    console.log(param1 + param2);
}

Functions are variables too!


var a_func = function(param){
    console.log("I am a function!", param);
}
var another_same_func = a_func;
a_func();
another_same_func();

Take a look at callbacks


function logThreeTimes(msg, callback){
    for(var i = 0; i < 3; i++){
        console.log(msg);
        callback();
    }
}

logThreeTimes("my message", function(){
    console.log("It just logged");
});

Async vs sync


// sync
content = readFile(file1)
doStuffWith(content)
// async
readFile(file1, function(content){
    doStuffWith(content);
});

Recap

GET /


app.get("/", function(req, res){
    res.send("hello");
});

GET /somepage


app.get("/somepage", function(req, res){
    res.send("this is some page");
});

GET /post/:id


app.get("/post/:id", function(req, res){
    res.send("This page has id of " +
        req.param.id);
});

ejs

JavaScript Templates


<html>
    <head>
        <title> <%= post.title %> </title>
    </head>
    <body>
        <article> <%= post.content %> </article>
    </body>
</html>

Why Templates?


"<html><head><title>" + post.title + </title></head></html>"

vs


<html>
    <head>
        <title> <%= post.title %> </title>
    </head>
</html>

Why Templates

HTML injection


"<div>" + post.someAttribute + "</div>"

What if


post.someAttribute = "</div><script>doEvil()</script>"

What is ejs like

<% (javascript/ ejs command) %>
<%= (javascript to string) %>
// the rest is just html

<% for (var i = 0; i < posts.length; i++){ %>
    <li><%= posts[i].title %></li>
<% } %>

Sessions

Remembering the User

The web is stateless

each request does not know of previous requests
independent transactions

We cheat with cookies

Hands on!

Recap

All the pieces

Client Browser

'/somepage'

Controller Express Routes

1

Model MongoDB

2

View ejs

HTML

All the pieces

Client Browser

GET, POST, DEL, PUT

Controller Express Routes

1

Model Mongoose

2

View ejs

HTML

Sessions

Static Assets CSS, JS, images

db driver

MongoDB

index.ejs

...

A few more things...

Ajax
Strategies
Markdown
koa.js
Isomorphic JavaScript

Some things

Pre-requisites

Express.js

Model of The Web

Where everything fits in

An oversimplified model

An oversimplified model

Simplified Server-side Model

MVC

JavaScript

In 10 minutes

JavaScript has nothing to do with Java!

Logging

Variables

C-like stuff

Functions

Functions are variables too!

Node.js/Express

JavaScript on the Server-side

Node.js

Take a look at callbacks

Async vs sync

Express

NPM

Node Package Manager

Let's try it out

Routes

Handling URL

Recap

ejs

JavaScript Templates

Why Templates?

Why Templates

What is ejs like

Hands on!

Static assets

MongoDB

To database your app

Mongoose

Hands on!

Sessions

Remembering the User

The web is stateless

We cheat with cookies

Hands on!

Recap

All the pieces

All the pieces

All the pieces

A few more things...

Survey! bit.ly/expressjs201510