PG6300-14 webutvikling og api-design

 

02: API, Node.js (+ NPM), Express <3 Angular

Webutvikling

Api-design

  • (HTTP) GET /users
     
  • (HTTP) GET /users/theneva

Pensum

$19.24 for Kindle edition @ Amazon

(kan leses online)

 

Tar et par timer å bla gjennom

(eller en uke å løse oppgavene til)

 

Lenes tungt på

 

Det er under 150 kroner

Pls read it

== operator

http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons

Chrome DevTools

JSON er gyldig javascript

var someLanguage = { "name": "Java" };

var languages = [
    { "name": "C#" },
    someLanguage,
    { "name": "Haskell" }
];

console.log(languages);

Fordeler?

Ulemper?

AJAX / AJAJ

  • Hent data fra utenfor koden
    • Filer, API-er, ...?
       
  • XMLHttpRequest i plain JS
  • "MVC"-rammeverk for web apps (klientside)
     
  • Deklarativt (vs. imperative JQuery)
     
  • Statisk web app

Node.js

  • Runtime for JavaScript (på server)
     
  • Your computer is a server!

EKSEMPEL: Hello, node (nodemon)

server-generert kode

  • Før 2005-ish
  • Server har full styring på hvordan ting presenteres
  • Templates ligger på server
  1. Ta i mot request fra browser
  2. Les ut templates
  3. Hent data fra kilde (DB?)
  4. Generer HTML/CSS/JS basert på data
  5. Send response til browser

EKSEMPEL: Vanilla HTTP

http://en.wikipedia.org/wiki/JavaServer_Pages#mediaviewer/File:JSP_Model_2.svg

Fordeler

  • Nettleser trenger bare å vise frem
    • Fungerer utmerket for tynne klienter
       
  • Færre SPOF-er

Ulemper

  • Data må presenteres på én måte per type enhet
     
  • Kjipt for serveren
     
  • Mye data å overføre
     
  • "Null" async lasting

Klientside-generert kode

  • Angular
     
  • Spør serveren om "ren" data (XML/JSON)
     
  • Serveren "vet" ingenting om presentasjon
     
  • Klienten må kjenne datastruktur
    • API-DOC
       
  • Endring av datastruktur?
    • Versjonering

EKSEMPEL Vanilla + Express

Fordeler

  • Separation of concerns
     
  • Flere typer klienter mot API-et
    • Web (duh)
    • Telefon

    •  
  • Async lasting av ressurser
     
  • Tredjepartsapplikasjoner!

Ulemper

  • Fungerer kun på tykke klienter
     
  • "Enda" et lag i applikasjonen
     
  • Er (>2 år gamle) telefoner tykke?

REST

http://phpflow.com/wp-content/uploads/2012/07/rest-websrvices.jpg

Filosofi

Eksponering av ressurser (typisk database)

 

http://jiraclone.com/...

/users

/users/theneva

/projects

/projects/issues/

CRUD i REST

  • HTTP-verb ("metoder")
    • POST (create) (HTTP 201)
       
    • GET (read) (HTTP 200)
       
    • PUT (update) (HTTP 200)
       
    • DELETE (...) (HTTP 204?)

REST i Angular: $http

CURL & POSTMAN

  • Trenger ikke JS for å sende requests
    • Bare en REST-klient
       
  • Terminalkrigere: cURL
     
  • Bedre(?): Postman (Chrome app)

NODE-API

Skriver en server

 

Config

 

Setter opp "endepunkter" for å ta i mot requests fra klient (Angular, app...)

 

EKSEMPEL: vanilla HTTP server

libraries: /node_modules/

Legg en mappe node_modules/ i rotmappa til prosjektet

 

 

 

 

 

 

 

Node finner biblioteker som legges der automatisk

require

libraries: npm

NPM: Package manager (som brew, apt-get)

 

 

 

 

 

 

 

$ npm install express

legger serveren express i mappa node_modules/

libraries: package.json

  • Sjekke inn biblioteker i versjonskontroll?
     
  • package.json beskriver avhengigheter (og andre ting)

 

 

 

 

$ npm install --save express

legger serveren express i mappa node_modules/

OG referanse til express inn i package.json

 

$ npm install

Express + body-parser

  • CRUD: post/get/put/delete

 

 

 

 

 

 

 

 

  • EKSEMPEL: Let's make a real server
var server = require('express')();
var bodyParser = require('body-parser');

server.use(bodyParser.json());

var port = 5432;

server.get('/api', function(req, res) {
    return res.status(201).send({message: 'hi'});
});

server.post('/api', function(req, res) {
    console.log(req.body);
    return res.send(req.body);
});

server.listen(port);
console.log('listening on: ' + port);

Static content

server.use(express.static(__dirname + './path/to/static/files'));
  • Server statisk innhold
     
  • Filer, bilder
     
  • Angular-appen?
     
  • (note: Emmet)

Angular <3 API

EKSEMPEL: the $http service component

Bonus: images

URLs are cool

Øving

  1. Lag et (statisk) API som serverer en JSON-samling av noe
  2. Server en Angular-app som presenterer LP-ene
     
  3. Bonus: bilder (hint: static content)
Made with Slides.com