mean stack
TRANSCRIPT
MEAN Stack
Keisuke KATO@k_kato
MEAN
RTT2-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
Timeline: Back-End
‡Wikipedia, “Web Development,” http://en.wikipedia.org/wiki/Web_development#Timeline
Timeline: Front-End
‡Wikipedia, “Web Development,” http://en.wikipedia.org/wiki/Web_development#Timeline
LAMP Stack
Front-End Back-End Database
Javascript Linux
Apache
Perl , PHP, Python
MySQL
LAMP Stack problems
Front End Back-End DatabaseFront-End
C10Kproblem
Scale-outproblem
HOL Blockingproblem
Data Transformationproblem
Three Languagesproblem
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 TPS8/3/2013 23:21:50 JST
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/
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/
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 LatencyTime cost [ns]
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
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)
HTTP Head-of-Line Blocking problem
‡Twitter, “MEAN.IO,” https://twitter.com/mean_io
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
HTTP Head-of-Line Blocking problem
‡WebPagetest, http://www.webpagetest.org/
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
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
Scale-out problem
Key-ValueRiak,memcached,Redis
KVS
RDBMSMySQL,PostgreSQL,Oracle,SQL Server,DB2
Column-OrientedBigtable,Cassandra,HBase, DynamoDB
Key Value array
hash
Document
NOSQL （ Not Only SQL ）
Document-Oriented databaseMongoDB,CouchDB,Couchbase Server
Document
Key Value
Key
Value
‡ Tetsutaro Watanabe , 「初心者向け MongoDB のキホン！」 , http://www.slideshare.net/tetsutarowatanabe/mongo-db-32210761
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 onCapacity/$
Scale-down and re-allocate resources
Apps ofthe Past
Modern Apps Trend
Three Languages & Data Transformation problem LAMP
JSON => PHP
JSON <= PHP
PHP => SQL
PHP <= SQL
ApachePHP MySQL
PHP / ApacheJava / Tomcat.NET / IISRuby / Passenger
SQLJavascript
Three Languages & Data Transformation problem MEAN
JSON
JSON
JSON
JSON
Node.jsExpress MongoDBAngularJS
Javascript JSON (BSON)Javascript
Three Languages & Data Transformation problem
‡ Michael S. Mikowski, Josh C. Powell, “Single Page Web Applications: JavaScript end-to-end,” p.5
Data storageData retrievalBusiness logic
AuthenticationAuthorization
ValidationBusiness logic
HTML generation
HTML renderingDecorative JSLA
MP
Data storageData retrieval
AuthenticationAuthorization
Validation
HTML renderingDecorative JS
Business Logic JSHTML generation
MEA
N
Front-End Back-End Database
MEAN.JS
Installation
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
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
Generate MEAN Application
‡MEAN.JS, “Application Generator,” http://meanjs.org/generator.html#application
$ yo meanjs
Run MEAN
‡MEAN.JS, “Application Generator,” http://meanjs.org/generator.html#application
$ grunt
MEAN.JS
Development
Add CRUD
‡MEAN.JS, “CRUD Module Sub-Generator,” http://meanjs.org/generator.html#crud-module
$ yo meanjs:angular-module cinema
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
Read
Update & Delete
Add Star Rating
Add Star Rating - Front-End
‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
Add Star Rating - Front-End
‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
Add Star Rating - Back-End
‡UI Bootstrap, “Rating,” http://angular-ui.github.io/bootstrap/#/rating
Check MongoDB
‡Karl Seguin 著 / 濱野 司 訳 , 「 MongoDB の薄い本」第 2.0.3 版 , http://www.cuspy.org/diary/2012-04-17/the-little-mongodb-book-ja.pdf
Awesome!