Académique Documents
Professionnel Documents
Culture Documents
Matt: X
I used to avoid JS whenver My old stack was dated Web is ready for SPA
Its a new World NPM, Bower, Grunt, Jade, GIT , EJS, Yoman, Boostrap, Javascript, HTML5, Angular, Node, NoSql SPA, Jade, CSS3, Twitter Bootstrap
Why Node
The Web is Changing The Browser is getting smarter Thick Clients / SPA Node.js is an event-driven, server-side JavaScript environment.
Node runs JavaScript using the V8 engine developed by Google for use in their Chrome web browser. Leveraging V8 allows Node to provide a server-side runtime environment that compiles and executes JavaScript at lightning speeds. The major speed increase is due to the fact that V8 compiles JavaScript into native machine code, instead of interpreting it or executing it as bytecode. Node is open source, and cross-platform, running on Mac OSX, Windows, and Linux. ts a server-side JavaScript framework. That means the same type of code that powers awesome Ajax applications like Gmail will now power its servers, too. Code reuse FTW! Its driven by asynchronous design. That means that it doesnt have to wait for slow file I/O or database operations to continue processing, which makes it really damn fast (by that I mean faster than most other popular server languages / platforms). It also means that it can handle millions of concurrent connections at once.
Why Mongo
Easy to setup and Run Fast Aggregation Document Based Native (json) no metadata required Geospatial index and querying (No need to compute great circle distance Calc) Many cloud options (heroku,nodjitsu, rackspace:http://www.objectrocket.com mongolab,mongohq Highly scalable (Sharding)
Why Not No transactions, no joins
Why Angular
Simple Architecture Very Fast Easy to integrate with backend State in client MV Whatever 2 way data binding Annimations Large supportive community, growing every day
Why Not large initial page load SEO (there are solutions: see yearofmoo.com) No IE 7 support IE8 can be difficult
Production Ready
Leverage javascript libraries like underscore, Q,Grunt,Express, SocketIO.
Apps are easy to build Very testable and easy to deploy To meet meet the ever increasing requirements of Live Interactive data with automatic refreshes and aninimations
It rests on top of Socket.io and the popular Express framework, and you have access to them in their entirety, natively.
Simple install
npm install -g sails
Anchors Aweigh!
>sails lift (runs node server, makes use of grunt) RESTful endpoints Create user object to test server:
http://localhost:1337/user/create?username=John Tomaselli&email=gtz@gtz.com&password=123456&role=4&title=software programming http://localhost:1337/user
Backend Organization
{image of dir structure}
Data
Out-of-the-box: Mongodb, mysql, reddis You can create a custom adapter too!
config/adapters.js
config/adapters.js
module.exports.adapters = { // If you leave the adapter config unspecified
module: 'sails-memory'
}, // Persistent adapter for DEVELOPMENT ONLY // (data IS preserved when the server shuts down) disk: {
module: 'sails-disk'
},
config/adapters.js
// MySQL is the world's most popular relational database. mysql: {
module: 'sails-mysql',
host: 'YOUR_MYSQL_SERVER_HOSTNAME_OR_IP_ADDRESS', user: 'YOUR_MYSQL_USER', password: 'YOUR_MYSQL_PASSWORD', database: 'YOUR_MYSQL_DB'
,
mongo: { module host port } : 'sails-mongo', : 'localhost', : 27017,
database : crm
};
Controllers
sails generate controller comment create destroy tag like generates: // Comment controller with generated actions. var CommentController = { create: function(req, res) { }, destroy: function(req, res) { }, tag: function(req, res) { }, like: function(req, res) { } } module.exports = CommentController;
Controller Blueprints
After a controller has been defined, Sails will automatically map out routes to give you easy access. For the controller above, the routes would be the following:
http://localhost:1337/comment/create http://localhost:1337/comment/destroy http://localhost:1337/comment/tag http://localhost:1337/comment/like
post /:controller
put /:controller/:id delete /:controller/:id /:controller/find/:id? /:controller/create /:controller/update/:id
/:controller/destroy/:id
config/routes.js
# Conventions GET : GET : POST : POST : PUT : DELETE: /:controller => findAll() /:controller/read/:id => find(id) /:controller/create => create() /:controller/create/:id => create(id) /:controller/update/:id => update(id) /:controller/destroy/:id => destroy(id)
# You can also explicitly state the action GET : /:controller/find => findAll() GET : /:controller/find/:id => find(id) POST : /:controller/create => create(id) PUT : /:controller/update/:id => update(id) DELETE: /:controller/destroy/:id => destroy(id)
config/routes.js
'get /logout': { controller: 'AuthController', action: 'logout' } '/': { view: 'home/index' // } , '/partials/:file' : { controller : 'foo', action : 'partials'} , '/meetings/:lat/:lng/:radius': { controller: 'foo', action: 'test' } , view: 'partials/home' ,
'/partials/meetings/:lat/:lng/:radius': {
controller: 'foo', action: 'test2' }
ie:http://localhost:1337/vendor?State=NY
Models: Attributes
module.exports = { attributes : {
"VendorID" : "string",
"VendorNumber" : "string", "CompanyName" :"string", "Address" : "string", "City" : "string", "State" : "string", "ZipCode" : "string", "Country" : "string", "Type" : "integer", "CompanyAddition" : "string", "Terms" : "integer", "AccountID" : "integer", "VendorAccountId" :"integer", "contacts" : "array" },
Models: methods
Instance Methods
Lifecycle Callbacks
Angular Client
C:\Node\Apps\sails9\park-tower\assets\linker\js\app\controllers\controllersPO.js 'use strict' Application.Controllers.controller('PoEditCtrl', ['$rootScope', '$scope', '$location', '$http', '$routeParams', 'mongosailsHelper', '$q', 'lookupCache', 'lookupCachePO', 'lookupCacheAcct', '$timeout', 'PO', function ($rootScope, $scope, $location, $http, $routeParams, mongosailsHelper, $q, lookupCache, lookupCachePO, lookupCacheAcct, $timeout, PO) {
var param = $routeParams.id;//POID; $scope.save = function () { //console.log('in sav ') if ($scope.mess === 'Create New PO') { PO.create(0, ( $scope.po1), function (success, error) { //console.log('create success ', success, error, success.data.POID); if (success.data.POID !== 0) {
Angular
} });
} else {
var id = $scope.po1.id; PO.update(({id: id}, $scope.po1)); // updates json without the id // console.log(' $scope.poOrig.newValue;:: ', $scope.poOrig.newValue) // place values back from poview $scope.po1.vendorName = $scope.currentVendor.CompanyName; $scope.po1.acctDesc = $scope.currentAccount.Desc; $scope.po1.newValue = 'test';// for test $location.path('/po'); } }; $scope.poOrig.newValue; // just
App.js
App.js
var Application = Application || {}; Application.Services = angular.module('application.services', []); Application.Controllers = angular.module('application.controllers', []); Application.Filters = angular.module('application.filters', []); Application.Directives = angular.module('application.directives', []); angular.module('application', ['application.filters', 'application.services', 'application.directives', 'application.controllers','ngResource','ngRoute','angular-table','ui.bootstrap','ngGrid','ngCookies']) .config(['$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) { var access = routingConfig.accessLevels;
$routeProvider
// anon .when('/', {templateUrl: '/partials/login', controller: 'LoginCtrl', access: access.anon}) .when('/home', {templateUrl: '/partials/home', controller: 'HomeCtrl', access: access.anon}) .when('/login', {templateUrl: '/partials/login', controller: 'LoginCtrl', access: access.anon}) .when('/logout', {templateUrl: '/partials/login', controller: 'LogoutCtrl', access: access.user}) // .when('/view1', {templateUrl: '/partials/partial1', controller: 'MainCtrl',access: access.anon}) .when('/foodview', {templateUrl: '/partials/foodview', controller: 'FoodCtrl', access: access.anon}) .when('/vendor', {templateUrl: '/partials/vendorview', controller: 'VendorCtrl',access: access.user}) //using modal .when('/vendor/:VendorNumber', {templateUrl: '/partials/vendorviewedit', controller: 'VendorEditCtrl',access: access.user})