Embed Size (px)
Citation preview
CE419 Web Programming Session 11: Web Application Architecture
�1
There are two common elements: One is the highest-level breakdown of a system into its parts; the other, decisions that are
hard to change.
What is architecture?
�2
Architectural Styles
• Pipe and Filter, Client-Server, Event-based, Object-oriented, Layered, etc.
• A good architecture:
• Minimizes coupling between modules.
• Maximizes the cohesion of each module.
�3
Layering
• Layering is one of the most common techniques to break apart a complicated software system.
• The higher layer uses various services defined by the lower layer, but the lower layer is unaware of the higher layer.
• Each layer usually hides its lower layers from the layers above.
�4
OSI Model
�5
Layering: Pros & Cons
• Benefits:
• You can understand a single layer as a coherent whole without knowing much about the other layers.
• You can substitute layers with alternative implementations of the same basic services.
• You minimize dependencies between layers.
• Once you have a layer built, you can use it for many higher-level services.
�6
Layering: Pros & Cons (cont'd)
• But there are downsides:
• Extra layers can harm performance.
• Layers encapsulate some, but not all, things well.
• May not be able to identify (clean) layers.
• Cascading changes.
• The hardest part of a layered architecture is deciding what layers to have and what the responsibility of each layer should be.
�7
Two-Layer Model
• Client-server systems.
• The client held the user interface and other application code, and the server was usually a relational database.
• If the application was all about the display and simple update of relational data, then these client–server systems worked very well.
• Complex domain logic.
�8
Three-Layer Method
• Rise of Object-oriented Programming
• The object community had an answer to the problem of domain logic: Move to a three-layer system.
• In this approach you have a presentation layer for your UI, a domain layer for your domain logic, and a data source.
�9
The Three Principal Layers
• PresentationProvision of services, display of information
• Domain LogicLogic that is the real point of the system
• Data SourceCommunication with databases, messaging systems, etc.
�10
�11
Web Presentation
• Rise of Web-browser-based applications.
• We talked about its advantages before.
• Three-Layer architecture for Web apps.
Model-View-Controller
• Model–View–Controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
–Connelly Barnes
“An easy way to understand MVC: the model is the data, the view is the window on the screen, and the controller is the glue between the two.”
The model consists of application data, business rules, logic, and functions.
Model-View-Controller
A view can be any output representation of data, such as a chart or a diagram.
Model-View-Controller
The controller mediates input, converting it to commands for the model or view.
Model-View-Controller
Model-View-Controller
• Several commercial and noncommercial web application frameworks have been created that enforce the pattern.
• Django, Ruby on Rails, Symfony, ASP.NET MVC, etc.
• Early web MVC frameworks took a thin client approach that placed almost the entire model, view and controller logic on the server.
• As client technologies have matured, frameworks have been created that allow the MVC components to execute partly on the client.
• Angular.js, Ember.js, etc.
View Patterns
• Three popular patterns on the view side:
• Template View
• Transform View
• Two-Step View
Template View
• Template View allows you write the presentation in the structure of the page and embed markers into the page to indicate where dynamic content needs to go.
<!doctype html> <html> <head><title>My Bank</title></head> <body> <h1>Welcome, {{ user.username }}</h1> <p>Your balance is: {{ user.balance }}</p> </body> </html>
Let's take a look at PHP
<!doctype html> <html> <head><title>My Bank</title></head> <body> <?php $user = run_query("SELECT * FROM accounts WHERE username = $username"); $username = $user['username']; ?> <h1>Welcome, <?php echo $username ?></h1> <p>Your balance is: <?php $balance = get_balance($username); for($i = 0; $i < 100; $i++) { do_something(...); } ?></p> </body> </html>
Transform View
• The basic notion of Transform View is writing a program that looks at domain-oriented data and converts it to HTML.
Two-Step View
• The first stage assembles the information in a logical screen structure that is suggestive of the display elements yet contains no HTML. The second stage takes that presentation-oriented structure and renders it into HTML.
Two-Step View (cont'd)<album> <title>Zero Hour</title> <artist>Astor Piazzola</artist> <trackList> <track><title>Tanguedia III</title><time>4:39</time></track> <track><title>Milonga del Angel</title><time>6:30</time></track> <track><title>Concierto Para Quinteto</title><time>9:00</time></track> <track><title>Milonga Loca</title><time>3:05</time></track> <track><title>Michelangelo '70</title><time>2:50</time></track> <track><title>Contrabajisimo</title><time>10:18</time></track> <track><title>Mumuki</title><time>9:32</time></track> </trackList> </album> <screen>
<title>Zero Hour</title> <field label="Artist">Astor Piazzola</field> <table> <row><cell>Tanguedia III</cell><cell>4:39</cell></row> <row><cell>Milonga del Angel</cell><cell>6:30</cell></row> <row><cell>Concierto Para Quinteto</cell><cell>9:00</cell></row> <row><cell>Milonga Loca</cell><cell>3:05</cell></row> <row><cell>Michelangelo '70</cell><cell>2:50</cell></row> <row><cell>Contrabajisimo</cell><cell>10:18</cell></row> <row><cell>Mumuki</cell><cell>9:32</cell></row> </table> </screen>
References
• Patterns of Enterprise Application ArchitectureBy Martin Fowler, David Rice, Matthew Foemmel, Edward Hieatt, Robert Mee, Randy Stafford
• http://c2.com/cgi/wiki?ModelViewController
• http://queens.db.toronto.edu/~papaggel/courses/csc309/docs/lectures/web-architectures.pdf
• http://www.cs.toronto.edu/~sme/CSC340F/slides/21-architecture.pdf
�27
Any questions?
Thank you.
�28
