dynamic application development by nodejs ,angularjs with orientdb

Dynamic Application using NodeJS and AngularJS with OrientDBDynamic Application using NodeJS and AngularJS with OrientDBBy Apaichon PunopasBy Apaichon Punopas

ObjectiveObjective

1. Understanding NodeJS and AngularJS Concept.1. Understanding NodeJS and AngularJS Concept.

2. Show the example of Dynamic Application developed 2. Show the example of Dynamic Application developed by NodeJS and AngularJS with OrientDB.by NodeJS and AngularJS with OrientDB.

Who isWho is ??

Solution Provider forSolution Provider for

• IT Training (Web Platform)IT Training (Web Platform) – Javascript , HTML5 ,NodeJS ,

AngularJS, ASP.NET , OrientDB.

• IT OutsourcingIT Outsourcing

• Software Package DevelopmentSoftware Package Development

c

Our Software PackageOur Software Package

Sale Channel SystemSale Channel System

» We are sale channel.We are sale channel.» Real time business monitoring.Real time business monitoring.» Forecast and Decision Making.Forecast and Decision Making.» Customer Centric.Customer Centric.» Co-Worker network.Co-Worker network.» Integrate with Social Network.Integrate with Social Network.» Utilize Mobile equipment.Utilize Mobile equipment.» Integrate to POS.Integrate to POS.

High Level ArchitectureHigh Level Architecture

What is NodeJS ?What is NodeJS ?

- NodeJS is Server side application same as

Apache, IIS, Glassfish, Jboss, WebSphere, etc

but different technology.

- Non-Blocking I/O

- Single Thread Application

- Javascript V8 Engine

- Event Loops

What is Non-Blocking I/O ?What is Non-Blocking I/O ?

Queue ManagementQueue Management

No Queue Management

Queue Management

NodeJS Behavior from Test ResultNodeJS Behavior from Test Result

Basic Performance Test NodeJS 0.1.103 vs Apache 2.2.14

• Hardware dual-core Intel T4200 2 GHZ machine with 4 GB RAM running Ubuntu 10.04

• Hitting them with ApacheBench 2.3– 1,000 concurrents with 100,000 requests– 20,000 concurrents with 1,000,000

requests

Test ResultTest Result

Test ResultTest Result

http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php

Java Script Framework Started on 2009

by google engineers

Miško Hevery Brad Green

What is Angular JS ?What is Angular JS ?

• MVC architecture• Client side templates• Scope and View • Data binding• Directive• Routes and View• $http API

Angular ConceptAngular Concept

MVC vs MVWMVC vs MVW

Data (Model)

Controller (JS)

DOM(View) Data (Model)

Whatever

DOM(View)

Controller Directive Unit Test

MVCMVC MVWMVW

Model, View , ControllerModel, View , Controller

Model – Business Model Structure$scope.model = {name:'Angular' ,type:'MVW' , createdBy:'google',

year :2009};

View – Presentation GUI such as HTML , Jade, etc <div ng-controller="GreetingCtrl">

{{ greeting }}

</div>

Controller – JS Code controls work flow of application. var myApp = angular.module('myApp',[]);

myApp.controller('GreetingCtrl', ['$scope', function($scope) {

$scope.greeting = 'Hola!';

}]);

No need to access server for rendering Decouple view from JS code

<h1>{{text}}</h1> +

$scope.text = 'Welcome To Angular';

<h1>Welcome To Angular</h1>

Client side templatesClient side templates

Scope and ViewScope and View

The scope is responsible for detecting changes to the model section and provides the execution context for expressions.

Data BindingData Binding

Data Binding with JqueryData Binding with Jquery

var newValue = 'bob is happy' ;

$('input').val(newValue);

$('input').on('input', function() { self.value = $(this).val();

}); JS code is coupled with HTML Too much code

Data Binding with Angular Data Binding with Angular

$scope.tagline = 'Bob is happy today';

function get_tagline() { return $scope.tagline;

} Decouple JS code from HTML

Less code

DirectiveDirective

Directive is feature for create custom control.

<div menubar> </div>

HTML

JS Code (Angular Directive)

define(['directives/directives'], function(directives) { directives.directive('menubar', function() { return { restrict: 'EA',templateUrl: 'views/root.html',replace: false,transclude:true,controller:"RootCtrl"};});});

Routes and ViewRoutes and View

Product List Page Shopping Cart Page Item Detail Page

/Products /Cart /ProductItem/72

Router is feature for define url direct to view or to do something else.

view portAngular Router renders a template into the viewport

Router DemoRouter Demo

myApp.config(['$routeProvider', '$locationProvider', function($routes, $location) {

$routes.

when('/', { templateUrl: '/app/src/views/list.html', controller: 'ProductsList' }) .when('/item/:id', { templateUrl: '/app/src/views/details.html', controller: 'ProductDetails' }) .otherwise({ redirectTo: '/'}); $location.html5Mode(true); }]);

$http API$http API

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

$http.get

$http.head

$http.post

$http.put

$http.delete

$http.jsonp

$http({method: 'GET', url: '/someUrl'}).

success(function(data, status, headers, config) {

// this callback will be called asynchronously

// when the response is available

}).error(function(data, status, headers, config) {

// called asynchronously if an error occurs

// or server returns response with an error status.

});

Why Angular and No SQL are Why Angular and No SQL are Dynamically ?Dynamically ?

Relational Database Way No SQL with Angular Way

Data (Model)

Controller

DOM(View)

Business has alway changed requirement. If we need add more field after production.

Data (Model)

Controller

DOM(View)

DB DB

Change Change

Change

Change

Change

(*Change only complex)

Question and FeedbackQuestion and Feedback

Contact to apaichon@hotmail and Facebook

THE ENDTHE END