Theisen J Cheminform (2019) 11:11 https://doi.org/10.1186/s13321-019-0331-1 Journal of Cheminformatics
REVIEW Open Access Programming languages in chemistry: a review of HTML5/JavaScript Kevin J. Theisen*
Abstract This is one part of a series of reviews concerning the application of programming languages in chemistry, edited by Dr. Rajarshi Guha. This article reviews the JavaScript technology as it applies to the chemistry discipline. A discussion of the history, scope and technical details of the programming language is presented. Keywords: JavaScript, HTML5, Programming, Chemistry, Cheminformatics, Computational chemistry
Introduction essential access to the Internet, and therefore contains a Computer literacy is an essential skill for scientists. Com- web browser wherein JavaScript can be run. As a result, puters can execute the same operations humans can per- JavaScript is one of the most important programming form, but far more consistently and at rates far beyond languages in existence. human capability, allowing researchers to investigate Tis review investigates the relevance and impact of numerous hypotheses in short order. Programmers have JavaScript on the chemistry discipline. We begin by dis- even more advantages, as they can directly communi- cussing the history of the programming language; then cate with the computer to achieve their desired goals, as we investigate the scope and features of the language opposed to relying on software someone else has created and how it applies to chemistry; last, an outline of the for another purpose. technical details of the JavaScript programming lan- Many programming languages have been developed guage is presented to allow those interested in chemis- to facilitate instructions to the computer. Each has its try and cheminformatics to efectively create JavaScript advantages, which is why they each exist. Each program- applications. ming language also has its disadvantages, which is why the rest exist. What is JavaScript? When the Internet was introduced, society quickly JavaScript is a programming language enabling develop- changed, not just in allowing computers to communicate ers to interact with the functionality provided by web with each other, but by allowing people to communicate browsers. More specifcally, JavaScript is a scripting lan- with each other, nearly instantaneously from around the guage, which means (a) traditionally, JavaScript source world. JavaScript (JS) is a programming language born of code is interpreted at runtime and not pre-compiled into the Internet. From a crude and basic programming lan- byte code and (b) practically, its main purpose is to mod- guage for creating cheap, gimmicky efects on web pages, ify the behavior of another application typically written it has developed into a ubiquitous and fexible technol- in a diferent programming language, in which it is inter- ogy where engine performance is regarded as a crown- preted and run in real time. ing achievement among browser developers. Today, While JavaScript is aptly named as a scripting language, every computational device, from desktops to laptops to the frst part of the name misleadingly refers to the Java mobile phones and Augmented Reality (AR) devices has programming language [1]. JavaScript has no functional relationship with the Java programming language. Te
*Correspondence: [email protected] Java part of JavaScript was used to inspire interest in iChemLabs, LLC., 7305 Hancock Village Dr #525, Chesterfeld, VA 23112, the new scripting language, as Java was and still is a very USA popular programming language; additionally the original
© The Author(s) 2019. This article is distributed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons license, and indicate if changes were made. The Creative Commons Public Domain Dedication waiver (http://creativecommons.org/ publicdomain/zero/1.0/) applies to the data made available in this article, unless otherwise stated. Theisen J Cheminform (2019) 11:11 Page 2 of 19
Netscape browser that included JavaScript was written in provide a more familiar programming syntax for devel- Java. JavaScript has since become an essential and argua- opers and compile into standard JavaScript. bly more important programming language than the one JavaScript has survived many challenges since its incep- inspiring its name. Hence, the programming language tion, and a lot of credit should be given to the Netscape many developers use today to build and interact with web team for their foresight. In order to protect the JavaScript applications is famously known as JavaScript. language early on, the Netscape team pushed for an open standardization of the language, and they were success- Origin ful. We all beneft from the universal and strong support In the early days of the Internet, the web browser pro- for JavaScript in every existing browser today. In spite vided users with static pages to view information. Inno- of the attempts to replace or commandeer the standard, vators at Netscape Communications, producers of the JavaScript persisted and has become a signature pro- popular Netscape Navigator browser, believed web gramming language for most developers, and remains an sites should provide more dynamic material and a pro- important tool for the scientifc communities including gramming language would provide a solution. In 1995, chemists. Brendan Eich, an employee of Netscape Communica- tions, developed what is now known as JavaScript [2]. ECMAScript Initially, JavaScript only provided basic features, but Te European Computer Manufacturers Association, the power of such a programming language on the now known as Ecma International [9], took over the web was quickly realized, and the continued success of governance and standardization of JavaScript in 1996 Netscape Navigator was, in no small part, a refection of and continues to maintain the specifcation for the lan- that power. Alternatives to JavaScript were inevitable and guage to this day. Te JavaScript specifcation is ofcially a number of companies started to produce more feature- named ECMAScript, defned by the ECMA-262 standard rich browser plug-ins that would install their platforms published by Ecma International [10]. So paradoxically, into browsers to be run in web pages. Adobe Flash [3], JavaScript led to the development of the ECMAScript Java applets [4] and Microsoft Silverlight [5] are a few standard that now governs the development of JavaScript. well known examples. Tese plug-ins became popu- JavaScript also contains functionality to access technol- lar solutions for developers, but a hindrance for users ogy standards not governed by Ecma International, such as plug-ins required installations, had to be frequently as HTML5
HTML5 to learn syntax and core libraries dedicated to scientifc Te content we view on the Internet is made possible by a computing. Yet, JavaScript exhibits a number of unique union of several technologies, mainly Hypertext Markup qualities greatly benefting scientists. Development tools Language (HTML), Cascading Style Sheets (CSS) and are available on every scientist’s computer through a web JavaScript. HTML is an Extensible Markup Language browser, free of charge. Distribution through the Internet (XML) protocol defning the Document Object Model is intrinsically supported. Te free availability is essential (DOM). XML is a protocol defned by a clear and exten- to the core goals of science to distribute fact and infor- sible syntax of elements and properties [17]. Te DOM mation and to inspire and educate individuals to pursue is an organization of the elements and properties defn- knowledge. Regardless, there are a number of caveats to ing the data for the page. CSS provides a powerful way using JavaScript, and any scientifc programmer should to control the rendering properties of elements in the be aware of all of the technical features discussed below. DOM, as well as selectors for efciently styling classes and groups. JavaScript is the programming language that Performance allows a developer to perform functions and interact with Te speed of calculations is a top priority when consid- the DOM. ering a programming language. Te faster an application HTML5 is a moniker describing the most recent itera- is, the more calculations it can compute and the more tion of these internet technologies, namely it is the cur- users it can serve. JavaScript performs on the slower rent version (version 5) of HTML. HTML4 defned most end of programming languages. As a scripting language of the history of the Internet. HTML4 provided only lim- being run in a web browser, JavaScript cannot be faster ited functionality to website authors; therefore solutions than the platform it runs on, typically a C [23] deriva- like Flash and Java applets came into existence. HTML5 tive. Te interpretation of JavaScript at runtime makes defnes features previously only available in plug-ins, it inherently slower than its platform environment, even directly through native browser functionality while pro- when taking advantage of just-in-time (JIT) compilation. viding extensibility not possible with previous versions of Simple JavaScript applications can provide a quick and HTML. efcient interface, but will sufer as the complexity of cal- New web technologies emerged, such as native video culations increases. Chemistry algorithms are especially support, localStorage,
it to create full molecular surfaces for proteins based on Swiss army knives. Yet many of their features are not the EDTSurf algorithm [27]. Not one performs at com- accessible in JavaScript (similar to how native desktop mercially acceptable speeds. OS features are not always available in Java). To further Poor performance is further compounded when trying capitalize on JavaScript work, systems like PhoneGap to target mobile platforms, as mobile devices typically [28] and Cordova [29] use the native WebView compo- have less powerful hardware than traditional comput- nents of the mobile operating systems to create native ers. Tis is a serious burden on the developer, as special apps that can take advantage of features not available in care is needed when crafting JavaScript applications, mobile web browsers. WebView based solutions also pro- and the efciency of written code must always be scruti- vide a means for deployment through popular mobile app nized. Web sites and applications that are slow to load or stores. Currently, a diferent approach for creating mobile execute will be immediately ignored by web surfers and apps using just web technologies called a Progressive penalized by search engines. Web Application (PWA) [30] is gaining popularity among It is clear that native implementations will always have developers. Such JavaScript implementations can help a signifcant performance advantage over JavaScript chemistry software developers avoid signifcant develop- implementations. Regardless, there are encouraging ment costs for each platform. trends as technology evolves: we continue to see more Another reason JavaScript is easy to distribute is no powerful processors on smaller devices, mitigating per- pre-compilation is required, nor is the creation of an formance issues. Eventually, the slow JavaScript applica- executable. It is important to understand, while a server tions of today will be the fast applications of tomorrow. is required to host and distribute web applications, as a And for now, JavaScript’s poor performance is far out- scripting language, JavaScript source code is downloaded weighed by its ubiquity on all platforms. and interpreted at runtime. Terefore, licensing becomes very important as JavaScript source code is difcult to Distribution protect, and is very easy to view, understand, modify When creating any application, a developer intends to and copy. Owners of proprietary projects must keep this reach as many users as possible. Developers therefore in mind. Open source projects may beneft from this as choose a programming language suited to the platforms the code is readily accessible when used, but special care presentable to the largest number of potential users. should be taken to understand one’s own licenses or the Because each Operating System (OS) is unique (Win- licenses associated with the JavaScript libraries being dows executables cannot be run natively on macOS, integrated. For instance, the commonly used General for instance), signifcant resources are required to port Public License (GPL) [31] will automatically become applications to each platform. If these resources are not enforceable for JavaScript code as the mere act of access- available, the choice becomes which users to exclude. ing a web page running GPL licensed JavaScript code Fortunately, some programming languages were con- requires that code to be distributed to client machines. ceived to obviate that choice by providing a layer over Finally, due to the issues involved in distributing large the native platform of several operating systems, so code JavaScript projects, several JavaScript source proces- can be “written once and run everywhere” (coined by sors exist, including Google Closure Compiler [32], the Sun Microsystems), thereby maximizing the developer’s Yahoo! User Interface (YUI) [33] library and UglifyJS [34]. efort. Tis was the inspiration to create the Java pro- Tese tools can minify and optimize source code by using gramming language; to allow developers to provide appli- certain patterns to shrink the size of JavaScript source cations across Windows, macOS (formerly Macintosh downloads and optimize the code for more efcient per- and Mac OS X), Linux and others. Java remains a popu- formance (minifcation is a term specifc to web technol- lar programming language today for producing scientifc ogies such as JavaScript, where small download sizes are applications. Similarly, JavaScript became the program- optimal, and should not be confused with chemical appli- ming language of the web; every signifcant web browser cations of minimization, such as energy minimization or in existence, across traditional, mobile and emerging waste minimization). Such post-processing is strongly platforms, has built-in support for JavaScript. Many pop- recommended when writing usable scientifc programs. ular platforms, such as iOS, do not support Java, but do Some of these tools also have the ability to obfuscate support JavaScript. In this way, JavaScript has surpassed JavaScript source, and when run completely, will destroy Java as a universal programming language; no other pro- any intentionally public Application Programming Inter- gramming language rivals JavaScript in its accessibility. face (API), but may help to protect proprietary code. It On mobile systems in particular, there is signifcant dis- should be clear though, no amount of JavaScript obfusca- agreement among developers about native implementa- tion will be able to stop a determined hacker from reverse tions versus web based systems. Phones are technological engineering or fnding vulnerabilities in JavaScript work. Theisen J Cheminform (2019) 11:11 Page 5 of 19
Security Security (HTTPS) [37] utilizes a Secure Sockets Layer Aspects of the JavaScript programming language make (SSL) technology to encrypt communications between security an important concern. Traditional applications users and a server, protecting them from hackers and run on the OS. Users will verify the legitimacy of the data snooping. Implementation of HTTPS requires sig- programs they use or rely on virus scans to protect their nifcant technical knowledge to implement, and fnancial computers. JavaScript, however, is run on webpages just resources for the SSL certifcate, but without it, users are by visiting them. Given the vast number of users visiting left vulnerable. Any unprotected web application will, at web pages continuously, JavaScript is a prime vector for best, be viewed suspiciously and will ultimately be penal- hackers to distribute harmful software. To reduce risk, ized by search engines. Sensitive data should only be han- JavaScript is sandboxed in the web browser and does not dled in JavaScript when absolutely necessary. Any user have access to the same features essential to other pro- information, for instance, proprietary molecular data, gramming languages. Tere is no access to the fle system should be encrypted and sent to a properly administered or the system clipboard for copy and paste functional- server for any storage or processing. ity. Browser producers may impose further restrictions, Te accessibility of JavaScript applications is worthwhile including ignoring running code attempting to identify to scientists, although security issues are a signifcant con- and track users or disabling JavaScript based ads in web cern. Another powerful quality of JavaScript makes up for pages. Performance intensive applications may also be this weakness. As a web technology, JavaScript has built-in, throttled by browsers. For example, there are limits to real-time access to server resources, protecting user infor- the resources available to WebGL canvases, and any long mation and proprietary algorithms on an administered running algorithms may be halted. server. Any technology can then be distributed through a Te client side execution of JavaScript leaves it open JavaScript graphical user interface (GUI). As a result, JavaS- to another attack vector. Since JavaScript is interpreted cript possesses a unique ability for making even the most at runtime, any capable developer can remove, modify specifc, hard to use, and unsupported scientifc code bases or inject their own behavior into web applications. Tis accessible to users around the world. JavaScript truly facili- introduces special concerns for products enforcing integ- tates collaboration and the dissemination of knowledge. rity of data, such as eLearning systems. If grading mech- anisms for such a system are exposed in JavaScript, a Legacy code student can simply modify relevant code when running As web applications grew, developers pursued creative that application to achieve a perfect score without doing ways to engage with users in JavaScript, the primary the exercises. System vulnerability can be compounded, restriction being that content on a page was limited to as individuals without programming knowledge may what was downloaded. If content was to be changed, for naïvely rely on 3rd party hacks to control the JavaScript example based on information in a server database, the software, exposing them to malicious behavior including web interface needed to communicate the changes to a the wide-scale transmission and monitoring of informa- server, then re-download the new content to be viewed, tion about the application and its users. forcing the user to tolerate a reload of the web page. If any personal or proprietary data is processed in JavaS- Microsoft introduced a new solution to this in 1999 with cript, the data will have to be downloaded and accessible the XMLHTTP ActiveX control in Internet Explorer [38]. to the user, compromising any confdentiality. Regard- Tis new technique facilitated direct access to a server in less of the best practices a company should uphold, new JavaScript. As an asynchronous call, connections to the laws are now ratifed to protect user information. Te server would not block the responsiveness of the inter- European Union (EU) began to enforce the General Data face, and the direct communication of information back Protection Regulation (GDPR) in 2018 [35], requiring all to the JavaScript call allowed the developer a powerful companies to gain consent for the acquisition and han- technique to interact with the user. All other browsers dling of user information. Handling of data in JavaScript adopted this technique as the standard web technology, is also troublesome for electronic laboratory notebooks, XMLHTTPRequest (XHR). Development patterns mak- where 21 CFR Part 11 [36] compliance is required. So ing use of the XHR object became known as Asynchro- JavaScript applications need to be built in a way to protect nous JavaScript and XML (AJAX). the integrity of systems and the confdentiality of infor- For security reasons, AJAX requests were limited to con- mation. Tese considerations are essential, but inherently tacting the host origin, but HTML5 brought XHR2, which difcult, for small scientifc startup companies. provided a new protocol to allow XMLHTTPRequest to Tere are some common practices a developer should contact and validate connections to external origins. follow when creating JavaScript applications. Hyper- A system utilizing AJAX to communicate chemical infor- text Transfer Protocol encrypted using Transport Layer mation to the server can take advantage of any chemistry Theisen J Cheminform (2019) 11:11 Page 6 of 19
technology in existence. Even old legacy code can be hosted not be perfect, so the resulting code will have to be scru- on a server and accessed with a JavaScript GUI. Propri- tinized, and likely post-edited, to ensure proper behav- etary code can be protected, and programs requiring ior; (2) the transpiled code may be injected with a middle advanced expertise and resources to compile and run can layer introducing overhead in the application, compound- be deployed as a service. CPU intensive algorithms, such as ing the performance issues in JavaScript possibly leading energy minimization or quantum mechanics calculations, to the inconvenience of loading screens; (3) the resulting can be hosted on powerful servers, so users have an alter- transpiled code, constructed by a machine, is difcult for native to longer run times on their less powerful computer. the average developer to decipher. Transpiled source code Many chemistry databases are working to provide services defeats the purpose of open source software in JavaScript, through AJAX. One notable example is the Macromolecu- as the original code base is necessary to make any changes, lar Transmission Format (MMTF) [39] JavaScript libraries and the transpilation process must be run again to pro- distributed by the Research Collaboratory for Structural duce a JavaScript result. Proprietary code transpiled into Bioinformatics (RCSB), aimed to improve Protein Data JavaScript is inherently more prone to reverse engineering Bank (PDB) handling in web applications. than the original source. Transpilation is best reserved for Although XML is stated as part of the AJAX process, GUIs when the authors do not have the technical ability or any protocol may be used to communicate with the opportunity to create a complementary JavaScript project. server. Most applications use JavaScript Object Notation Some JavaScript applications are impractical due to per- (JSON) [40], which is a protocol for defning data struc- formance and security issues. Trough servers, JavaScript tures in JavaScript. JSON is a native feature in JavaScript developers can protect their systems and users and ben- syntax, so JSON in JavaScript source is easily written and eft from existing technology. Tis is very important for efciently processed. Several JSON formats were con- chemists, as there is a signifcant amount of computational ceived specifcally for chemistry. Te ChemDoodle JSON innovation across many programming languages since the format is designed as a minimalistic and extensible def- inception of computer systems. We want to retain access nition for molecules and their associated chemical and to the work of the computational chemists of the past. In graphical objects and properties, both in 2D and 3D [41]. the end, JavaScript applications excel at providing graphical Both the open source ChemDoodle Web Components user interfaces when paired with server side functionality. and OpenBabel provide support for ChemDoodle JSON. Te OpenChemistry project [42] has also defned a Graphics Chemical JSON format [43]. OpenEye proposed a chem- Several steps were necessary to bring JavaScript to its istry oriented JSON format with a focus on extensibility, current excellence in visualization. JavaScript originally but it has ceased to exist. Use of the browser JSON.string- only manipulated HTML DOM elements and CSS. So ify() and JSON.parse() functions allows the developer to the early chemistry interfaces were limited to input forms convert between JavaScript and String objects, to facili- allowing some calculation to be output. Further work tate JSON communication with a server through AJAX. allowed for the presentation of periodic tables. WebEle- Another popular chemistry protocol for the web is ments [50] and Ptable [51] are two of the earliest exam- Chemical Markup Langauge (CML) [44]. CML is an XML ples. Rendering of molecular structures was not practical format, just like HTML, so CML can be embedded directly with just the HTML elements available; Adam Gross- in the DOM, but it must be manually processed to be han- man demonstrated a simplistic molecule viewer with just dled in JavaScript, unlike JSON formats. CML is a mature HTML elements and CSS [52]. chemistry protocol with support in a number of toolkits, Te advent of HTML5 and the introduction of the making it a prime choice for server side handling.
Introducing 3D hardware accelerated graphics as a 2D and 3D in JavaScript. Currently, almost every major JavaScript ability was the next step. WebGL was intro- chemistry related software product has integrated a web duced to provide JavaScript bindings for OpenGL, specif- based interface using JavaScript. Two notable exam- cally OpenGL ES 2, through the
1 // This call will print"HelloChemistry!" in theJavaScriptconsole 2 console.log(’Hello Chemistry!’); Listing 1 Using the console.log() function developer. Developers attempting to create the complex We can output to the JavaScript console using the con- applications necessary for chemistry without fully under- sole.log() function as shown in Listing 1. Te JavaScript standing the unique aspects of the language will encoun- interpreter will ignore comments in source code, desig- ter serious issues. Most importantly, an understanding of nated as any text on a line preceded by a pair of forward scope, context and closures is necessary to properly direct slashes (//). the behavior of JavaScript applications. Tese topics are Note that JavaScript strings should typically be covered in more detail in the following sections. declared with single quotes. Tere is no diference Several source code listings accompany the following between a JavaScript string created with single quotes topics. Tere are several ways to execute JavaScript code. and one created with double quotes. However, JavaScript Te frst is through a browser’s JavaScript console. Te works in an HTML environment where any XML strings second is by including JavaScript directly in the DOM will undoubtedly contain double quotes. Using single for a loaded web page using