Skip to content

Technology choices (and pointers)

theresa-cy-ngo edited this page Apr 4, 2016 · 38 revisions

Application Tech

Implementation Tech

quick overview: we're going to use an Angular-Ruby-SQLite stack.

please read the initial software design first


application_tech

Tier 1

Our GUI application is a client side browser application. We will be utilizing the Angular JS 1 framework. This choice was made primarily because Angular 1 has a proven history and a large community, because of this large community and the implied widespread use we expect that many solutions to technical problems can be solved simply by searching Google. Angular resources


Tier 2

In order to separate the concerns of the back and front ends we will deploy two different servers (on the same host). These will be denoted as the frontend and the backend server. The primary role of the frontend server is to serve the Angular application to the user, while the backend handles RESTful requests from the frontend. An implication of this architecture is that if one were to make a change to the frontend code the backend code remains the same. As such, the development process for the application should be simplified.

The frontend server will be a node.js application using the express framework. We will also use a javascript build tool that will allow us to minify our static resources -- including our Angular application. Furthermore, the frontend server will use gzip to further compress the payload. To be clear, the point of the frontend server is to serve the Single Page Application along with other static resources (CSS, images, etc) to the user.

Aside: point to consider

Our backend server will be a RESTful Ruby on Rails (RoR) app. Like angular RoR has a proven track record of success with a very large and active community, and so we can again expect to find many online tutorials and various resources. RoR also has a reputation for being relatively easy to pick up and for fast prototyping. With the [latest version] (http://weblog.rubyonrails.org/releases/) there is the addition of a API mode. Using this mode we can limit the scope of the RoR app to performing RESTful services. The API mode is an integration of the rails-api project which has a history reaching back at least 4 years, so the maturity of this feature is present. RoR resources


Tier 3

The database layer will be an SQLite server. Again the factors that influenced this decision are primarily related to popularity. A high degree of popularity implies sufficient online resources and tutorials.


implementation_tech

These are choices for technologies required to implement specific requirements of the system.

authentication

requirement: Registration and login

technology: Ruby on Rails, bcrypt gem, and jwt gem

reason: jwt is still in active development, and both have clear documentation and over 13 million downloads


editing data

requirement: Editing/curating information about scientists, relations between scientists (supervised, studied with, collaborated on, …), ideas, …

technology: Angular.js and d3.js will be employed in order to make editing relationships between these types of properties editable, and these changes will be pushed to the server. The technology is difficult to describe because we have to build it first.

reason: There is no pre-built library that offers such specific functionality.


audit trail

requirement: Maintaining an audit trail of edits

technology: Ruby on Rails, paper trail

reason: This project is under active development, has thorough documentation, and 3755 stars on GitHub.


search

requirement: Search

technology: Ruby on Rails


visualizations

requirement: Visualization

technology: D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3 emphasizes web standards and combines powerful visualization components with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers without tying yourself to a proprietary framework. The library used specifically for this project is dagre/dagre-d3.

reason: There are a plethora of examples and a number of books written about this library. Also the GitHub repository has 45k+ stars.


angular_resources

intro video tutorial

free ebook

JSFiddle type tutorial

microsoft video tutorials

AngularJS YouTube channel

Angular Material - reusable material design elements

The companion suite(s) to the AngularJS framework

ember data for angular

ui-router example



HTML/CSS resources

crash course on layouts CSS

CSS selectors

flexbox CSS

rendering tips