Back to top

SEBA Master - Web Application Engineering

Last modified May 26

News

  • Video with information about the remote teaching procedures can be found here: https://www.dropbox.com/s/5gg5c0lzbjvt434/2020-04-18%2010-26-31.mp4?dl=0
  • INFORMATION WITH REGARD TO THE CURRENT SITUATION:
    • The course will be offered this semester
    • The lectures take place virtually at Twitch and will be also recorded and made available via Moodle (no personal information of participating students is contained in the recording)
    • Assignments will be distributed as planned and thus must be handed in at the respective deadlines
    • The three presentations of each team will be held remotely
    • The written examination at the end takes place in some form, perhaps digitally
    • Please register regularly for the course, later on all information will be provided via Moodle
  • IMPORTANT INFORMATION CONCERNING AWARDED ECTS:
    • Students who study business information systems according to the FPSO 2008 of SoSe 18 or newer (i.e. FPSO 2018) receive 8 ECTS for this course. The other business information system students (FPSO 2008 WiSe 13) receive 5 ECTS, however with a reduced workload.
    • Students in any other program receive 8 ECTS for this course.
    • If you still study according to FPSO 2008 WiSe13 and need to receive just 5 ECTS, please write an email to Ingo Glaser until 23. April 2020 (Subject: "SEBA Master - 5 ECTS").
  • Information for summer semester 2020 has been fixed and updated

 

Organization of the exercise

The lecture's exercise is a project where students develop a web application applying the concepts presented in the lecture.

The project will be done in teams, that consist of exactly four students. In general, the registered students are randomly assigned to the teams. However, students can also form a team by writing an email containing the names and matriculation numbers of all team members to Ingo Glaser until 23. April 2020 (Subject: “SEBA Master – team proposal”). Only one email per team is required.

Please make sure that each of the team members is registered for the lecture in TUMonline.

Over the course of the semester, we will have 3 presentation blocks. Each presentation block lasts 3 days and has approx. 14 slots in total (~5 slots per day). We will assign each student team to one of these 14 slots for each presentation block. Each team must be present only in its assigned slot. In each slot there will be 4 student teams, each of them having max 20 min for presentation and discussion. At the end of the semester, a final exam (45 min) will take place (Only for students who study according to the renewed examination regulations (FPSO 2018)).

 

Content

The master course Web Application Engineering provides the necessary theoretical foundations to design and develop state-of-the art web applications. Next to the technical aspects to develop applications for the web, business aspects are covered with the most common business models and explained with real-world examples.

The students learn how to design web sites from the scratch including patterns for recurring problems. Technical aspects for the development of web applications are presented along with generic platforms and architectures. Students participating in the exercise apply this knowledge in individual projects that cover all aspects from the lecture with the design and development of a web application.  

  1. Web Site Genres
    • Business Models in the Web
    • Web 2.0 and Social Software
    • Anything as a Service (XaaS)
  2. Web Site Design
    • Key Issues of Customer-Centered Web Design
    • An Overview of Web Design Patterns
    • Knowing Your Customers
    • Involving Customers with Iterative Design
    • Processes for Developing Customer-Centered Sites
    • Additional Viewpoints and Aspects
  3. Patterns for Web Site Design
    • Explaining your Value Proposition
    • Creating a Navigation Framework
    • Basic E-Commerce
    • Advanced E-Commerce
    • Helping Customers Complete Tasks
    • Designing Effective Page Layouts
    • Making Site Search Fast and Effective
    • Making Navigation Easy
    • Speeding Up Web Sites
    • Supporting a Wide Range of Devices (Responsive design)
    • Integrating Multiple Touchpoints (Mobile apps, progressive web apps, and hybrid apps)
    • Integrating Independently Developed Web Services, Content, and Processes
  4. Developing serverless Single-Page Webapplications
    • HTML Concepts and Evolution
    • CSS Concepts and their Link to HTML
    • JavaScript Basics
    • SVG and Canvas
    • Web Components
    • Single-Page Applications
    • Component-based Frameworks
  5. Developing Single-Page Webapplications with React
    • Web Application Framework Comparison
    • Basic Concepts of the Chosen Framework
    • State Management
    • Navigation and Routing
    • Client-Server Communication
    • Consuming RESTful Services
  6. Building REST-enabled back-end service
    • Target architecture and development environment
    • Event-driven architecture and asynchronous I/O operations with node.js
    • Creating REST interfaces using express.js
    • Using document oriented database storage: mongoDB example
    • Enabling user authentication on the web service using JSON web token (JWT)
  7. Advanced Topics in Web Application Engineering
    • Transcompilers for the web
    • Real-time Web Applications
    • Hybrid Web Applications  
  8. High Performance Web Applications
    • Database options for web applications
      • NoSQL databases
      • Multi-model and polyglot persistency
    • Scaling web applications
      • Bottlenecks
      • Scalability patterns
      • Scaling with MongoDB

At the end of the lecture participants will have a solid understanding to contribute to scientific and development projects in this area:

  • Participants know successful patterns of customer-centric web sites, and they are able to explain their business and social impacts.
  • They understand the technological challenges that arise in the implementation of industrial strength web applications.
  • They are able to address purposeful these technological challenges using commercial and open source systems and technologies and proven technical architectures.

 

Lecture and exercise dates

Number  Date Time Room Topic / Content
L01 20.04.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis 0 Introduction

1 Web Site Genres

L02 27.04.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis

1 Web Site Genres

2 Web Site Design

L03 04.05.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis

2 Web Site Design

3 Web Site Design Patterns

L04

11.05.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis

4 Developing Serverless Single-Page Web Applications

D01

12.05.2020

12:00 - 14:00

https://www.twitch.tv/tumsebis Demo: FAQ
P01

13.05.2020

08:00 - 18:00

One Zoom Meeting per Slot (4 Teams)

Presentation: Business Idea, VPC and BMC

14.05.2020

15.05.2020

L05

18.05.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis

5 Developing Single-Page Applications with a Specific Web Application Framework (React)

D02

 

19.05.2020

12:00 - 14:00

https://www.twitch.tv/tumsebis

Demo: Developing with single-page web applications with React 16

L06

25.05.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis

6 Building REST-enabled back-end service

D03 26.05.2020

12:00 - 14:00

https://www.twitch.tv/tumsebis Demo: Building rest-enabled backend services
P02

27.05.2020

08:00 - 18:00

One Zoom Meeting per Slot (4 Teams)

Presentation: UML, Mockups, and Use-Cases

28.05.2020

29.05.2020

L06

Part 2

08.06.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis

6 Building REST-enabled back-end services

R01 08.06.2020 - 12.06.2020 08:00 - 18:00 Zoom Meeting Review: First Prototype

L07

Part 1

15.06.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis 7 Advanced Topics in Web Application Engineering

Special Guest

 

22.06.2020

14:15 - 15:45

 https://www.twitch.tv/tumsebis

Matthias Riepl - Media Saturn

L07 

Part 2

29.06.2020

14:15 - 15:45

https://www.twitch.tv/tumsebis 7 Advanced Topics in Web Application Engineering

L08

06.07.2020

14:15 - 15:45

 https://www.twitch.tv/tumsebis 8 High Performance Web Applications

R02

06.07.2020 - 10.07.2020

08:00 - 18:00

 Zoom Meeting Review: Second Prototype

P03

10.07.2020  18:00 - 20:00

Interimshörsaal 1Interimshörsall 2 + HS2 + HS3

Final Questioning Session (45 min)
P03

22.07.2020

08:00 - 18:00

One Zoom Meeting per Slot (4 Teams)

Final Presentation

23.07.2020

24.07.2020

27.07.2020

(Backup)

Legend:
Lecture Presentation Demo Lecture Special Guest Prototype Review

 

Assessment Method / Exam

The student's performance is primarily assessed on the basis of presentations and deliverables in the context of a project work assignment consisting of three milestones. Furthermore, after the final lecture has been concluded, each student has to perform a short (45 minutes) written exam.

The individual milestones are defined as follows:

  1. Business Idea and Business Model (17%)
    Contents of the assessment:
    • Identifying, explaining and developing business models in the web
    • Develop your business model with BMC and describe your product's value proposition
    • Presentation of your specific business model
  2. UML, Software Architecture, Mockups and Use-Cases (17%)
    Contents of the assessment:
    • Selecting and applying patterns for web application design
    • Explaining a user-centered, iterative development process and applying it in a team
    • Create your software architecture by using UML standards
    • Explaining and selecting state-of-the-art technologies for the implementation of web applications
      (This encompasses both client- and server-side aspects)
    • Explain the main features of your web application by creating use cases
    • Create first Mockups which covers your main use cases
  3. Final Presentation, including written exam (66%)
    Contents of the assessment:
    • Performance in written examination with regard to lecture content
    • Quality and complexity of your developed web application
    • Explaining web-based integration techniques
    • Presenting scientific topics to an audience.
    • Presentation of the final prototype of your web application

Additional skills: Presentation, rhetoric, team communication, project work

Each team writes a report on project activities and results prior to each presentation. The report has to clearly document the individual contributions and accomplishments of each team member. Also, each team presents the results of each exercise in a 10-minute presentation, followed up by a 10-minute discussion. Furthermore, there is a short written examination after the final lecture has taken place.

 

Prerequisites

Knowledge and skills at the bachelor's level (Informatics/Business Informatics) in software engineering, programming and databases.

 

Intended Learning Outcomes

At the end of the module students understand successful patterns of customer-centric web sites, and they are able to explain their business and social impacts. They understand the technological challenges that arise in the implementation of industrial strength web applications. They are able to address purposefully these technological challenges using commercial and open source systems and technologies as well as proven technical architectures. At the end of the lecture they have sufficient knowledge to contribute to scientific and development projects in this area.

 

References

“Exploring ES6” – Axel Rauschmayer, Ecmanauten, http://exploringjs.com/es6/

“Setting Up ES6” – Axel Rauschmayer, Ecmanauten, https://leanpub.com/setting-up-es6

“Business model generation: A Handbook for Visionaries, Game Changes, and Challenges” - Alexander Osterwalder, Yves Pigneur, John Wiley & Sons, 2010

„The Back oftheNapkin: Solving Problems andSellingIdeaswith Pictures“ – D. Roam, Portfolio Hardcover, 2012

“Don't make me think! Web Usability: Das intuitive Web” - Steve Krug, New Riders Press; 2 edition, 2005

“Designing the Obvious. A Commonsense Approach to Web Application Design” - Robert Hoekman, New Riders Press; 1 edition, 2006

“JavaScript: The Definitive Guide” – David Flanagan, O’Reilly Media, 2011

“DoublasCrockford’s JavaScript” - http://javascript.crockford.com/

„Patterns of Enterprise Application Architecture” – Martin Fowler, Addison-Wesley Professional; 2002

„Express – Web Framework for Node.js“ – http://expressjs.com/

„React Official Tutorial “ – ReactJS.org, https://reactjs.org/tutorial/tutorial.html

„React.js Essential Training“ – Eve Porcello, Lynda.com, 2017, https://www.lynda.com/React-js-tutorials/React-js-Essential-Training/496905-2.html (free access for TUM students)

“Building Scalable Web Sites” – Cal Henderson, O´Reilly; 2006

“Web 2.0 Programming” – Eric Vliest, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet, Wiley Publishing, 2007

„Enforcing Strict Model-View Separation in Template Engines“ - Terence John Parr, Proceedings of the 13th international conference on World Wide Web, New York, 2004.

“Pattern-Oriented Software Architecture Volume 1: A System of Patterns” - Frank Buschmann, RegineMeunier, Hans Rohnert, Peter Sommerlad, Michael Stal, Wiley, 1996

„A description of the model-view-controller user interface paradigm in the smalltalk-80 system“ - G. Krasner and S. Pope, Journal of Object Oriented Programming, 1(3):26–49, 1988.

Files and Subpages