- Course: Real-Time Web
- Course Coordinator: Justus Sturkenboom (@ju5tu5)
- Minor Coordinator(s): Joost Faber (@joostf) Koop Reynders (@KoopReynders)
- Lecturers: Shyanta Vleugel (@shyanta) & Justus Sturkenboom (@ju5tu5)
- Student Assistants: Daan Korver (@daankorver)
- Credit: 3 ECTS credits
- Academic year: 2021-2022
- Programme: Communication and Multimedia Design (full time bachelor)
- Language: Dutch instructions and English resources
During this course you will learn how to build a real-time application. You will learn techniques to setup an open connection between the client and the server. This will enable you to send data in real-time both ways, at the same time.
If you have questions:
- Look at the additional resources
- Use a search engine like startpage
- Ask questions on MS Teams (please help each other!)
- Contact a student-assisstant
- Contact a lecturer
After finishing this program you can:
- deal with real-time complexity;
- handle real-time client-server interaction;
- handle real-time data management;
- handle multi-user support.
Your efforts will be graded using a single point rubric (see below). You will have to pass the criterion (centre column) to pass the course. During the test you will be consulted and will be given feedback on things we think deficient and things we think are an improvement on the criterion.
| Deficiency | Criterion | Improvement |
|---|---|---|
Project Your app is working and published on Heroku. Your project is thoroughly documented in the README.md file in your repository. Included are a description of the data-lifecycle, real-time events and external data source used by your app. |
||
| Complexity You’ve implemented enough real-time functionality for us to test your comprehension of the subject. A lot of functionality is self-written. You are able to manipulate online examples live. | ||
| Client-server interaction By interacting with the app, a user can influence the data model of the server in real time by directly modifying data OR by influencing API requests between server and source. The student has set up the data manipulations. | ||
| Data management The server maintains a data model and each client is continuously updated with the correct data. | ||
| Multi-user support Multiple clients can connect to the server. Interaction works as expected and is not dependent on the number of clients. You can explain how your app approaches this. |
To keep things simple we use a daily schedule that will be used during normal course days (monday/tuesday). We make exceptions for fridays, on these days a different schedule will be given.
| Time | Who | Activity |
|---|---|---|
| ~09:00 | (Shyanta, Justus) | Standup |
| 09:30 | Tribe +(Shyanta, Justus) | Talk with crucial information (make sure you attend!) |
| 11:00 | Tribe | Work on the (day)assignment |
| Team 1 +(Shyanta) | Standup | |
| Team 2 +(Justus) | Standup | |
| 11:20 | Team 3 +(Shyanta) | Standup |
| Team 4 +(Justus) | Standup | |
| 11.40 | Team 5 +(Shyanta) | Standup |
| Team 6 +(Justus) | Standup | |
| 12.00 | Team 7 +(Shyanta) | Standup |
| Team 8 +(Justus) | Standup | |
| 12.20 | Team 9 +(Shyanta) | Standup |
| Team 20 +(Justus) | Standup | |
| 13:00 | Tribe +(Daan, Justin) | Continue work on the (day)assignment |
| 16:00ish | Tribe | Wrapup |
Goal: Build and deploy a simple but unique real-time app
Talk subjects: Hit the ground running... (slides) Course objective and explanation of the assignment, examples from last year, explanation of real-time, (live coded) bare bone chat app and deployment on Heroku.
Day assignment: (assignment) Make it so (as a team): Implement (code/style/discuss/deploy) basic chat (or other realtime) functionality on your teampage!
Talk subjects: My first realtime web app! (slides) Short recap, (local) data management, using (wire) flows for realtime web apps, (live coded) multi-user woordzoeker.
Day assignment: (assignment) Make it so (individually). i) Create (code/style/discuss/deploy) a chat app (or other realtime functionality) based on the examples and ii) add your own unique feature!
Goal: Store, manipulate and share data between server-client
Talk subjects: Data driven development?! (slides) Feedback about last week, final assignment and conditions (rubric), explanation of data management, (live coded) Long polling vs Websockets.
Day assignment: (assignment) (Proof of) Concept (individually). i) Create a (3 > 1) concept based on existing data from an API and ii) map this data using modelling techniques.
Talk subjects: Above all else, show the data. (slides) Securing real-time web apps, offline support, the publication/subscription model and (case study) Quek!
Day assignment: (assignment) Proof of concept (individually): i) Create (code/style/discuss/deploy) part of the core functionality for your concept and ii) show the corresponding data lifecycle diagram.
Instead of our talk we will have a peer review session. You will read, comment and fire issues on each others code. Doing this is really good for your programming insight and helps others refining/refactoring their code.
| Time | Who | Activity |
|---|---|---|
| Tribe +(Shyanta, Justus) | Peer review |
Goal: Handle data sharing and multi-user support
Talk subjects: Roll your own... (slides) Data management, the functional programming trinity (map, filter and reduce). OAuth?! Day assignment: (assignment)
Talk subjects: Not ignoring the UI-Stack! (slides). Usability, feedback, feedforward etc. in real-time web apps, (case study) postNL loader and FAQ. Day assignment: (assignment)
We will have our final peer review session. You will read, comment and fire issues on each others code. Doing this helps others dotting the i’s on their project.
| Time | Who | Activity |
|---|---|---|
| Tribe +(Shyanta, Justus) | Peer review | |
| Tribe +(Shyanta, Justus) | Finalize your assignment | |
| 16.00 | Tribe +(Shyanta, Justus) | (drinks?!) |