LAMP is so yesterday, MEAN is so tomorrow! :)

Knowledge Sharing Session - MEAN architecture
LAMP is so yesterday -
MEAN is so tomorrow
Web-Architecture with client- and server-side JavaScript
and noSQL
1

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

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

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

What is LAMP – theoretically?
 Linux
 Apache
 MySQL
 PHP
Front End (Client) Backend (Server) Database
HTML/
XML/
JSON
HTML/
XML/
JSON
PHP (or ASP, Python,
JJaavvaaSSccrriipptt PHP (or ASP, Python,
Perl,…) SSQQLL bbaasseedd oonn ddiiaalleecctt
Perl,…)
SSQQLL
5

LAMP = Linux, Apache, MySQL, PHP?
Source:
http://en.wikipedia.org/wiki/LAMP_(software_bundle)
6
WTF???

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

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

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

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

The languages and formats used
 JavaScript
 JSON
 … that’s it! No PHP, no JAVA,…;)
JJSSOONN JJSSOONN
JJaavvaaSSccrriipptt JJaavvaaSSccrriipptt
11
JJSSOONN ((BBSSOONN))

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

Mean – The future?
Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/
13

14

15

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

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

Angular JS – Data Binding in Classical Template
Systems
Source: https://docs.angularjs.org/guide/databinding
18

Angular JS – Data Binding in Angular Templates
Source: https://docs.angularjs.org/guide/databinding
19

Angular JS – How data binding looks like
Source: https://docs.angularjs.org/guide/concepts
20

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

Angular JS – Conceptual overview
DEMO - Time:
http://jsfiddle.net/m9XKE/4
22

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

Node JS – A success story?
 3rd most followed repository on Github
 Followers increasing
24

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

Node JS - Architecture
LibUv: environment abstraction layer (on top of libeio & libev)
Source: http://blog.zenika.com/index.php?post/2011/04/10/NodeJS
libuv
26

Node JS – What’s this “non-blocking”?
 Blocking I/O
// takes 100ms
var contentsHosts = fs.readFileSync('/etc/hosts');
// takes 30ms
console.log(contentsHosts);
// takes 120ms
var contentsPwd = fs.readFileSync('/etc/passwd');
// takes 40ms
console.log(contentsPwd);
– Takes SUM(100,30,120,40) = 290ms
 Non-Blocking I/O
//takes 130ms
fs.readFile('/etc/hosts', function(err, contents) {
console.log(contents);
});
//takes 160ms
fs.readFile('/etc/passwd', function(err, contents) {
console.log(contents);
});
– Takes MAX(160,130) = 160ms
100ms
30ms
120ms
40ms
130ms
160ms
27

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, X function (leaderBoardErr,
leaderBoardResults) {
// Do something here
!
});
});
}); 28 Avoid callback hell

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

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
30

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

Node JS – Production example @ Paypal
 Double the requests per second vs. the Java application
Source: https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/
 Node JS -> Single Core
 Java -> Five cores!
 35% decrease in the average response time for the same page
 Pages served 200ms faster
32

Node JS – Node Package Manager
33

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“
}
}
34

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

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

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

Express –How to get started
$ npm install -g express-generator
$ express myBoschApp
$ cd myBoschApp
$ npm install
$ npm start
38

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

Express – What does it look like app-wise?
40

Express – Routes (Index)
 Routes can trigger template rendering
 See example
41

Express – Routes (Users)
 Routes are the key for a REST API
 See example
42

 Create a POST request handler
43

 Create a POST request handler with ID
44

 Call API with wrong request type
45

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

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

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

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

MongoDB – Rich Documents - BSON
String
Number
Geo-
Coordinates
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

51
MongoDB - Collection

MongoDB – Query a database
52

MongoDB – Modify data in a database
53

MongoDB – Relationships by reference
54

MongoDB – Relationships via embedded documents
55

MongoDB – Aggregation
56

MongoDB – Aggregation with Map Reduce
57

MongoDB – Aggregation with Distinct
58

59
MongoDB – Replication
Source: http://docs.mongodb.org/manual

MongoDB – Replication – secondaries communicate
60

MongoDB – Automatic failover
61

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

MongoDB – Sharding
63

MongoDB – Sharding in clusters
64
Do not deploy
production clusters
without 3 config servers!

MongoDB – Sharding & Replication
65

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

MEAN Flow – after you’ve learned the basics
Client Server
SSeerrvviiccee RRoouuttee
CCoonnttrroolllleerr
VViieeww
CCoonnttrroolllleerr
MMooddeell
REST API call
67

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

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

Questions?
70

LAMP is so yesterday, MEAN is so tomorrow! :)

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (8)

Similar to LAMP is so yesterday, MEAN is so tomorrow! :)

Similar to LAMP is so yesterday, MEAN is so tomorrow! :) (20)

Recently uploaded

Recently uploaded (20)

LAMP is so yesterday, MEAN is so tomorrow! :)