modern java(script) server stack · isomorphic apps scalable solutions. why node? @prpatel source...
TRANSCRIPT
@prpatel
MOdern Java(Script) Server Stack
Pratik Patel @prpatel
@prpatel
Pratik Patel @prpatel
CTO Triplingo
JAVA CHAMPION PRESIDENT ATLANTA JUG
POLYGLOT
TURTLE
MY FIRST PROGRAM
apple mac vintage 5" screen
TURING
MY FIRST REAL PROGRAM
JAVASCRIPT
RUBY ANDROID
JAVA GROOVY
IOS
@prpatel
MANY HATS
@prpatel
java STACK
@prpatel
java THREAD MODEL
@prpatel
JAVASCRIPT
@prpatel
WHY?
ECOSYSTEM
TOOLS
@prpatel
Yesterday’s Javascript
@prpatel
TODAY’s Javascript
@prpatel
WHAT’s CHANGED?
@prpatelNO CHANGE (UNTIL RECENTLY)!
JS IS the same Language it was 20 years ago
@prpatelWe’ve changed
best practices
TOOLING
MUCH BETTER RUNTIMES
@prpatelWHAT HASN’T CHANGED
JS Still has BAD PARTS
ASYNC, EVENT-DRIVEN
EVERY BROWSER SUPPORT
@prpatel
JS OUTSIDE THE BROWSER?
@prpatelV8
Super fast JS runtime
included in chrome
RUNS on CLI/server
@prpatel
NODE.js
@prpatelWHAT ABOUT THE JVM?
BUILT INTO JVM FOR YEARS
rhino (current)
Nashorn (next gen)
@prpatel
WHY JAVASCRIPT ON THE SERVER?
@prpatelWHY JS?
SINGLE LANG FOR BROWSER & SERVERFAST
SCALABLE
@prpatel
ISOMORPHIC APPS
@prpatelisomorphic apps
code can run either on browser or server!
@prpatel
“Traditional” Webapp
@prpatel
Isomorphic
@prpatelwhy isomorphic?
flexibility
performance
@prpatel
WHY DO WE CARE ABOUT
NODE.JS?
@prpatelWHY node?
Bevy of tools for webdev
ISOMORPHIC APPS
SCALABLE SOLUTIONS
@prpatelWHY node?
SOURCE CODE QUALITY
BUNDLING / development
server-side JS
@prpatelmodules
express, grunt, gulp, webpack, jasmine, BROWSERSYNC, etc
@prpatelSCALABLE
@prpatelNOT SCALABLE
@prpatelSCALABLE
PERFORMANCE NUMBERS
@prpatelNODE VS JAVA WEB REQS
NODE - ~10k REQ / second
WHAT ABOUT JAVA?
VERT.X
RXJAVA
@prpatelBusiness Logic / API Layer
ARCHITECTURE
Java Ruby PythonData Store
JavaScript
Presentation
Web Mobile Bots
@prpatel
ECOSYSTEM
@prpatelecosystem
NODE.JS
NPM
LOTS OF MODULES
@prpatelNODE.js
javascript runtime based on v8
@prpatelnpm
node package manager
@prpatelmodules
express, grunt, gulp, webpack, jasmine, etc
@prpatel
NODE.JS
@prpatelnode.js
run from command-line
@prpatel
$nodetest3.jsHelloBangalore!
———-test3.js:console.log('HelloBangalore!')
NODE.JS
@prpatel
//describesthisnodeproject,placeinbasefolder{"name":"hello-world","descripEon":"helloworldtestapp","version":"0.0.1","private":true,"dependencies":{"express":"3.x"}}
PACKAGE.JSON
@prpatel
NPM
@prpatelNPM
BASIC PKG MANAGEMENT
COMES WITH NODE.JS
@prpatelNPM
127,000 300k PACKAGES in
the NPM REPO
@prpatel
WHAT’s CHANGED?
@prpatel
$npmls$npminstalllodash-g
NPM
@prpatel
EXPRESS
@prpatelEXPRESS
Basic server-side web framework
lots of other options: sails, KOA, Geddy, etc
@prpatelexpress
EVENT-LOOP model
ASYNC, event-driven
super scalable
@prpatel
$cathello-world/package.json{"name":"hello-world","descripEon":"helloworldtestapp","version":"0.0.1","private":true,"dependencies":{"express":"3.x"}}$npminstall$npmappExpressserverlisteningonport3000
EXPRESS
@prpatel
NODE.JS
DIFFERENT UNIVERSE THAN WHAT YOU ARE USED TO
@prpatelServer-SIDE JS
ASSEMBLE YOUR OWN framework
SMALLER MODULES
@prpatelServer-SIDE JS
NO “ONE-WAY” to do things
OVERLAPPING TOOLS
@prpatel
TOOLS
@prpatel
SOCKET.IO
@prpatelSOCKET.IO
WEBSOCKET
@prpatelSOCKET.IO
Persistent connection
NODE handles it well
simple on front& back
@prpatel
io.emit('announce',{announcement:announcement});
SERVER
@prpatel
socket.on('announce',funcEon(data){self.data.announcement=data;self.displayNewData();});
BROWSER
@prpatelHTTP2 SPEC
WEBSOCKET IS INCLUDED!
@prpatelBusiness Logic / API Layer
ARCHITECTURE
Java Ruby PythonData Store
JavaScript
Presentation
Web Mobile Bots
@prpatelCLOSING THOUGHTS
NOT FOR EVERY KIND OF APP
ASYNC, EVENT-DRIVEN
still maturing
@prpatel
Javascript Fatigue
@prpatelServer-SIDE JS
can be tied into existing build process
can use existing db & other infra
@prpatel
References:hTp://gulpjs.com/hTps://github.com/kriasoU/react-starter-kithTp://webpack.github.io/
hTps://twiTer.com/sstephenson/status/730039913052176384
@prpatel
THANK YOU
@prpatel
java STACK
@prpatel
QUICK WALK-THROUGH
@prpatel
GRUNT
@prpatelGRUNT
TASK BASED COMMAND-LINE TOOL
@prpatelUSES
JavaSCript linting
Unit test running
minification
@prpatel
"devDependencies":{"grunt":"~0.4.2","grunt-contrib-jshint":"~0.6.3","grunt-contrib-nodeunit":"~0.2.0","grunt-contrib-uglify":"~0.2.2"}
PACKAGE.JSON
@prpatel
module.exports=funcEon(grunt){grunt.initConfig({jshint:{all:['Grunbile.js',‘lib/**/*.js','test/**/*.js','public/**/*.js','routes/*.js','routes/**/*.js','app.js']}});grunt.loadNpmTasks('grunt-contrib-jshint');grunt.registerTask('default',['jshint']);};
//TesEngJasmine
GRUNTFILE
@prpatel
$ gruntRunning "jshint:all" (jshint) taskLinting app.js ...ERROR[L12:C20] W033: Missing semicolon.var app = express()
Warning: Task "jshint:all" failed. Use --force to continue.
Aborted due to warnings.
RUNNING
@prpatel
TOOLS GALORE
PACKAGING, TESTING, ETC
@prpatelTOOLBOX
GULP
WEbpack
SOCKET.IO
@prpatel
GULP
@prpatelGULP
Streaming build tool
@prpatelUSES
Plugin based
streaming
successor to grunt (?)
@prpatel
gulp.task('build',['clean'],funcEon(cb){runSequence(['vendor','assets','styles','bundle'],cb);});
GULPFILE
@prpatel
gulp.task('assets',funcEon(){src.assets=['src/assets/**','src/content*/**/*.*','src/templates*/**/*.*'];returngulp.src(src.assets).pipe($.changed('build')).pipe(gulp.dest('build')).pipe($.size({Etle:'assets'}));});
GULPFILE
@prpatel
gulp.task('bundle',funcEon(cb){varstarted=false;varconfig=require('./webpack.config.js');varbundler=webpack(config);…}
GULPFILE
@prpatel
References:hTp://gulpjs.com/hTps://github.com/kriasoU/react-starter-kit
@prpatel
WEBPACK
@prpatelWEBPACK
Module builder
@prpatelwebpack
suited for large projects
CODE SPLITTING
STATIC ASSETS
@prpatelWEBPACK
@prpatelWEBPACK
BROWSER SYNC & LIVE updates
@prpatel
devServer:{historyApiFallback:true,hot:false,inline:true,progress:false,noInfo:false,proxy:{'/lunches':{target:'hTp://connect-js.com:3000/',secure:false,}}}
LIVE RELOAD
@prpatel
$gulppagespeed[15:48:49]Usinggulpfile~/dev/react/react-starter-kit/gulpfile.js[15:48:49]StarEng‘pagespeed'...
CSSsize|148.13kBHTMLsize|20.84kBImagesize|54.24kBJavaScriptsize|1.72MB
PAGESPEED