Saturday, May 9, 2020

Something like a Summer Devlog, Part 1: Exploring simple burndown charts for the Web

The past two weeks, I have had the freedom to explore some new territory, and it seemed like a good idea to try to leave some notes about it. Two weeks ago was finals week, during which time I could work on my own explorations between grading and report-writing; this past week had me wrapping up the last loose ends from the Spring semester while taking some deep dives. What I'll do in this post is write about what I was working on two weeks ago, since I made a significant pivot in my attention around last weekend.

I wrote about how my CS490 students did not use burndown charts as effectively as I would have liked, but how there was also no easy tools I could put into their hands to do them the way that I prefer. I started looking into building something myself. My first thought was to go back to my staple for Web development, lit-html and the PWA Starter Kit that uses it. I was surprised to see that the PWA Starter Kit has been discontinued, but the authors suggested trying open-wc, which I did. It's an impressive project, and exploring this got me looking into several other interesting pieces, especially Storybook for testing web components. I suspect that, once we get to summer's Fall Course Planning phase, I'll turn back to open-wc as a new generator for my course sites.

The major complication of a web-component-based burndown chart generator was the unexpected complexity of handling dates and times. The Javascript Date object works as expected, but there is no standard widget for reading a date from the user. Vaadin has a nice one, but I was surprised that the Material design component developer documentation is still only "planned". The documentation for the "date" type for the standard HTML input element says, basically, don't use it. None of this was a showstopper of course, but also, none of it was fun. Using Vaadin's input component, I built a minimum working prototype that draws a steady line using the web component version of Google's chart API.

Around this time, something inspired me to check again whether Flutter had incorporated their HTML5 support. It's been on my radar for a while, but last I checked, Web support was being developed while Android and iOS were the clear "real" targets. As of last week, you could do HTML5 output with Flutter through the beta channel, so I decided to check this out as well. I was impressed by how tight all the tooling worked together, but unfortunately I ran into a problems with hot reload working on Linux. Again, on the flip side, the tooling made it painless to get everything set up again on Windows, although I much prefer to develop in Linux. I enjoyed tinkering with Flutter, and there are some nice aspects to the Dart language. I was also able to make a minimum working demo for the Web in Flutter of a burndown chart with a steady line and sample data using the charts_flutter library.

In both cases, I was able to get demos up and running very quickly. Both were just technology demos though: I did not put any real thought into the UI design, just assembling pieces to understand how they would work together. I feel like I got out of this project everything I needed for now, since there's no imminent need for something that makes simple burndown charts. I may return to this project later in the summer, or even in the semester as a teaching and service project, but I set them aside at the end of last week so I could turn toward some game development ideas. That's a topic for another time.

No comments:

Post a Comment