CE419 Session 11: Web Application Architecture Web Programming � 1
What is architecture ? 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. � 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 • Presentation Provision of services, display of information • Domain Logic Logic that is the real point of the system • Data Source Communication 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.
“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.” –Connelly Barnes
Model -View-Controller 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 • 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> <screen> </album> <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 Architecture By 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
Thank you. Any questions? � 28
Recommend
More recommend
