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.

MEAN Stack

3,831 views

Published on

MEAN: Mongodb, Express, Angularjs, Node.js

Published in: Engineering
  • Be the first to comment

MEAN Stack

  1. 1. MEAN Stack Keisuke KATO @k_kato
  2. 2. MEAN RTT 2-10 times faster ● RTT -35% (-200ms) ● LOC -33% ● Man-Month 1/2 ● File -40% ‡Node.js, http://nodejs.org/industry/ ‡PayPal Engineering, ”Node.js at PayPal,” https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/ ‡Publickey, 「 Joyent が「 Node.js Foundation 」設立を発表。 IBM 、 Microsoft 、 PayPal 、 Fidelity などが創立メンバーに」 , http://www.publickey1.jp/blog/15/joyentnodejs_foundationibmmicrosoftpaypalfidelity.html
  3. 3. Timeline: Back-End ‡Wikipedia, “Web Development,” http://en.wikipedia.org/wiki/Web_development#Timeline
  4. 4. Timeline: Front-End ‡Wikipedia, “Web Development,” http://en.wikipedia.org/wiki/Web_development#Timeline
  5. 5. LAMP Stack Front-End Back-End Database Javascript Linux Apache Perl, PHP, Python MySQL
  6. 6. LAMP Stack problems Front End Back-End DatabaseFront-End C10K problem Scale-out problem HOL Blocking problem Data Transformation problem Three Languages problem
  7. 7. C10K problem ‡Engineering Blog, ”New Tweets per second record, and how!,” https://blog.twitter.com/2013/new-tweets-per-second-record-and-how 143,199 TPS 8/3/2013 23:21:50 JST
  8. 8. C10K problem ‡Web Faction, ”A little holiday present: 10,000 reqs/sec with Nginx!,” http://blog.webfaction.com/2008/12/a-little-holiday-present-10000-reqssec-with-nginx-2/
  9. 9. C10K problem ‡Web Faction, ”A little holiday present: 10,000 reqs/sec with Nginx!,” http://blog.webfaction.com/2008/12/a-little-holiday-present-10000-reqssec-with-nginx-2/
  10. 10. C10K problem ‡NODESOURCE, ”Why Asynchronous?,” https://nodesource.com/blog/why-asynchronous L1 L2 Main memory SSD random-read Round-trip in same datacenter Physical disk seek Round-trip from US to EU 0 50,000,000 100,000,000 150,000,000 200,000,000 1 4 100 16,000 500,000 4,000,000 150,000,000 I/O Latency Time cost [ns]
  11. 11. C10K problem Apache MPM ‡IBM developerWorks, “Boost application performance using asynchronous I/O,” http://www.ibm.com/developerworks/linux/library/l-async/ ‡ 人間とウェブの未来 , 「非同期 I/O やノンブロッキング I/O 及び I/O の多重化について」 , http://blog.matsumoto-r.jp/?p=2030 (A)synchronous blocking I/O
  12. 12. C10K problem Node.js ‡IBM Developer Works, “Boost application performance using asynchronous I/O,” http://www.ibm.com/developerworks/linux/library/l-async/ Asynchronous non-blocking I/O (AIO)
  13. 13. HTTP Head-of-Line Blocking problem ‡Twitter, “MEAN.IO,” https://twitter.com/mean_io
  14. 14. HTTP Head-of-Line Blocking problem ‡Ilya Grigorik, “HTTP 2.0 Why now? What is it?,” https://docs.google.com/presentation/d/1ooBOHjbBlw5UByQjeGJyo3AO0MNoC- WDCuhdohQYMSE/present#slide=id.gc57996a9_12_0
  15. 15. HTTP Head-of-Line Blocking problem ‡WebPagetest, http://www.webpagetest.org/
  16. 16. HTTP Head-of-Line Blocking problem ‡Browserscope, ”Network,” http://www.browserscope.org/?category=network&v=top Web Browser Connections per Hostname Max Connections IE 12 13 17 Chrome 42 6 10 Firefox 38 6 17 Safari 8 6 17 Opera 29 6 10 iPhone 6 0 17 Chrome Mobile 41 6 10 Android 4 6 17 Opera Mini 7 18 25 IE Mobile 11 12 17
  17. 17. TCP Head-of-Line Blocking problem ‡High Performance Browser Networking, ”Head-of-Line Blocking,” http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HOL
  18. 18. Scale-out problem Key-Value Riak, memcached, Redis KVS RDBMS MySQL,PostgreSQL, Oracle,SQL Server,DB2 Column- Oriented Bigtable,Cassandra, HBase, DynamoDB Key Value array hash Document NOSQL ( Not Only SQL ) Document-Oriented database MongoDB,CouchDB, Couchbase Server Document Key Value Key Value ‡ Tetsutaro Watanabe , 「初心者向け MongoDB のキホン!」 , http://www.slideshare.net/tetsutarowatanabe/mongo-db-32210761
  19. 19. Scale-out problem ‡SlideShare ,”Everything You Need to Know About Sharding,” http://www.slideshare.net/mongodb/everything-you-need-to-know-about-sharding System Capacity $ Scale-up Limits High Capacity/$ Scale-out to 100- 1000s of servers Optimize on Capacity/$ Scale-down and re- allocate resources Apps of the Past Modern Apps Trend
  20. 20. Three Languages & Data Transformation problem LAMP JSON => PHP JSON <= PHP PHP => SQL PHP <= SQL Apache PHP MySQL PHP / Apache Java / Tomcat .NET / IIS Ruby / Passenger SQLJavascript
  21. 21. Three Languages & Data Transformation problem MEAN JSON JSON JSON JSON Node.js Express MongoDBAngularJS Javascript JSON (BSON)Javascript
  22. 22. Three Languages & Data Transformation problem ‡ Michael S. Mikowski, Josh C. Powell, “Single Page Web Applications: JavaScript end-to-end,” p.5 Data storage Data retrieval Business logic Authentication Authorization Validation Business logic HTML generation HTML rendering Decorative JS LAMP Data storage Data retrieval Authentication Authorization Validation HTML rendering Decorative JS Business Logic JS HTML generation MEAN Front-End Back-End Database
  23. 23. MEAN.JS Installation
  24. 24. Install Node.js ‡Node.js, http://nodejs.org/
  25. 25. Install MongoDB ‡MongoDB, http://www.mongodb.org/ ‡Stack Overflow, “How to get Ruby / Homebrew / RVM to work on Yosemite?,” http://stackoverflow.com/questions/24225959/how-to-get-ruby-homebrew-rvm-to-work-on-yosemite ‡Stack Overflow, “Brew update failed,” http://stackoverflow.com/questions/14113427/brew-update-failed $ brew install mongodb
  26. 26. Install Yeoman ‡YEOMAN, http://yeoman.io/ $ sudo npm install -g yo
  27. 27. Install MEAN.js ‡MEAN.JS, “Getting Started,” http://meanjs.org/generator.html#getting-started ‡developerWorks, 「 MEAN をマスターする : MEAN スタックの紹介」 , http://www.ibm.com/developerworks/jp/web/library/wa-mean1/ $ sudo npm install -g generator-meanjs
  28. 28. Generate MEAN Application ‡MEAN.JS, “Application Generator,” http://meanjs.org/generator.html#application $ yo meanjs
  29. 29. Run MongoDB ‡MongoDB, http://www.mongodb.org/ $ sudo mongod
  30. 30. Run MEAN ‡MEAN.JS, “Application Generator,” http://meanjs.org/generator.html#application $ grunt
  31. 31. Check ‡http://localhost:3000/ $ http://localhost:3000/
  32. 32. MEAN.JS Development
  33. 33. WebStorm ‡WebStorm, https://www.jetbrains.com/webstorm/
  34. 34. Debug ‡WebStorm, https://www.jetbrains.com/webstorm/
  35. 35. Add CRUD ‡MEAN.JS, “CRUD Module Sub-Generator,” http://meanjs.org/generator.html#crud-module $ yo meanjs:angular-module cinema
  36. 36. Create ‡ みんなのシネマレビュー , 「シベリア超特急」 , http://www.jtnews.jp/cgi-bin/review.cgi?TITLE_NO=570&SORT=2&NETA=0&ALL_DISP=0&POINT=0&BOOK_MARK=0&RTN=0
  37. 37. Read
  38. 38. Update & Delete
  39. 39. Add Star Rating
  40. 40. Add Star Rating - Front-End ‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
  41. 41. Add Star Rating - Front-End ‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
  42. 42. Add Star Rating - Back-End ‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
  43. 43. Check MongoDB ‡Karl Seguin 著 / 濱野 司 訳 , 「 MongoDB の薄い本」第 2.0.3 版 , http://www.cuspy.org/diary/2012-04-17/the-little-mongodb-book-ja.pdf
  44. 44. Awesome!

×