Why we need to use NodeJS , AngularJS and OrientDB for Develop Dynamic Application

1. Dynamic Application using NodeJS and AngularJS with OrientDB
By Apaichon Punopas

2. Objective
1. Understanding NodeJS and AngularJS Concept.
2. Show the example of Dynamic Application developed
by NodeJS and AngularJS with OrientDB.

3. Who is
?
Solution Provider for
•
IT Training (Web Platform)
– Javascript , HTML5 ,NodeJS ,
AngularJS, ASP.NET , OrientDB.
c
•
IT Outsourcing
•
Software Package Development

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

5. High Level Architecture

6. 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

7. What is Non-Blocking I/O ?

8. Queue Management
No Queue Management
Queue Management

9. NodeJS 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

10. Test Result

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

12. What is Angular JS ?
Java Script Framework Started on 2009
by google engineers
Miško Hevery
Brad Green

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

14. MVC vs MVW
MVC
Data (Model)
MVW
DOM(View)
Data (Model)
Controller (JS)
DOM(View)
Whatever
Controller
Directive
Unit Test

15. Model, 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!';
}]);

16. Client side templates

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>

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

18. Data Binding

19. Data 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

20. Data Binding with Angular
$scope.tagline = 'Bob is happy today';
function get_tagline() { return $scope.tagline;
}
•
Decouple JS code from HTML
•
Less code

21. Directive
Directive is feature for create custom control.
HTML
<div menubar> </div>
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"};});
});

22. Routes and View
Router is feature for define url direct to view or to do
something else.
/Products
Product List Page
/Cart
Shopping Cart Page
/ProductItem/72
Item Detail Page
Angular Router renders a template into the viewport
view port

23. Router 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); }]);

24. $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({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
•
$http.put
// when the response is available
•
•
$http.delete
$http.jsonp
}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

25. Why Angular and No SQL are
Dynamically ?
Business has alway changed requirement.
If we need add more field after production.
Relational Database Way
No SQL with Angular Way
Change
Change
Change
Data (Model)
DOM(View)
Data (Model)
DOM(View)
Change
Controller
Change
DB
Controller
(*Change only complex)
DB

26. Question and Feedback
Contact to apaichon@hotmail and Facebook

27. THE END