Stir Trek v4
A new Stir Trek scheduling tool.
Stir Trek 2019 is coming soon and I’ve built a new app for it! This one is a bit different from previous versions in that it isn’t in any stores. Instead, it’s online:
It loads the full session list, you can view session details (including speaker info), and save sessions to a personal schedule. It’s responsive, too, and works great on phones.
- 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’t really tell anyone about it outside of AWH, though.
So that brings us to v4. It’s 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’ve 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.
This wasn’t a super smooth process to build. I hit a few problems.
Stir Trek changes their site up each year. That’s 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).
Parsing JSON data usually isn’t 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’s 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’s 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’s a bit gross.
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’s RxJs that annoys me the most. I’m sure I’ll come around to it eventually.
I’m happy with this new version. It’s 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’s pretty and runs smoothly. It’s also a PWA, thanks to Angular’s super-simple PWA support.
There are some improvements I would still like to add. Mostly code cleanup, maybe some more session details. I’ll 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’s how I’m hosting this site and the Stir Trek app. I have my domain tied to it, and it’s 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.