Knowledge Sharing Session - MEAN architecture  

LAMP is so yesterday -
MEAN is so tomorrow

Web-Architecture with client- and server-side JavaScript

and noSQL

1
 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
 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
 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
 Knowledge Sharing Session - MEAN architecture  

What is LAMP – theoretically?

 Linux
 Apache
 MySQL
 PHP
Front End (Client) Backend (Server) Database

HTML/
HTML/
XML/
XML/ SQL
SQL
JSON
JSON

PHP
PHP (or
(or ASP,
ASP, Python,
Python,
JavaScript
JavaScript Perl,…)
Perl,…)
SQL
SQL based
based on
on dialect
dialect

5
 Knowledge Sharing Session - MEAN architecture  

LAMP = Linux, Apache, MySQL, PHP?

??
F ?
W T
Source:
http://en.wikipedia.org/wiki/LAMP_(software_bundle)

6
 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
 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
 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
Knowledge Sharing Session - MEAN architecture  

What is MEAN?
"MEAN is a fullstack JavaScript platform for modern web
applications“ - Mean.io

Front End (Client) Backend (Server) Database

 Knowledge Sharing Session - MEAN architecture  

The languages and formats used

 JavaScript
 JSON
 … that’s it! No PHP, no JAVA,…;)
Front End (Client) Backend (Server) Database

JSON
JSON JSON
JSON

JavaScript
JavaScript JavaScript
JavaScript JSON
JSON (BSON)
(BSON)

11
 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
 Knowledge Sharing Session - MEAN architecture  

Mean – The future?

Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/

13
 Knowledge Sharing Session - MEAN architecture  

Mean – The future?

Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/

14
 Knowledge Sharing Session - MEAN architecture  

Mean – The future?

Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/

15
 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
 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
 Knowledge Sharing Session - MEAN architecture  

Angular JS – Data Binding in Classical Template

Systems

Source: https://docs.angularjs.org/guide/databinding

18
 Knowledge Sharing Session - MEAN architecture  

Angular JS – Data Binding in Angular Templates

Source: https://docs.angularjs.org/guide/databinding

19
 Knowledge Sharing Session - MEAN architecture  

Angular JS – How data binding looks like

Source: https://docs.angularjs.org/guide/concepts

20
 Knowledge Sharing Session - MEAN architecture  

Angular JS – My experience

Source:
http://www.bennadel.com/blog/2
439-my-experience-with-
angularjs-the-super-heroic-
javascript-mvw-framework.htm

21
 Knowledge Sharing Session - MEAN architecture  

Angular JS – Conceptual overview

DEMO - Time:

http://jsfiddle.net/m9XKE/4

22
 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
 Knowledge Sharing Session - MEAN architecture  

Node JS – A success story?

 3rd most followed repository on Github
 Followers increasing

24
 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
 Knowledge Sharing Session - MEAN architecture  

Node JS - Architecture

libuv

LibUv: environment abstraction layer (on top of libeio & libev)

Source: http://blog.zenika.com/index.php?post/2011/04/10/NodeJS

26
 Knowledge Sharing Session - MEAN architecture  

Node JS – What’s this “non-blocking”?

 Blocking I/O
// takes 100ms
var contentsHosts = fs.readFileSync('/etc/hosts'); 100ms
// takes 30ms
console.log(contentsHosts); 30ms

// takes 120ms
var contentsPwd = fs.readFileSync('/etc/passwd'); 120ms
// takes 40ms
console.log(contentsPwd); 40ms
– Takes SUM(100,30,120,40) = 290ms

 Non-Blocking I/O
//takes 130ms
fs.readFile('/etc/hosts', function(err, contents) { 130ms
console.log(contents);
});
//takes 160ms
fs.readFile('/etc/passwd', function(err, contents) { 160ms
console.log(contents);
});

– Takes MAX(160,130) = 160ms

27
 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';

X
 

!
db.query(userQuery, [id], function (userErr, userResults) {
   db.query(activityQuery, function (activityErr, activityResults) {
      db.query(leaderBoardQuery, function (leaderBoardErr,
leaderBoardResults) {
 
         // Do something here
 
      });
   });

Avoid callback hell

});
28
 Knowledge Sharing Session - MEAN architecture  

Node JS – Event-Driven? Single-Threaded?

[…]
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");

Source: http://www.aaronstannard.com/post/2011/12/14/Intro-to-NodeJS-for-NET-Developers.aspx

29
 Knowledge Sharing Session - MEAN architecture  

Node JS – Problem with Single Tasking

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

Source: http://bocoup.com/weblog/node-stress-test-analysis

30
 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
 Knowledge Sharing Session - MEAN architecture  

Node JS – Production example @ 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 Source: https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/

32
 Knowledge Sharing Session - MEAN architecture  

Node JS – Node Package Manager

33
 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) //package.json example
 npm install -g <module>
 How to install a new module and save it for re-use within the project {
"name": "my Bosch WebApp",
 npm install --save-dev <module>
 Saves module name and version to package.json file
"version": "0.0.1",
 Just checkout node project from version control and run the aforementioned command "dependencies": {
"express": "~4.0.0",
 How to install all modules from a package.json file
"static-favicon": "~1.0.0",
 npm install "jade": "~1.3.0“
 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>

34
 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 restify
npm http GET https://registry.npmjs.org/restify
npm http 200 https://registry.npmjs.org/restify
npm 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 rest
restify listening at http://0.0.0.0:8080

35
 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
 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
 Knowledge Sharing Session - MEAN architecture  

Express –How to get started

$ npm install -g express-generator
$ express myBoschApp
$ cd myBoschApp
$ npm install
$ npm start

38
 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
 Knowledge Sharing Session - MEAN architecture  

Express – What does it look like app-wise?

40
 Knowledge Sharing Session - MEAN architecture  

Express – Routes (Index)

 Routes can trigger template rendering
 See example

41
 Knowledge Sharing Session - MEAN architecture  

Express – Routes (Users)

 Routes are the key for a REST API
 See example

42
 Knowledge Sharing Session - MEAN architecture  

Express – Routes (Users)

 Create a POST request handler

43
 Knowledge Sharing Session - MEAN architecture  

Express – Routes (Users)

 Create a POST request handler with ID

44
 Knowledge Sharing Session - MEAN architecture  

Express – Routes (Users)

 Call API with wrong request type

45
 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
 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
 Knowledge Sharing Session - MEAN architecture  

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

48
 Knowledge Sharing Session - MEAN architecture  

MongoDB - Document

Source: http://docs.mongodb.org/manual/core/crud-introduction

49
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Rich Documents - BSON

{
String
first_name: ‘Paul’,
surname: ‘Miller’, Typed field
r
cell: ‘+447557505611’ Numbe values
s
city: ‘London’,
G eo- inate
location: [45.123,47.232], ord Fields
Fields Co
Profession: [banking, finance, trader], can
cars: [ contain
{ model: ‘Bentley’, arrays
year: 1973,
value: 100000, … }, Fields can contain an
{ model: ‘Rolls Royce’, array of sub-documents
year: 1965,
value: 330000, … }
}
}

Source: http://www.mongodb.com/presentations/building-your-first-mean-app

50
 Knowledge Sharing Session - MEAN architecture  

MongoDB - Collection

Source: http://docs.mongodb.org/manual/core/crud-introduction

51
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Query a database

Source: http://docs.mongodb.org/manual/core/crud-introduction

52
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Modify data in a database

Source: http://docs.mongodb.org/manual/core/crud-introduction

53
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Relationships by reference

Source: http://docs.mongodb.org/manual/core/crud-introduction

54
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Relationships via embedded documents

Source: http://docs.mongodb.org/manual/core/crud-introduction

55
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Aggregation

Source: http://docs.mongodb.org/manual/core/crud-introduction

56
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Aggregation with Map Reduce

Source: http://docs.mongodb.org/manual/core/crud-introduction

57
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Aggregation with Distinct

Source: http://docs.mongodb.org/manual/core/crud-introduction

58
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Replication

Source: http://docs.mongodb.org/manual

59
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Replication – secondaries communicate

Source: http://docs.mongodb.org/manual

60
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Automatic failover

Source: http://docs.mongodb.org/manual

61
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Sharding
 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

Source: http://docs.mongodb.org/manual

62
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Sharding

Source: http://docs.mongodb.org/manual

63
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Sharding in clusters

Do not deploy
production clusters
without 3 config servers!
Source: http://docs.mongodb.org/manual

64
 Knowledge Sharing Session - MEAN architecture  

MongoDB – Sharding & Replication

Source: http://docs.mongodb.org/manual

65
 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
 Knowledge Sharing Session - MEAN architecture  

MEAN Flow – after you’ve learned the basics

Client REST API call
Server

Service Route

Controller Controller

View Model
Source: http://www.mongodb.com/presentations/building-your-first-mean-app

67
 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
 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-mongo

db-expressjs-angularjs-and

69
 Knowledge Sharing Session - MEAN architecture  

Questions?

70