Dynamic Application Development by NodeJS ,AngularJS with OrientDB

6,098 views
5,622 views

Published on

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

Published in: Technology

Dynamic Application Development by NodeJS ,AngularJS with OrientDB

  1. 1. Dynamic Application using NodeJS and AngularJS with OrientDB By Apaichon Punopas
  2. 2. Objective 1. Understanding NodeJS and AngularJS Concept. 2. Show the example of Dynamic Application developed by NodeJS and AngularJS with OrientDB.
  3. 3. Who is ? Solution Provider for • IT Training (Web Platform) – Javascript , HTML5 ,NodeJS , AngularJS, ASP.NET , OrientDB. c • IT Outsourcing • Software Package Development
  4. 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. 5. High Level Architecture
  6. 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. 7. What is Non-Blocking I/O ?
  8. 8. Queue Management No Queue Management Queue Management
  9. 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. 10. Test Result
  11. 11. Test Result http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php
  12. 12. What is Angular JS ? Java Script Framework Started on 2009 by google engineers Miško Hevery Brad Green
  13. 13. Angular Concept • • • • • • • MVC architecture Client side templates Scope and View Data binding Directive Routes and View $http API
  14. 14. MVC vs MVW MVC Data (Model) MVW DOM(View) Data (Model) Controller (JS) DOM(View) Whatever Controller Directive Unit Test
  15. 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. 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. 17. Scope and View The scope is responsible for detecting changes to the model section and provides the execution context for expressions.
  18. 18. Data Binding
  19. 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. 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. 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. 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. 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. 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. 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. 26. Question and Feedback Contact to apaichon@hotmail and Facebook
  27. 27. THE END

×