session 11: web application architecture web...
TRANSCRIPT
![Page 1: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/1.jpg)
CE419 Web Programming Session 11: Web Application Architecture
�1
![Page 2: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/2.jpg)
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
![Page 3: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/3.jpg)
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
![Page 4: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/4.jpg)
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
![Page 5: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/5.jpg)
OSI Model
�5
![Page 6: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/6.jpg)
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
![Page 7: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/7.jpg)
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
![Page 8: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/8.jpg)
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
![Page 9: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/9.jpg)
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
![Page 10: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/10.jpg)
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
![Page 11: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/11.jpg)
�11
![Page 12: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/12.jpg)
Web Presentation
• Rise of Web-browser-based applications.
• We talked about its advantages before.
• Three-Layer architecture for Web apps.
![Page 13: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/13.jpg)
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.
![Page 14: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/14.jpg)
–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.”
![Page 15: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/15.jpg)
The model consists of application data, business rules, logic, and functions.
Model-View-Controller
![Page 16: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/16.jpg)
A view can be any output representation of data, such as a chart or a diagram.
Model-View-Controller
![Page 17: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/17.jpg)
The controller mediates input, converting it to commands for the model or view.
Model-View-Controller
![Page 18: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/18.jpg)
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.
![Page 19: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/19.jpg)
View Patterns
• Three popular patterns on the view side:
• Template View
• Transform View
• Two-Step View
![Page 20: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/20.jpg)
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>
![Page 21: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/21.jpg)
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>
![Page 22: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/22.jpg)
Transform View
• The basic notion of Transform View is writing a program that looks at domain-oriented data and converts it to HTML.
![Page 23: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/23.jpg)
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.
![Page 24: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/24.jpg)
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>
![Page 25: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/25.jpg)
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
![Page 26: Session 11: Web Application Architecture Web Programmingce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S10.pdf · Model-View-Controller • Several commercial and noncommercial](https://reader034.vdocuments.us/reader034/viewer/2022050416/5f8c501e18354f50994152f9/html5/thumbnails/26.jpg)
Any questions?
Thank you.
�28