The Philly Code Camp Schedule Progressive Web App (PWA)
Last Updated -
This weekend is the first 2018 Philadelphia Code Camp at the Microsoft Malvern AP MTC. I am teaching a full day Progressive Web App (PWA) on Friday.
Saturday I am delivering a pair of sessions, one on Progressive Web Apps and the other on creating a serverless app in AWS.
There are over 60 additional sessions that cover a wide range of developer topics. And, Saturday's sessions are all free, and of course 'sold out'.
Like most, I wanted to know when my Saturday sessions were and what other topics are being covered. So I went to the code camp's schedule page. And well I was less than impressed.
I know Bill Wolff did his best to throw together a functional session grid. But, like many sites it did not load fast enough for me and left some usability on the table.
Check out the sibling article on how the application's service worker works
So I got motivated..
I mean I can't complain if I don't want to do something about it, right?
So I called Bill and told him I would create a camp schedule Progressive Web App.
Its a good thing that Bill is a good sport and seemed happy for me to undertake the effort.
It was a good thing, because I had already laid out my project plan!
What Is Wrong With the Initial Schedule Page?
- Slow
- Hard for me to read
- No Search
- No Filtering
- No Way to Save Your Schedule
- Not HTTPS & HTTP/2
- Not a PWA
Can I prove it was slow?
Duh, of course I can!
I ran a couple of performance tests, Lighthouse and WebPageTest.
I think the performance issues I encountered with the site were a combination of an asleep server and Angular.
Some of the initial 'tests' I ran showed a time to first byte (TTFB) over 2 seconds. This is a sign there are issues with the server.
I think they need to change a setting to keep it going when there is little to no traffic.
A few other issues stood out to me, insecure, too much JavaScript and general usability issues.
The WebPageTest waterfall image shows the giant yellow slug caused by Angular. This is where the page is using way too much JavaScript and creates a big golden rod section in the CPU profile.
Compare this to my PWA, which has almost no golden rod.
The original schedule grid had no filtering or search capabilities built in. Just squint and hunt to find the sessions you want.
I added a search and faceted filter to the PWA version. There is also the ability to save your schedule or sessions you want to attend. Note: this was not functional in the initial release, but will be added in the next day or two.
The original schedule also does not work offline.
The Progressive Web App Features
The schedule PWA I built features the ability to search and filter sessions. There are 2 page types:
- home page
- session detail
The home page featuring the entire Saturday schedule. The session detail page focuses on the session and added the session description. There is a button to add it to your schedule.
The personal schedule is persisted locally. The data is persisted in IndexedDB so it is accessible in the service worker.
The application menu is a collection of a search that automatically filters once you enter the 4th character (I need to trigger on the enter key). The session titles and bodies are used. If a phrase matches the session is rendered.
The session times are listed just below the search field. They are a collection of dressed up checkboxes and labels. Clicking a time will toggle its use in the schedule.
If the time is selected a green check is displayed to its left. If it is not checked, a white square it rendered. Only selected times are used to render the schedule list.
The session times are persisted in IDB, so your selections are persisted. The list is filtered real-time and rendered immediately, no new page load.
The PWA also works offline, completely, even if you have not loaded the page. Any session page not in the service worker cache will be composed in the service worker.
Note if you are using a browser that has not shipped service worker support yet the offline functionality it limited. The appcache will make it work offline, but session details may be spotty.
Initial Launch
If you are proud of your app when you launch you launched too late, or something like that is the saying.
My initial launch of the Philly Code Camp PWA has a few layout and functionality bugs I need to iron out.
The good news is there are a few days for me to address them.
The source code is available on GitHub. I can't say that I will have time to accept pull request, but feel free to clone and fork as you want.
The PWA is a static web site, completely hosted in Amazon AWS (Sorry Azure does not have the ability to host static web sites yet). It uses S3, Route53, CloudFront and AWS Certificate manager.
Honestly, if it costs me more than a $0.01 to host I will be surprised!
The Philly Code Camp PWA is available and should work on all platforms.
This post is just a general announcement. I will be posting more articles and videos on how the application works. I will also be using it as a demonstration for my Saturday sessions.
My Friday Progressive Web App workshop is completely sold out! But don't worry, you can still register for the full course and take it online!
Progressive Web Apps From Beginner to Expert includes all the content, over 21 hours as of today for just $29!
Even if you are taking my full day workshop I encourage you to enroll so you can access all the additional content and reference the topics you need to review.