Web Fundamentals

View Github Repository Open presentation in a new window

jamesward

See all presentation from jamesward

Web Fundamentals

0 2

web-fundamentals

On Github jamesward / web-fundamentals

Web Fundamentals

James Ward ~ @_JamesWard

HTTP

Hypertext Transfer Protocol

  • Request & Response
  • Text-based
  • Features: Keep-Alive, HTTPS, Binary, Compression

HTTP Server

  • Speaks HTTP
  • Listens for connections
  • Reads the Request
  • Returns the Response

HTTP Client

  • Speaks HTTP
  • Makes a connection
  • Sends the Request
  • Reads the Response

HTTP Request

Request Command

 VERB  PATH  PROTOCOL
 GET   /foo  HTTP/1.1

Request Headers

 NAME:   VALUE
 Accept: text/html

Empty Line

Request Body

HTTP Response

Response Status

 PROTOCOL CODE NAME
 HTTP/1.1 200  OK

Response Headers

 Content-Type: text/html

Empty Line

Response Body

Try it!

HTTP Server with Play Framework

  • Map Request verb & path to handler conf/routes

      GET    /      controllers.Application.index

  • Reads the request and returns a response app/controllers/Application.java

      public static Result index() {
      return ok("hello");
  }

HTTP Client with Telnet

telnet localhost 9000

GET / HTTP/1.1

HTTP Verbs

  • GET, HEAD, POST, PUT, DELETE, etc
  • Idempotentency: POST can have side-effects

  • REST: Representational state transfer

      POST   = Create
  GET    = Read
  PUT    = Update
  DELETE = DELETE

Cookies & Session

  • Request:

      Cookie: foo=bar

  • Response:

      Set-Cookie: foo=blah

  response().setCookie("blah", "foo");
  return ok("hello, " + request().cookie("foo").value());

  • The root of all CSRF

Session

  • Cookie GUID
  • Server map GUID to an object
  • Stateful

Web Browsers

  • HTTP Client
  • Renders HTML & CSS
  • Runs JavaScript
  • Manages Cookies

HTML

Hypertext Markup Language

  • Text-based
  • XML-ish
  • Page-based
  • Returned in the HTTP Body
  • DOM: Document Object Model
  • Trend: Information Semantics not UI Structure

CSS

Cascading Style Sheets

  • AOP-ish
  • Positioning & Styling
  • Complex rules for ordering
  • Essentials: Chrome Dev Tools / Firebug
  • Emerging: LESS, Bootstrap, CSS3

JavaScript

  • Dynamic
  • Single Page Apps
  • Essentials: Chrome Dev Tools / Firebug, jQuery
  • Emerging: CoffeeScript, ASM.js
  • Interesting: Dart

The Extended Web Ecosystem

  • Reactive: Async & Non-Blocking
  • HTML5
  • JavaScript Web Frameworks
  • PhoneGap
  • Push: WebSocket, SSE, Comet
  • Load Balancers
  • CDNs

Reactive: Async & Non-Blocking

  • Event-Driven & Scalable
  • Great for Composition & Push

HTML5

The Browser as an Application Platform

  • Offline
  • Local Storage
  • File Access
  • Audio & Video
  • Graphics: Canvas, WebGL
  • Components
  • Push: WebSockets & SSE
  • New Semantic Tags
  • Modern UIs: Annimations, Layouts, Fonts

JavaScript Web Frameworks

  • Move the UI to the Client
  • Expose data through REST
  • Many options: Backbone, Knockout, AngularJS, Ember
  • PJAX: A mixed approach

Mobile Apps with PhoneGap

  • WORA
  • Bridge to Native APIs
  • Open Source at Apache (Cordova)

Push: WebSockets, SSE, Comet

  • WebSocket: full-duplex
  • SSE: half-duplex but well supported
  • Comet: the traditional hack

Load Balancers

  • Scale Horizontally
  • Failure handling
  • Auto-scaling

CDNs

Edge cached static content

  • The speed of light is slow
  • Location matters
  • Data is really hard to distribute
  • Static content is easy to distribute