Introducing Dart to an HCI Class
I got an opportunity to teach an undergraduate course with my research advisor (Mike Horn) during the winter quarter (Jan. 7th to Mar. 16th, 2013) at Northwestern University. This post is mainly about why we opted for Dart, and the experience of teaching it to students with minimal web development experience.
About the course (Introduction to HCI, EECS 330)
Behind the fairly nondescript course name were principles for designing and analyzing interactive systems; topics included user-centered design, an overview of human cognitive and physical abilities, prototyping techniques, and information visualization. This was a project based course, where students were to work in teams of 3-4 to design and test a user interface for a web application.
A total of 65 students enrolled, 7 students dropped out. The class had approximately 50% computer science students, while the rest were a diverse bunch from mechanical engineering, electrical engineering, and even a few from the school of music.
Why Dart?
A lot of factors played into choosing to introduce the class to Dart.
1. With approximately 11 weeks of teaching time, half of which was to be spent by the students designing and prototyping (topic for another post, we experimented quite a bit with this), students would be left with five and a half weeks for implementation —- a really short development cycle.
2. While there were many non-computer science students enrolled in the class, most engineering students were taught object oriented programming with Java in their first year. It seemed to us that Dart would be a more familiar (object-oriented!) and structured way of getting into web programming.
3. Without even looking at performance numbers, and purely from a software engineering point of view (e.g. structured, object-oriented way of doing things), we were really excited by Dart’s promise. The option of using dart2js to convert the dart code to javascript and running it on any browser on any platform was a very compelling feature as well.
In fact, compelling enough to use Dart to write major chunks of two NSF funded research projects at our lab.
4. Dart came with an IDE and a debugger. For students new to web development (or any development for that matter), having an IDE lowers the barrier to entry. The built in web-server also helped.
5. For students wishing to use hardware sensors on mobile devices, PhoneGap was an option, and I had already gotten PhoneGap to work with Dart. This did not pan out, we ran out of time.
In short, we believed that the students would find Dart easier to learn and we were excited enough about it to give teaching Dart a shot.
Parts of Dart taught in class
— Dart basics mostly culled from the “A Game of Darts” tutorials.
— Using the HTML5 canvas with Dart to draw interesting shapes, and animating them.
Feedback from students
Almost all computer science students liked it. Those who had programmed in Javascript found the structured, object oriented approach a welcome change from regular web development.
The rest were more of a mixed bag; we had a few students complaining about the rapid release cycle and a few breaking changes. Streams were changed somewhere between our preparing the course documents, and the students using them in class, which meant a lot of window.setIntervals were no longer working :) (in fact, the HTML5 canvas tutorial linked above still hasn’t been fixed … will do so soon). However, most of these students were quickly comfortable with Dart’s syntax and development process.
Also, almost everyone liked having a fairly light weight IDE and debugger. The datum for most students was Eclipse though, so naturally, the DartEditor seemed much friendlier.
Shall we teach Dart again ?
Absolutely!
Of course, it wasn’t all smooth sailing this time around, but we sort of knew that going in. Also, I personally was learning Dart as we were going along (and still am). That meant that there were lots of tiny details that could have gone a long way in making it easier for the students.
For a product under development, Dart was remarkably easy to get off the ground with and our basic assumption that the students would find structured web development easier to assimilate was completely validated. Also, since this class is next scheduled for 2014 winter, we expect Dart to be significantly more mature by then.
NOTE: Even before that, the recent M4 release stabilizes the Dart core and collection libraries (Link). Seems like a solid foundation to start from.
Misc. Notes.
- No one in class had heard of Dart before we introduced it. Since Google experiments with lots of new technology, it’d be good to know that Dart is here for the long run. Not sure if that’s even possible to guarantee, but some example of Google products built with Dart on the official blog would be nice (e.g. the world wide maze had a loader that looked a bit like the Dart logo, but I might completely mistaken).
- Notification of breaking changes could be better. Release notes on SDK/IDE upgrades with links to appropriate developer documentation would be nice.
- Students want to pull in Javascript libraries from time to time, the js-interop documentation (at the time of this writing) needs a little more work.
- Tight integration with App-Engine? For example, one-click upload for the Dart project, and App engine serves the Javascript version automatically?
Credits: Thanks Mike for helping me figure out the content for this post.
Update: (Aug' 8, 2018) - Dart 2.0 was released. It's been a while since we've been working with Dart. With any new technology, hiccups are pretty much agiven, but I have to say that Dart has been pretty good to us throughout, steadily improving. Many thanks to folks working on it :).