Embed Size (px)
Citation preview
How Web Applications Work
Artur Matos
http://www.lambdatree.com
July 1st, 2016
In the beginning
In the beginning (2)
http://info.cern.ch/hypertext/WWW/TheProject.html
HTML
<BODY><H1>World Wide Web</H1>
The WorldWideWeb (W3) i s a wide−a r ea<A HREF="WhatIs . html ">hypermedia</A> in f o rma t i o n r e t r i e v a l i n i t i a t i v e a iming tog i v e u n i v e r s a l a c c e s s to a l a r g e u n i v e r s e o f documents .
<P>Eve r y t h i n g t h e r e i s o n l i n e about W3 i s l i n k e d d i r e c t l yo r i n d i r e c t l y to t h i s document , i n c l u d i n g an<A HREF="Summary . html ">e x e c u t i v e summary</A> of thep r o j e c t . . .
HTTP
HTTP Protocol:
Browser info.cern.ch
GET /hypertext/WWW/TheProject.html
<BODY><H1>World Wide Web...File
CSS
h1 {font−f am i l y : "Times New Roman" ;font−s i z e : 40px ;c o l o r : r ed ;
}
body {font−f am i l y : "Times New Roman" ;c o l o r : g r ey ;
}
Server side programming
Browser info.cern.ch
GET /hypertext/WWW/TheProject.html
<BODY><H1>World Wide Web...Program
Server side programming (2)
Python:
def main ( ) :t = date t ime . now ( )return """<html>
<body>The c u r r e n t date and t ime i s %s</body></html>""" % t
Output:
Server side programming languages
RubyJavaC#PythonClojure. . .
POST
<form>Inpu t 1 : <input name=" inpu t1 "/><input type=" submit "/>
</ form>
POST (2)
Browser info.cern.ch
POST /page1.html input1=value
<BODY><H1>Form successful...Program
Databases and SQL
SELECT name , age from employees where age > 30
Name Age
Joseph Tan 32John Doe 40Liza Sun 33
. . . . . .
List of databases
PostgreSQLMySQLSybaseSQL ServerOracle. . .
3 tier architecture
Presentation (HTML)
Business Logic (Java, Python, etc.)
Database
SQL
Client
Server
HTTP
Javascript
http://www.w3schools.com/js/tryit.asp?filename=tryjs_output_alert
<p>My f i r s t pa rag raph .</p><s c r i p t>
window . a l e r t (5 + 6 ) ;</ s c r i p t>
DOM
http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
3 tier architecture (again)
Presentation (HTML + Javascript)
Business Logic (Java, Python, etc.)
Database
SQL
Client
Server
HTTP
JSON
{" g l o s s a r y " : [ {
" term " : "SGML""meaning " : " Standard G e n e r a l i z e d Markup Language"
} ]}
Browser info.cern.ch
GET /hypertext/WWW/TheProject.html
{"glossary": [{"term" ....Program
REST
GET /posts Return all postsGET /posts/1 Return post with id 1
GET /posts/1/comments return all comments associated with post 1GET /comments?postId=1 return comment with id 1
GET /posts?userId=1 return all posts from user with id 1POST /posts add a postPUT /posts/1 update post with id 1
Browser info.cern.ch
GET /hypertext/WWW/TheProject.html
{"glossary": [{"term" ....Program
3 tier architecture (once again)
Website (HTML + Javascript)
Business Logic (Java, Python, etc.)
Database
SQL
Client
Server
REST
Mobile
REST
Odds and ends
NoSQL databases: MongoDB, Cassandranode.jsReact and Flux.
