Signals Blog

Five Solved Problems in Optimizing ChemWriter for iPad

A major benefit to developing with ChemWriter, our chemical structure editor written in JavaScript, is that it's capable of running on tablets from a variety of manufacturers. However, just because ChemWriter can in principle run on a given tablet does not necessarily mean that ChemWriter works well on it.

My experience with tuning ChemWriter's performance for the iPad is a case in point. Although rendering the editor and its contents has required almost no optimization, getting touch events to work smoothly has been a real challenge. Below are some of the challenges we've addressed:

  1. Eliminate mouse event handlers. By default, Mobile Safari attempts to map mouse event handlers to touch event handlers. Although this can be a convenience, for custom components like ChemWriter, the mapping is poor at best. We solved this problem by suppressing the connection of mouse handlers when Mobile Safari is detected.
  2. Connect touch event handlers. With the mouse event handlers eliminated, touch event handlers needed to be put in their place. Unfortunately, detailed documentation on this topic, although available, is scattered throughout the Web. The process of implementing and debugging touch event handlers is made all the more difficult by lack of good developer tools along the lines of Firebug for desktop browsers.
  3. Fix bugs relating to the differences between mouse and touch events. At multiple points in optimizing ChemWriter for iPad, I was bitten by a very hard-to-diagnose behavior that appears to never have been reported: when an SVG element on which a touchstart event has been triggered is removed from the DOM, no touchend event is ever fired. This is confusing because mouseup events are fired even after an element has been removed.
  4. Fix bugs relating to scrolling on iPad. To create new atoms and bonds, ChemWriter requires the coordinate of a touchstart event relative to the Canvas area. It turns out that mobile Safari treats scrolling differently than any other browser, including OS X Safari, requiring special treatment to get new bond sprouting via tapping to work right.
  5. Enable large button icons. The first iteration of ChemWriter's icon system hard-coded icon sizes of 20x20 pixels. This turned out to be too small for a touch interface. Enlarging buttons (and the corresponding icons), resulted in a major rewrite of the ChemWriter icon display system.

Future Work

The most important iPad-specific performance problems have been addressed in ChemWriter. Nevertheless, there remains room for improvement. Some improvements will be relatively minor (e.g., removing the artificial delay on tapping a button, and pinch-to-zoom on Canvas), whereas other will be more involved (e.g., finding a quicker way to move structures around the Canvas and add heteroatoms). Future articles will discuss these and other ChemWriter optimizations for iPad.