Upload
sascha-sambale
View
7.425
Download
1
Embed Size (px)
Citation preview
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
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
Knowledge Sharing Session - MEAN architecture
LAMP = Linux, Apache, MySQL, PHP?
Source: http://en.wikipedia.org/wiki/LAMP_(software_bundle)
6
WTF???
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
DatabaseBackend (Server)Front End (Client)
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)
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/2439-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
Source: http://blog.zenika.com/index.php?post/2011/04/10/NodeJS
LibUv: environment abstraction layer (on top of libeio & libev)
libuv
26
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
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
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
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
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
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
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) 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
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
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
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
Knowledge Sharing Session - MEAN architecture
49
MongoDB - Document
Source: http://docs.mongodb.org/manual/core/crud-introduction
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
Knowledge Sharing Session - MEAN architecture
51
MongoDB - Collection
Source: http://docs.mongodb.org/manual/core/crud-introduction
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
59
MongoDB – Replication
Source: http://docs.mongodb.org/manual
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
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
Knowledge Sharing Session - MEAN architecture
MongoDB – Sharding
Source: http://docs.mongodb.org/manual
63
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!
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 basicsServerClient
ViewView
Controller Controller
ServiceService RouteRoute
Controller Controller
ModelModel
REST API call
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-mongodb-expressjs-angularjs-and
69
Knowledge Sharing Session - MEAN architecture
Questions?
70