Modern Web Development with Javascript Frameworks and RESTful APIs

describe modern web-development practices that take advantage of javascript frameworks to generate dynamic websites which access data using RESTful APIs.

What are MVC and REST?

Compare traditional and modern webapplications

Discussion of advantages and disadvantages

Model - View - Controller


(MVC)

model 模型 - describes data, interfaces with database

view 视图 - describes presentation

controller 和控制器 - manages the interaction between view and model

Representational State Transfer (REST 含状态传输)

Client–Server

Stateless

Cacheable

Uniform interface

Client–Server

for example this means that:

clients are not concerned with data storage

servers are not concerned with the user interface

servers and clients may be developed independently

Stateless

no client context is stored on the server

session state is held in the client



Cacheable

Uniform interface

Identification of resources

Individual resources are identified in requests, for example using URIs

Manipulation of resources through these URIs

client has enough information to modify or delete the resource

Self-descriptive messages

Actions that are dynamically identified by the server with URIs within the response

RESTful API HTTP methods
Resource GET PUT POST DELETE
Collection URI example.com/ resources List a collection with URIs and other details Replace the entire collection with another collection. Create a new entry in the collection. Delete the entire collection.
Element URI example.com/ resources/ item17 Retrieve a single object. Replace the object or if it doesn't exist, create it. Create a new object as annotation or attachment. Delete the object.

Traditional Webdevelopment

view is generated on the server using server-side template languages.

generated html, javascript and css are sent to the browser.

browser renders html and performs requests to load new pages.



modern webdevelopment:

html files are static and sent to the browser without modification from the server.

html itself is used as a template, controllers in javascript are used to request data from the server and update html/DOM in the browser.

server translates the model to JSON datastructures. html is no-longer generated.

business logic is independent of the views in the browser.

different independent frontends can be developed to access the same server.

changes in the server don't affect frontends as long as the JSON datasructures remain stable.

a frontend can easily access multiple servers.

backend and frontend can be replaced independently.

with caching, frontends can work offline

RESTful API becomes a core feature, not an afterthought

requires javascript

needs careful design to make site bookmarkable

searchengine support may still be an issue

cacheability in the browser

accessability

...

自由之零:不论目的为何,有使用该软件的自由。(any purpose)

自由之一:有研究该软件如何运作的自由,并且得以修改该软件来符合使用者自身的需求。取得该软件之源码为达成此目的之前提。(study and change)

自由之二:有重新散布该软件的自由,所以每个人都可以藉由散布自由软件来敦亲睦邻。(redistribute)

自由之三:有改善再利用该软件的自由,并且可以发表修訂後的版本供公众使用,如此一来,整个社群都可以受惠。如前项,取得该软件之源码为达成此目的之前提。(improve and share)

Questions?

angular.js

angularjs.org www.angularjs.cn

tutorial

www.angularjs.cn/T006

gitcafe.com/Angularjs/Angularjs-Tutorial/

www.lifelaf.com/blog/?p=1206

github.com/angular/angular-phonecat

downloads

git: git-scm.com/downloads

node.js: nodejs.org/download/

roxen webserver: download.roxen.com/5.4/

In the workshop we start with an introduction to angular.js, following the angular-phonecat tutorial.

We are working through the tutorial until step 5, and then switch to developing the server

The Roxen Webserver is used solely to make it easier to install Pike.

Feel free to install Pike through other methods, or even implement the server in another language.


#!/usr/local/bin/pike

constant default_port = 8080;
Protocols.HTTP.Server.Port port;

int main(int argc, array(string) argv)
{

  write("REST Server starting on %d\n", default_port);

  port = Protocols.HTTP.Server.Port(handle_request, default_port);
  return -1;
}

void handle_request(Protocols.HTTP.Server.Request request)
{
  write("got request: %O\n", request);

  mapping response = ([]);

  array(string) target = request->not_query/"/";
  write("request: %O\n", target);

  if (target[1] == "phones")
  {
    if (sizeof(target)==2)
      response->data = Stdio.read_file("phones/phones.json");
    else 
      response->data = Stdio.read_file("phones/"+target[2]+".json");
    
    if (!response->data)
       response->data = sprintf("\"phone %s not found\"", target[2]);

    response->type = "application/json";
    response->error = 200;
    response->extra_heads = ([ "origin": "http://localhost:8000",
                               "access-control-allow-origin":
                                         "http://localhost:8000" ]);
  }

  request->response_and_finish(response);
}
            

The next steps involve to continue the angular tutorial and improve the server to provide the requested data.

The server should then be further improved by importing the data into a database and add functions to modify data and create new entries.

This could be the the content of a future workshop