Journal of Cheminformatics volume 11, Article number: 11 (2019)
Computer literacy is an essential skill for scientists. Computers can execute the same operations humans can perform, but far more consistently and at rates far beyond human capability, allowing researchers to investigate numerous hypotheses in short order. Programmers have even more advantages, as they can directly communicate with the computer to achieve their desired goals, as opposed to relying on software someone else has created for another purpose.
Many programming languages have been developed to facilitate instructions to the computer. Each has its advantages, which is why they each exist. Each programming language also has its disadvantages, which is why the rest exist.
HTML5 is a moniker describing the most recent iteration of these internet technologies, namely it is the current version (version 5) of HTML. HTML4 defined most of the history of the Internet. HTML4 provided only limited functionality to website authors; therefore solutions like Flash and Java applets came into existence. HTML5 defines features previously only available in plug-ins, directly through native browser functionality while providing extensibility not possible with previous versions of HTML.
For security reasons, AJAX requests were limited to contacting the host origin, but HTML5 brought XHR2, which provided a new protocol to allow XMLHTTPRequest to contact and validate connections to external origins.
Scalable Vector Graphics (SVG)  is a complementary graphical feature in HTML5. SVG is an XML protocol defining 2D drawing instructions for graphics, but lacks capability for defining 3D objects. HTML5 <canvas> is based on a bitmap buffer, so the scale and resolution of the screen or device must be properly taken into account for clear graphics. SVG rendering is independent of the resolution or scale of the device. Creating dynamic applications with SVG is more difficult as any changes require DOM manipulation.
At the time of this writing, the latest version of ECMAScript is version 9, also known as ECMAScript 2018 . Technologies evolve rapidly and information herein may become obsolete as changes are made.
Reinforcing the basics
Integrated Development Environment
As HTML5 continues to evolve, new features continue to be invented and extensions to old features are introduced. Each of the browsers is developed independently on its own schedule, so implementation of HTML5 features is far from synchronized. Polyfills can be used to inject behavior before features are natively implemented, and removed when the features are universally available. For instance, requestAnimationFrame() is recommended for WebGL animations, while setTimeout() is the traditional function for working with timers. A polyfill can check if requestAnimationFrame() exists, and if not, create one using the setTimeout() function.
The const keyword declares an unchangeable variable, similar to the final modifier in Java. If a const variable is assigned to an object, the object’s properties can be changed, while the variable pointer to the object cannot. This technique is useful when creating a value that should remain consistent throughout the lifetime of the application, such as core bond order variables in cheminformatics toolkits.
If no keyword is used when declaring a variable, the visibility of the variable becomes global regardless of the scope it is in, polluting the global namespace and potentially causing issues. This should never be done.
In addition to exposing implementation, the global scope can become a hindrance to programming, as care is needed to avoid name clashes that would overwrite previously defined variables. As multiple libraries are included into a webpage, such conflicts are inevitable. In chemistry, every library will undoubtedly contain a “Molecule” class. The increased probability of conflict caused by creating global variables is called global namespace pollution. Avoiding pollution is a requirement for any usable scientific library. Techniques for doing so are discussed in the "Object Oriented Programming" section.
The created function is now an object in its enclosing scope. The function can be accessed as an object by using the function name and can be executed by using the function name followed by an invoking pair of parentheses.
Object Oriented Programming
The new keyword is used to instantiate an object from the class definition as shown on line 12 of Listing 8. Once instantiated, associated class functions are accessible from the object. Functions declared inside of the constructor are called privileged functions and can access private variables defined in the constructor scope, but will be created anew for each instance.
In the global namespace, this refers to the window object. In any functions created outside of objects, this also refers to the window object, unless the source is being interpreted in strict mode, vide infra, in which case this is undefined. There is an exception if the function acts as an event handler set through the addEventListener() function or through an inline on-event handler, and in these cases this refers to the DOM object firing the event.
Immediately invoked function expression
The final pair of parentheses used for invoking the function can be included inside or outside of the closing parenthesis of the grouping operator; its positioning makes no difference to the behavior.
A library written in a single IIFE would quickly become unmanageable, and so several IIFEs can be used to link individual segments of logic, referred to as modules, into a single library utilizing parameter imports. Listing 14 shows how the module pattern can be used to organize discrete classes. Classes can then be easily added and removed.
The module design pattern aids developers in writing more organized source code, where individual classes can be independent, allowing for extensible and sustainable libraries. By creating a linked library based on IIFEs, controlled access can be provided through a single variable placed in the global namespace. This is the best practice for avoiding global namespace pollution. While development is facilitated by this pattern, care must be taken when considering the dependencies linked into each module and their order in source.
Americans with Disabilities Act
Application Programming Interface
Chemical Abstracts Service
Code of Federal Regulations
Chemical Markup Langauge
Cascading Style Sheets
Document Object Model
European Computer Manufacturers Association
Euclidean Distance Transform
Electronic Laboratory Notebook
General Data Protection Regulation
GNU’s Not Unix!
Google Web Toolkit
General Public License
Graphical User Interface
Integrated Development Environment
Immediately Invoked Function Expression
International Organization for Standardization
Hypertext Markup Language
Version 5 of HTML
Hypertext Transfer Protocol encrypted using Transport Layer Security
Macromolecular Transmission Format
Object Oriented Programming
Open Graphics Library
- OpenGL ES:
OpenGL for Embedded Systems
Protein Data Bank
Progressive Web Application
Research Collaboratory for Structural Bioinformatics
Secure Sockets Layer
Scalable Vector Graphics
Web Content Accessibility Guidelines
Web Graphics Library
Extensible Markup Language
Yahoo! User Interface
Java.com: Java + You. https://www.java.com/. Accessed 29 Jan 2019
Adobe Flash Player. https://www.adobe.com/products/flashplayer.html. Accessed 29 Jan 2019
JEP 289: Deprecate the Applet API. http://openjdk.java.net/jeps/289. Accessed 29 Jan 2019
Microsoft Silverlight. https://www.microsoft.com/silverlight/. Accessed 29 Jan 2019
Microsoft Embraces ECMA Internet Scripting Standard; Delivers Industry’s First ECMA-Compliant Scripting Language, JScript 3.0, In Key Microsoft Products. https://web.archive.org/web/20090112221530/http://www.microsoft.com/presspass/press/1997/Jun97/jecmapr.mspx. Accessed 29 Jan 2019
Dart Programming Language. https://www.dartlang.org. Accessed 29 Jan 2019
Welcome to Ecma International. https://www.ecma-international.org. Accessed 29 Jan 2019
ECMAScript 2018 Language Specification. https://www.ecma-international.org/ecma-262/9.0/index.html. Accessed 29 Jan 2019
HTML Canvas 2D Context. https://www.w3.org/TR/2dcontext/. Accessed 29 Jan 2019
WebGL Specifications. https://www.khronos.org/registry/webgl/specs/latest/. Accessed 29 Jan 2019
Node.js. https://nodejs.org/. Accessed 29 Jan 2019
ActionScript Technology Center. https://www.adobe.com/devnet/actionscript.html. Accessed 29 Jan 2019
Rhino M |MDN. https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Rhino. Accessed 29 Jan 2019
Extensible Markup Language (XML) 1.0, 5th edn. https://www.w3.org/TR/xml/. Accessed 29 Jan 2019
Burger MC (2015) Chemdoodle web components: Html5 toolkit for chemical graphics, interfaces, and informatics. J Cheminf 7:1–7
Rego N, Koes D (2015) 3Dmol.js: molecular visualization with WebGL. Bioinformatics 31:1322–1324
Gorn S (1964) FORTRAN vs. basic FORTRAN: a programming language for informational processing on automatic data processing systems. Commun ACM 7:591–624
Welcome to Python.org. https://www.python.org. Accessed 29 Jan 2019
Kernighan B, Ritchie DM (1988) The C programming language. Prentice Hall, Westford
Ertl P, Patiny L, Sander T, Rufener C, Zasso M (2015) Wikipedia chemical structure explorer: substructure and similarity searching of molecules from wikipedia. J Cheminf 7:1–7
Actelion/openchemlib: Open source Java-based chemistry library. https://github.com/actelion/openchemlib. Accessed 29 Jan 2019
O’Boyle NM, Banck M, James CA, Morley C, Vandermeersch T, Hutchison GR (2011) Open Babel: an open chemical toolbox. J Cheminf 3:1–14
PhoneGap. https://phonegap.com. Accessed 29 Jan 2019
Apache Cordova. https://cordova.apache.org. Accessed 29 Jan 2019
Progressive web apps: escaping tabs without losing our soul. https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/. Accessed 29 Jan 2019
The GNU General Public License V3.0. https://www.gnu.org/licenses/gpl-3.0.en.html. Accessed 29 Jan 2019
Closure compiler. https://developers.google.com/closure/compiler/. Accessed 29 Jan 2019
YUI Library. https://yuilibrary.com. Accessed 29 Jan 2019
EU GDPR information portal. https://www.eugdpr.org. Accessed 29 Jan 2019
CFR—code of federal regulations title 21. https://www.accessdata.fda.gov/scripts/cdrh/cfdocs/cfcfr/CFRSearch.cfm?fr=11.1. Accessed 29 Jan 2019
RFC 2818—HTTP Over TLS. https://tools.ietf.org/html/rfc2818. Accessed 29 Jan 2019
About Native XMLHTTP (Internet Explorer). https://msdn.microsoft.com/en-us/library/ms537505(v=vs.85).aspx. Accessed 29 Jan 2019
Bradley AR, Rose AS, Pavelka A, Valasatava Y, Duarte JM, Prli A, Rose PW (2017) Mmtf an efficient file format for the transmission, visualization, and analysis of macromolecular structures. PLOS Comput Biol 13:1–16
Kernighan B, Ritchie DM (2017) Standard ECMA-404: the JSON data interchange syntax. Ecma International, Geneva
ChemDoodle JSON Format. https://web.chemdoodle.com/docs/chemdoodle-json-format/. Accessed 29 Jan 2019
Open Chemistry. https://www.openchemistry.org. Accessed 29 Jan 2019
Development of the chemical JSON data representation. https://github.com/OpenChemistry/chemicaljson. Accessed 29 Jan 2019
Murray-Rust P, Rzepa HS (1999) Chemical markup, Xml and the Worldwide Web. 1. Basic principles. J Chem Inf Comput Sci 39:928–942
GWT. http://www.gwtproject.org/?csw=1. Accessed 29 Jan 2019
Hanson RM, Prilusky J, Renjian Z, Nakane T, Sussman JL (2013) Jsmol and the next generation web based representation of 3d molecular structure as applied to proteopedia. Isr J Chem 53:207–216
SwingJS. https://chemapps.stolaf.edu/swingjs/site/swingjs/examples/. Accessed 29 Jan 2019
The periodic table of the elements by WebElements. http://www.webelements.com/. Accessed 29 Jan 2019
Dynamic periodic table. https://ptable.com. Accessed 29 Jan 2019
3D rotating molecules on the iPhone/iPad. http://jackadam.github.io/2010/3d-rotating-molecules-on-the-iphoneipad/. Accessed 29 Jan 2019
CanvasMol. https://alteredqualia.com/canvasmol/. Accessed 29 Jan 2019
TwirlyMol. https://baoilleach.blogspot.com/2009/01/twistymol-is-dead-long-live-twirlymol.html. Accessed 29 Jan 2019
Jolecule: the protein viewer in the cloud. https://jolecule.appspot.com. Accessed 29 Jan 2019
CWC: protein ribbon models. https://www.macinchem.org/reviews/protein-ribbon-models.php. Accessed 29 Jan 2019
Scalable vector graphics (SVG) 2. https://www.w3.org/TR/SVG/. Accessed 29 Jan 2019
Sketcher Canvas | ChemDoodle Web Components. https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/. Accessed 29 Jan 2019
Ketcher. http://lifescience.opensource.epam.com/ketcher/. Accessed 29 Jan 2019
2010 ADA Standards for Accessible Design. https://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm. Accessed 29 Jan 2019
W3C Web content accessibility guidelines (WCAG) 2.0. https://www.iso.org/standard/58625.html. Accessed 29 Jan 2019
SciFinder-n | CAS. https://www.cas.org/products/scifinder-n. Accessed 29 Jan 2019
Web storage, 2nd edn. https://www.w3.org/TR/webstorage/. Accessed 29 Jan 2019
Web Workers. https://www.w3.org/TR/workers/. Accessed 29 Jan 2019
Web Audio API. https://www.w3.org/TR/webaudio/. Accessed 29 Jan 2019
The WebSocket API. https://www.w3.org/TR/websockets/. Accessed 29 Jan 2019
jQuery. https://jquery.com. Accessed 29 Jan 2019
Enterprise web apps: design, develop, and test—Sencha. https://www.sencha.com. Accessed 29 Jan 2019
Browserify. http://browserify.org. Accessed 29 Jan 2019
Webpack module bundler. http://webpack.github.io. Accessed 29 Jan 2019
Todsen WL (2014) Chemdoodle 6.0. J Chem Inf Model 54:2391–2393
KJT is the sole author. The author read and approved the final manuscript.
The author wishes to thank Clinton McFeely, Dr. Noel O’Boyle, Professor Heinz D. Roth, Dr. Joseph W. Walsh and Dr. Wendy A. Warr, for reading the entire manuscript and making valuable suggestions. This work is dedicated to my loving parents, Gerard and Karen.
The author declares he has no competing interests.
Availability of data and materials
Consent for publication
Ethics approval and consent to participate
This review was not funded by any external funding agency.
Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.
About this article
Cite this article