The document discusses developing cross-platform mobile chemistry apps using PhoneGap. PhoneGap allows authoring native apps with HTML5, CSS, and JavaScript, accessing device APIs. The presenter developed apps for iOS and Android simultaneously with minimal costs. Apps were built with HTML5, ChemDraw files converted to images, and native bridges for performance. Lessons included fast development with powerful tools, easy feedback, and keeping code platform-independent.

1. Cross-Platform Mobile
Chemistry Apps
Rich Apodaca
Metamolecular, LLC
American Chemical Society • Denver, CO • August 29, 2011

2. Welcome Aboard! Now Pick One
rapodaca@metamolecular.com

4. Remember Us?
rapodaca@metamolecular.com

5. Single Platform? Multi-Platform?
• Developer expertise
• Multiplied time & cost
• Fragmented team/codebase

6. Reagents
• iOS & Android
• App Store
• Minimize costs
• Automate
production

7. PhoneGap
“PhoneGap is an HTML5 app platform
that allows you to author native
applications with web technologies and
get access to APIs and app stores.”
App
App App App
HTML5
rapodaca@metamolecular.com

8. HTML5
+ +
CSS3 HTML5 JavaScript
“The first major update to HTML since 2001...”
rapodaca@metamolecular.com

9. Workflow
+
Build System
Plain Text Binary ChemDraw HTML5
rapodaca@metamolecular.com

10. ChemDraw to Images
ChemBot & AppleScript
Binary ChemDraw PNG Images
tinyurl.com/chembot
rapodaca@metamolecular.com

11. Development & Testing
rapodaca@metamolecular.com

12. Deployment
desc "Deploy files to PhoneGap project"
task :deploy => :compile do
FileUtils.cp_r 'www', '..'
end
Concept to App Store in 6 weeks
rapodaca@metamolecular.com

13. Android Deployment
rapodaca@metamolecular.com

14. Lessons Learned
Reagents
• Fast development using powerful tools
• Feedback: easy as emailing a zip file
• Six-week turnaround time
• Android version practically no cost
• No Objective-C or Java
rapodaca@metamolecular.com

15. Apps for Research
• Data management & visualization
• Advanced tooling: cheminformatics
• File I/O & System Integration

16. ChemTab - Vision
Browse chemical database files on your tablet
rapodaca@metamolecular.com

18. ChemTab Architecture
ChemTab
Portable
JavaScript
Cheminformatics UI Emulation Native
Bridge
Structure Editor & Renderer Widgets Integration
Native OS Java, Obj-C,
etc.
rapodaca@metamolecular.com

19. ChemWriter
Plugin-Free Structure Editing
http://chemwriter.com
rapodaca@metamolecular.com

20. ChemVector
In-Browser Structure Rendering
rapodaca@metamolecular.com

21. JavaScript-Native Communication
JavaScript
chemtab.io.Store.prototype.load = function(filename) {
PhoneGap.exec('chemtab.io.NativeStore.load', goog.getUid(this), filename);
};
Objective-C
-(void) load:(NSMutableArray*) arguments withDict: (NSMutableDictionary*) options {
[self openFile:[arguments objectAtIndex:1]];
[self createIndex];
[self callJavascript:[arguments objectAtIndex:0] withMessage:@"onLoad" withArgs:nil];
}
JavaScript
chemtab.io.Store.prototype.onLoad = function() {
this.dispatchEvent(chemtab.io.Store.EventType.FILE_LOADED);
};
rapodaca@metamolecular.com

22. Lessons Learned
• Any native system call can be
made through JavaScript
• JavaScript on iPad ~20x slower
than iMac
• Cheminformatics and
application code can be kept
platform-independent
• Performance-tuning with native
code
rapodaca@metamolecular.com

23. Acknowledgements
James Ashenhurst
Robert Apodaca
Zachary Catlin
Orion Jankowski
PhoneGap, Node.js, Jo,
Google Closure, and
Jasmine Projects
rapodaca@metamolecular.com

24. Learn More
rapodaca@metamolecular.com
metamolecular.com/blog/
@rapodaca
rapodaca@metamolecular.com

25. Image Credits
http://www.flickr.com/photos/viknanda/403371973/
http://www.flickr.com/photos/pfly/188629337/
http://www.flickr.com/photos/nofailsafe/4610092117/
http://www.flickr.com/photos/jdhancock/3408649524/
rapodaca@metamolecular.com