Elements Web Application Re-architecture

  • Categories: Web
  • Technologies: ReactJS, Redux, Webpack, Pattern Lab, Sass CSS
  • Client: Perkin Elmer


Electronic lab books have become a key tool used by drug companies in their development process. Perkin Elmer hired us to evaluate and update their Elements Electronic Lab Notebook, which stores information on chemistry, images and revision history. They had recently purchased a cloud-based application, which was experiencing performance issues, from a small startup. The application’s development cycle was costly because of an old and unsupported technology stack. We evaluated it from front end to back, including all of its ancillary applications and libraries and made numerous recommendations for improvements. The roadmap we developed became a guide for future revisions.

Problem to solve

After completing our initial discovery phase, we came under the conclusion that the existing technology stack of JavaScriptMVC (an old JavaScript framework, predecessor to current CanJS), several versions of jQuery, and convoluted implementation of third party software was causing performance issues and hindering the ability of the product to expand. As a result of this conclusion, we researched several solution options and recommended a new technology stack that will help in the extensibility of the product.

How we did it

After evaluating several JS frameworks, we agreed to use ReactJS along with a Flux implementation pattern which eventually morphed into a Redux framework implementation. To support our effort, we extracted the design and created a complementary Pattern Lab site. We also implemented Gulp and a NodeJS server to handle some of the ancillary tasks. All these efforts were completed with proper documentation and guidelines for future developers to learn and use.

Have You Fallen In Love Already With Our Works?