MOdern Java(Script) Server Stack

MOdern Java(Script) Server Stack Pratik Patel

Pratik Patel CTO Triplingo JAVA CHAMPION PRESIDENT ATLANTA JUG

POLYGLOT

apple mac vintage 5" screen TURTLE MY FIRST PROGRAM

TURING MY FIRST REAL PROGRAM

JAVASCRIPT JAVA GROOVY RUBY ANDROID IOS

MANY HATS

java STACK

java THREAD MODEL

JAVASCRIPT

WHY? ECOSYSTEM TOOLS

Yesterday s Javascript

TODAY s Javascript

WHAT s CHANGED?

JS IS the same Language it was 2 0 y e a rs a g o NO CHANGE (UNTIL RECENTLY)!

best practices TOOLING MUCH BETTER RUNTIMES We ve changed

WHAT HASN T CHANGED JS Still has BAD PARTS ASYNC, EVENT-DRIVEN EVERY BROWSER SUPPORT

JS OUTSIDE THE BROWSER?

Super fast JS runtime included in chrome RUNS on CLI/server V8

NODE.js

BUILT INTO JVM FOR YEARS rhino (current) Nashorn (next gen) WHAT ABOUT THE JVM?

WHY JAVASCRIPT ON THE SERVER?

SINGLE LANG FOR BROWSER & SERVER FAS T SCALABLE WHY JS?

ISOMORPHIC APPS

code can run either on browser or server! isomorphic apps

Traditional Webapp

Isomorphic

flexibility performance why isomorphic?

WHY DO WE CARE ABOUT NODE.JS?

Bevy of tools for webdev ISOMORPHIC APPS SCALABLE SOLUTIONS WHY node?

SOURCE CODE QUALITY BUNDLING / development server-side JS WHY node?

express, grunt, gulp, webpack, jasmine, BROWSERSYNC, etc modules

SCALABLE

NOT SCALABLE

SCALABLE

PERFORMANCE NUMBERS

NODE - ~10k REQ / second WHAT ABOUT JAVA? NODE VS JAVA WEB REQS

VERT.X

RXJAVA

ARCHITECTURE Web Mobile Bots JavaScript Presentation Java Ruby Python Business Logic / API Layer Data Store

ECOSYSTEM

NODE.JS NPM LOTS OF MODULES ecosystem

javascript runtime based on v8 NODE.js

node package manager npm

express, grunt, gulp, webpack, jasmine, etc modules

NODE.JS

Install from nodejs.org install using brew (mac) node.js

run from command-line node.js

NODE.JS $ node test3.js Hello Bangalore! - test3.js: console.log('hello Bangalore!')

PACKAGE.JSON // describes this node project, place in base folder { "name": "hello-world", "descripeon": "hello world test app", "version": "0.0.1", "private": true, "dependencies": { "express": "3.x" } }

NPM

BASIC PKG MANAGEMENT COMES WITH NODE.JS NPM

127,000 300k PAC KAG ES i n the NPM REPO NPM

WHAT s CHANGED?

NPM $ npm ls $ npm install lodash -g

EXPRESS

Basic server-side web framework lots of other options: sails, KOA, Geddy, etc EXPRESS

EVENT-LOOP model ASYNC, event-driven super scalable express

$ cat hello-world/package.json { EXPRESS "name": "hello-world", "descripeon": "hello world test app", "version": "0.0.1", "private": true, "dependencies": { "express": "3.x" } } $ npm install $ npm app Express server listening on port 3000

NODE.JS DIFFERENT UNIVERSE THAN WHAT YOU ARE USED TO

ASSEMBLE YOUR OWN framework SMALLER MODULES Server-SIDE JS

NO ONE-WAY to do things OVERLAPPING TOOLS Server-SIDE JS

TOOLS

SOCKET.IO

WEBSOCKET SOCKET.IO

Persistent connection NODE handles it well simple on front& back SOCKET.IO

SERVER io.emit('announce', { }); announcement: announcement

BROWSER socket.on('announce', funceon (data) { self.data.announcement = data; self.displaynewdata(); });

WEBSOCKET IS INCLUDED! HTTP2 SPEC

ARCHITECTURE Web Mobile Bots JavaScript Presentation Java Ruby Python Business Logic / API Layer Data Store

NOT FOR EVERY KIND OF APP ASYNC, EVENT-DRIVEN still maturing CLOSING THOUGHTS

Javascript Fatigue

can be tied into existing build process can use existing db & other infra Server-SIDE JS

References: htp://gulpjs.com/ htps://github.com/kriasou/react-starter-kit htp://webpack.github.io/ htps://twiter.com/sstephenson/status/ 730039913052176384

THANK YOU

java STACK

QUICK WALK- THROUGH

GRUNT

TAS K B AS E D C O M M A N D - L I N E TOOL GRUNT

JavaSCript linting Unit test running minification USES

PACKAGE.JSON "devdependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" }

module.exports = funceon (grunt) { GRUNTFILE 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

$ grunt RUNNING Running "jshint:all" (jshint) task Linting app.js...error [L12:C20] W033: Missing semicolon. var app = express() Warning: Task "jshint:all" failed. Use --force to continue. Aborted due to warnings.

TOOLS GALORE PAC KAG I N G, T EST I N G, ETC

GULP WEbpack SOCKET.IO TOOLBOX

GULP

Streaming build tool GULP

Plugin based streaming successor to grunt (?) USES

GULPFILE gulp.task('build', ['clean'], funceon(cb) { }); runsequence(['vendor', 'assets', 'styles', 'bundle'], cb);

gulp.task('assets', funceon() { GULPFILE src.assets = [ 'src/assets/**', 'src/content*/**/*.*', 'src/templates*/**/*.*' ]; return gulp.src(src.assets).pipe($.changed('build')).pipe(gulp.dest('build')).pipe($.size({etle: 'assets'})); });

GULPFILE gulp.task('bundle', funceon(cb) { var started = false; var config = require('./webpack.config.js'); var bundler = webpack(config); }

References: htp://gulpjs.com/ htps://github.com/kriasou/react-starter-kit

WEBPACK

Module builder WEBPACK

suited for large projects CODE SPLITTING STATIC ASSETS webpack

WEBPACK

BROWSER SYNC & LIVE updates WEBPACK

devserver: { historyapifallback: true, LIVE RELOAD hot: false, inline: true, progress: false, noinfo: false, proxy: { '/lunches': { target: 'htp://connect-js.com:3000/', secure: false, } } }

PAGESPEED $ gulp pagespeed [15:48:49] Using gulpfile ~/dev/react/react-starter-kit/gulpfile.js [15:48:49] StarEng pagespeed'... CSS size HTML size Image size JavaScript size 148.13 kb 20.84 kb 54.24 kb 1.72 MB