This page is available at http://bit.ly/hackerschoolwebdev

While you are waiting, install the following:

  1. Sublime Text 3
  2. Google Chrome
  3. Node.js
  4. MongoDB

Some things

  • Facilitators
  • Getting help / Questions


Pre-requisites

  • HTML/CSS
  • Programming experience
  • Hopefully JavaScript

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

An oversimplified model

Simplified Server-side Model

MVC

JavaScript

In 10 minutes

JavaScript has nothing to do with Java!

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();

Node.js/Express

JavaScript on the Server-side

Node.js

  • A JavaScript Run-time
  • Favors async style

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);
});

Express

  • Super easy to get started with
  • MVC structure
  • Simplified route handling
  • Quickly write web applications

NPM

Node Package Manager

Installs all required libraries locally to your project directory

Let's try it out

Routes

Handling URL

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++){ %>
    
  • <%= posts[i].title %>
    • 
<% } %>

    Hands on!

    Static assets

    • All source code is hidden from the client
    • How about CSS/Image/JavaScript files?
    • Quick short cut to set up static directory

    MongoDB

    To database your app

    Mongoose

    • Allows us to abstract the direct MongoDB access
    • We can just define our data structure
    • And the framework sets everything up for us!

    Hands on!

    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

    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...

    Survey! bit.ly/expressjs201510