MOdern Java(Script) Server Stack

Transcription

1 MOdern Java(Script) Server Stack Pratik Patel

2 Pratik Patel CTO Triplingo JAVA CHAMPION PRESIDENT ATLANTA JUG

3 POLYGLOT

4 apple mac vintage 5" screen TURTLE MY FIRST PROGRAM

5 TURING MY FIRST REAL PROGRAM

6 JAVASCRIPT JAVA GROOVY RUBY ANDROID IOS

7 MANY HATS

8 java STACK

9 java THREAD MODEL

10 JAVASCRIPT

11 WHY? ECOSYSTEM TOOLS

12 Yesterday s Javascript

13 TODAY s Javascript

14 WHAT s CHANGED?

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

16 best practices TOOLING MUCH BETTER RUNTIMES We ve changed

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

18 JS OUTSIDE THE BROWSER?

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

20 NODE.js

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

22 WHY JAVASCRIPT ON THE SERVER?

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

24 ISOMORPHIC APPS

25 code can run either on browser or server! isomorphic apps

26 Traditional Webapp

27 Isomorphic

28 flexibility performance why isomorphic?

29 WHY DO WE CARE ABOUT NODE.JS?

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

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

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

33 SCALABLE

34 NOT SCALABLE

35 SCALABLE

36 PERFORMANCE NUMBERS

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

38 VERT.X

39 RXJAVA

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

41 ECOSYSTEM

42 NODE.JS NPM LOTS OF MODULES ecosystem

43 javascript runtime based on v8 NODE.js

44 node package manager npm

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

46 NODE.JS

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

48 run from command-line node.js

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

50 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" } }

51 NPM

52 BASIC PKG MANAGEMENT COMES WITH NODE.JS NPM

53 127, k PAC KAG ES i n the NPM REPO NPM

54 WHAT s CHANGED?

55 NPM $ npm ls $ npm install lodash -g

56 EXPRESS

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

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

59 $ 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

60 NODE.JS DIFFERENT UNIVERSE THAN WHAT YOU ARE USED TO

61 ASSEMBLE YOUR OWN framework SMALLER MODULES Server-SIDE JS

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

63 TOOLS

64 SOCKET.IO

65 WEBSOCKET SOCKET.IO

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

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

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

69 WEBSOCKET IS INCLUDED! HTTP2 SPEC

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

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

72 Javascript Fatigue

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

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

75 THANK YOU

76 java STACK

77 QUICK WALK- THROUGH

78 GRUNT

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

80 JavaSCript linting Unit test running minification USES

81 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" }

82 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

83 $ 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.

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

85 GULP WEbpack SOCKET.IO TOOLBOX

86 GULP

87 Streaming build tool GULP

88 Plugin based streaming successor to grunt (?) USES

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

90 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'})); });

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

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

93 WEBPACK

94 Module builder WEBPACK

95 suited for large projects CODE SPLITTING STATIC ASSETS webpack

96 WEBPACK

97 BROWSER SYNC & LIVE updates WEBPACK

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

99 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 kb kb kb 1.72 MB