Stir Trek v4
A new Stir Trek scheduling tool.
Stir Trek 2019 is coming soon and I鈥檝e built a new app for it! This one is a bit different from previous versions in that it isn鈥檛 in any stores. Instead, it鈥檚 online:
It loads the full session list, you can view session details (including speaker info), and save sessions to a personal schedule. It鈥檚 responsive, too, and works great on phones.
Some Backstory
- v1 (2015) was me playing with Ionic when Ionic was still new and I had no experience with it or AngularJS.
- v2 (2016) was me playing with Ionic after I had used it a bit at work and knew what I was doing (mostly).
- v3 (2017) was barely more than v2 updated again. You can find out more here.
- I also updated v3 to run as a web app and published it online last year (2017). I didn鈥檛 really tell anyone about it outside of AWH, though.
So that brings us to v4. It鈥檚 entirely a new web app, written only using Angular and Bootstrap. I used it as an opportunity (a late one) to (finally) learn modern Angular. I鈥檝e used AngularJS (1.X) extensively and know it well, but Angular 2+ always eluded me. I just struggled to wrap my head around it. Until now.
Stir Trek 4
This wasn鈥檛 a super smooth process to build. I hit a few problems.
Problem 1: Finding the Data
Stir Trek changes their site up each year. That鈥檚 fine, but it means the API I previously used was gone. After a little bit of digging, though, I found their GitHub. Turns out the current site is a static site, built using Hexo (how familiar).
In their repo for the site is a folder of JSON files containing the schedule and session data. Perfect!
Problem 2: Parsing the Data
Parsing JSON data usually isn鈥檛 a problem. I used a tool called QuickType that lets you paste in the JSON you need to read and spits out strongly typed code. For C#, you get classes that match the JSON structure. For TypeScript, interfaces. It鈥檚 awesome and makes dealing with JSON APIs so easy.
The issue is the structure of the two files that are in the repo. One is the schedule, with an array of time slots each with an array of session IDs. The other file contains the session and speaker info. I get why they are stored this way, as it鈥檚 more normalized, but it does mean I have to join the two in code to get all the info I need.
As a result of that, the code that puts together the full schedule is, well, messy. It works, but it鈥檚 a bit gross.
Problem 3: Angular
At work a few years back, I used AngularJS extensively on a project. There was about a year where that was basically all I worked on in the front-end. Angular 2 came out around then and I never really managed to wrap my head around it. I understood the basic ideas of components and the dependency injection, but the template syntax really threw me off and I disliked having to use the CLI.
After building this new app, my concerns basically remain. The template syntax is still weird, though I have a better understanding of it. And the reliance on a CLI is still kind of annoying. When I got into the weeds, though, I found the Observables and RxJs stuff to be the hardest to deal with. While I do like Angular as a whole, it鈥檚 RxJs that annoys me the most. I鈥檓 sure I鈥檒l come around to it eventually.
The Results
I鈥檓 happy with this new version. It鈥檚 got the features I want and really nothing else. It loads the session list from the JSON files in GitHub. It saves your personal schedule to localStorage, so it can remember your sessions on a single device (syncing that would require a back end). And it鈥檚 pretty and runs smoothly. It鈥檚 also a PWA, thanks to Angular鈥檚 super-simple PWA support.
There are some improvements I would still like to add. Mostly code cleanup, maybe some more session details. I鈥檒l update this post if I make any significant changes.
Until then, go plan your day at Stir Trek!
Side Note: I love Netlify. I need to do a separate post about it someday, but in short, it鈥檚 how I鈥檓 hosting this site and the Stir Trek app. I have my domain tied to it, and it鈥檚 tied to various Git repos in BitBucket, and it just auto-deploys things. I love it.
Update (2019-04-23): I got some questions about the code to this app on the Stir Trek Slack, so I decided to make the repo public. The code is super gross in some places and I do intend to clean it up eventually, but here it is.