Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MEAN Stack at App Press

MEAN Stack at App Press

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

Adam Alexander

October 16, 2013
Tweet

More Decks by Adam Alexander

Other Decks in Programming

Transcript

  1. Adam Alexander Chief Technical Officer @adamalex Kevin Smith Chief Product

    Officer and Hacker @respectTheCode MEAN Stack at App Press .com www. -
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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")
  7. <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
  8. "<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
  9. 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; };
  10. 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
  11. 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
  12. 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