dynamic application development by nodejs ,angularjs with orientdb

27
Dynamic Application using NodeJS and AngularJS with Dynamic Application using NodeJS and AngularJS with OrientDB OrientDB By Apaichon Punopas By Apaichon Punopas

Upload: apaichon-punopas

Post on 10-May-2015

3.956 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: 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

Page 2: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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.

Page 3: Dynamic Application Development by NodeJS ,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

Page 4: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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.

Page 5: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

High Level ArchitectureHigh Level Architecture

Page 6: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 7: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 8: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Queue ManagementQueue Management

No Queue Management

Queue Management

Page 9: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 10: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Test ResultTest Result

Page 11: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Test ResultTest Result

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

Page 12: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Java Script Framework Started on 2009

by google engineers

Miško Hevery Brad Green

What is Angular JS ?What is Angular JS ?

Page 13: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Angular ConceptAngular Concept

Page 14: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

MVC vs MVWMVC vs MVW

Data (Model)

Controller (JS)

DOM(View) Data (Model)

Whatever

DOM(View)

Controller Directive Unit Test

MVCMVC MVWMVW

Page 15: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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!';

}]);

Page 16: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 17: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Scope and ViewScope and View

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

Page 18: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Data BindingData Binding

Page 19: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 20: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 21: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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"};});});

Page 22: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 23: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

Page 24: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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

});

Page 25: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

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)

Page 26: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Question and FeedbackQuestion and Feedback

Contact to apaichon@hotmail and Facebook

Page 27: Dynamic Application Development by NodeJS ,AngularJS with OrientDB

THE ENDTHE END