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

Transcription

1 Multimedia Information Systems Design Patterns & Web Frameworks (Part 1) VU ( ) Christoph Trattner TUG, Austria 1

2 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 2

3 How will we do this? 2 groups PARTIAL EXAM 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 3

4 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 4

5 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 5

6 Seperation of Concerns 6

7 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 ( ) 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" [...] 7

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

9 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) 9

10 SOC How can we achieve that? 10

11 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 operations across classes Concerns affecting most other concerns in a modular software system (e.g. logging) 11

12 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. 12

13 Seperation of Concerns Why is it useful? 13

14 Why is it useful? Seperation of Concerns Reduces complexity (clear interfaces, minimized overlap, etc.) Simplifies integration of aspects and components Possibility of their reuse or exchange Easier adaptibility, customization Improved comprehension of the application Reduces/Improves Maintanance 14

15 Example: Web Application with UI & DB 15

16 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 PHP script Class student getname() getstudyfield() 17

17 Example: Web Application with UI & DB Now what happens, if we need to extend such an application? New DB Contains: Student addr. 18

18 Example: Web Application with UI & DB Customer tells you, that there is another external student database to be used! Requirement: include students addresses in the list Contains contact info: addresses, s, etc. (Lazy) developer wants to accomplish this fast 19

19 Code retrieving all data New DB Contains: Student addr. 20

20 Example: Web Application with UI & DB What happens if the costumer also wants to change the interface? 21

21 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 22

22 How to do it properly? 23

23 Example: Web Application with UI & DB New DB Class student_extended get () set () Contains: Student addr. 24

24 Example: Web Application with UI & DB Proper way of implementing such changes Extend student class in process logic: get/set () methods Data Management module: connect to the external database populate student objects with set () Pros: New info available everywhere (UI scripts) Data access code modifications only at a single place 25

25 Example: Web Application with UI & DB 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) 26

26 How can we improve the situation? 27

27 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! 28

28 29

29 The Model View Controller Design Pattern 30

30 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 31

31 CORE Principle: MVC Decouple the UI from data & logic Compatible with principles of OOP Fist show-up in Smalltalk-80 (One of the first OO languages) 32

32 MVC 33

33 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 34

34 What does the View do? MVC 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.) 35

35 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 36

36 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) 38

37 MVC 39

38 MVC Observer Pattern 40

39 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 41

40 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 42

41 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 43

42 MVC 44

43 Ok, that s it for today...more or less... 45

44 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 46

45 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., healthaware recommender systems) Build some cool Mobile Apps 47

46 48

47 Thank you! Christoph Trattner Web: christophtrattner.info 49

48 References MVC Java Example tern.htm MVC with Angular JS SOChttps://en.wikipedia.org/wiki/Separation_of_conc erns 50