Wednesday, November 09, 2016

Building Shared Checklist (Part 2): The Web Application

After the Android App was done, I turned my attention to building a web application. There were several motivations for this: first, I do enjoy sitting down in front of a desktop (or laptop) with a real keyboard. Nothing makes for fast data entry than a real physical device that's optimized for typing. Secondly, I wanted to explore the world of web applications. Remember that as a back-end guy for much of my career, I'd skipped the entire javascript-heavy universe of web application frameworks.

In the old days, web applications used to have 3 tiers: the client, the application server, and the database. The application server would keep tracks of things like sessions and cookies, using the database only for persistent data. The "new" approaches are forked into 2 types: the single page Javascript-oriented web application (which Firebase was designed to facilitate), where the client web-browser's Javascript engine would keep track of all the state, and went directly to the database for persistent data, and the REST-ful approach, where each click on a link would encode all the session data so that the application server was essentially stateless and didn't have to maintain state for the client. Both approaches eliminate the scaling problems of the traditional 3-tier approach, but introduced several new problems of their own, as I was about to find out.

My first thought was to try it using GWT. GWT had several nice features: one would have been that I wouldn't have to learn any Javascript. Another was a one-click deploy into Google's App Engine, which was also very appealing. Finally, I'm a big fan of static type-checking being able to eliminate an entire class of bugs.

Imagine my disappointment when I discovered that there was no integration package between Firebase and GWT whatsoever. OK, no problem, I could write my own wrapper around the Firebase javascript stuff and GWT. I tried that and discovered that Javascript objects passed into the GWT Java code became opaque objects that couldn't be used! This was very disappointing. I was even more disappointed when I discovered that it also made debugging very painful --- the GWT-generated Javascript was even more impenetrable than I imagined, and I'd have to end up learning Javascript anyway to do any kind of intense debugging. So I gave up on GWT and went full-on into writing a Javascript single-webpage web application.

Not being much of a UI guy, I looked around for a Javascript UI library, and found webix. The Treeview looked like exactly what I wanted, and I jumped right into using it. As with the Android App, the Firebase Web API (really Javascript API --- there's no server->server integration in Firebase land) is callback-oriented.

This is really weird, since if I wanted to get the user to Login right away, there's no easy way to say, "Hey, show this UI only after the user's done logging in." I tried some forms of deferred execution, but there's a real weird interaction between "login using a popup window" and the use of the Javascript firebase API.

In the end, I got it all to work, but it was clunky. For instance, I was forced to pop up dialog boxes, etc., to get the user to input a new checklist, or even a new checklist item. This was unsatisfying: in practice, I wanted people to be able to push a "+"  button somewhere on the tree and then edit a text-field inline like in the Android app. But since Webix wasn't really designed to do so without you jumping in and modifying the code, I couldn't easily do this. In the end I stuck with dialog boxes all over the place.

All in all, I'm definitely unsatisfied with the result. The debugging was also a pain: any kind of error in the Javascript causes the entire web page to freeze, and then you'll be digging through the debugger's console trying to spot and reproduce what's going on. It's not even fast compared with the Android app despite not having to download to a device. I guess that makes responsive, fast UIs in Javascript applications like GMail even more impressive to me now than they were in the past.

Post a Comment