Introducing RaveJS: Spring Boot concepts for JavaScript applications

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

Introducing RaveJS: Spring Boot concepts for JavaScript applications

John Hann Javascript Barbarian & Principal Engineer @ Pivotal


JS Barbarian: The Good Parts™

• 1996: Started using JavaScript • 2005: Stopped using anything else • 2010: Co-founded cujoJS • 2012: Hired into Spring team

2

@unscriptable everywhere


Client-side development: it’s complicated!

3


“JavaScript needs a build step.”

4


5


Client-side development: <script> doesn’t cut it

• Differential Synchronization • MV* • AOP, DI, IOC • Modules • WebComponents • SASS/SCSS, LESS, Stylus, Dart • Testing, CI

6


More sophistication == more complexity

• Package management • Bundling / building • Minification

• JS, CSS, and HTML • File watchers and transpilers

• SASS, LESS, Stylus • Dart, ES6 <—> ES5

• Unit testing, integration testing, linting

7


More is more

• More sophistication !!!!

• More complexity • More machinery • More configuration • More maintenance

8

mai

nten

ance

yesterday today tomorrow I QUIT!


Example: Spring XD UI

9

!Task config: 400 LOC in Gruntfile.js

Loader config: >60 LOC in app/scripts/main.js Test config: >100 LOC in karma.conf.js and karma-e2e.conf.js


'use strict'; !module.exports = function (grunt) { ! // Load grunt tasks automatically

require('load-grunt-tasks')(grunt); ! // Time how long tasks take. Can help when optimizing build times

require('time-grunt')(grunt); ! // Define the configuration for all the tasks

grunt.initConfig({ ! // Project settings

xd: {

app: 'app',

dist: 'dist'

},

// Set bower task's targetDir to use app directory

bower: {

options: {

targetDir: '<%= xd.app %>/lib'

},

// Provide install target

install: {}

},

// Watches files for changes and runs tasks based on the changed files

watch: {

files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc'],

tasks: ['build'],

livereload: {

options: {

livereload: '<%= connect.options.livereload %>'

},

files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc']

}

},

protractor: {

options: {

//configFile: "test/protractor.conf.js", // Default config file

keepAlive: true, // If false, the grunt process stops when the test fails.

noColor: false, // If true, protractor will not use colors in its output.

args: {

specs: [

'./test/e2e/**/*.spec.js'

],

baseUrl: 'http://localhost:8000',

chromeDriver: 'node_modules/protractor/selenium/chromedriver'

}

},

run: {

}

},

// The actual grunt server settings

connect: {

options: {

port: 8000,

// Set to '0.0.0.0' to access the server from outside.

hostname: '0.0.0.0',

livereload: 35729

},

livereload: {

options: {

open: true,

base: [

'.tmp',

'<%= xd.app %>'

],

middleware: function (connect, options) { ! if (!Array.isArray(options.base)) {

options.base = [options.base];

}

var middlewares =

[require('grunt-connect-proxy/lib/utils').proxyRequest]; ! options.base.forEach(function (base) {

grunt.log.warn(base);

middlewares.push(connect.static(base));

});

return middlewares;

}

}

},

test: {

options: {

port: 9001,

base: [

'.tmp',

'test',

'<%= xd.app %>'

]

}

},

dist: {

options: {

base: '<%= xd.dist %>'

}

},

proxies: [

{

context: ['/batch', '/job', '/modules', '/streams'],

host: 'localhost',

port: 9393,

changeOrigin: true

}

]

}, ! // Make sure code styles are

up to par and there are no obvious mistakes

jshint: {

options: {

jshintrc: '.jshintrc',

reporter: require('jshint-stylish')

},

all: [

'Gruntfile.js',

'<%= xd.app %>/scripts/{,**/}*.js'

],

test: {

options: {

jshintrc: 'test/.jshintrc'

},

src: ['test/spec/{,*/}*.js']

}

},

less: {

dist: {

files: {

'<%= xd.app %>/styles/main.css': ['<%= xd.app %>/styles/main.less']

},

options: {

sourceMap: true,

sourceMapFilename: '<%= xd.app %>/styles/main.css.map',

sourceMapBasepath: '<%= xd.app %>/',

sourceMapRootpath: '/'

}

}

},

// Empties folders to start fresh

clean: {

dist: {

files: [

{

dot: true,

src: [

'.tmp',

'<%= xd.dist %>/*'

]

}

]

},

server: '.tmp'

}, ! // Add vendor prefixed styles

autoprefixer: {

options: {

browsers: ['last 1 version']

},

dist: {

files: [

10

Gruntfile.js

http://localhost:8000


require.config({ paths: { domReady: '../lib/requirejs-domready/domReady', angular: '../lib/angular/angular', jquery: '../lib/jquery/jquery', bootstrap: '../lib/bootstrap/bootstrap', ngResource: '../lib/angular-resource/angular-resource', uiRouter: '../lib/angular-ui-router/angular-ui-router', cgBusy: '../lib/angular-busy/angular-busy', ngGrowl: '../lib/angular-growl/angular-growl',

angularHighlightjs: '../lib/angular-highlightjs/angular-highlightjs', highlightjs: '../lib/highlightjs/highlight.pack' }, shim: { angular: { deps: ['bootstrap'], exports: 'angular' }, bootstrap: { deps: ['jquery'] }, 'uiRouter': { deps: ['angular'] }, 'ngResource': { deps: ['angular'] },

'cgBusy': { deps: ['angular'] }, 'ngGrowl': { deps: ['angular'] }, 'angularHighlightjs': { deps: ['angular', 'highlightjs'] } } }); !define([ 'require', 'angular', 'app', './routes' ], function (require, angular) {

'use strict'; ! require(['domReady!'], function (document) { console.log('Start angular application.'); angular.bootstrap(document, ['xdAdmin']); }); require(['jquery', 'bootstrap'], function () { console.log('Loaded Twitter Bootstrap.'); updateGrowl(); $(window).on('scroll resize', function () { updateGrowl(); }); }); ! function updateGrowl() {

var bodyScrollTop = $('body').scrollTop(); var navHeight = $('nav').outerHeight(); ! if (bodyScrollTop > navHeight) { $('.growl').css('top', 10); } else if (bodyScrollTop >= 0) { var distance = navHeight - bodyScrollTop; $('.growl').css('top', distance + 10); } } });

11

RequireJS main.js


module.exports = function(config) { config.set({ // base path, that will be used to resolve files and exclude basePath: '', ! // testing framework to use (jasmine/mocha/qunit/...) frameworks: ['ng-scenario'], ! // list of files / patterns to load in the browser files: [ 'test/e2e/*.js', 'test/e2e/**/*.js' ], ! // list of files / patterns to exclude

exclude: [], ! // web server port port: 7070, ! // level of logging // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG logLevel: config.LOG_INFO, ! // enable / disable watching file and executing tests whenever any file changes autoWatch: false, !

// Start these browsers, currently available: // - Chrome // - ChromeCanary // - Firefox // - Opera // - Safari (only Mac) // - PhantomJS // - IE (only Windows) browsers: ['PhantomJS'], ! // Continuous Integration mode // if true, it capture browsers, run tests and exit singleRun: true, ! // Uncomment the following lines if you are using

grunt's server to run the tests proxies: { '/': 'http://localhost:8000/' }, // // URL root prevent conflicts with the site root urlRoot: '/_karma_/' }); }; module.exports = function (config) { 'use strict'; config.set({ // base path, that will be used to resolve files and exclude basePath: '', ! // testing framework to use (jasmine/mocha/qunit/...)

frameworks: ['jasmine'], ! // list of files / patterns to load in the browser files: [ 'app/lib/angular/angular.js', 'app/lib/angular-mocks/angular-mocks.js', 'app/lib/angular-resource/angular-resource.js', 'app/lib/angular-cookies/angular-cookies.js', 'app/lib/angular-sanitize/angular-sanitize.js', 'app/lib/angular-route/angular-route.js', 'app/lib/angular-ui-router/

angular-ui-router.js', 'app/lib/angular-growl/angular-growl.js', 'app/lib/angular-promise-tracker/promise-tracker.js', 'app/lib/angular-busy/angular-busy.js', 'app/scripts/*.js', 'app/scripts/**/*.js', 'test/spec/**/*.js', 'test/test-main.js' ], ! // list of files / patterns to exclude exclude: [], !

// web server port port: 7070, ! // level of logging // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG logLevel: config.LOG_INFO, !! // enable / disable watching file and executing tests whenever any file changes autoWatch: true, !! // Start these browsers, currently available:

// - Chrome // - ChromeCanary // - Firefox // - Opera // - Safari (only Mac) // - PhantomJS // - IE (only Windows) browsers: ['PhantomJS'], !! // Continuous Integration mode // if true, it capture browsers, run tests and exit singleRun: false }); };

12

karma.conf.js

http://localhost:8000/'


13


Can we clean up this mess?

14

We must


It’s preventing progress and innovation

• "Maintenance is a full-time job." • "Getting started is too hard."

• Not just applications… • Prototypes and experiments • Demos, guides, and tutorials

• "I didn’t use modules or promises because I needed to create something quickly."

15


How do fix it?

16


Option 1: Code Generation

• Generate a grunt or gulp config and an AMD config • Pros:

• Easy to get started if you find the perfect recipe (JHipster?) • Cons:

• You're on your own when you need to customize • Still requires tons of machinery • Still requires on-going maintenance

17


Option 2: Auto-configure

• Like Spring Boot! • Start with a default, runnable configuration • Detect when things are installed or removed • Auto-configure based off of metadata and environment • Pros

• No configuration and less machinery • Far less maintenance

• Cons • You must follow certain conventions • Some heuristics and dependencies are hidden / implicit

18


Reduce the "cons" of auto-configure

• Minimize conventions • Detect when conventions are broken

• Document hidden heuristics and dependencies • Detect conflicts with hidden heuristics and dependencies

19


RaveJS

20

Kinda like Spring Boot… but for client-side JavaScript/HTML5 apps


Review: What is Spring Boot?

21

Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that can you can "just run".

Source: http://projects.spring.io/spring-boot/

http://projects.spring.io/spring-boot/


Spring Boot’s features…

• Creates stand-alone Spring applications • Embeds Tomcat or Jetty • Provides opinionated starter POMs • Automatically configures Spring • Provides production-ready features • Absolutely no code generation • No requirement for XML configuration

22




Spring Boot’s features (à la JavaScript/HTML5)…

• Creates stand-alone JavaScript/HTML5 applications • Provides a run-time environment • Provides opinionated starter projects • Automatically configures all the things • Provides production-ready features • Absolutely no code generation • No requirement for XML configuration (XMLWAT? srsly?)

23




Rave concerns !== Spring Boot concerns

• Client-side concerns are different • Code size • Page load speed

• Different development workflows • Browsers can’t scan the file system • Many possible server environments

24


Rave goals

• Quickly create JavaScript / HTML5 apps • Require zero configuration >90% of the time • Reduce or eliminate machinery • Integrate with all popular third-party packages • Embrace the future (EcmaScript 6) while being grounded in ES5 • Allow any server-side environment

25


Quickly create JavaScript / HTML5 apps

• Emphasize architecture, not global script-kiddie shiz • Provide a run-time environment, if needed

• A static web server is enough • Provide opinionated starter projects

26


Require zero configuration >90% of the time

• Provide a basic runnable setup out of the box • Use metadata and heuristics to auto-configure

• Starter projects provide metadata and heuristics • JavaScript package managers provide metadata • Third-party extensions provide additional metadata and

heuristics

27


Reduce or eliminate machinery

• Detect and respond to the environment • Transform / transpile on-the-fly • No build scripts, ever • Reduce need for file watchers and other machinery

• Choose to use them at any time (e.g. QA, production) • Revert back at any time

• No file watchers during development

28


Integrate with all popular third-party packages

• Support Bower and npm • Support AMD

• Plugins (text, css, json, etc.) • Plugin syntax (e.g. "css!myApp/theme.css")

• Support node-style modules • Browserify metadata extensions

• Global scripts, too

29


Embrace EcmaScript 6 while being grounded in ES5

• ES6 in today’s ES5 browsers • ES6 Loader polyfill is built in • ES6 module syntax is "in the works" • Full ES6 syntax coming • No build step, file watchers, or other machinery

• Legacy ES5 in tomorrow’s ES6 browsers • ES5 module formats (AMD, node) • AMD plugins

30


Allow any server-side environment

• Rave runs in the browser • Metadata must be accessible from browser during

development • Any env that can serve static files over http(s)

31


Using Rave

32


Create a Rave project from scratch

• Requires only a few files… 1. A tiny index.html:

<!doctype html> <html><script src="boot.js" async></script></html> !

2. A tiny boot.js script to initialize rave.js 3. A package metadata file

$ bower init or $ npm init 4. A main.js file (listed in metadata file)

33


Hey! That’s too much work! I want a default, runnable configuration!

34

So that’s why we created…


Rave Starters

35


Rave Starters

• Includes minimal starter files • index.html • boot.js (or other application bootstrapper) • bower.json and/or package.json • main.js • Other files, as needed, to create a runnable app

• Includes a static web server, if needed

36


Using a Rave Starter

$ git clone [email protected]:RaveJS/rave-start.git myApp $ cd myApp $ bower install $ npm install $ npm run start

37


Choosing a Rave Starter

• Minimally opinionated starter • rave-start: https://github.com/RaveJS/rave-start

• Specialized starters • AngularJS: https://github.com/RaveJS/rave-start-angular • cujoJS: https://github.com/fabricematrat/rave-start-cujo

• Future starters • Spring Boot? • React • etc…

38

https://github.com/RaveJS/rave-start

https://github.com/RaveJS/rave-start-angular

https://github.com/fabricematrat/rave-start-cujo


Next step: develop your app

39


Easily add, remove, and update packages

• Use JavaScript package managers as you normally would* $ bower install --save rest $ bower install --save angular $ npm install --save jiff $ npm install --save topcoat-button

40

*Don't forget to save the metadata via --save!


Rave auto-configures Bower and npm packages

• Auto-detects module formats • AMD, node, or globals (ES6 coming v1.0)

• Auto-selects browser-specific modules • Via browserify’s "browser" package.json extension

• Finds "main entry points": modules, stylesheets • Auto-configures an ES6 module loader (polyfill included)

41

Zero configuration 99% of the time


But wait. That’s not all…

42


Rave Extensions

43

Integrate, extend, and customize.


Rave Extensions

• Additional metadata, heuristics, and logic • Integrate • Extend • Customize

44


Rave Extensions

• Add integration middleware $ bower install --save rave-angular !

• Extend ES6 module loader capabilities $ npm install --save rave-load-text !

• Add additional debugging capabilities $ bower install --save rave-when-debug $ bower uninstall --save rave-when-debug

45


Rave Extensions for build, deploy, and test (v1.0)

• Choose to develop a SPA or mobile web app $ bower install --save rave-build-spdy $ npm install --save rave-test-buster !

• Choose to develop a Spring front-end using AMD bundles $ bower install --save rave-deploy-spring $ npm install --save rave-build-requirejs

46


Rave Extensions

• Growing list of extensions: • Bower: http://bower.io/search/?q=rave-extension • npm: https://www.npmjs.org/search?q=rave-extension

47

http://bower.io/search/?q=rave-extension

https://www.npmjs.org/search?q=rave-extension


48


Let’s build an app!

49

Zero config demo!


Rave CLI

50


Rave CLI

• Enhance user experience • Coordinate Bower and npm • Eliminate manual editing of package.json

• Remove sources of common mistakes $ npm install oops-i-forgot-to-save

• Allow tasks to be done without rave cli • npm • bower • manual edits

51


Rave CLI (1.0.0)

$ rave init [<starter>] [<extension1>…<extensionN>] $ rave search <query> $ rave install <package>|<extension> $ rave uninstall <package>|<extension> $ rave build [—production] $ rave unbuild $ rave validate

52


Summary: the benefits of RaveJS

• Zero configuration • Less machinery and maintenance • Brain-dead simple project start-up

• Modern, modular architectures are simple, too! • Huge selection of packages: Bower, npm • Platform for integration and customization • Easy-to-understand demos and Getting Started Guides • Super fast prototyping

53


What does Rave support today (0.3)?

• Ready for prototyping and experiments! • Package managers

• Bower, npm • ES5 modules and non-modules

• AMD, node syntaxlegacy (global) scripts • Text, CSS, JSON

• Rave Starters • rave-start: minimally opinionated starter • rave-start-angular: AngularJS starter • rave-start-cujo: cujoJS starter

54


What are we working on?

• Build+deploy patterns • Bundles • SPA (in-place deploy)

• More Starters • Spring Boot • React

• ES6 module syntax • IE8 compatibility

55


What are we planning for 1.0?

• Rave CLI • More build+deploy patterns

• SPDY 4 / HTTP 2.0 • Spring Boot

• Testing patterns • Minification • More extensions and starters! • Showcase/directory of community-built Rave Extensions

56


Links

• RaveJS: https://github.com/RaveJS • Rave extensions

• Bower: http://bower.io/search/?q=rave-extension • npm: https://www.npmjs.org/search?q=rave-extension

• cujoJS: https://github.com/cujojs • JSON Diff: jiff.js • AOP: meld.js • IOC: wire.js • Streams: most.js • REST: rest.js

57

https://github.com/RaveJS

http://bower.io/search/?q=rave-extension

https://www.npmjs.org/search?q=rave-extension

https://github.com/cujojs


Questions?

58