eps-interactivitymvc trinity 䡦model represents the application’s data and logic 䡦view...
TRANSCRIPT
![Page 1: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/1.jpg)
INF 212ANALYSIS OF PROG. LANGS. INTERACTIVITY
Kaj Dreef
![Page 2: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/2.jpg)
Interactivity
Program continually receives input and updates its state Opposite of batch processing
![Page 3: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/3.jpg)
Batch processing
dataIn = getInput() dataOut = process(dataIn) display(dataOut)
![Page 4: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/4.jpg)
Event loop
state while (True) event = eventSource.getNextEvent() process(event) render(state)
![Page 5: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/5.jpg)
Event loop handled by framework
while (True) event = eventSource.getNextEvent() callback(event)
state callback(event) process(event) render(state)
fram
ewor
kU
ser
code
Hollywood style
![Page 6: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/6.jpg)
Issues
How to manage internal state and external views How to deal with application “memory” ! Behavior that depends on history
These are unique to interactive applications
![Page 7: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/7.jpg)
MVC
Model-View-Controller
![Page 8: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/8.jpg)
MVC Trinity
Model ! Represents the application’s data and logic View ! Represents a specific rendition of the model Controller ! Provides input controls for populating/updating the
model and for invoking the right view
Objects/functions belong to only one of these
![Page 9: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/9.jpg)
Term Frequency v1 – Model
class WordFrequenciesModel: """ Models the data. In this case, we're only interested in words and their frequencies as an end result """ freqs = {} def __init__(self, path_to_file): self.update(path_to_file)
def update(self, path_to_file): try: stopwords = set(open('../stop_words.txt').read().split(',')) words = re.findall('[a-z]{2,}', open(path_to_file).read().lower()) self.freqs = collections.Counter(w for w in words if w not in stopwords) except IOError: print "File not found" self.freqs = {}
![Page 10: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/10.jpg)
Term Frequency v1 – View
class WordFrequenciesView: def __init__(self, model): self._model = model
def render(self): sorted_freqs = sorted(self._model.freqs.iteritems(), \ key=operator.itemgetter(1), reverse=True) for (w, c) in sorted_freqs[:25]: print w, '-', c
![Page 11: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/11.jpg)
Term Frequency v1 – Controller
class WordFrequencyController: def __init__(self, model, view): self._model, self._view = model, view view.render()
def run(self): while True: print "Next file: " sys.stdout.flush() filename = sys.stdin.readline().strip() self._model.update(filename) self._view.render()
![Page 12: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/12.jpg)
Passive vs. Active
Passive MVC ! Controller is driver of both model & view updates ! (Previous example)
Active MVC ! View(s) updated automatically when model changes
input Controller Model
View
input Controller Model
View
![Page 13: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/13.jpg)
Active MVC
input Controller Model
View
?
![Page 14: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/14.jpg)
Active MVC – the wrong way
Model holds references to views ! Calls them when it changes
input Controller Model
View View View
Wrong!
![Page 15: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/15.jpg)
Active MVC – better
Views hold references to model ! Observe periodically ! Free agents style
input Controller Model
View View View
![Page 16: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/16.jpg)
Active MVC – better
Model is a “subject” that accepts “observers” ! Calls them when it changes ! Hollywood style (“I’ll call you back”)
input Controller Model
View View View
register_observer(obs)
![Page 17: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/17.jpg)
MVC
MVC can happen at several scales Separation sometimes is difficult
![Page 18: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/18.jpg)
Interesting ideas for how to deal with application “memory”
REST
![Page 19: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/19.jpg)
Recap
HTTP ! URLs ! Methods ! Headers ! Status Codes ! Caches ! Cookies HTML and HTTP ! hrefs/imgs ! Forms ! Scripts (XMLHttpRequest)
![Page 20: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/20.jpg)
HTML and HTTP
Links and images ! <link href="mystyle.css" rel="stylesheet" type="text/css” /> ! <img src=”mypic.gif" alt=”My Picture" /> ! Semantics: Embedded Retrieval ! GET Anchors ! <a href=URI>Anchor text</a> ! Semantics: Potential Retrieval ! GET Forms ! <form action=URI method=OP>
input fields </form>
! Semantics: OP = Potential Retrieval ! GET | Potential Creation ! POST Scripts ! <script type=“text/javascript”>
script statements </script>
! JavaScript has the capability of invoking HTTP operations on servers programmatically
![Page 21: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/21.jpg)
First Web Programs
GET http://example.com/file.html
GET http://example.com/program.py?arg=3(or POST)
Web server needs to recognize files extensions and react appropriately Common Gateway Interface (CGI) model
![Page 22: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/22.jpg)
First Web Programs – CGI
A standard (see RFC3875: CGI Version 1.1) that defines how web server software can delegate the generation of webpages to a console application. Console app can be written in any PL ! CGI programs generate HTML responses ! First CGI programs used Perl
1993
![Page 23: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/23.jpg)
First Web Programs – PHP
Natural extension of CGI/Perl, 1994 Embedded scripting language that helped Perl
<html> <head> <title>Test</title> </head> <body> <?php echo "Hello World”;?> </body></html>
#!/usr/local/bin/perl
print "Content-type: text/html\n\n"; print "<html>\n<head>";print "<title>Test</title>\n";print "</head>\n<body>\n";print "Hello, world!\n";print "</body>\n</html>";
helloworld.pl helloworld.php
![Page 24: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/24.jpg)
Web Programming
It all went down hill from here ! 1995-2000: a lot of bad programming styles
Generalized confusion about how to use HTTP ! HTTP reduced to GET and POST ! HTTP reduced to POST (!) in some models
![Page 25: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/25.jpg)
REST
REpresentational State Transfer Explanation of HTTP 1.1 (for the most part) Style of writing distributed applications “Story” that guides the evolution of Web standards
Formulated by 2000, Roy Fielding (UCI/ICS)
![Page 26: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/26.jpg)
The importance of REST
Late-90’s HTTP seen as ! just convenient mechanism ! just browser clients ! not good enough for server-server interactions Ad-hoc use, generalized confusion ! GET, POST, PUT … what’s the difference? People started mapping other styles onto it ! e.g. RPC, SOAP
HTTP got no respect/understanding until REST was formulated
![Page 27: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/27.jpg)
HTTP vs. REST
REST is the conceptual story HTTP is an enabler of REST on the Web Not every use of HTTP is RESTful REST can be realized with other network protocols
History lessons: ! Realization (HTTP) came first, concepts (REST) became clear
later ! Good concepts are critically important
![Page 28: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/28.jpg)
REST Design Principles
Client-server / Request-Response Stateless Uniform interface Caching Layered Code-on-demand
![Page 29: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/29.jpg)
REST in action
![Page 30: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/30.jpg)
Design Principle: Request-Response
Components ! Servers provide access to resources ! Clients access the resources via servers
Client ServerRequest
Response
request = ["get", "default", None] while True: # "server"-side computation state_representation, links = handle_request(*request) # "client"-side computation request = render_and_get_input(state_representation, links)
![Page 31: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/31.jpg)
Design Principle: Uniform Interfaces
Uniform identification of resources Manipulation of resources via representations Hypermedia as engine of app state
![Page 32: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/32.jpg)
TF Resources
Execution Default File Word
![Page 33: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/33.jpg)
TF Uniform Interface
[verb, resource, [data]] ! Verb: get / post Representation of resources ! Text (menu options) +
Links (possible next operations on resources)
HATEOAS
![Page 34: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/34.jpg)
Representations
Server returns representations of resources, not the resources themselves. ! E.g. HTML, XML Server response contains all metadata for client to interpret the representation
Uniform Interfaces
![Page 35: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/35.jpg)
HATEOAS
Hypermedia As The Engine Of Application State Insight: the application is a state machine Wifi example:
Uniform Interfaces
LoggedOut
Create Account
Logged In
User
Change Account
Logged In
Admin
Search Users …
Question is: Where is the clients’ state stored?
![Page 36: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/36.jpg)
HATEOAS
In many systems, clients’ state is kept on the server ! Traditional way of engineering apps ■ Server is both the state machine and the holder of state
In REST, state machine is on the server, but clients’ state is sent to the clients ! At any step, client is sent a complete “picture” of where
it can go next
LoggedOut
Logged In
User
Change Account
![Page 37: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/37.jpg)
HATEOAS
Server sends representation of the client’s state back to the client ! Hence, REpresentional State Transfer Server does not “hold on” to client’s state Possible next state transitions of the client are encoded in Hypermedia ! Anchors, forms, scripted actions, eXternal reps
LoggedOut
Logged In
User
Change Account
![Page 38: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/38.jpg)
Design Principle: Stateless
Stateless interaction, not stateless servers Stateless interaction: ! Messages are self-contained, every message from client
to server is independent of prior messages Server may create resources (e.g. session info) regarding clients ! Critical for real applications ! Preferably in DB After serving, server does not “hold on”
![Page 39: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/39.jpg)
TF Statelessness
Memory is sent back to client in hyperlinks
![Page 40: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/40.jpg)
RESTful Design Guidelines
Embrace hypermedia ! Name your resources/features with URIs ! Design your namespace carefully Hide mechanisms ! Bad: http://example.com/cgi-bin/users.pl?name=John ! Good: http://example.com/users/John Serve POST, GET, PUT, DELETE on those resources ! Roughly, Create, Retrieve, Update, Delete (CRUD) life-cycle Don’t hold on to state ! Serve and forget (functional programming-y) Consider serving multiple representations ! HTML, XML
![Page 41: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/41.jpg)
RESTful Design Guidelines
URIs are nouns The 8 HTTP operations are verbs
![Page 42: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/42.jpg)
HTTP Operations (recap)
GET PUT DELETE HEAD OPTIONS TRACE POST CONNECT
Spec
Idempotent methods
Means: the side effects of many invocations are exactly the same as the side effects of one invocation
See Wikipedia Idempotent
![Page 43: EPS-InteractivityMVC Trinity 䡦Model Represents the application’s data and logic 䡦View Represents a specific rendition of the model 䡦Controller Provides input controls for populating/updating](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c13f7e708231d400e0ed/html5/thumbnails/43.jpg)
REST, back to the beginning
REpresentational State Transfer ! Now you really know what this means! Explanation of HTTP 1.1 (for the most part) ! Much needed conceptual model Style of writing distributed applications ! Design guidelines “Story” that guides the evolution of Web standards ! A lighthouse for new ideas