modern java(script) server stack · isomorphic apps scalable solutions. why node? @prpatel source...

@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

Install from nodejs.org

install using brew (mac)

@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