Upload
apaichon-punopas
View
3.951
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Why we need to use NodeJS , AngularJS and OrientDB for Develop Dynamic Application
Citation preview
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