MEAN Stack at App Press

Adam Alexander and Kevin Smith from App Press introduce the IndyJS group to the MEAN stack.

Transcript

1. Adam Alexander Chief Technical Officer @adamalex Kevin Smith Chief Product Officer and Hacker @respectTheCode MEAN Stack at App Press .com www. -
2. The MEAN Stack
3. Mongo Express Angular Node (MongoDB’s feature set prevents these types of conflicts)
4. Mongo Express Angular Node Document-oriented database • Performance and scalability of key-value document store • … with many of the best features of SQL ◦ Indexes, queries, aggregation (count, distinct, group) • No joins, but supports nested documents • You use JSON and JavaScript to interact with the database SAP - MTV - Codecademy - Shutterfly - Forbes - NYT - CNN GitHub - EA Games - Foursquare - Stripe
5. Mongo Express Angular Node Javascript platform for fast, scalable network applications • Event-driven non-blocking IO: easy to write concurrent servers • Perfect for the modern workload with lots of HTTP requests • Uses V8 Javascript engine built by Google for Chrome • Built-in Clustering, native HTTP and Cryptography (OpenSSL) • 35,000 downloads per day • 30,000 modules in NPM GM - Yahoo - LinkedIn - eBay - Airbnb - Dow Jones Walmart - NYT - Dell - PayPal
6. Mongo Express Angular Node Web framework for Node.js • Server-side MVC ◦ Simple Controller syntax binds logic to URLs ◦ Helpers for requests and responses (cookies, redirects) ◦ Server-side view templating ◦ Bring-your-own model (look at Mongoose) • Exposes Connect (session, auth, logging) and Node.js Klout - Apiary.io - Mozilla Persona - Geekli.st Storify - new MySpace
7. Mongo Express Angular Node Complete client-side MVC presentation framework • Basic extensible model with $http and $resource • Add Breeze for rich models with change tracking, validation, caching • Two-way data binding, form validation, view switching and routing • Controllers (clean business logic without DOM manipulation) • Directives (custom HTML elements) • Services (built in and custom) Sony - DoubleClick - YouTube - Google
8. Mongo Express Angular Node • apDropDown Directive ◦ Controller Scope $scope.apZoom = { scale: "1.0", scales: {"0.5": "50%", "0.75": "75%", "1.0": "100%", "1.5": "150%", "2.0": "200%"} }; ◦ HTML ▪ <ap-drop-down ap-model="apZoom.scale" ap-options="apZoom.scales" /> ◦ Jade ▪ ap-drop-down(ap-model="apZoom.scale",ap-options="apZoom.scales")
9. <ap-drop-down ap-model="apZoom.scale" ap-options="apZoom.scales"/> app.directive("apDropDown", function (apDropDown, $window) { return { restrict: "E", scope: {model: "=apModel", options: "=apOptions"}, template: "...", replace: true, link: function (scope, element, attrs) { … } }; }); Mongo Express Angular Node
10. "<div ng-class='{true: \"dd-open\"}[isOpen]' class='dd-container'>" + "<h1 class='dd-model' ng-click='toggle($event)' ng-bind='options[model]' />" + "<ul class='dd-list' ng-show='isOpen'>" + "<li class='dd-item' ng-repeat='(key, value) in options' ng-click='select(key)' ap-selected='{{key==model}}'>{{value}}</li>" + "</ul>" + "</div>" Mongo Express Angular Node
11. scope.toggle = function () { if (attrs.disabled) return; e.preventDefault(); if (scope.isOpen) { scope.isOpen = false; apDropDown.setOpen(scope); } else { apDropDown.closeAll(); scope.isOpen = true; } }; Mongo Express Angular Node scope.select = function (key) { scope.model = key; scope.isOpen = false; };
12. ap.factory("apDropDown", function () { var openScope = false; return { setOpen: function (scope) { openScope = scope; }, closeAll: function () { if (!openScope) return; openScope.isOpen = false; } }; }); Mongo Express Angular Node
13. Full Stack MEAN Benefits Individual advantages are multiplied across the stack • Mindshare (Stack Overflow, blog posts, modules, add-ons) • Same language at all layers (matched impedance) • Native foundation for performance ◦ MongoDB, Browser V8, Node V8, libuv • Rapid development and prototyping ◦ Only change HTML, propagate down, later add validation • Your favorite JavaScript testing tool such as Jasmine or Mocha • Out-of-the-box scaling of MongoDB and Node services
14. Adam Alexander Chief Technical Officer @adamalex Kevin Smith Chief Product Officer and Hacker @respectTheCode Dev Team at App Press .com jobs@ - Nicolas Bevacqua Full Stack Engineer blog.ponyfoo.com @nzgb