CE419 Session 11: Web Application Architecture Web Programming 1 - - PowerPoint PPT Presentation

▶

Nov 26, 2023 230 likes •507 views

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

SLIDE 1

CE419 Web Programming

Session 11: Web Application Architecture

SLIDE 2

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?

SLIDE 3

Architectural Styles

Pipe and Filter, Client-Server, Event-based, Object-
riented, Layered, etc.
A good architecture:
Minimizes coupling between modules.
Maximizes the cohesion of each module.

SLIDE 4

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.

SLIDE 5

OSI Model

SLIDE 6

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.

SLIDE 7

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.

SLIDE 8

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.

SLIDE 9

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.

SLIDE 10

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.

SLIDE 11

SLIDE 12

Web Presentation

Rise of Web-browser-based applications.
We talked about its advantages before.
Three-Layer architecture for Web apps.

SLIDE 13

Model-View-Controller

Model–View–Controller (MVC) is a software

architecture pattern which separates the representation

f information from the user's interaction with it.

SLIDE 14

–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.”

SLIDE 15

The model consists of application data, business rules, logic, and functions.

Model-View-Controller

SLIDE 16

A view can be any output representation of data, such as a chart or a diagram.

Model-View-Controller

SLIDE 17

The controller mediates input, converting it to commands for the model or view.

Model-View-Controller

SLIDE 18

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.

SLIDE 19

View Patterns

Three popular patterns on the view side:
Template View
Transform View
Two-Step View

SLIDE 20

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>

SLIDE 21

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>

SLIDE 22

Transform View

The basic notion of Transform View is writing a program

that looks at domain-oriented data and converts it to HTML.

SLIDE 23

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.

SLIDE 24

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>

SLIDE 25

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

SLIDE 26

CE419 Web Programming

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?

Architectural Styles

Layering

apart a complicated software system.

lower layer, but the lower layer is unaware of the higher layer.

above.

OSI Model

Layering: Pros & Cons

without knowing much about the other layers.

implementations of the same basic services.

higher-level services.

Layering: Pros & Cons (cont'd)

layers to have and what the responsibility of each layer should be.

Two-Layer Model

code, and the server was usually a relational database.

update of relational data, then these client–server systems worked very well.

Three-Layer Method

domain logic: Move to a three-layer system.

UI, a domain layer for your domain logic, and a data source.

The Three Principal Layers

Provision of services, display of information

Logic that is the real point of the system

Communication with databases, messaging systems, etc.

Web Presentation

Model-View-Controller

architecture pattern which separates the representation

–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

frameworks have been created that enforce the pattern.

.NET MVC, etc.

almost the entire model, view and controller logic on the server.

created that allow the MVC components to execute partly on the client.

View Patterns

Template View

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

Transform View

that looks at domain-oriented data and converts it to HTML.

Two-Step View

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)

References

By Martin Fowler, David Rice, Matthew Foemmel, Edward Hieatt, Robert Mee, Randy Stafford

csc309/docs/lectures/web-architectures.pdf

architecture.pdf

Any questions?

Thank you.