Design Patterns & Web Frameworks (Part 1) VU (707.020) - - PowerPoint PPT Presentation

▶
design patterns web frameworks part 1
SMART_READER_LITE
LIVE PREVIEW

Design Patterns & Web Frameworks (Part 1) VU (707.020) - - PowerPoint PPT Presentation

Aug 21, 2023 47 likes •530 views

Multimedia Information Systems Design Patterns & Web Frameworks (Part 1) VU (707.020) Christoph Trattner Know-Center @Know-Center, TUG, Austria 16.11.2015 TU Graz . Christoph Trattner 1 Todays plan! PART 1: First partial exam

slide-1
SLIDE 1

1

. Christoph Trattner 16.11.2015 – TU Graz

Multimedia Information Systems Design Patterns & Web Frameworks (Part 1) VU (707.020) Christoph Trattner

Know-Center

@Know-Center, TUG, Austria

slide-2
SLIDE 2

2

. Christoph Trattner 16.11.2015 – TU Graz

Today‘s plan!

PART 1: First partial exam (30mins) PART 2: Lecture (~30-45mins)

  • Separation of Concerns Design Principle
  • Model-View-Controller Design Pattern
  • A Spoiler for a Master Project or Master Thesis
slide-3
SLIDE 3

3

. Christoph Trattner 16.11.2015 – TU Graz

PARTIAL EXAM

How will we do this?

  • 2 groups
  • 3 questions (English & German)
  • Time: 30 mins
  • No „supporting material“ allowed (just a pen)
  • ONLY use the examination sheet to answer the 3

questions!!!

  • No additional papers accepted or needed
  • If you are done: Come in front & show your student ID
slide-4
SLIDE 4

4

. Christoph Trattner 16.11.2015 – TU Graz

Today‘s plan!

PART 1: First partial exam (30mins) PART 2: Lecture (~30-45mins)

  • Separation of Concerns Design Principle
  • Model-View-Controller Design Pattern
  • A Spoiler for a Master Project or Master Thesis
slide-5
SLIDE 5

5

. Christoph Trattner 16.11.2015 – TU Graz

Goal of this Lecture

  • Learn about design principles on the Web
  • In particular you will learn about
  • Seperation of Concerns
  • The Model View Controller Design Pattern
  • And why this is an super important pattern, when

designing Web-based applications

slide-6
SLIDE 6

6

. Christoph Trattner 16.11.2015 – TU Graz

Seperation of Concerns

slide-7
SLIDE 7

7

. Christoph Trattner 16.11.2015 – TU Graz

Seperation of Concerns

  • Core design principle of all software engineering
  • Definition by Edsger Dijkstra
  • 1974 essay: „On the role of scientific thought“
  • Dutch Computer Scientist (1930-2002)

We know that a program must be correct and we can study it from that viewpoint only; we also know that is should be efficient and we can study its efficiency [...] But nothing is gained - on the contrary - by tackling these various aspects simultaneously. It is what I sometimes have called "the separation of concerns" [...]

slide-8
SLIDE 8

8

. Christoph Trattner 16.11.2015 – TU Graz

SOC – What do you want to achieve with that design principle?

slide-9
SLIDE 9

9

. Christoph Trattner 16.11.2015 – TU Graz

Seperation of Concerns

You want to isolate different aspects of a software application from each other

  • At a single moment you work only on a single aspect

(e.g., not distracted with other aspects)

  • You work on each aspect in detail
  • You are consistent within each aspect
  • Basis for team work in software development

(different teams work on different aspects)

slide-10
SLIDE 10

10

. Christoph Trattner 16.11.2015 – TU Graz

SOC – How can we achieve that?

slide-11
SLIDE 11

11

. Christoph Trattner 16.11.2015 – TU Graz

Seperation of Concerns

VIA Object-Oriented programming

  • Modularity and encapsulation (classes and objects

isolate aspects)

  • Clearly defined interfaces: work on different aspects

in isolation VIA Aspect-Oriented programming: use generic

  • perations across classes
  • Concerns affecting most other concerns in a modular

software system (e.g. logging)

slide-12
SLIDE 12

12

. Christoph Trattner 16.11.2015 – TU Graz

Seperation of Concerns

VIA Architectural patterns They are more general than (software) design patterns, e.g., Layered Design

  • Layers cleanly separate responsibilities
  • Presentation layer,
  • business logic layer,
  • data access layer (e.g. a Web-based information system)

VIA Design Patterns

  • separate software in blocks (=modules) of

functionality with no overlap,

  • e.g., Authentication module, workflow engine, messaging

subsystem etc.

slide-13
SLIDE 13

13

. Christoph Trattner 16.11.2015 – TU Graz

Why is it useful?

Seperation of Concerns

slide-14
SLIDE 14

14

. Christoph Trattner 16.11.2015 – TU Graz

Seperation of Concerns

Why is it useful?

  • Reduces complexity (clear interfaces, minimized
  • verlap, etc.)
  • Simplifies integration of aspects and components
  • Possibility of their reuse or exchange
  • Easier adaptibility, customization
  • Improved comprehension of the application
  • Reduces/Improves Maintanance
slide-15
SLIDE 15

15

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

slide-16
SLIDE 16

17

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

In the process logic you have a Student class

  • Student class has getter and setter methods
  • getName(), getStudyField(), etc.

The UI script (e.g., a PHP script) retrieves a list of Student objects (from process logic)

  • iterate through the list
  • use the getters to read information
  • write info in a HTML table

Class student getName() getStudyField() PHP script

slide-17
SLIDE 17

18

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

Now what happens, if we need to extend such an application?

New DB Contains: Student addr.

slide-18
SLIDE 18

19

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

Customer tells you, that there is another external student database to be used!

  • Requirement: include students’ e-mail addresses

in the list

  • Contains contact info: addresses, e-mails, etc.
  • (Lazy) developer wants to accomplish this fast
slide-19
SLIDE 19

20

. Christoph Trattner 16.11.2015 – TU Graz

New DB Contains: Student addr. Code retrieving all data

slide-20
SLIDE 20

21

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

What happens if the costumer also wants to change the interface?

slide-21
SLIDE 21

22

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

Problem: mixing UI and data management

  • Consequences of such ”architecture” can be

tremendous

  • For each change (data access) different UI scripts

must be updated

  • Maintainance a nightmare, if applied throughout a

large application

slide-22
SLIDE 22

23

. Christoph Trattner 16.11.2015 – TU Graz

How to do it properly?

slide-23
SLIDE 23

24

. Christoph Trattner 16.11.2015 – TU Graz

New DB Contains: Student addr. Class student_extended getEmail() setEmail()

Example: Web Application with UI & DB

slide-24
SLIDE 24

25

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

Proper way of implementing such changes

  • Extend student class in process logic:

get/setEMail() methods

  • Data Management module:
  • connect to the external database
  • populate student objects with setEMail()

Pros:

  • New info available everywhere (UI scripts)
  • Data access code modifications only at a single place
slide-25
SLIDE 25

26

. Christoph Trattner 16.11.2015 – TU Graz

SOC supported by OO languages, e.g. Java but not enforced

  • Developers need to take care about this (design)!

Scripting languages are very vulnerable, e.g. PHP

  • You do not need compiling, it is extremely fast to make such

changes!

  • Inviting to a bad programming style

But, Java is also vulnerable (JSP) - you need to take care!

  • Would need a module system preventing the UI from ”seeing” DM

functionality (planed)

Example: Web Application with UI & DB

slide-26
SLIDE 26

27

. Christoph Trattner 16.11.2015 – TU Graz

How can we improve the situation?

slide-27
SLIDE 27

28

. Christoph Trattner 16.11.2015 – TU Graz

Example: Web Application with UI & DB

How can we improve the situation?

  • One way to improve the situation: a layered

architecture

  • The UI communicates only with the Progam Logic
  • However, hard to enforce this
  • You can only hope that

developers will follow the principle!

slide-28
SLIDE 28

29

. Christoph Trattner 16.11.2015 – TU Graz

slide-29
SLIDE 29

30

. Christoph Trattner 16.11.2015 – TU Graz

The Model View Controller Design Pattern

slide-30
SLIDE 30

31

. Christoph Trattner 16.11.2015 – TU Graz

MVC

What is the Model View Controller (MVC) Design Pattern?

  • A: It is a particular design pattern that supports

Seperation of Concerns

  • Invented in the early days of GUIs
  • invented by Trygve Reenskaug
  • at Xerox Parc in 1979
  • Still in widest application (Java, .NET, JS

frameworks)

  • MVC is also implemented in many new frameworks!
  • Examples: Angular JS
slide-31
SLIDE 31

32

. Christoph Trattner 16.11.2015 – TU Graz

MVC

CORE Principle: Decouple the UI from data & logic Compatible with principles of OOP

  • Fist show-up in Smalltalk-80 (One of the first OO

languages)

slide-32
SLIDE 32

33

. Christoph Trattner 16.11.2015 – TU Graz

MVC

slide-33
SLIDE 33

34

. Christoph Trattner 16.11.2015 – TU Graz

MVC

What does the Controller do?

  • ”Brain” of the UI (e.g. implements the workflows and

the logic within the UI)

  • Handles user input (e.g., mouse clicks, keyboard,...)
  • Updates the model
  • Instructs the view to redraw itself
slide-34
SLIDE 34

35

. Christoph Trattner 16.11.2015 – TU Graz

MVC

What does the View do?

  • Presents the model in a specific way
  • Manages the display and rendering of information to

the user

  • Note: different views for the same model are possible
  • Very important: not only ”rich” GUIs but also in Web

applications (e.g., XHTML, PDF, etc.)

slide-35
SLIDE 35

36

. Christoph Trattner 16.11.2015 – TU Graz

MVC

What does the Model do?

  • Contains the data and application logic on the data
  • Manages the behavior and data of the application
  • Responds to:
  • Requests for information about its state/data
  • Instructions to change state/modify data
slide-36
SLIDE 36

38

. Christoph Trattner 16.11.2015 – TU Graz

MVC

Where does the data come from?

  • If in memory - everything is covered
  • If externally - persisted in the file system or in a

DBMS

  • We need a special Data Management module (layer)
  • Handles persistent data storage (e.g. relational

DBMS)

  • Moves data between memory and storage (e.g. O/R

mapping)

slide-37
SLIDE 37

39

. Christoph Trattner 16.11.2015 – TU Graz

MVC

slide-38
SLIDE 38

40

. Christoph Trattner 16.11.2015 – TU Graz

MVC – Observer Pattern

slide-39
SLIDE 39

41

. Christoph Trattner 16.11.2015 – TU Graz

MVC – Observer Pattern

  • Purpose of the controller?

It‘s purpose in not to separate the model from the view but to handle user events

  • To achieve this separation another design pattern is

needed

  • Typically achieved by means of the Observer pattern
slide-40
SLIDE 40

42

. Christoph Trattner 16.11.2015 – TU Graz

MVC – Observer Pattern

  • When the model changes it notifies the views about

the change

  • Views redraw as the result of the notification
  • Until Ajax not applicable in a Web application
  • Before Ajax: User request needed to update each

particular view

slide-41
SLIDE 41

43

. Christoph Trattner 16.11.2015 – TU Graz

MVC - Observer

With Ajax it is possible (Asynchronous request)

  • On user interaction an Ajax request is performed
  • Observers notify when response is received
  • Web UI remains responsive in the meantime
  • HTML5 WebSockets also provide observer pattern

support

  • Server inititiated events/messages
slide-42
SLIDE 42

44

. Christoph Trattner 16.11.2015 – TU Graz

MVC

slide-43
SLIDE 43

45

. Christoph Trattner 16.11.2015 – TU Graz

Ok, that‘s it for today ...more or less...

slide-44
SLIDE 44

46

. Christoph Trattner 16.11.2015 – TU Graz

Next Class

What will you learn in the next class? More Patterns

  • Model-View-Presenter (MVP) design pattern
  • Presentation-Abstraction-Control (PAC) design

pattern

  • MVC on the Server Side
slide-45
SLIDE 45

47

. Christoph Trattner 16.11.2015 – TU Graz

Spoiler Master/Project Thesis

Currently searching for Master students for the FoodWeb project Your task:

  • Analyse food consumption and production

patterns on the Web (e.g., kochbar.de, ichkoche.at)

  • Implement recommender service (e.g., health-

aware recommender systems)

  • Build some cool Mobile Apps
slide-46
SLIDE 46

48

. Christoph Trattner 16.11.2015 – TU Graz

slide-47
SLIDE 47

49

. Christoph Trattner 16.11.2015 – TU Graz

Thank you!

Christoph Trattner

Email: trattner.christoph@gmail.com Web: christophtrattner.info Twitter: @ctrattner

slide-48
SLIDE 48

50

. Christoph Trattner 16.11.2015 – TU Graz

References

  • MVC Java Example

http://www.tutorialspoint.com/design_pattern/mvc_pat tern.htm

  • MVC with Angular JS

http://conceptf1.blogspot.co.at/2014/04/learning- angularjs-part2.html

  • SOChttps://en.wikipedia.org/wiki/Separation_of_conc

erns