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

DatabaseBackend (Server)Front End (Client)


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


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,…;)


JavaScriptJavaScript JavaScriptJavaScript

JSONJSON JSONJSON

11

JSON (BSON)JSON (BSON)


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/2439-my-experience-with-angularjs-the-super-heroic-javascript-mvw-framework.htm

21


Angular JS – Conceptual overview

DEMO - Time:

http://jsfiddle.net/m9XKE/4

22

http://jsfiddle.net/m9XKE/4


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

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

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

libuv

26


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


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


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


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


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

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


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

//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 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

https://registry.npmjs.org/restify/-/restify-2.8.1.tgz


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


Express – Routes (Users) Create a POST request handler

43


Express – Routes (Users) Create a POST request handler with ID

44


Express – Routes (Users) 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


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


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

https://docs.angularjs.org/api/ngSanitize/service/$sanitize


MEAN Flow – after you’ve learned the basicsServerClient

ViewView

Controller Controller

ServiceService RouteRoute

Controller Controller

ModelModel

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-mongodb-expressjs-angularjs-and

69

http://www.mean.io/

https://angularjs.org/

http://mongodb.org/

https://nodejs.org/

http://expressjs.com/




Questions?

70

Date post:	21-Apr-2017
Category:	Engineering
Upload:	sascha-sambale
View:	7,425 times
Download:	1 times

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

Engineering