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

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

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 16.11.2015 – TU Graz . Christoph Trattner 2

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 16.11.2015 – TU Graz . Christoph Trattner 3

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 16.11.2015 – TU Graz . Christoph Trattner 4

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 16.11.2015 – TU Graz . Christoph Trattner 5

Seperation of Concerns 16.11.2015 – TU Graz . Christoph Trattner 6

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" [...] 16.11.2015 – TU Graz . Christoph Trattner 7

SOC – What do you want to achieve with that design principle? 16.11.2015 – TU Graz . Christoph Trattner 8

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) 16.11.2015 – TU Graz . Christoph Trattner 9

SOC – How can we achieve that? 16.11.2015 – TU Graz . Christoph Trattner 10

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) 16.11.2015 – TU Graz . Christoph Trattner 11

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. 16.11.2015 – TU Graz . Christoph Trattner 12

Seperation of Concerns Why is it useful? 16.11.2015 – TU Graz . Christoph Trattner 13

Seperation of Concerns Why is it useful?  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 16.11.2015 – TU Graz . Christoph Trattner 14

Example: Web Application with UI & DB 16.11.2015 – TU Graz . Christoph Trattner 15

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) PHP script  iterate through the list  use the getters to read information  write info in a HTML table Class student getName() getStudyField() 16.11.2015 – TU Graz . Christoph Trattner 17

Example: Web Application with UI & DB Now what happens, if we need to extend such an application? New DB Contains: Student addr. 16.11.2015 – TU Graz . Christoph Trattner 18

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 16.11.2015 – TU Graz . Christoph Trattner 19

Code retrieving all data New DB Contains: Student addr. 16.11.2015 – TU Graz . Christoph Trattner 20

Example: Web Application with UI & DB What happens if the costumer also wants to change the interface? 16.11.2015 – TU Graz . Christoph Trattner 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 16.11.2015 – TU Graz . Christoph Trattner 22

How to do it properly? 16.11.2015 – TU Graz . Christoph Trattner 23

Example: Web Application with UI & DB New DB Contains: Class student_extended Student addr. getEmail() setEmail() 16.11.2015 – TU Graz . Christoph Trattner 24

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 16.11.2015 – TU Graz . Christoph Trattner 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) 16.11.2015 – TU Graz . Christoph Trattner 26

How can we improve the situation? 16.11.2015 – TU Graz . Christoph Trattner 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! 16.11.2015 – TU Graz . Christoph Trattner 28

16.11.2015 – TU Graz . Christoph Trattner 29

The Model View Controller Design Pattern 16.11.2015 – TU Graz . Christoph Trattner 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 16.11.2015 – TU Graz . Christoph Trattner 31

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) 16.11.2015 – TU Graz . Christoph Trattner 32

MVC 16.11.2015 – TU Graz . Christoph Trattner 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 16.11.2015 – TU Graz . Christoph Trattner 34

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.) 16.11.2015 – TU Graz . Christoph Trattner 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 16.11.2015 – TU Graz . Christoph Trattner 36