Slide 1

Slide 1 text

Adam Alexander Chief Technical Officer @adamalex Kevin Smith Chief Product Officer and Hacker @respectTheCode MEAN Stack at App Press .com www. -

Slide 2

Slide 2 text

The MEAN Stack

Slide 3

Slide 3 text

Mongo Express Angular Node (MongoDB’s feature set prevents these types of conflicts)

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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 ■ ○ Jade ■ ap-drop-down(ap-model="apZoom.scale",ap-options="apZoom.scales")

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

"
" + "

" + "
    " + "
  • {{value}}
  • " + "
" + "

" Mongo Express Angular Node

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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