fiz: a component framework for web applications · 4/15/2009 · fiz introduction the problem: too...
Post on 18-Jun-2020
16 Views
Preview:
TRANSCRIPT
Fiz: A Component Framework for Web Applications
John OusterhoutStanford University
April 15, 2009 Computer Forum Annual Meeting Slide 2
My Background
1980 1990 2000 2010
U.C. Berkeley Sun Scriptics ElectricCloud
Stanford
2010
VLSI CAD: Caesar,
Magic, Crystal, etc.
Sprite OS
Log-Structured FS
Tcl/Tk
Tcl Tools Electric
Accelerator
Electric
Commander
Fiz
Academia Industry Academia
April 15, 2009 Computer Forum Annual Meeting Slide 3
History of the Web
• Server-browser disconnect• Weak features for interaction• Browser incompatibilities
• DOM specification• Browser compatibility• AJAX, etc.
Web evolution
Documents
Forms
Applications!
April 15, 2009 Computer Forum Annual Meeting Slide 4
The Web is Changing Everything
Discovering the potential:●
New applications●
100-1000x scale●
New development style●
New approach to deployment
2000 2010 2020
Phase 1
Phase 2
Realizing the potential:●
New models of computation (EC2) ●
New storage (BigTable)●
New algorithms (MapReduce)●
New languages●
New frameworks●
New approaches to software development
April 15, 2009 Computer Forum Annual Meeting Slide 5
Fiz Introduction
●
The problem:Too hard to develop interactive Web applicationsExisting frameworks too low-level
●
The solution:Raise the level of programming: don’t write HTML!Create applications from high-level reusable components
●
Fiz:Framework for creating components for Web applicationsLibrary of built-in componentsGoal: create community around component set
●
Research challenge:Design powerful building blocks that hide Web complexity
April 15, 2009 Computer Forum Annual Meeting Slide 6
Fiz
●
Think about page structure, not HTML
●
Encourage creation of higher-level components
“Sections”
April 15, 2009 Computer Forum Annual Meeting Slide 7
Templates (Rails)
<table class="TableSection" cellspacing="0"><tr class="header"><td>Name</td><td>Student Id</td><td>Graduation Year</td><td>GPA</td>
</tr><% for student in @students -%><tr class="<%= cycle('even', 'odd') %>"><td><%= link_to(student.last + ', ' + student.first,
student) %></td><td><%= student.id %></td><td><%= student.grad %></td><td><%= student.gpa %></td>
</tr><% end -%>
</table>
HTML
Variable
substitution
Code to generate
dynamic content
April 15, 2009 Computer Forum Annual Meeting Slide 8
Most Template Info Redundant
<table class="TableSection" cellspacing="0"><tr class="header"><td>Name</td><td>Student Id</td><td>Graduation Year</td><td>GPA</td>
</tr><% for student in @students -%><tr class="<%= cycle('even', 'odd') %>"><td><%= link_to(student.last + ', ' + student.first,
student) %></td><td><%= student.id %></td><td><%= student.grad %></td><td><%= student.gpa %></td>
</tr><% end -%>
</table>
April 15, 2009 Computer Forum Annual Meeting Slide 9
Fiz TableSection
new TableSection(new Dataset("request", "getStudents"),new Column("Name", new Link(
"@last, @first", "show?id=@id")),new Column("Student Id", "@id"),new Column("Graduation Year", "@grad"),new Column("GPA", "@gpa"))
April 15, 2009 Computer Forum Annual Meeting Slide 10
Fiz TableSection
new TableSection(new Dataset("request", "getStudents"),new Column("Name", new Link(
"@last, @first", "show?id=@id")),new Column("Student Id", "@id"),new Column("Graduation Year", "@grad"),new Column("GPA", "@gpa"))
Data returned by getStudents request
Request to fetch data
id first last grad gpa
2149821 Alice Anderson 2009 3.6
2147322 Bob Benson 2010 2.9
3990714 Carol Collins 2012 3.2
4027333 David Dawson 2009 3.8
4019329 Ellen Evans 2012 3.7
April 15, 2009 Computer Forum Annual Meeting Slide 11
Fiz TableSection
new TableSection(new Dataset("request", "getStudents"),new Column("Name", new Link(
"@last, @first", "show?id=@id")),new Column("Student Id", "@id"),new Column("Graduation Year", "@grad"),new Column("GPA", "@gpa"))
id first last grad gpa
2149821 Alice Anderson 2009 3.6
2147322 Bob Benson 2010 2.9
3990714 Carol Collins 2012 3.2
4027333 David Dawson 2009 3.8
4019329 Ellen Evans 2012 3.7
Heading
Name of value to display
April 15, 2009 Computer Forum Annual Meeting Slide 12
Fiz TableSection
new TableSection(new Dataset("request", "getStudents"),new Column("Name", new Link(
"@last, @first", "show?id=@id")),new Column("Student Id", "@id"),new Column("Graduation Year", "@grad"),new Column("GPA", "@gpa"))
id first last grad gpa
2149821 Alice Anderson 2009 3.6
2147322 Bob Benson 2010 2.9
3990714 Carol Collins 2012 3.2
4027333 David Dawson 2009 3.8
4019329 Ellen Evans 2012 3.7
Simple formatting
Generate <a> elementURL
April 15, 2009 Computer Forum Annual Meeting Slide 13
Fiz Architecture
Data
Manager
Data
Manager
Data
Manager
SQL Database
Remote FeedEnterprise
Application
TreeTabs
FormTable
Interactor Interactor
URLs
Front End
Back End
Sections
Data
Requests
Fiz Dispatcher
April 15, 2009 Computer Forum Annual Meeting Slide 14
Sections
●
Encapsulate particular styles of information display and user interaction:
TableFormNavigation tabs…
●
Generate HTML
●
Handle user interactions
●
May include Javascript, AJAX
●
Example:new TreeSection(new Dataset("request",
"demo.tree"))
April 15, 2009 Computer Forum Annual Meeting Slide 15
Interactors
Data
Manager
Data
Manager
Data
Manager
SQL Database
Remote FeedEnterprise
Application
TreeTabs
FormTable
Interactor Interactor
URLs
Front End
Back End
Sections
Data
Requests
Fiz Dispatcher
April 15, 2009 Computer Forum Annual Meeting Slide 16
Interactor
public class StudentsInteractor extends Interactor {public void showAll(ClientRequest cr) {
cr.getHtml().setTitle("Current Students");Section sections[] = {
new TemplateSection("<h1>Your University Online</h1>\n"),new TabSection(...);new TemplateSection("<h1>Current Students</h1>\n"),new TableSection(...);new TemplateSection("<h1>Enter New Student</h1>\n"),new FormSection(...);
};cr.showSections(sections);
}}
URL: http://www.myschool.edu/fiz/students/showAll
April 15, 2009 Computer Forum Annual Meeting Slide 17
Data Managers
Data
Manager
Data
Manager
Data
Manager
SQL Database
Remote FeedEnterprise
Application
TreeTabs
FormTable
Interactor Interactor
URLs
Front End
Back End
Sections
Fiz Dispatcher
Data
Requests
April 15, 2009 Computer Forum Annual Meeting Slide 18
Data Managers
●
Provide access to particular kinds of data:Relational databaseRemote data feedExisting application (local or remote)Excel spreadsheet
●
Most frameworks:ORM specialized for single RDBMS data sourceSynchronous data accesses
●
Fiz:Supports a variety of data sourcesAsynchronous accesses for higher performance
April 15, 2009 Computer Forum Annual Meeting Slide 19
Fiz vs. Rails Templates
0
20
40
60
80
100
120
140
RailsTable
FizTable
RailsForm
FizForm
RailsTabs
FizTabs
Line
s of
Cod
e Rails Javascript
Rails CSS
Rails TemplateFiz34
6
77
12
113
11
10.3x
6.4x5.7x
April 15, 2009 Computer Forum Annual Meeting Slide 20
Status
●
January 2008: started implementation
●
Fall 2008: started first application (Fiz community Web site)
●
Built-in sections:TableFormTabsTreeTemplateCompound
●
Planning first open-source release Summer 2009Goal: create open-source community
●
Interested in industrial collaboration
April 15, 2009 Computer Forum Annual Meeting Slide 21
Potential Impact
●
Faster application development
●
Better applications
●
More code reuse
●
Components hide Web complexity:Security issuesInteraction stylesPerformance issuesMobile device differences
April 15, 2009 Computer Forum Annual Meeting Slide 22
Open Questions
Mostly related to scalability:
●
How many useful components are there?
●
Can smaller components be composed into larger components?
●
How well will Fiz work for large applications?
●
Do components capture a significant fraction of application functionality?
●
Are the components customizable enough?
●
How much additional complexity does Fiz introduce?
April 15, 2009 Computer Forum Annual Meeting Slide 23
Conclusions
●
Web applications growing in importance; need to improve development process
●
Traditional template usage is a bad ideaWorks against components
●
Component orientation results in different framework features
●
Preliminary evidence:Components can encapsulate interesting functionalityComponents can reduce application front-end 5-10x
●
Lots more work needed to validate Fiz, find limits of component frameworks for the Web
Questions?
April 15, 2009 Computer Forum Annual Meeting Slide 25
Web Development Complexities
●
Distributed (browser vs. server)●
Multiple languages and technologies
●
Browser incompatibilities●
Scalability: 100-1000x vs. pre-Web applications
●
Customizability●
Security issues
WebBrowser
ApplicationServer
Database
WebServer
Network
HTMLCSS
JavascriptDOM
SQL
JavaPHPPerl
PythonRuby
HTTPXML
JSON
April 15, 2009 Computer Forum Annual Meeting Slide 26
Current Framework Facilities
●
TemplatesMix HTML and code for dynamic content
●
Object-relational mapping (ORM)Rows from database tables appear as language objectsInteractions with database hidden
●
SessionsManage series of requests from the same browser
●
Integrations, etc.
Too low-level: tools for HTML generation
top related