Alternatives to build todays Web Applications and different hosting choices

Dears,
While we are so confused with What to follow for the optimal Architecture and what tool to use and what is the best integration to build a stable and responsive WEB application. and also where to host for stable accessibility. i have defined three alternatives for building a Web APP. with optimal hosting for each.

Note that you can comment with more alternatives and i promise i will update the post directly.

Alternative 1: For Mission Critical Apps

DataBase : SQL Server or ORACLE

Server Side APIs :

  1. Entity Framework  : For Database object representation and Database Operation management
  2. ASP.net WEB APIs : For Fast and Simple REST APIs.
  3. WCF Services : for Dual Binding and Custom Security.

Data Binding and Manipulations :

  1. AngularJS 1.x : If your UI is Template Oriented and no UI Dynamic creation expected.
  2. ReactJS : If you you seek a Script First Data Driven APP, and if your UI is highly Dynamic upon the Data with different Conditions.
  3. ReactJS : If you want to create a WorkFlow.
  4. D3JS : For Fancy SVG Charts, Comparisons, Interactive and Organized and Dynamic Data Representations.
  5. ThreeJS : If you want to add 3D or Animation.

Front End Business logic :

  1. JavaScript : If you and your team have no problems with Heavy Scripting and not fully customized Object Oriented code.
  2. ECMAScript : If you are like the above but need to write less code and more structured and readable, and want to keep the Un-Typed Scripting features (variables are not typed, all vars).
  3. Type Script : for sake of minimal code, as much like C# and Java, Fully Object Oriented with interfaces, for building modules with access modifiers (public, private , ..etc), and for Type and Build  Error Check in Compile Time.
  4. CoffeScript : Just like the ECMA but wants to witie RUBY or PYTHON like Code with space separation for code block.

Host : Windows Server

Alternative 2: For Non-Mission Critical and Huge Data Manipulation

DataBase : MongoDB, Cassandra (I recommend Mongo)

Server Side APIs :

  1. NodeJS : For Database object representation and Database Operation management.
  2. ASP.net WEB APIs : REST APIs
  3. WCF  Services : for Dual Binding and Custom Security.

Data Binding and Manipulations :

  1. AngularJS 1.x : If your UI is Template Oriented and no UI Dynamic creation expected.
  2. ReactJS : If you you seek a Script First Data Driven APP, and if your UI is highly Dynamic upon the Data with different Conditions.
  3. ReactJS : If you want to create a WorkFlow.
  4. D3JS : For Fancy SVG Charts, Comparisons, Interactive and Organized and Dynamic Data Representations.
  5. ThreeJS : If you want to add 3D or Animation.

Front End business logic :

  1. JavaScript : If you and your team have no problems with Heavy Scripting and not fully customized Object Oriented code.
  2. ECMAScript : If you are like the above but need to write less code and more structured and readable, and want to keep the Un-Typed Scripting features (variables are not typed, all vars).
  3. Type Script : for sake of minimal code, as much like C# and Java, Fully Object Oriented with interfaces, for building modules with access modifiers (public, private , ..etc), and for Type and Build  Error Check in Compile Time.
  4. CoffeScript : Just like the ECMA but wants to witie RUBY or PYTHON like Code with space separation for code block.

Host :

  1. DataBase Server : Windows Server or Linux (I recommend)
  2. Application Server : IIS over Windows in case of WCF or WEB APIs , Linux for the NodeJS.

Alternative 3: For Cloud Ready Application

DataBase :

  1. Create a Cloud VM [Windows or Linux – Linux is better for low prices](From AZURE or Google Compute pr AMAZON) and install mongoDB.  (NB. MongoDB required High Memory Machine so focus on the RAM).
  2. Use AZURe mongoDB service or Google Mongo Service, that is more scaleable and will take you out of the headache of Database Server management and Configuration, but much more costly compared with the last option.
  3. Store Your Data Over Cloud Provider Storage Service (I recommend AZURE Table Storage for Tabular Data and AZURE Blob Storage for File Storage) NB. Revise this post before using The Table Storage.

Server Side APIs :

  1. NodeJS : For Database object representation and Database Operation management.
  2. ASP.net WEB APIs : REST APIs
  3. WCF  Services : for Dual Binding and Custom Security.

Data Binding and Manipulations :

  1. AngularJS 1.x : If your UI is Template Oriented and no UI Dynamic creation expected.
  2. ReactJS : If you you seek a Script First Data Driven APP, and if your UI is highly Dynamic upon the Data with different Conditions.
  3. ReactJS : If you want to create a WorkFlow.
  4. D3JS : For Fancy SVG Charts, Comparisons, Interactive and Organized and Dynamic Data Representations.
  5. ThreeJS : If you want to add 3D or Animation.

Front End business logic :

  1. JavaScript : If you and your team have no problems with Heavy Scripting and not fully customized Object Oriented code.
  2. ECMAScript : If you are like the above but need to write less code and more structured and readable, and want to keep the Un-Typed Scripting features (variables are not typed, all vars).
  3. Type Script : for sake of minimal code, as much like C# and Java, Fully Object Oriented with interfaces, for building modules with access modifiers (public, private , ..etc), and for Type and Build  Error Check in Compile Time.
  4. CoffeScript : Just like the ECMA but wants to witie RUBY or PYTHON like Code with space separation for code block.

Host :

  1. DataBase Server : as illustrated in the DataBase part
  2. Application Server :

If you use WEB APIs or WCF : Use AZURE APP Service for easier and faster updates or indeed Windows VM.

If you use NodeJS you can host in Linux VM or Windows VM.

General Notes From My Experience:

  1. NodeJS is implemented over Chrome V8 Engine (compiler), so it supposed to be faster that the WEB APIs and indeed the WCF.
  2. WCF Service is best choice when it comes to Dual HTTP Binding with Custom Security Configurations.
  3. AZURE Cloud is easier than Google compute when it comes to Scaling Up/Down.
  4. Google Compute Engine is much more Lower in price than AZURE even for Windows Machines.
  5. Google Compute Engine team might suspend your VM for days if they felt that you are misaligned with the Terms Of Use , and they might re open when they discover that they were wrong !!
  6.  Angular2 will introduce the Dynamic Component like the ReactJS with much more better performance than Angular 1.x.

Useful Links Regarding the Above:

Click For more Info about how to install and Configure MongoDB in Windows.

Click For more Info about how to install and Configure MongoDB in Linux.

Click For more Info about how to create a REST API using node JS over MongoDB.

Click For Getting Started with ASP.net WEB APIs

Click For Angular Official website

Click for ReactJS Official website

Click for D3Js Official website

Click for ECMAScript Official website

Click for TypeScript Official website

Click for ThreeJS Official website

Advertisements

Step X Step : Start with NodeJS to create REST API with CRUD operations over MongoDB

Dears,

As one of the long list of Posts targeting the  Mean Stack, as i’ve already published a couple of posts targeting MongoDB for MS Windows Users and Linux Users , we will illustrate in this post how to build a REST API using NodeJS over MongoDB and a simple Client to Use the API.

Assumption

I will assume that you already know  what is NodeJS and also will assume that you installed MongoDB in your Local Machine (for detailed step x step reference , get back to my post here).

Note that its all JavaScript and nothing more, so you must be scripting lover to stand until the end of the post.

Step 1 : Installing the NodeJS Prerequisites

NodeJS is a Server Side Artifact, it means it is not Client Exposed JavaScript, so you have to know that while we moving through the Post steps, its not the real case to have the NodeJS and the Client project in the same device.

Now, lets start.

1 – Create a Folder anywhere in your machine, for my demo will be on the Desktop, Name it Node Scripts.

2 – Open Node.js command prompt and navigate to the created folder

cd C:\Users\sselim\Desktop\Node Scripts

3 – Install the Express Module in your Project

npm install express

Note that Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications and as we are going to use NodeJS to expose Crud Functions as a REST HTTP APIs, so we have to install it.

3 – Install the MongoDB Module in your Project

npm install mongodb

This is Mandatory indeed to let the NodeJS Express Compiler to understand the MongoDB Scripting we are going to build in farther step.

4 – Install the Body Parser Module in your Project

npm install body-parser

Like any CRUD Operations (GET, POST, PUT, DELETE), to let the Post Method to read from the request body and parse the contents and start using, you have to install the body-parser module first.

5 – Install the Multer Module in your Project

npm install multer

Multer is a NodeJS middleware for handling multipart/form-data

by reaching this step you installed all the prerequisites required for compiling and running your code and you have to find a folder with name node_modules created inside your project root folder (Node Scripts in my case) and inside this folder you will find 4 folders created (one for each module installed).

Step 2: Scripting the REST API

we are going to build a REST Function using NodeJS Syntax and compile using the Express and access using simple HTTP request.

I will work on a Film model with three Props. (Name, Language, Category), so we will start building the Controller JS that holds the CRUD methods for this Model.

1 – Inside the last created folder (Node Scripts) create a JS file and name it Film.js.

2 – In the created blank JS file we will start including the installed modules references

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer();
var MongoClient = require('mongodb').MongoClient, format = require('util').format;

var app = express();
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true }));

3 – Add a line for MongoDB Connection String

var ConnectionString = 'mongodb://127.0.0.1:27017/';

4 – Create the Server object to listen to requests to the Port of interest (i will use 8080 for my Demo)

var server = app.listen(8080, function () {
    console.log("FILMS API running at http://127.0.0.1:8080");
});

Note that as i mentioned before, the IP is 127.0.0.1 (localhost) and you should replace with the production IP when it comes to real work.

Step 3: CRUDing

We will create four function for covering the (Get All, Get By Key, Insert, Delete and Update) over the Film model.

1 – GetAll (Get Function read no parameters or even from the body)

app.get('/GetAll', function (req, res) {
    MongoClient.connect(ConnectionString + 'mongonodetest', function (err, db) {
        if (err) throw err;
        var collection = db.collection('Films')
                           .find({})
                           .toArray(function (err, docs) {
                               if (docs)
                                   res.json(docs);
                               else
                                   res.json(new Array());
                           });
    });
});

2 – GetByKey (Get Function Reads the Film Name parameter ‘Key’ from the request URL Parameters )

app.get('/GetByKey/:key', function (req, res) {
    MongoClient.connect(ConnectionString + 'mongonodetest', function (err, db) {
        if (err) throw err;
        var collection = db.collection('Films')
                           .find({ "Name": req.params.key })
                           .toArray(function (err, docs) {
                               if (docs)
                                   res.json(docs);
                               else
                                   res.json(new Array());
                           });
    });
});

3 – UpdateByKey (Post Function Reads the Film Name parameter ‘Key’ from the request URL Parameters and parse the new Film object from the the quest body)

app.put('/UpdateByKey/:key', function (req, res) {
    MongoClient.connect(ConnectionString + 'mongonodetest', function (err, db) {
        if (err) throw err;
        var collection = db.collection('Films')
                           .replaceOne({ "Name": req.params.key }, req.body
                           , function (err, docs) {
                               if (docs)
                                   res.json(docs);
                               else
                                   res.json(new Array());
                           });
    });
});

4 – InsertByKey (Post Function  parse the Film object from the the quest body)

app.post('/Insert', function (req, res) {
    MongoClient.connect(ConnectionString + 'mongonodetest', function (err, db) {
        if (err) throw err;
        var collection = db.collection('Films')
                           .insertMany(req.body
                           , function (err, docs) {
                               res.json('Done');
                           });
    });
});

5 – DeleteByKey (Get Function Reads the Film Name parameter ‘Key’ from the request URL)

app.get('/DeleteByKey/:key', function (req, res) {
    MongoClient.connect(ConnectionString + 'mongonodetest', function (err, db) {
        if (err) throw err;
        var collection = db.collection('Films')
                           .deleteMany({ "Name": req.params.key },
                            function (err, docs) {
                                res.json('Done');
                            });
    });
});

Now your REST API is ready, one last step is to run the API to be available for HTTP requests, or to make the server object we created above specific socket (IP:Port) to start listening to requests.

Do this by writing the command inside the Node.js command prompt

node Films.js

a line display the following should come up

FILMS API running at http://127.0.0.1:8080

Step 4 : Creating the Client

Now, lets build a very simple AJAX calls to request the NodeJS APIS at the Predefined Socket (127.0.0.1:8080), here and to me real MeanStacker, you should use AngularJS to do this step, but for sake of generalization and focus on the concept of (Client/Server) communication, i will use the most regular AJAX calls.

1 – Request Insert Film

Create the Followoing Class inside the Client JS file as a Client representation for the Film Model.

function Film(_Name, _Language, _Category) {
    this.Name = _Name;
    this.Language = _Language;
    this.Category = _Category;
}

Then Create a Function to Request the Remote NodeJS REST Inset function

function InsertFilms() {
    var Films = new Array();
    Films.push(new Film('Home Alone','English','Comedy'));
    Films.push(new Film('Night For Counting Years','Arabic','Drama'));
    $.ajax({
        type: "POST",
        data: JSON.stringify(Films),
        contentType: "application/json; charset=utf-8",
        url: "http://127.0.0.1:8080/Insert",
        dataType: "json",
        processdata: true,
        success: function (data) {
            alert(data);
        },
        fail: function (error) {
            alert(errors);
        }
    });
}

2 – Get ALL Films

function GetAllFilms() {
    $.ajax({
        type: "GET",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        url: "http://127.0.0.1:8080/GetAll",
        dataType: "json",
        processdata: true,
        success: function (data) {
            alert(data);
        },
        fail: function (error) {
            alert(errors);
        }
    });
}

3 – Gey By Film Name

function GetFilmByName(filmName) {
    $.ajax({
        type: "GET",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        url: "http://127.0.0.1:8080/GetByKey/"+filmName,
        dataType: "json",
        processdata: true,
        success: function (data) {
            alert(data);
        },
        fail: function (error) {
            alert(errors);
        }
    });
}

4 – Update Film

function UpdateFilm(filmName, filmObject) {
   $.ajax({
        type: "PUT",
        data: JSON.stringify(filmObject),
        contentType: "application/json; charset=utf-8",
        url: "http://127.0.0.1:8080/UpdateByKey/"+filmName,
        dataType: "json",
        processdata: true,
        success: function (data) {
            alert(data);
        },
        fail: function (error) {
            alert(errors);
        }
    });
}

5 – Delete Film By Name

function DeleteFilmByName(filmName) {
    $.ajax({
        type: "GET",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        url: "http://127.0.0.1:8080/DeleteByKey/"+filmName,
        dataType: "json",
        processdata: true,
        success: function (data) {
            alert(data);
        },
        fail: function (error) {
            alert(errors);
        }
    });
}

and we done, you can create an html page and test your code as you like , but usually don’t forget to run the Controller JS file before you start requesting it.