MEAN Stack

MEAN: Mongodb, Express, Angularjs, Node.js

Transcript

1. MEAN Stack Keisuke KATO @k_kato
3. 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
4. Timeline: Back-End ‡Wikipedia, “Web Development,” http://en.wikipedia.org/wiki/Web_development#Timeline
5. Timeline: Front-End ‡Wikipedia, “Web Development,” http://en.wikipedia.org/wiki/Web_development#Timeline
6. LAMP Stack Front-End Back-End Database Javascript Linux Apache Perl , PHP, Python MySQL
7. LAMP Stack problems Front End Back-End Database Front-End C10K problem Scale-out problem HOL Blocking problem Data Transformation problem Three Languages problem
8. 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
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. 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/
11. 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]
12. 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
13. 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)
14. HTTP Head-of-Line Blocking problem ‡Twitter, “MEAN.IO,” https://twitter.com/mean_io
15. 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
16. HTTP Head-of-Line Blocking problem ‡WebPagetest, http://www.webpagetest.org/
17. 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
18. 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
19. 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
20. 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
21. 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 SQL Javascript
22. Three Languages & Data Transformation problem MEAN JSON JSON JSON JSON Node.js Express MongoDB AngularJS Javascript JSON (BSON) Javascript
23. 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
24. MEAN .JS Installation
25. Install Node.js ‡Node.js, http://nodejs.org/
26. 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
27. Install Yeoman ‡YEOMAN, http://yeoman.io/ $ sudo npm install -g yo
28. 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
29. Generate MEAN Application ‡MEAN.JS, “Application Generator,” http://meanjs.org/generator.html#application $ yo meanjs
30. Run MongoDB ‡MongoDB, http://www.mongodb.org/ $ sudo mongod
31. Run MEAN ‡MEAN.JS, “Application Generator,” http://meanjs.org/generator.html#application $ grunt
32. Check ‡http://localhost:3000/ $ http://localhost:3000/
33. MEAN .JS Development
34. WebStorm ‡WebStorm, https://www.jetbrains.com/webstorm/
35. Debug ‡WebStorm, https://www.jetbrains.com/webstorm/
36. Add CRUD ‡MEAN.JS, “CRUD Module Sub-Generator,” http://meanjs.org/generator.html#crud-module $ yo meanjs:angular-module cinema
37. 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
38. Read
39. Update & Delete
40. Add Star Rating
41. Add Star Rating - Front-End ‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
42. Add Star Rating - Front-End ‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
43. Add Star Rating - Back-End ‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
44. Check MongoDB ‡Karl Seguin 著 / 濱野　司 訳 , 「 MongoDB の薄い本」第 2.0.3 版 , http://www.cuspy.org/diary/2012-04-17/the-little-mongodb-book-ja.pdf
45. Awesome!