Skip to content

The course Progressive Web Apps is about learning to build server side rendered applications. Progressive Web Apps is part of the half year minor programme about Web Design and Development in Amsterdam. Bachelor Communication and Multimedia Design, Amsterdam University of Applied Science.

License

Notifications You must be signed in to change notification settings

cmda-minor-web/progressive-web-apps-2223

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Progressive Web Apps @cmda-minor-web 2022 - 2023

pwa

Table of Contents

Synopsis

  • Course: Progressive Web Apps
  • Course Coordinator: Justus Sturkenboom (@ju5tu5)
  • Minor Coordinator(s): Joost Faber (@joostf) Koop Reynders (@KoopReynders)
  • Lecturers: Declan Rek (@decrek) & Janno(@shortstoryrguy)
  • Student Assistants: TBA
  • Credit: 3 ECTS credits
  • Academic year: 2022-2023
  • Programme: Communication and Multimedia Design (full time bachelor)
  • Language: Dutch instructions and English resources

Description

In this course we convert the client side web application, made during the Web App From Scratch course, into a server side rendered application. We also add functionalities based on the Service Worker and turn the application into a Progressive Web App. Finally we’ll implement a series of optimisations to improve the performance of the application.

Communication

If you have questions:

Goals

After finishing this program you can:

  • deal with server side rendering;
  • implement a Service Worker;
  • enhance the critical render path for a better runtime or percieved performance.

Grading

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 published and can be accessed using the browser. Your project is thoroughly documented in the README.md file in your repository. Included are an explanation of client- server rendering, an activity diagram including the Service Worker and a list of enhancements to optimize the critical render path implemented your app.
Serverside rendering You’ve implemented serverside rendering and have articulated how it works and why you should want it.
Service Worker You’ve implemented a usefull Service Worker and show it’s working in an activity diagram.
Critical render path You’ve enhanced the critical render path for a better runtime or percieved performance in multiple ways and have described how you managed to do this.

Programme

Daily Schedule

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:20 (Declan, Janno) Standup
09:30 Tribe +(Declan, Janno) Talk with crucial information (make sure you attend!)
11:00 Tribe Work on the (day)assignment
Team 1 +(Declan) Standup
Team 2 +(Janno) Standup
11:20 Team 3 +(Declan) Standup
Team 4 +(Janno) Standup
11.40 Team 5 +(Declan) Standup
Team 6 +(Janno) Standup
12.00 Team 7 +(Declan) Standup
Team 8 +(Janno) Standup
12.20 Team 9 +(Declan) Standup
Team 10 +(Janno) Standup
13:00 Tribe +(TBA) Continue work on the (day)assignment
16:00ish Tribe +(TBA) Wrapup

Week 1 - Server Side Rendering 📡

Goal: Render web pages server side

Exercises for week 1

Monday 20 maart

We start out with a short explanation of this course. Right behind is a presentation on Server Side Rendering by Declan Rek from de Voorhoede Server Side Rendering - slides by Declan Rek

After this presentation you may start working on this weeks exercises. We’ll hold standup meetings in teams according to the roster you see at daily schedule. At the end of the day you’ll do a wrap-up of your work and take the evening off.

Tuesday 21 maart

We’ll split up in two groups, those who want to go through the details again team up with Justus, those who want to go deeper team up with Declan. Both groups will hold live-coding sessions and will be able to ask questions.

After this live-coding session you continue working on this weeks exercises. We’ll hold standup meetings in teams according to the roster you see at daily schedule. You’ll finish with a wrap-up of your work and take the evening off.

Friday 24 maart

We’ll be introduced to ****! They’ll show us around their workfloor and tell us about (working in) their company. You can use the spare time to finish this weeks exercises and ask questions. Wrap-up your work and take off for the weekend. We might go for drinks..

Time Who Activity
13.00 Tribe +(Declan, Janno) Questions..
13.30 Tribe +(Declan, Janno) Meeting with company?
16.00 Tribe +(Declan?, Janno?) (drinks?!)

Week 2 - Progressive Web App 🚀

Goal: Convert application to a Progressive Web App

Exercises for week 2

Monday 27 maart

We set off the week with a presentation on Progressive Web Apps by Declan Rek from de Voorhoede Progressive Web Apps - slides Declan Rek

After this presentation you’ll start working on this weeks exercises. Again, we’ll hold standup meetings in teams according to the roster you see at daily schedule. We’ll wrap-up the day as usual and take the evening off.

Tuesday 28 maart

We’ll split up again, those who want to go through the details again team up with Justus, those who want to go even deeper team up with Declan. Both groups will hold live-coding sessions and will be able to ask questions.

After this live-coding session you continue working on this weeks exercises. We’ll hold standup meetings in teams according to the roster you see at daily schedule. You’ll finish with a wrap-up of your work and take the evening off.

Friday 31 maart

We will have a 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
13.00 Tribe +(Declan, Janno) Peer review
15.30 Tribe +(Declan, Janno) Wrap-up for the weekend
16.00 Tribe?! (drinks?! or not?!)

Week 3 - Critical Rendering Path 📉

Goal: Optimize the Critical Rendering Path

Exercises for week 3

Monday 3 april

We’ll set of the 3rd and final week with a presentation on the Critical Rendering Path by Declan Rek from de Voorhoede Progressive Web Apps - slides Declan Rek

After this presentation you’ll work on this weeks exercises. Again, we’ll hold standup meetings in teams according to the roster you see at daily schedule. We’ll wrap-up the day (are you starting to get the hang of it?) as usual and take the evening off.

Tuesday 4 april

We’ll split a third time... Again, those who want to go through the details team up with Justus. Those who want to go beyond.. fearlessly.. into the dark depths of optimization, team up with Declan. Both groups will hold live-coding sessions and will be able to ask questions.

After this live-coding session you continue working on this weeks exercises. We’ll hold standup meetings in teams according to the roster you see at daily schedule. You’ll finish with a wrap-up of your work and take the evening off.

Friday 7 april

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
13.00 Tribe +(Declan, Janno) Peer review
15.30 Tribe +(Declan, Janno) Finalize your assignment
16.00 Tribe +(Declan, Janno) (drinks?!)

About

The course Progressive Web Apps is about learning to build server side rendered applications. Progressive Web Apps is part of the half year minor programme about Web Design and Development in Amsterdam. Bachelor Communication and Multimedia Design, Amsterdam University of Applied Science.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published