Special Topic: Introduction to Full Stack Web Development

General Information

Full Stack Web Development refers to the practice of developing both the client-side (front end), server-side (back end) and persistence (database) components of a web application. A full stack developer is proficient in a variety of programming languages and technologies, covering the entire spectrum of web development, from designing user interfaces to managing databases and server infrastructure.

Attendance

The course has mandatory attendance and will be taught in-class at Johannes Kepler University.

Target Audience and Learning Objectives

The target audience of this course are beginners in web development. Since the available time is rather short, we encourage participants to familiarize themselves with basic HTML before the course (Wikipedia, W3Schools - HTML tutorial, MDN Web Docs).

Along the course, we will learn the general syntax and the most important library functions of JavaScript. To be able to follow the course, knowledge in at least one other object-oriented programming language such as Java is expected.

In this introductory course, we aim to provide a coarse-grained overview on this exciting topic. The goal is that participants understand basic web development terminology and concepts. They are able to

• write simple HTML pages, styling them with simple CSS
• use Javascript to develop simple Node.js backend applications that host an API to query data
• build Javascript frontends (using a frontend framework such as Vue) that communicate with the back end via its API
• connect their application to a database
• use non-polling bi-directional communication using Websockets for fluent communication between parts of the system.

Depending on the teaching speed and the interests of the participants, we might also have an ad-hoc look at more specific topics* such as

• HTML template engines on the back end
• user authentication using JWT (JSON Web Token)
• responsive web design (adjusting web sites to mobile and desktop usage)
• advanced stylesheet definition languages such as LESS or SASS
• deployment and web server / hosting management
• ...

We have not planned to specifially cover topics such as

• source version control systems (such as Git)
• API generation tools such as Swagger/OpenAPI
• testing
• security
• advanced CSS styling (flexbox, css-grid, etc.)
• web performance optimization
• other front end frameworks besides Vue.js
• ...

This course does not aim to cover as many different technlogies as possible. Instead, we will use one technology per topic (e.g., Node.js as backend, Websockets for bi-directional communication, ...) to explain the basics. Keep in mind that the course should act as an introduction and cannot cover all possible (sub-)aspects of web development.

Teaching Mode

While the material also covers theoretical concepts and explanations, the main aspect of teaching will be live-coding sessions.

Over the course of this lecture, we will build a complete food ordering system with two main components:

• A customer-facing page where users can browse and order food items
• A restaurant dashboard that receives live notifications about incoming orders

Grading

The participants have to develop their own web application as a project, either as a single person or in a team of two. The size requirements for this project are discussed in-class. As a rough estimate, we expect the projects to be a little bigger than the demo project developed in-class (for teams of two the size of the project size is doubled).

The participants gradually expand and rework their projects throughout the semester based on the weekly discussed topics as small homeworks. Finally, at the end of the semester the projects are presented in indiviual presentations. Based on the project, the students are given a grade. If the homeworks have not been submitted, this grade is reduced by one grade. If a given threshold of attandance (which is mandatory) is not reached, the grade is also reduced by one grade.

Preliminary Timetable

Important Information

This course uses JKU Moodle for all announcments (Forum with mail notifications), material, information regarding the LVA mode, assignments and submissions, as well as corrections and grading.