MEAN (Angular 4) stack example demonstrating sever-side analytics normally done with R
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
server
src
.angular-cli.json
.editorconfig
.gitignore
README.md
package.json
tsconfig.json
tslint.json

README.md

Server-Side R Dataframe Demo

Server-side R is a bit misleading, but it makes a great conversation starter :)

In this repo, I presented the beginnings of an effort to move some of the analytics normally performed in R into Typescript. The beauty of Typescript is that it provides a strongly-typed, OOP paradigm for application and library development that is similar to what I enjoyed with C++/STL and Actionscript 2/3 to a lesser extent.

Since Typescript exports to JS, it is also possible to exploit the exact same libraries client- or server-side (using NodeJS/Express for the latter).

In previous demos, I took the infamous 'usedcars.csv' file used in the book 'Machine Learning in R' by Lantz and performed the same analytics in Typescript that were used in the book. The server code in those demos simply returned the raw information to define a dataframe and all analytics were performed on the client.

Sometimes, client-side analytics makes sense as it offers an opportunity to offload the server. In other applications, it may be desirable to perform all analytics server-side and only pass summary information to the client.

This demo illustrates such an approach using the traditional MEAN stack with Angular 4 as the client. The used car raw data is stored in a Mongo DB, which is queried on the back end. The Typescript Math toolkit (precompiled to JS) is used to define a dataframe and perform cross-tab analytics. Summary results are passed to the client for formatting in a simple table.

Note that this is not a MEAN tutorial or an introduction to that stack. Some familiarity with Node/Express is required.

Author: Jim Armstrong - The Algorithmist

@algorithmist

theAlgorithmist [at] gmail [dot] com

Typescript: 2.2.3

Node: 8.1.4

Express: 4.15.2

Angular: 4.0.0

Angular CLI: 1.0.0

Version: 1.0

Installation

Installation involves all the usual suspects

  • node/npm and Angular CLI installed globally
  • you may wish to have Mongo installed locally on your machine
  • Clone the repository
  • follow complete setup and install instructions below
  • get coffee (this is the most important step)

Layout

The code is organized in two folders, server and src. The former contains all the Node/Express JS files as well as a lib folder for all the Typescript Math Toolkit files used in the analysis.

The src folder is the same folder generated by the Angular CLI. The server folder contains its own package.json file with some useful pre-defined scripts..

Setup

The first order of business is to setup the Mongo database. This can be done locally or with a hosting service. I chose the latter and hosted a DB at mLab. Setup is so simple that even a mathematician like me can do it! They also provide me with dummy-proof instructions like how to import data into a collection with mongoimport . So, I can do more math and less data wrangling :)

The DB can be called whatever you want, but the schema presumes a collection titled cardata . Look in the server/data folder and locate the usedcars.csv file. That is the data that needs to be imported into the cardata collection. The import can be performed via any means that suits your preferred workflow.

Next, locate the variables.env file in the server folder. Edit the file and set the location to your Mongo database in the DATABASE variable. For the mLab-hosted DB (which I named 'usedcars'), the setting looks something like

DATABASE=mongodb://<user>:<pass>@<db-id>.mlab.com:47267/usedcars

where is the DB user, is the password setup when the user is defined, and the remaining information is provided when the database is setup.

The remaining variables may be left as-is.

If you changed the port from 8000, then edit the following lines in the src/app.component.ts file,

 this._service.getData('http://localhost:8000/api/getData')
 .subscribe((data: Response) => this.__onServiceComplete(data.json()));

so that the service call is consistent with your setup.

Build and Run

First, run npm install from the server folder. After installation, use the command

npm run-script build-lib

to compile the Typescript libraries to JS.

npm start will start the server on port 8000 unless you defined another port in the variables.env file or no port is defined in which case it defaults to 7777.

Next, execute npm install in the main folder followed by ng build to build the client.

There is no benefit to be realized from AOT compilation, so the main Angular component is not setup for static analysis. Building and executing Angular in dev mode is fine for this project.

Before running the demo, check the DB connection and data. I used Postman to execute a GET on http://localhost:8000/api/getData. You should receive an Object with summary data. Don't worry if it does not make sense; that's for math bozos like me to worry about :)

Once the connection and data is good, simply type in http://localhost:8000 (or whatever port you set up) into your friendly neighborhood browser and you should see the summary statistics displayed.

Note that there is an underlying presumption in the code that the client is served from the dist folder created by the CLI during the client build process.

There isn't much to the client side of this demo. The important thing to note is that it's the same Typescript library whether the analytics are performed on the client or the server. Along with async/await and the continuing performance increases in JS VM's, I think this provides yet another great selling point for sever-side JS.

If only you understood the power of the math side ...

License

Apache 2.0

Free Software? Yeah, Homey plays that