Business logic runs on a separate application server, which processes client requests using the API server.

The structure described above is highly scalable and allows us to quickly implement future business requirements using the API for mobile applications, third-party application integration, etc.

The scalability offered by this approach allows us to have more than one API servers that work with the same database. Also, we can distribute load by setting up multiple API servers which serve various API functions: one server would perform searching and returning of data, another would do only updating operations, etc.

The MVC software architecture pattern allows for separation of HTML (view), data (model) and application logic (controller), which gets us a more structured and easier to maintain code base.

Frontend

We used this SVG icon-based set because it works well with high-PPI (Retina) displays without any additional logic, such as a need to create 2x-sized images for image-based icons. It’s easily customizable via CSS. For example, we don’t need to create a separate color instance of an icon for each of its states (just set a proper color in CSS). We are using the same icons for both mobile and desktop versions.

We decided to use a GruntJS task manager for compiling and assembling static assets (JavaScript and CSS), converting JADE to HTML. Also GruntJS is a part of the Sails.js framework, which we are using as backend framework.

Autoprefixer simplifies usage of vendor prefixes in CSS. Based on a list of supported browsers, Autoprefixed decides what vendor prefixes are needed (-webkit-, -moz-, -o-, -ms-) to support different CSS3 properties in browsers which do not support native CSS3 properties. We use the same browser list for both mobile and desktop versions.

LESS is a powerful tool for providing robust, clear structure of CSS code, creating and using mixins and variables. We are using LESS to provide a “syntax-sugar” and transparent structure of our CSS code.

We are using the jQuery Mobile framework to adapt the application for different mobile devices such as iPhones and Android phones. jQuery Mobile framework was chosen because it is fully touch-optimized, well-documented, has a big community, wide ecosystem and wide list of supported devices. We created a new theme for jQuery Mobile to match UI design comps.

Maskedinput input is used to improve UX and UI. We used it to help the user provide us with proper values. A user can see an example of format/value/etc., and submit information without wasting time on putting incorrect values and receiving “wrong format/value” messages.

Custom design necessitated using custom checkboxes to get cross-browser compatibility. That is why we used the iCheck plugin to style checkboxes and radio buttons for the desktop version of Safety Tag.

easyDropDown was used as a lightweight solution for customizing select boxes according to the design. It provides all the necessary functionality and API for performing common-meeting tasks with drop-down controls.

formValidator is a powerful solution for validating forms in the browser. We decided to use the same validation rules for different types of fields both for backend and frontend code.

Outdated browser notification message

A gentle reminder for our less technical users that they could have a better experience with a more modern browser. The list of modern browsers available for upgrading is accessible by clicking on the notification message at the top of the page. The message is non-intrusive and allows users to browse application pages, while notifying them that some features may not work or may work incorrectly in their browser because of vendor restrictions and lack of browser’s API capabilities. The same list of outdated browsers is used for both desktop and mobile versions.

A NoSQL document-oriented database that gives us fast access to stored data due to a wide range of utilizing indexes, the capability to scale horizontally through sharding, and high availability with replication feature.

Waterline – adapter-based ORM for Node.js with support for MySQL, MongoDB, PostgreSQL, Redis, and more. Waterline strives to inherit the best parts of ORMs like ActiveRecord, Hibernate, and Mongoose, but with a fresh perspective and emphasis on modularity, testability, and consistency across adapters.

Jade templating engine is a powerful solution for abstracting and structuring HTML. It allows us to provide robust, clear structure of views/templates inside our application. We are using Jade as a static HTML generator and View component of MVC on the server side.

MMS is one of the most advanced tools for monitoring and backing up MongoDB databases, built and provided by MongoDB developers. It’s perfect for keeping (2-factor authorization required to get the data back) and restoring (any point of time) any database that less than 3TB in size.

MOBILE APP (HYBRID)

An open source front-end framework for developing hybrid mobile apps with HTML5.
We picked Ionic because it seemed the most mature at this time, with the largest community support and it has best documentation.

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function – such as the camera or accelerometer – via Javascript.
We need a few device-specific features and automated updates, but at the same time we’d like to reuse as much code as possible between the platforms supported (currently iOS and Android).

Intel XDK build platform consists of a set of development tools to help you code, debug, test and build mobile web apps and hybrid HTML5 apps for multiple target platforms. We picked Intel XDK over PhoneGap due to smaller number of restrictions, such cloud projects size limit, and more extensive configuration options.

Corporate site (WordPress)

Base technology: WordPress, CSS, JavaScript, jQuery, Custom WP Theme.

Theme: new, built from scratch. The alternative was to customize a similar base theme but eventually opted for fully custom, cleaner code base.

WP JSON API and WP actions help us create a data bridge between WordPress and the Node.js application to allow for editorial control over some application content and labels. Essentially, we use WP as a CMS for a few frequently updated items inside the Node.js application.

WP content is cached on both WP and Node.js level, which ensures zero performance impact.

Testing

We used Cucumber with Watir to improve testing quality. When the amount of functionality grows, the time required for manual testing increases significantly. Cucumber allows automate QA and Jenkins runs the automated tests each time a developer commits a change. This approach simplifies testing and allows early bug discovery.

Load testing results

The application can support ~500 continuously simultaneous requests without a noticeable impact on performance if a requested page requires database access. ~1000 if page doesn’t require database access.

Management

We managed the Safety Tag in a semi-Agile fashion, where we had a 2-month long initial iteration to build out core functionality and then switched to more traditional 1 month-long sprints.