Web [Application] Frameworks• conventional approach to building a web service– write ad hoc client code in HTML, CSS, Javascript, ... by hand– write ad hoc server code in [whatever] by hand– write ad hoc access to [whatever] database system• so well understood that it's almost mechanical• web frameworks mechanize (parts of) this process• lots of tradeoffs and choices– what client and server language(s)– how web pages are generated– how web events are linked to server actions– how database access is organized (if at all)• can be a big win, but not always– somewhat heavyweight– easy to lose track of what's going on in multiple layers of generated software– work well if your application fits their model, less well if it doesn't• examples:– Ruby on Rails– Django– Google Web Toolkit– Zend (PHP), ASP.NET (C#, VB.NET), and lots of others [Wikipedia lists over 100]Google Web Toolkit (GWT) (May 2006)• write client (browser) code in Java– widgets, events, layout loosely similar to Swing• test client code on server side – test browser, or plugin for testing with real browser on local system• compile Java to Javascript and HTML/CSS –[once it works]• use generated code as normal HTML – generated code is browser independent (diff versions for diff browsers)• can use development environments like Eclipse– can use JUnit for testing• strong type checking on source– detect typos, etc., at compile time (unlike Javascript)• doesn't handle all Java runtime libraries– currently at Java version 1.5• no explicit support for database access on server – use whatever package is availableGWT WidgetsJava startup…public class StockWatcher implements EntryPoint {private VerticalPanel mainPanel = new VerticalPanel();private FlexTable stocksFlexTable = new FlexTable();private HorizontalPanel addPanel = new HorizontalPanel();private TextBox newSymbolTextBox = new TextBox();private Button addStockButton = new Button("Add");private Label lastUpdatedLabel = new Label();private ArrayList<String> stocks = new ArrayList<String>();public void onModuleLoad() {// Create table for stock data.stocksFlexTable.setText(0, 0, "Symbol");stocksFlexTable.setText(0, 1, "Price");stocksFlexTable.setText(0, 2, "Change");stocksFlexTable.setText(0, 3, "Remove");// Assemble Main panel.mainPanel.add(stocksFlexTable);mainPanel.add(addPanel);mainPanel.add(lastUpdatedLabel);...// Associate the Main panel with the HTML host page.RootPanel.get("stockList").add(mainPanel);Linkage between Java/Javascript and HTML<html><head><meta http-equiv="content-type" content="text/html; ><link type="text/css" rel="stylesheet"href="StockWatcher.css"><title>Brian's Portfolio</title><script type="text/javascript" language="javascript" src="stockwatcher/stockwatcher.nocache.js"></script></head><body><h1>Brian's Portfolio</h1><div id="stockList"></div></body></html>"Same Origin Policy"• "The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a documentfrom another origin. This policy dates all the way back to Netscape Navigator 2.0." (Mozilla)• "The SOP states that JavaScript code running on a web page may not interact with any resource not originating from the same web site." (Google)• basically Javascript can only reference information from the site that provided the original code• BUT: if a page loads Javascript from more than one site (e.g., as with cookies from third-party sites), then that JS code can interact with that third-party siteGWT assessment• problem: Javascript is irregular, unsafe, not portable, easily abused• solution: use Java, which is type-safe, standard, portable•• translate Java to Javascript to either be browser independentor tailored to specific browser as appropriate• can take advantage of browser quirks, make compact code, discourage reverse engineering• can provide standardized mechanisms for widgets, events, DOM access, server access, AJAX, RE's and other libraries,...• in effect, treat each browser as a somewhat irregular machine and compile optimized code for it specificallyDjango• by Adrian Holovaty and Jacob Kaplan-Moss (released July 2005)• a collection of Python scripts to• create a new project / site– generates Python scripts for settings, etc.– configuration info stored as Python lists• creat a new application within a project– generates scaffolding/framework for models, views• run a development web server for local testing• generate a database or build interface to an existing database• provide a command-line interface to application• create an administrative interface for the database• ...Django Reinhart, 1910-1953Django web framework• write client code in HTML, CSS, Javascript, ...– Django template language helps separate form from content• write server code in Python– some of this is generated for you• write database access with Python library calls – they are translated to SQL database commands• URLs on web page map mechanically to Python function calls– regular expressions specify classes of URLs– URL received by server is matched against regular expressions– if a match is found, that identifies function to be called and arguments to be provided to the functionConventional approach to building a web site• user interface, logic, database access are all mixed togetherimport MySQLdbprint "Content-Type: text/html"printprint "<html><head><title>Books</title></head>"print "<body>"print "<h1>Books</h1>"print "<ul>"connection = MySQLdb.connect(user='me', passwd='x', db='my_db')cursor = connection.cursor()cursor.execute("SELECT name FROM books ORDER BY pub_date DESC")for row in cursor.fetchall():print "<li>%s</li>" % row[0]print "</ul>"print "</body></html>"connection.close()Model-View-Controller (MVC) pattern• an example of a design pattern• model: the structure of the data– how data is defined and accessed• view: the user interface– what it looks like on the screen– can have multiple views for one model• controller: how information is moved around– processing events, gathering and processing data, generating HTML, ...• separate model from view from processing so that when one changes, the others need not• used with varying fidelity in– Django, App Engine, Ruby on Rails, XCode Interface Builder, ...• not always clear where to draw the lines– but trying to separate concerns is goodDjango approach •
View Full Document
Unlocking...