ChemDoodle Web Components: HTML5 toolkit for chemical graphics, interfaces, and informatics.

ChemDoodle Web Components (abbreviated CWC, iChemLabs, LLC) is a light-weight (~340 KB) JavaScript/HTML5 toolkit for chemical graphics, structure editing, interfaces, and informatics based on the proprietary ChemDoodle desktop software. The library uses <canvas> and WebGL technologies and other HTML5 features to provide solutions for creating chemistry-related applications for the web on desktop and mobile platforms. CWC can serve a broad range of scientific disciplines including crystallography, materials science, organic and inorganic chemistry, biochemistry and chemical biology. CWC is freely available for in-house use and is open source (GPL v3) for all other uses.Graphical abstractAdd interactive 2D and 3D chemical sketchers, graphics, and spectra to websites and apps with ChemDoodle Web Components.

Introduction

How we communicate chemical information is increasingly technology driven. Learning management systems, virtual classrooms and MOOCs are a few examples where chemistry educators need forward compatible tools for digital natives. Companies that implement emerging web technologies can find efficiencies and benefit from competitive advantages. The first chemical graphics toolkit for the web, MDL Chime, was introduced in 1996 [1]. Based on the molecular visualization program RasMol, Chime was developed as a plugin for Netscape and later for Internet Explorer and Firefox. In 2004 Jmol, a Java applet [2], was released to replace Chime and provide an open source and operating system independent solution to the growing number of web browsers. JME, a molecular editor [3], was later integrated into Jmol to add chemical structure upload and editing functionality. In 2007 however, the hardware landscape changed dramatically with the introduction of mobile devices that did not support third party plugins such as Flash or Java applets. Mobile browsers did support HTML5, which opened the door to web applications built with only HTML, CSS and JavaScript (JS), such as the ChemDoodle Web Components.

Review

The ChemDoodle Web Components technology stack and features

The ChemDoodle Web Components library, released in 2009, is the first chemistry toolkit for structure viewing and editing that is originally built using only web standard technologies, HTML5, CSS, and JS, and is accordingly supported by all modern desktop and mobile browsers. CWC is made available under the free and open source, GNU GPLv3 license and is accompanied by detailed documentation and commercial support packages. The CWC source code follows JS best practices to ensure maintainability and cross-compatibility with other libraries and frameworks.

Using web standard technology has a number of advantages over 3rd party plugins like Java applets and Flash:

installation or updates are not required since JS is enabled in browsers by default,

JS applications are quick to load without the overhead of 3rd party plugins,

there are fewer security concerns since the code is sand-boxed in the browser,

the deep integration of HTML, CSS and JS in the browser creates a seamless user experience, and

the ChemDoodle Web Components library can be loaded and displayed wherever a HTML5 engine is available, including WYSIWIG text editors, Apple’s Cocoa development kit, and mobile app webviews.

Beyond rendering 2D and 3D chemical graphics, the library also provides access to cheminformatics algorithms, chemical file input/output and manipulation, and a toolset for chemistry web application development through a component system that gives the library its name. The components of the CWC library are specialized HTML5 classes that expose a high-level API for quick loading and viewing of chemical data, as well as providing utility functions and multi-device event handling. When first released, CWC comprised of 6 components: the Viewer, Rotator, Transformer, MolGrabber, File Loader, and Doodler (pre-cursor to Sketcher) components. Averaging a yearly version release cycle, CWC has now grown to 20 components including ones for displaying chemical spectra, 3D WebGL graphics, and animations. The latest update, version 7, introduces new 3D features including Pipe and Plank protein models, full support for high DPI and retina display devices, query interface tools for advanced chemical searches, and structure spectrum correlation utilities.

Usage

A ChemDoodle Web Component is implemented in four basic steps (Figure 1). First, the ChemDoodle Web Components library is referenced within the HTML document. Second, the component is instantiated on the page within a JavaScript code block. The appearance of the component can be customized in an optional third step. Finally, molecular data is loaded into the component either by creating a molecule manually, or by fetching ChemDoodle JSON or the contents of a MOL file or other molecular structure file. The components are “chemically intelligent”: chemical data loaded in components can be later handled or altered with scripting. Support for building components is also available in the ChemDoodle v7 desktop application. Component code can be exported through the “Generate ChemDoodle Web Component” dialogue screen, however, advanced users will prefer to use the CWC API (Figure 2) for full control over component appearance and behavior. Tutorials for using the CWC API are provided on the CWC website, web.chemdoodle.com.

Figure 1

JavaScript code for creating an instance of a Viewer component on a web page. The ChemDoodle Web Components library is A included in the web page using the