9. Internet programming

Today's topics

How the Web works

Server programming

Browser programming

Programming in the IoT age

Internet == Web?

Maybe, at this moment

Net programming == Web programming

Web programming

Provide services on the Web

Programming on server

Programming on browser

End-user programming

EUP on server

EUP on browser

Technologies for supporting the Web

http://www.amazon.co.jp/dp/4774142042/ http://gyazo.com/458ebc9b45cd38cfe36a3dc16380b033.png

Basic Web access

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

Basic behavior of browser

RFC2616

User action on browser

Browser sends GET/POST request to server

Server returns data to browser

Browser updates display

Basic operation

No programming required

Web server and browser take care of everything

Original Web behavior

No program execution

Using CGI programs

User action on browser

Parameters sent to server

GET, POST

Server interprets arguments

Server invokes CGI program

Computation by CGI program

Returns the results to browser

Browser display updated

GET example

http://localhost/~masui/calc.html https://gyazo.com/64366bc955d84addbf4fb68290af1ab5

code:calc.html

<form action="./calc.cgi" method="get">

<input type="text" name="exp">

<input type="submit">

</form>

Transferred text to server

code:get.txt

GET /calc.cgi?exp=3%2B4 HTTP/1.1

Host: pitecan.com

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: ja,en-us;q=0.7,en;q=0.3

Accept-Encoding: gzip,deflate

Accept-Charset: UTF-8,*

Keep-Alive: 300

Connection: keep-alive

Web communication

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

POST example

code:post.html

<form action="./calc.cgi" method="post">

<input type="text" name="exp">

<input type="submit">

</form>

Transferred text to server

code:post.txt

POST /calc.cgi HTTP/1.1

Host: pitecan.com

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: ja,en-us;q=0.7,en;q=0.3

Accept-Encoding: gzip,deflate

Accept-Charset: UTF-8,*

Keep-Alive: 300

Connection: keep-alive

Content-Type: application/x-www-form-urlencoded

Content-Length: 9

color=yellow>exp=3%2B4

Info sent to CGI program

Environment variables

code:envvars.txt

Web communication

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

CGI program

Access DB and read/modify data

e.g. Amazon, Google, ...

Any kind of calculation

Returned data from server

code:http;txt

Http/1.1 200 OK

Date: Sun, 11 Jan 2004 16:06:23 GMT

Server: Apache/1.3.22 (Unix) (Red-Hat/Linux)

Last-Modified: Sun, 07 Dec 2003 12:34:18 GMT

ETag: "1dba6-131b-3fd31e4a"

Accept-Ranges: bytes

Content-Length: 3

Keep-Alive: timeout=15, max=100

Connection: Keep-Alive

Content-Type: text/html

579

Web communication

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

Jobs of Web server

Interprets client requests

Invoke CGI and send the returned data to client

Invoke servelets and send the returned data to client

Jobs of CGI program

(1) Interpret requests

(2) Calculate something

(3) Return data to server

How to write a CGI program

Write everything from scratch

Use CGI libraries

Use app frameworks

Writing everything from scratch

code:calc.rb

# Get request string

if method == 'GET' then

elsif method == 'POST' then

end

# Calculation

data =~ /exp=(.*)$/

result = eval(exp)

# Output

print "Content-type: text/plain\r\n\r\n"

print "#{result}\r\n"

Using a CGI library

code:cgi.rb

require 'cgi'

cgi = CGI.new('html3')

result = eval(exp)

cgi.out { result.to_s }

Simplify app programming

Difficulties in Web server programming

Parameter handling

HTML output

Handling state transition

Use DB

Use Web frameworks for these tasks

WebObjects

https://gyazo.com/27487c266e35c7abbfc72858080f6b2e

1996 World-first application server from NeXT computer

Apple bought NeXT and WebObjects priced $50,000

2000 Discounted to $699

2001 Discounted to free (attached to OSX Server)

2006 Finished deelopment

2007 Ruby on Rails shipped with Mac

2008 Apple ended support for WebObjects

WebObjects

https://www.youtube.com/watch?v=goNXogpwvAk

Tasks of Web frameworks

DB access

O/R mapping

HTML template

URL mapping

Other tasks

Authentication, security

Session management

Ajax handling

Cache handling

Using Sinatra

code:sinatra.rb

require 'sinatra'

get '/' do

'Hello world!'

end

Using Sinatra

code:sinatra.rb

require 'sinatra'

get '/' do

'Hello world!'

end

get '/hello/:name' do

end

PaaS

Platform as a Service

Space for running Sinatra/Rails

Problems of Web frameworks

Too big and heavy

Many subsystems required

Ruby, SQL, ...

Users should learn a lot

Speciall notations, conventions, etc.

Sometimes slow

Slower than straightforward implementation

People use it anyway

e.g. LaTeX

Simpler frameworks getting popular

e.g. Sinatra, Express

How can we create a Web server?

Apache + mod_passenger + Sinatra

Easy to learn

Apache + mod_passenger + Rails

Used by many people

Large and heavy

Newer systems

Nginx

Express

Node.js

Programming on browser

Draw figures and texts on display

Smooth response

Fast execution

No page transition

Run applications on browser

Run programs locally for fast response

Programming systems running on browser

Integrated in browser

JavaScript

Independent systems

Browser plugins

Flash

Java

Communicate with server

History of JavaScript

1995 Introduced on Netscape 2.0

1996 Used on IE

1997 Standardized as EcmaScript

2005 Ajax

2015 ES2015 (ES6)

History of Flash / ActionScript

Developed by MacroMedia

1999 Flash4

2000 ActionScript1 ECMAScript

2003 ActionScript2

2005 Acquired by Adobe

2006 ActionScript3

History of Java

1992 OAK by James Gosling

1994 Released from Sun (Gosling, Joy, etc.)

1998 Java2

2004 J2SE 5.0

2006 Java SE 6

Jobs of servers/browsers

Servers

DB handling

Data sharing

Browsers

Smooth interaction

Simple calculation

Secret information

Programming for smooth UI

Asynchronous (parallel) execution

Server programming + browser programming

Jobs on server/browser

Data on server

Zooming with local programs

Server programs

Handling DB

Return results

Client programs

Handle zooming operations

Request data from server

Difficulty of Web programming

Server knowledge and browser knowledge required

Parallel programming

Sync/async

Lots of strange know-hows

User programming on the Web

JS Programming on browser

Bookmarklets

Greasemonkey

Chickenfoot

Browser extension

Programming by example on browser

iMacros

CoScripter

Programming on the Web

Yahoo! Pipes

Bookmarklets

Register JS program on browser

Invoked by user when required

Demo: Bookmarklet

Greasemonkey

Add-on for Firefox

Executes JS every time a page is displayed

Javascript programming

Users can do almost anything

Require deep understandings of programming

End-user programming

Developed at MIT

Simple JS programming based on appearance

No need for DOM handling

JavaScriptプログラミングの敷居を下げる

Developer's cliams

Want to write browser programs like using Excel

Users don't want to handle HTML objects

Users only want to write programs based on appearance

What JS can handle

http://gyazo.com/875f5c57f5918afadead901f4e257155.png

What Chickenfoot can handle

http://gyazo.com/6471c331aa6672042664913f5cba60ab.png

Examples of Chickenfoot programs

Find a house on a real estate page

And check distances to restaurants

Demo: Chickenfoot

insert(after('Chickenfoot'),"!!!")

https://www.youtube.com/watch?v=5wXWMuYM37s

PBE on the Web

iMacros

CoScripter

Sikuli

Recording user operations

Operation playback possible

Video: iMacros

http://www.youtube.com/watch?v=OHedT2hRL4Y

Developed at IBM

Eager, StagecastのAllen Cyper氏

Recording user operations on Firefox

Operations can be edited

Video: CoScripter

http://www.youtube.com/watch?v=TyQPwPgbRZQ

Execute GUI operations based on bitmap pattern

Video: Sikuli

http://www.youtube.com/watch?v=FxDOlhysFcM

Status of PBE on the Web

Difficult to install, difficult to install

Doesn't worth the work

Simple and useful systems required

Yahoo! Pipes

Mashup programming on the Web

Visual programming

http://gyazo.com/fc4471a1378102c027ed7de43fac4e16.png

Web programming with Linda

Synchronization and data sharing on Web server

Communication between Web and IoT devices

Linda

Sharing data in a TuppleSpace

4 primitives for sharing data

Linda

http://masui.org/5c79a78e3de1dcec20999cedfc5ddfad.png

Linda servers

Linda programming

Conclusions

Various Web programming possible

Various systems appearing everyday

Interesting for programmers

Standardization expected