How we stopped using the mouse and started drawing molecules with our fingertips: not the usual porting story

Porting to mobile a Qt desktop application that lets you draw molecules, crunches numbers, stores data, displays plot and graphs it’s something that goes far beyond converting a QWidget to a Qml component. You have to change user's perspective, merging what they expect from a mobile application with what they expect from a scientific software. You have to
outsource heavy computational parts and data storage. You have to code from scratch components that don’t exist yet in the Qml ecosystem.

With the arrival of Qt 5 and the support for Android and iOS, we realized that simply moving our legacy code to the new version of the framework still keeping the QWidget approach wouldn’t be worth it: we needed to port our applications to Qml and open to a whole new set of platforms.

In this talk you’ll get the lessons learned during a porting journey lasted more than 6 months, with particular reference to the following topics:

- Rethink a complex user model for drawing molecules so that one can use their fingers on mobile and touch screens, still keeping it usable on a desktop through the mouse
- Moving heavy computations on the cloud using REST and OAuth2 to exchange data.
- Provide a theming system for the UI, following Material Design principles but keeping a good user experience on the desktop
- Refactor graphic and drawing components with a pixel independent approach
- Develop a brand new interactive 2D plot with Qml in mind

Transcript

1. How we stopped using the mouse and started drawing molecules with our fingertips. Massimiliano Pippi software engineer
2. 2 A software by Molecular Discovery, http://moldiscovery.com. • In-silico computation of pKa values for chemical structures. • For mere mortals: you draw a molecule, MoKa tells you how it’ll behave in a solution. • Critical information in different areas of chemistry, biology, drug discovery • Qt based desktop application for Windows, Linux, OS X Introducing MoKa
3. 3 MoKa was a success: • Reliable • Fast • Lightweight • Easy to use Next step: • A new graphical appeal, port to Qt5 A journey towards mobile platforms
4. 4 MoKa was a success: • Reliable • Fast • Lightweight • Easy to use Next step: • A new graphical appeal, port to Qt5 • Rethink the whole project • Deploy on brand new platforms: Android and iOS A journey towards mobile platforms
5. The old school cool: mouse and keyboard 5 https://youtu.be/zy5AYjrrDqk
6. 6 The “easy” part: Qml-ize everything Rewrite all we could with Qml and proceed with: • phase 1: produce a working desktop application • phase 2: port the desktop app to mobile Most was free lunch with one, notable exception: • the molecular drawing tool
7. 7 Couldn’t afford to rewrite the molecular drawing tool! • Leave the Qt-widget component as is • Silence any event-driven functionality • Build a Qml component on top of it • Make all the event logic at the Qml level and send imperative commands to the component below Break the mouse-driven design
8. 8 The Qml desktop version https://youtu.be/rIfWuLy1SKE
9. 9 Live on Android https://youtu.be/GVnNRBR1JPA
10. 10 The art of making decent UIs
11. 11 The art of making decent UIs Mut UI toolkit • Common Mobile Patterns • Material Desing • Custom Theme and Components • Open Source github.com/evonove/mut
12. 12 The art of making decent UIs Qnite • Qml 2D plot library • Interactive • Histogram, Scatter, Profiles, … • Performing • Open Source github.com/evonove/qnite
13. 13 MoKa uses the CPU to compute data. Not too much indeed, but: • Don’t let users compare mobile and desktop performances • Battery is precious • Multitasking on desktop is taken for granted, on mobile it’s not And speaking as an engineer: • Deploying legacy dependencies on mobile platform is a mess I avoid willingly. Crunch numbers on the cloud
14. 14 Move computation behind a web server talking REST Positive side effects: • Computation is asynchronous by design • Data can be synced across devices • CPU and storage can scale And for the joy of marketing: • Completely new licensing models are finally possible Crunch numbers on the cloud
15. 15 Timeline: • Porting started on: March 2014 • Desktop version internally released on: Mid 2014 • Android app publicly released on: June 2015 • iOS app will be released before the end of the year The team: • 3 engineers, 1 designer, a bunch of chemists Conclusions
16. http://dev.pippi.im mpippi@gmail.com @maxpippi Thank you!