lamp is so yesterday, mean is so tomorrow! :)
DESCRIPTION
Slides from one of my knowledge sharing sessions, talking about the MEAN stack and why I think this is a new generation of a web technology stack.TRANSCRIPT
![Page 1: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/1.jpg)
Knowledge Sharing Session - MEAN architecture
LAMP is so yesterday -MEAN is so tomorrow
Web-Architecture with client- and server-side JavaScript and noSQL
1
![Page 2: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/2.jpg)
Knowledge Sharing Session - MEAN architecture
Agenda Who am I and what am I doing here? What is LAMP? Requirements for a modern web Architecture
What is MEAN? So why MEAN?
What is Angular JS? What is Node.JS? What is Express? What is MongoDB? MEAN security What’s bad about this approach? Any Questions?
2
![Page 3: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/3.jpg)
Knowledge Sharing Session - MEAN architecture
Who am I and what am I doing here? Sascha Sambale, 33 years old, Stuttgart (Twitter: @mastixmc)
– Follow me for latest news about RWD and Web Performance Before: EX IBMer (Dev @ IBM Web Content Manager, IBM WS Portal, BPM) Today: Project Lead & Architect for Mobile & Web Development @ BOSCH Lecturer @ Heilbronn University (Java Development) Geek
Writes code in his spare-time Frontend and backend
Languages German/English/Français (un petit peu) Java JavaScript Scala PHP CSS, SASS, LESS And some unimportant ones like CoffeeScript, Delphi, Basic…
Specialized in Application Development Web Development/Architecture Mobile Development
3
![Page 4: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/4.jpg)
Knowledge Sharing Session - MEAN architecture
The history of LAMP LAMP gained power in 1998 (until 2010)
Everybody hated JS (disabled in Browser; until jQuery became famous) Browser wasn’t that powerful as it is today Thin Client & Fat Server was the way to go There was no HTML5 and no node.JS!
In 1998 a lot of developers called HTML a development language And have used JavaScript only in a (very) basic way Remember DHTML? Got some nice effects though…
What else happened in 1998? Microsoft launches Windows 98 Google is founded Paypal is founded AOL bought Netscape for $4.2 billion -> LOL Monica Lewinski got “famous”
A lot has happened since then!
4
![Page 5: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/5.jpg)
DatabaseBackend (Server)Front End (Client)
Knowledge Sharing Session - MEAN architecture
What is LAMP – theoretically? Linux Apache MySQL PHP
HTML/XML/JSON
HTML/XML/JSON
JavaScriptJavaScript PHP (or ASP, Python, Perl,…)
PHP (or ASP, Python, Perl,…) SQL based on dialectSQL based on dialect
SQLSQL
5
![Page 6: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/6.jpg)
Knowledge Sharing Session - MEAN architecture
LAMP = Linux, Apache, MySQL, PHP?
Source: http://en.wikipedia.org/wiki/LAMP_(software_bundle)
6
WTF???
![Page 7: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/7.jpg)
Knowledge Sharing Session - MEAN architecture
Problems with LAMP? Important: There’s no problem with Linux! What’s LAMP if every component can be replaced? Apache is not the fastest web server around PHP is ugly (even uglier with its bolted-on OO paradigm) PHP needs to be integrated into Apache to run
Ever switched from PHP to ASP or Python based backend? It’s hard to write good-to-read, reusable and fast PHP code Frontend works with other languages than the backend Too many conversions (XML to PHP to HTML, model to SQL) There is no separated server-side and client-side development LAMP is cheap, but has not been built for performance mySQL is now owned by Oracle! ;)
7
![Page 8: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/8.jpg)
Knowledge Sharing Session - MEAN architecture
To put it together – Web Technologies nowadays So what are you currently using when building a web
application with a LAMP approach? Server-side language: PHP, ASP, JSP,… Server-side container: Tomcat, Jboss, Jetty, Apache,… Server-side templating: HAML, Moustache,… Server-side MVC framework: Spring, Struts,… Client-side JavaScript: jQuery, AngularJS, BackboneJS
> 5 different technologies/languages
8
![Page 9: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/9.jpg)
Knowledge Sharing Session - MEAN architecture
Requirements for a modern web? Customers want fast web sites/fast response times No page reloads (that’s so 2010) Enterprises want to go virtual
One box + Several virtual images => Shared Hardware System with minimal memory footprint/overhead needed
As many concurrent requests as possible Only load resources when needed (conditional loading) Most of the data must come from a slim REST-API Mobile/Responsive UIs Automated build for backend AND frontend
Including check for coding conventions, testing,… Integration in company’s continuos integration platform For JS see Grunt or Gulp
9
![Page 10: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/10.jpg)
Knowledge Sharing Session - MEAN architecture
What is MEAN?
"MEAN is a fullstack JavaScript platform for modern web applications“ - Mean.io
DatabaseBackend (Server)Front End (Client)
![Page 11: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/11.jpg)
Knowledge Sharing Session - MEAN architecture
The languages and formats used JavaScript JSON … that’s it! No PHP, no JAVA,…;)
DatabaseBackend (Server)Front End (Client)
JavaScriptJavaScript JavaScriptJavaScript
JSONJSON JSONJSON
11
JSON (BSON)JSON (BSON)
![Page 12: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/12.jpg)
Knowledge Sharing Session - MEAN architecture
So why MEAN? 100% free 100% Open Source 100% Java Script (+JSON and HTML) 100% Web Standards Huge community Consistent Models from the backend to the frontend and back Use a uniform language throughout your stack
JavaScript (the language of the web) JSON (the data format of the web) No conversion needed for the database
Use JavaScript with a great framework (compared to jQuery) Allows to start with the complete frontend development first Very low memory footprint/overhead
12
![Page 13: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/13.jpg)
Knowledge Sharing Session - MEAN architecture
Mean – The future?
Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/
13
![Page 14: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/14.jpg)
Knowledge Sharing Session - MEAN architecture
Mean – The future?
Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/
14
![Page 15: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/15.jpg)
Knowledge Sharing Session - MEAN architecture
Mean – The future?
Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/
15
![Page 16: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/16.jpg)
Knowledge Sharing Session - MEAN architecture
Angular JS – What is it? JavaScript framework developed by Google Development started in 2009 (Open Source) Based on Model-View-* Pattern (client-side)
MVC/MVP/MVVM Bi-Directional Data Binding
Declarative Programming (focus on what – not the how!) Directives are integrated in HTML directly DOM Manipulations completely hidden
Great for Frontend development Great for SPA (Single Page Applications) Great for CRUD applications (e.g. offers factories) Great for mobile apps
Very modular and extensible Makes testing an ease
Great Browser support (> IE8) Well documented Less custom code than good old jQuery (which is not needed here!)
16
![Page 17: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/17.jpg)
Knowledge Sharing Session - MEAN architecture
Angular JS – Differences to jQuery Angular JS is a framework – jQuery is not! Angular CAN USE jQuery as well! With jQuery you build your design and change it with DOM
manipulations later With Angular JS the view is the master and DOM changes are
part of the design Angular JS gives developers a guideline to develop an
application in a common way jQuery does not have any guidelines integrated, which can be
hard for other developers if they need to extend the functionalities There are best practices though
17
![Page 18: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/18.jpg)
Knowledge Sharing Session - MEAN architecture
Angular JS – Data Binding in Classical Template Systems
Source: https://docs.angularjs.org/guide/databinding
18
![Page 19: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/19.jpg)
Knowledge Sharing Session - MEAN architecture
Angular JS – Data Binding in Angular Templates
Source: https://docs.angularjs.org/guide/databinding
19
![Page 20: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/20.jpg)
Knowledge Sharing Session - MEAN architecture
Angular JS – How data binding looks like
Source: https://docs.angularjs.org/guide/concepts
20
![Page 21: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/21.jpg)
Knowledge Sharing Session - MEAN architecture
Angular JS – My experience
Source: http://www.bennadel.com/blog/2439-my-experience-with-angularjs-the-super-heroic-javascript-mvw-framework.htm
21
![Page 22: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/22.jpg)
Knowledge Sharing Session - MEAN architecture
Angular JS – Conceptual overview
DEMO - Time:
http://jsfiddle.net/m9XKE/4
22
![Page 23: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/23.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – What is it?
Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js
uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-
time applications that run across distributed devices.(Source: http://www.nodejs.org)
23
![Page 24: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/24.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – A success story? 3rd most followed repository on Github
Followers increasing
24
![Page 25: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/25.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – What is it? Released in 2009 by Ryan Dahl (working for Joyent) Written in C/C++
Can also use C libraries Built on top of Chrome’s V8 engine – so pure JavaScript!
Therefore based on latest ECMAScript 5 Framework to build asynchronous I/O applications Single Threaded – no concurrency bugs – no deadlocks!
Not internally though – but we’ll get to that One node process = one CPU Core Can easily handle 10k concurrent connections
Doesn’t have any problems with concurrency Doesn’t create much overhead (CPU/Memory)
Easily scalable (just create a cluster) Very fast (well, it’s mostly C code) Great community and well-maintained
Extensible with a looooot of modules (> 15.000!) Installation and first server start within less than 5 minutes
REST-API that replies to GET requests can be implemented in less than 5 minutes as well! Careful: It’s not a web framework!
25
![Page 26: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/26.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS - Architecture
Source: http://blog.zenika.com/index.php?post/2011/04/10/NodeJS
LibUv: environment abstraction layer (on top of libeio & libev)
libuv
26
![Page 27: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/27.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – What’s this “non-blocking”? Blocking I/O
– Takes SUM(100,30,120,40) = 290ms
Non-Blocking I/O
– Takes MAX(160,130) = 160ms
// takes 100msvar contentsHosts = fs.readFileSync('/etc/hosts');// takes 30msconsole.log(contentsHosts);
// takes 120msvar contentsPwd = fs.readFileSync('/etc/passwd');// takes 40msconsole.log(contentsPwd);
// takes 100msvar contentsHosts = fs.readFileSync('/etc/hosts');// takes 30msconsole.log(contentsHosts);
// takes 120msvar contentsPwd = fs.readFileSync('/etc/passwd');// takes 40msconsole.log(contentsPwd);
//takes 130msfs.readFile('/etc/hosts', function(err, contents) {console.log(contents);});//takes 160msfs.readFile('/etc/passwd', function(err, contents) {console.log(contents);});
//takes 130msfs.readFile('/etc/hosts', function(err, contents) {console.log(contents);});//takes 160msfs.readFile('/etc/passwd', function(err, contents) {console.log(contents);});
100ms
30ms
120ms
40ms
130ms
160ms
27
![Page 28: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/28.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – Callbacks
myCoolFunction(myArguments, function (err, data) { if (err) { // Handle Error } // Do something with the result (data).});
var userQuery = 'SELECT * FROM users WHERE id = ?';var activityQuery = 'SELECT * FROM activities ORDER BY timestamp LIMIT 50';var leaderBoardQuery = 'SELECT count(points) as total, user_id FROM activities LIMIT 50'; db.query(userQuery, [id], function (userErr, userResults) { db.query(activityQuery, function (activityErr, activityResults) { db.query(leaderBoardQuery, function (leaderBoardErr, leaderBoardResults) { // Do something here }); });});
!XAvoid callback hell28
![Page 29: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/29.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – Event-Driven? Single-Threaded?
Source: http://www.aaronstannard.com/post/2011/12/14/Intro-to-NodeJS-for-NET-Developers.aspx
[…]var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end(myJavascriptObject.getSomeStatusInfo());}).listen(1337, "127.0.0.1");
[…]var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end(myJavascriptObject.getSomeStatusInfo());}).listen(1337, "127.0.0.1");
29
![Page 30: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/30.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – Problem with Single Tasking
Source: http://bocoup.com/weblog/node-stress-test-analysis
Solutions:
Distribute the load!
• Tell node.js to fork processes (natively supported by node JS)
• Fabric-engine• Cluster-api• Jxcore• Use nginx as load balancer
Solutions:
Distribute the load!
• Tell node.js to fork processes (natively supported by node JS)
• Fabric-engine• Cluster-api• Jxcore• Use nginx as load balancer
30
![Page 31: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/31.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – Production example @ Paypal
Five engineers started in January with Java app Using the Spring Framework
In March two engineers started with the Node JS application Kraken.js, express and dust.js
In June both applications had the same functionality
Node JS Development success in numbers Built almost twice as fast with fewer people Written in 33% fewer lines of code Constructed with 40% fewer files
Source: https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/
31
![Page 32: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/32.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – Production example @ Paypal
Source: https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/
Double the requests per second vs. the Java application Node JS -> Single Core Java -> Five cores!
35% decrease in the average response time for the same page Pages served 200ms faster
32
![Page 33: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/33.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – Node Package Manager
33
![Page 34: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/34.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – Node Package Manager
Modules extend Node JS functionalities You can write your own modules and use them for yourself or publish them in the npm repository to be used by others
npm contains complete dependency management All non-global modules including their dependencies will be stored in the node_modules directory of your project
How to install a new module npm install <module>
How to install a new module globally (for all node projects) npm install -g <module>
How to install a new module and save it for re-use within the project npm install --save-dev <module> Saves module name and version to package.json file Just checkout node project from version control and run the aforementioned command
How to install all modules from a package.json file npm install Reads package.json file and download sall dependencies
Hwo to find a module in the NPM repository npm search <search string>
How to list the modules (and their dependencies) in the current project npm list
How to see module details npm info <module>
//package.json example
{ "name": "my Bosch WebApp", "version": "0.0.1", "dependencies": { "express": "~4.0.0", "static-favicon": "~1.0.0", "jade": "~1.3.0“ }}
//package.json example
{ "name": "my Bosch WebApp", "version": "0.0.1", "dependencies": { "express": "~4.0.0", "static-favicon": "~1.0.0", "jade": "~1.3.0“ }}
34
![Page 35: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/35.jpg)
Knowledge Sharing Session - MEAN architecture
Node JS – 3 Minutes REST Service example Setup a full-blown, fast, headless & lightweight REST Service in less than 3 minutes Prereq: Download and install Node.js
$>mkdir bosch-rest & cd $_$ bosch-rest> npm install restifynpm http GET https://registry.npmjs.org/restifynpm http 200 https://registry.npmjs.org/restifynpm http GET https://registry.npmjs.org/restify/-/restify-2.8.1.tgz[...]$ bosch-rest>vi rest.js
var restify = require('restify');
function respond(req, res, next) { res.send('hello ' + req.params.name); next();}
var server = restify.createServer();server.get('/hello/:name', respond);
server.listen(8080, function() { console.log('%s listening at %s', server.name, server.url);});
$ bosch-rest>node restrestify listening at http://0.0.0.0:8080
35
![Page 36: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/36.jpg)
Knowledge Sharing Session - MEAN architecture
Express – What is it?
Express is a minimal and flexible node.js web application framework, providing a
robust set of features for building single and multi-page, and hybrid web applications.
36
![Page 37: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/37.jpg)
Knowledge Sharing Session - MEAN architecture
Express – What is it? Node JS based web framework Inspired by Sinatra (Ruby) Based on connect middleware Makes usage of Node JS even easier Easy to implement REST API
use restify if you don't need anything else! Easy to implement session management Supports several template rendering engines (Jade, EJS)
Supports partials -> so you can split your HTML in fragments Asynchronous (of course!) Implements MVC pattern Good documentation Lots of examples Many extensions with a nice community
37
![Page 38: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/38.jpg)
Knowledge Sharing Session - MEAN architecture
Express –How to get started
$ npm install -g express-generator$ express myBoschApp$ cd myBoschApp$ npm install$ npm start
38
![Page 39: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/39.jpg)
Knowledge Sharing Session - MEAN architecture
Express – How does it look like app-wise? Express application Public folder
Contains all public files to be served to the client Routes folder
Each route serves its own purpose
Routes represent a URI/path
Views folder Template folder Template can be rendered using placeholders Express uses Jade as default
App.Js Standard Node JS Application
Package.json NPM packages (dependencies) Remember when we’ve created the app, we’ve called “npm
install” which downloaded the dependencies specified in there
39
![Page 40: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/40.jpg)
Knowledge Sharing Session - MEAN architecture
Express – What does it look like app-wise?
40
![Page 41: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/41.jpg)
Knowledge Sharing Session - MEAN architecture
Express – Routes (Index) Routes can trigger template rendering See example
41
![Page 42: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/42.jpg)
Knowledge Sharing Session - MEAN architecture
Express – Routes (Users) Routes are the key for a REST API See example
42
![Page 43: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/43.jpg)
Knowledge Sharing Session - MEAN architecture
Express – Routes (Users) Create a POST request handler
43
![Page 44: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/44.jpg)
Knowledge Sharing Session - MEAN architecture
Express – Routes (Users) Create a POST request handler with ID
44
![Page 45: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/45.jpg)
Knowledge Sharing Session - MEAN architecture
Express – Routes (Users) Call API with wrong request type
45
![Page 46: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/46.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – What is it?
MongoDB (from "humongous") is a cross-platform document-oriented database - classified as a NoSQL database which eschews the traditional
table-based relational database structure in favor of JSON-like documents with dynamic schemas
46
![Page 47: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/47.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – What is it? Developed by software company 10gen (now MongoDB Inc.) in October 2007 Fast NoSQL schemaless database written in C++ Document-Oriented Storage
JSON-style documents with dynamic schemas Full Index Support
Index on any attribute, just like you're used to Replication & High Availability
Mirror across LANs and WANs for scale and peace of mind Auto-Sharding
Scale horizontally without compromising functionality Fast In-Place
Updates/Atomic modifiers for contention-free performance Map/Reduce
Flexible aggregation and data processing GridFS
Store files of any size without complicating your stack (JSON file limit: 16MB – GridFS chunk: 255k) Also useful for storing any files which you want access without having to load the entire file into
memory
47
![Page 48: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/48.jpg)
Knowledge Sharing Session - MEAN architecture
48
MongoDB – Terminology
MongoDB RDBMS
Collection Table
Document Row
Index Index
Embedded Document Join
Reference Foreign Key
Source: http://www.mongodb.com/presentations/building-your-first-mean-app
![Page 49: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/49.jpg)
Knowledge Sharing Session - MEAN architecture
49
MongoDB - Document
Source: http://docs.mongodb.org/manual/core/crud-introduction
![Page 50: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/50.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Rich Documents - BSON
Source: http://www.mongodb.com/presentations/building-your-first-mean-app
50
{ first_name: ‘Paul’, surname: ‘Miller’, cell: ‘+447557505611’ city: ‘London’, location: [45.123,47.232], Profession: [banking, finance, trader], cars: [ { model: ‘Bentley’, year: 1973, value: 100000, … }, { model: ‘Rolls Royce’, year: 1965, value: 330000, … } }}
Fields can contain an array of sub-documents
Fields
Typed field values
Fields can contain arrays
String
Number
Geo-
Coordinates
![Page 51: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/51.jpg)
Knowledge Sharing Session - MEAN architecture
51
MongoDB - Collection
Source: http://docs.mongodb.org/manual/core/crud-introduction
![Page 52: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/52.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Query a database
Source: http://docs.mongodb.org/manual/core/crud-introduction
52
![Page 53: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/53.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Modify data in a database
Source: http://docs.mongodb.org/manual/core/crud-introduction
53
![Page 54: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/54.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Relationships by reference
Source: http://docs.mongodb.org/manual/core/crud-introduction
54
![Page 55: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/55.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Relationships via embedded documents
Source: http://docs.mongodb.org/manual/core/crud-introduction
55
![Page 56: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/56.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Aggregation
Source: http://docs.mongodb.org/manual/core/crud-introduction
56
![Page 57: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/57.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Aggregation with Map Reduce
Source: http://docs.mongodb.org/manual/core/crud-introduction
57
![Page 58: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/58.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Aggregation with Distinct
Source: http://docs.mongodb.org/manual/core/crud-introduction
58
![Page 59: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/59.jpg)
Knowledge Sharing Session - MEAN architecture
59
MongoDB – Replication
Source: http://docs.mongodb.org/manual
![Page 60: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/60.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Replication – secondaries communicate
Source: http://docs.mongodb.org/manual
60
![Page 61: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/61.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Automatic failover
Source: http://docs.mongodb.org/manual
61
![Page 62: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/62.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Sharding
Source: http://docs.mongodb.org/manual
62
Sharding = horizontal scaling Method for storing data across multiple machines
divides the data set and distributes the data over multiple servers, or shards
Each shard is an independent database, and collectively, the shards make up a single logical database
MongoDB uses sharding to support deployments with very large data sets and high throughput operations
High query rates can exhaust the CPU capacity of the server Larger data sets exceed the storage capacity of a single machine
Vertical scaling might be a solution BUT are mostly disproportionately more expensive than smaller
systems
![Page 63: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/63.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Sharding
Source: http://docs.mongodb.org/manual
63
![Page 64: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/64.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Sharding in clusters
Source: http://docs.mongodb.org/manual
64
Do not deploy production clusters without 3 config servers!
![Page 65: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/65.jpg)
Knowledge Sharing Session - MEAN architecture
MongoDB – Sharding & Replication
Source: http://docs.mongodb.org/manual
65
![Page 66: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/66.jpg)
Knowledge Sharing Session - MEAN architecture
MEAN – Security It’s as insecure as you code it It’s JavaScript, so you have to be careful
Always use “strict” mode -> “use strict” in JavaScript file Always declare variables Always throw all errors Always handle all callbacks (e.g. success AND error) Use patterns for visibility (e.g. module pattern) Do static code analysis (JSHint/JSLint) Always encode untrusted data
Angular provides sanitizer https://docs.angularjs.org/api/ngSanitize/service/$sanitize
Express Framework can help you here Easily handles CSRF Helps you sanitize inputs
And of course - never run any application as root! ;) Test Test Test
66
![Page 67: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/67.jpg)
Knowledge Sharing Session - MEAN architecture
MEAN Flow – after you’ve learned the basicsServerClient
ViewView
Controller Controller
ServiceService RouteRoute
Controller Controller
ModelModel
REST API call
Source: http://www.mongodb.com/presentations/building-your-first-mean-app
67
![Page 68: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/68.jpg)
Knowledge Sharing Session - MEAN architecture
What’s bad about this “mean” approach? For those who don’t like JavaScript – it’s going to be killing you! There are still no general JS coding guidelines SPAs need a new way of thinking(!)
The browser is your platform! MongoDB is not as robust as an SQL server
This security is what they sacrifice to gain speed You need to take care of rollbacks yourself (2-Phase-Commit)
ACID => Possible – but part of the driver/client application It’s hard to find specialists that are no hipsters
and have the big picture/architecture for enterprise solutions in mind It makes sense to also have a look at Grunt, Yeoman and Bower in
order to create a good developer experience A lot of new areas have to be discovered – but it’s worth it!
Once you’ve created the first site with this technology, it’s hard to go back to the old approach
68
![Page 69: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/69.jpg)
Knowledge Sharing Session - MEAN architecture
Sources Mean.io
http://www.mean.io AngularJS
https://angularjs.org MongoDB
http://mongodb.org NodeJS
https://nodejs.org Express
http://expressjs.com The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js
http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and
69
![Page 70: LAMP is so yesterday, MEAN is so tomorrow! :)](https://reader033.vdocuments.net/reader033/viewer/2022042602/5588d031d8b42aed458b457e/html5/thumbnails/70.jpg)
Knowledge Sharing Session - MEAN architecture
Questions?
70