Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,537 views

Published on

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.

Published in: Engineering
  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Knowledge Sharing Session - MEAN architecture LAMP is so yesterday - MEAN is so tomorrow Web-Architecture with client- and server-side JavaScript and noSQL 1
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. Knowledge Sharing Session - MEAN architecture 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
  6. 6. Knowledge Sharing Session - MEAN architecture LAMP = Linux, Apache, MySQL, PHP? Source: http://en.wikipedia.org/wiki/LAMP_(software_bundle) 6 WTF???
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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 JJSSOONN JJSSOONN JJaavvaaSSccrriipptt JJaavvaaSSccrriipptt 11 JJSSOONN ((BBSSOONN))
  12. 12. 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
  13. 13. Knowledge Sharing Session - MEAN architecture Mean – The future? Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/ 13
  14. 14. Knowledge Sharing Session - MEAN architecture Mean – The future? Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/ 14
  15. 15. Knowledge Sharing Session - MEAN architecture Mean – The future? Source: http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/ 15
  16. 16. 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
  17. 17. 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
  18. 18. Knowledge Sharing Session - MEAN architecture Angular JS – Data Binding in Classical Template Systems Source: https://docs.angularjs.org/guide/databinding 18
  19. 19. Knowledge Sharing Session - MEAN architecture Angular JS – Data Binding in Angular Templates Source: https://docs.angularjs.org/guide/databinding 19
  20. 20. Knowledge Sharing Session - MEAN architecture Angular JS – How data binding looks like Source: https://docs.angularjs.org/guide/concepts 20
  21. 21. 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
  22. 22. Knowledge Sharing Session - MEAN architecture Angular JS – Conceptual overview DEMO - Time: http://jsfiddle.net/m9XKE/4 22
  23. 23. 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
  24. 24. Knowledge Sharing Session - MEAN architecture Node JS – A success story?  3rd most followed repository on Github  Followers increasing 24
  25. 25. 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
  26. 26. Knowledge Sharing Session - MEAN architecture 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
  27. 27. Knowledge Sharing Session - MEAN architecture 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
  28. 28. 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, X function (leaderBoardErr, leaderBoardResults) { // Do something here ! }); }); }); 28 Avoid callback hell
  29. 29. 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
  30. 30. 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 30
  31. 31. 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
  32. 32. Knowledge Sharing Session - MEAN architecture 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
  33. 33. Knowledge Sharing Session - MEAN architecture Node JS – Node Package Manager 33
  34. 34. 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“ } } 34
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Knowledge Sharing Session - MEAN architecture Express –How to get started $ npm install -g express-generator $ express myBoschApp $ cd myBoschApp $ npm install $ npm start 38
  39. 39. 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
  40. 40. Knowledge Sharing Session - MEAN architecture Express – What does it look like app-wise? 40
  41. 41. Knowledge Sharing Session - MEAN architecture Express – Routes (Index)  Routes can trigger template rendering  See example 41
  42. 42. Knowledge Sharing Session - MEAN architecture Express – Routes (Users)  Routes are the key for a REST API  See example 42
  43. 43. Knowledge Sharing Session - MEAN architecture Express – Routes (Users)  Create a POST request handler 43
  44. 44. Knowledge Sharing Session - MEAN architecture Express – Routes (Users)  Create a POST request handler with ID 44
  45. 45. Knowledge Sharing Session - MEAN architecture Express – Routes (Users)  Call API with wrong request type 45
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. Knowledge Sharing Session - MEAN architecture 49 MongoDB - Document Source: http://docs.mongodb.org/manual/core/crud-introduction
  50. 50. Knowledge Sharing Session - MEAN architecture MongoDB – Rich Documents - BSON String Number Geo- Coordinates 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
  51. 51. Knowledge Sharing Session - MEAN architecture 51 MongoDB - Collection Source: http://docs.mongodb.org/manual/core/crud-introduction
  52. 52. Knowledge Sharing Session - MEAN architecture MongoDB – Query a database Source: http://docs.mongodb.org/manual/core/crud-introduction 52
  53. 53. Knowledge Sharing Session - MEAN architecture MongoDB – Modify data in a database Source: http://docs.mongodb.org/manual/core/crud-introduction 53
  54. 54. Knowledge Sharing Session - MEAN architecture MongoDB – Relationships by reference Source: http://docs.mongodb.org/manual/core/crud-introduction 54
  55. 55. Knowledge Sharing Session - MEAN architecture MongoDB – Relationships via embedded documents Source: http://docs.mongodb.org/manual/core/crud-introduction 55
  56. 56. Knowledge Sharing Session - MEAN architecture MongoDB – Aggregation Source: http://docs.mongodb.org/manual/core/crud-introduction 56
  57. 57. Knowledge Sharing Session - MEAN architecture MongoDB – Aggregation with Map Reduce Source: http://docs.mongodb.org/manual/core/crud-introduction 57
  58. 58. Knowledge Sharing Session - MEAN architecture MongoDB – Aggregation with Distinct Source: http://docs.mongodb.org/manual/core/crud-introduction 58
  59. 59. Knowledge Sharing Session - MEAN architecture 59 MongoDB – Replication Source: http://docs.mongodb.org/manual
  60. 60. Knowledge Sharing Session - MEAN architecture MongoDB – Replication – secondaries communicate Source: http://docs.mongodb.org/manual 60
  61. 61. Knowledge Sharing Session - MEAN architecture MongoDB – Automatic failover Source: http://docs.mongodb.org/manual 61
  62. 62. 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
  63. 63. Knowledge Sharing Session - MEAN architecture MongoDB – Sharding Source: http://docs.mongodb.org/manual 63
  64. 64. 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!
  65. 65. Knowledge Sharing Session - MEAN architecture MongoDB – Sharding & Replication Source: http://docs.mongodb.org/manual 65
  66. 66. 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
  67. 67. Knowledge Sharing Session - MEAN architecture MEAN Flow – after you’ve learned the basics Client Server SSeerrvviiccee RRoouuttee CCoonnttrroolllleerr VViieeww CCoonnttrroolllleerr MMooddeell REST API call Source: http://www.mongodb.com/presentations/building-your-first-mean-app 67
  68. 68. 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
  69. 69. 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
  70. 70. Knowledge Sharing Session - MEAN architecture Questions? 70

×