Introducing RaveJS: Spring Boot concepts for JavaScript applications

Introducing RaveJS: Spring Boot
concepts for JavaScript applications
John Hann
Javascript Barbarian & Principal Engineer @ Pivotal
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/

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
maintenance
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.li
vereload %>'
},
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',
chromeDriv
er:
'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(opti
ons.base)) {
options.b
ase =
[options.base];
}
var
middlewares =
[require('grunt-connect-
proxy/lib/
utils').proxyReque
st]; !
options.ba
se.forEach(functi
on (base) {
grunt.log
.warn(base);
middlew
ares.push(connec
t.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,
changeOrig
in: 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,
sourceMap
Filename: '<%=
xd.app %>/styles/
main.css.map',
sourceMap
Basepath: '<%=
xd.app %>/',
sourceMap
Rootpath: '/'
}
}
},
// 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

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(docu
ment, ['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

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?
Spring Boot makes it easy to create stand-alone, production-grade Spring based
21
Applications that can you can "just run".
Source: 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 git@github.com: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

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

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

Questions?
58

Introducing RaveJS: Spring Boot concepts for JavaScript applications

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Introducing RaveJS: Spring Boot concepts for JavaScript applications

Similar a Introducing RaveJS: Spring Boot concepts for JavaScript applications (20)

Último

Último (20)

Introducing RaveJS: Spring Boot concepts for JavaScript applications