SlideShare una empresa de Scribd logo
1 de 72
Descargar para leer sin conexión
RaveJS 
Zero-config 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: Started writing architectural-level 
JavaScript tools (cujoJS) 
! 2012: Hired into Spring team 
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/ 
2 
@unscriptable everywhere
The good old days 
<script> 
function validateUsername (value) { 
if (value.length === 0) { 
alert('Please enter a user name.'); 
return false; 
} 
else { 
return true; 
} 
} 
</script> 
<script src="scripts/myFaveLib.js"></script> 
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/ 
3
Today: 
client-side development is 
complicated! 
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/ 
4
We have become 
sophisticated 
Diff Sync, FRP, Promises, Streams 
AOP, DI, IOC, MVC, MV[WTF] 
Modules, Packages, WebComponents 
SASS/SCSS, LESS, Stylus, Dart 
Testing, CI 
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/ 
5
“JavaScript needs a 
build step.” 
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/ 
6
<script> doesn’t cut it 
Package management 
Bundling / building, Minification 
File watchers and transpilers 
SASS, LESS, Stylus, Dart, ES6 to/from ES5 
Unit testing, integration testing, linting 
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/ 
8
! More sophistication 
! 
! 
! 
! 
! More complexity 
! More machinery 
! More configuration 
! More maintenance 
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/ 
9 
maintenance 
yesterday today tomorrow I QUIT!
"Most failures in complex 
systems result from inter-component 
interaction … less 
machinery is quadratically 
better." 
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/ 
10 
— "Harvest, Yield, and Scalable Tolerant Systems" 
Armando Fox, Eric Brewer (1999)
Real Life Example 
! 
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 
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/ 
11
Gruntfile.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-g 
!runt')(grunt); 
// Define the 
configuration 
for all the tasks 
grunt.initConfi 
g!({ 
// 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.option 
s.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', 
chromeD 
river: 
'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 %>' 
], 
middlewa 
re: function 
(connect, 
o!ptions) { 
if (! 
Array.isArray(o 
ptions.base)) { 
option 
s.base = 
[options.base]; 
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/ 
} 
var 
middlewares = 
[require('grunt-connect- 
proxy/ 
lib/ 
utils').proxyRe 
q!uest]; 
options. 
base.forEach(f 
unction (base) 
{ 
grunt.l 
og.warn(base); 
middle 
wares.push(co 
nnect.static(ba 
se)); 
}); 
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, 
changeOr 
igin: 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.j 
s', 
'<%= 
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: { 
sourceMa 
p: true, 
sourceMa 
pFilename: '< 
%= xd.app %>/ 
styles/ 
main.css.map', 
sourceMa 
pBasepath: '< 
%= xd.app 
%>/', 
sourceMa 
pRootpath: '/' 
} 
} 
}, 
// 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'] 
}, 
12
RequireJS main.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(document, 
['xdAdmin']); 
}); 
require(['jquery', 'bootstrap'], 
function () { 
console.log('Loaded Twitter 
Bootstrap.'); 
updateGrowl(); 
$(window).on('scroll resize', 
function () { 
updateGrowl(); 
}); 
}); 
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/ 
! 
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); 
} 
} 
}); 
13
karma.conf.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-s 
!cenario'], 
// 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: 
c!onfig.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: [ 
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/ 
'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 
}); 
}; 
14
It’s killing 
progress and innovation 
As long as it’s easier to 
do it the wrong way… 
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/ 
16
"Getting started is too hard." 
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/ 
— every front-end dev, ever 
17
"Maintenance is a full-time job. 
We had to hire a junior dev." 
— developer at a company with a 
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/ 
handful of production apps 
18
"I didn’t use modules or 
promises because I wanted to 
create something quickly." 
— multiple experienced engineers 
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/ 
on my own team :( 
19
It’s killing 
progress and innovation 
Not just applications… 
Prototypes and experiments 
Demos, guides, and tutorials 
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/ 
20
How do we fix it? 
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/ 
21
Option 1: Code generation 
Install machinery to generate code, config 
Yeoman, JHipster, etc. 
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/ 
22
Option 1: Code generation 
✓ Faster bootstrap 
X Tons of machinery 
X Lots of maintenance 
X Customization is a $&@#$& 
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/ 
23
Option 2: Auto configure 
Provide a default, runnable config 
Automatically respond to the environment 
Spring Boot (Java) 
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/ 
25
Option 2: Auto configure 
✓ No configuration 
✓ Minimum machinery and maintenance 
X Convention > config 
X Hidden heuristics and dependencies 
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/ 
26
Auto-configure 
without the "cons"? 
✓ Minimize conventions 
✓ Detect when conventions are broken 
✓ Document hidden heuristics and deps 
✓ Detect conflicts with hidden heuristics and deps 
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/ 
27
RaveJS 
Zero-configuration application bootstrap 
and development 
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/ 
28 
┏( ˆ◡ˆ)┛
Create modern, modular 
browser apps 
Emphasize architecture, not global script-kiddie shiz! 
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/ 
29
Get started fast 
"Rave Starters" 
AngularJS, React, cujoJS, etc. 
Everything you need to get started 
Even a web server, if you need one 
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/ 
30
Use virtually any 
third-party packages 
Bower, npm 
Node-style modules 
AMD, including plugins and plugin syntax 
Legacy global scripts, too 
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/ 
31
Reduce or 
eliminate machinery 
Respond to environment 
Transpile on the fly 
Use file watchers if/when you wish 
No build scripts ever 
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/ 
32
Eliminate configuration 
at least 90% of the time 
Use the metadata supplied by bower and npm 
Acquire additional metadata in Rave Starters 
and "Rave Extensions" 
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/ 
33
Embrace the future 
Use ES5 (node and AMD) modules in ES6 browsers 
Use ES6 module syntax in today’s browsers 
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/ 
34
Any server-side 
environment 
Spring Boot 
Express, Rails, etc. 
PhoneGap, Cordova, etc. 
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/ 
35
Debug by default 
Basic debugging is on until you say so 
Advanced debugging (firehose) is optional 
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/ 
36
Use Rave 
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/ 
37
Create a Rave project from scratch 
1. A tiny index.html 
2. A package.json 
(or bower.json) 
3. A main.js file 
(listed in .json file) 
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/ 
38 
<!doctype html> 
<html> 
<script src="rave.js" async></script> 
</html> 
$ bower init or $ npm init 
$ bower install —save rave 
console.log('Hello world!');
Hey! 
That’s too much work! 
So that’s why we created… 
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/ 
39
Rave Starters 
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/ 
40
Rave Starters 
index.html 
boot.js (or other bootstrap code) 
bower.json and/or package.json 
main.js and/or other modules, as needed 
Static web server (use only if needed) 
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/ 
41
Using a Rave Starter 
$ git clone git@github.com:RaveJS/rave-start.git myApp 
$ cd myApp 
$ bower install 
$ npm install 
$ npm run start 
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/ 
42
Opinionated Starters 
AngularJS: RaveJS/rave-start-angular 
React: snichme/rave-start-react 
cujoJS: fabricematrat/rave-start-cujo 
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/ 
43
Minimally opinionated 
Starter 
RaveJS/rave-start 
Start with the bare minimum 
Add your own opinions! 
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/ 
45
Develop your RaveJS app 
Convention: use npm and Bower 
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/ 
46
Add and update packages 
! 
$ bower install --save rest 
$ bower install --save angular 
$ npm install --save jiff 
$ npm install --save topcoat-button 
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/ 
47 
*Don't forget to save the metadata via --save!
Remove packages 
! 
$ bower uninstall --save rave-node-process 
$ npm uninstall --save topcoat-button 
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/ 
48 
*Don't forget to save the metadata via --save!
Rave auto-configures 
an ES6 loader 
Auto-detects module format 
Auto-selects browser-specific modules 
Finds "main entry points" and directories 
Auto-configures an ES6 module loader (polyfill included) 
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/ 
49
Zero configuration 
>90% of the time 
Rave tells you when there’s a problem 
Override missing or erroneous metadata 
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/ 
50
Just concentrate on 
writing code 
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/ 
51
Rave Extensions 
Integrate, extend, and customize. 
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/ 
53
Add integration middleware 
! 
$ bower install --save rave-angular 
$ npm install --save rave-node-process 
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/ 
54
Extend ES6 module loader 
capabilities 
! 
$ npm install --save rave-load-text 
$ npm install --save rave-load-css 
$ npm install --save rave-load-json 
$ npm install --save rave-load-jsx 
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/ 
55
Add additional debugging 
capabilities 
! 
$ bower install --save rave-when-debug 
$ bower uninstall --save rave-when-debug 
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/ 
56
Rave Extensions for 
build, deploy, and test 
(coming soon) 
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/ 
57
Explore 
Rave Extensions 
Search for "rave-extension" 
http://bower.io/search/?q=rave-extension 
https://www.npmjs.org/search?q=rave-extension 
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/ 
58
Let’s see a rave app! 
<Zero config demo!> 
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/ 
60
Future: Rave CLI 
Enhances user experience 
Prevents common mistakes 
Coordinates bower and npm 
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/ 
61
What might a Rave CLI look like? 
$ rave init [<starter>] [<extension1>…<extensionN>] 
$ rave search <query> 
$ rave install <package>|<extension> 
$ rave uninstall <package>|<extension> 
$ rave build [—production] 
$ rave unbuild 
$ rave validate 
$ rave test 
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/ 
62
Rave CLI is optional 
Continue to use your favorite CLIs: 
npm, bower, etc. 
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/ 
63
✓
Why use RaveJS? 
✓ Zero configuration 
✓ Less machinery 
✓ Less maintenance 
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/ 
65
Why use RaveJS? 
✓ Brain-dead simple project start-up 
✓ Create easy-to-understand demos and tutorials 
✓ Super fast prototyping 
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/ 
66
Why use RaveJS? 
✓ Huge selection of packages: Bower, npm 
✓ Modern, modular architectures are simple! 
✓ Fosters integration and customization 
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/ 
67
Rave 0.4 (current) 
Ready for prototyping, demos, and tutorials! 
✓ Bower, npm 
✓ AMD, node format, global scripts 
✓ Text, CSS, JSON 
✓ Basic Rave Starters and Extensions 
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/ 
68
Rave.next (in progress) 
Rave CLI 
Bundles, SPA (in-place deploy) 
ES6 module syntax 
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/ 
69
Rave 1.0 (wish list!) 
SPDY 4 / HTTP 2.0 
Spring Boot 
Testing patterns 
Minification 
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/ 
70
Links 
RaveJS: https://github.com/RaveJS 
Bower: http://bower.io/search/?q=rave-extension 
npm: https://www.npmjs.org/search?q=rave-extension 
cujoJS: https://github.com/cujojs (IOC, AOP, Promises, etc.) 
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/ 
71 
┏( ˆ◡ˆ)┛
Questions? 
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/

Más contenido relacionado

La actualidad más candente

Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
Paul Irish
 
JavaScript Patterns and Principles
JavaScript Patterns and PrinciplesJavaScript Patterns and Principles
JavaScript Patterns and Principles
Aaronius
 
Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...
Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...
Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...
D
 
Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…
Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…
Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…
D
 

La actualidad más candente (20)

HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Dethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.jsDethroning Grunt: Simple and Effective Builds with gulp.js
Dethroning Grunt: Simple and Effective Builds with gulp.js
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 
YUI 3
YUI 3YUI 3
YUI 3
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
 
YUI on the go
YUI on the goYUI on the go
YUI on the go
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
 
Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
 
Joomla! Components - Uma visão geral
Joomla! Components - Uma visão geralJoomla! Components - Uma visão geral
Joomla! Components - Uma visão geral
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
JavaScript Patterns and Principles
JavaScript Patterns and PrinciplesJavaScript Patterns and Principles
JavaScript Patterns and Principles
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
 
RequireJS
RequireJSRequireJS
RequireJS
 
2021laravelconftwslides11
2021laravelconftwslides112021laravelconftwslides11
2021laravelconftwslides11
 
Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...
Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...
Things Your Mother Didn't Tell You About Bundle Configurations - Symfony Live...
 
Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…
Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…
Things Your Mother Didnt Tell You About Bundle Configurations - Symfony Live…
 
Testing javascript in the frontend
Testing javascript in the frontendTesting javascript in the frontend
Testing javascript in the frontend
 
jQuery Internals + Cool Stuff
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
 
Symfony2 and AngularJS
Symfony2 and AngularJSSymfony2 and AngularJS
Symfony2 and AngularJS
 

Similar a Zero-config JavaScript apps with RaveJS -- SVCC fall 2014

BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
mwbrooks
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
Ben Lin
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 

Similar a Zero-config JavaScript apps with RaveJS -- SVCC fall 2014 (20)

Introducing RaveJS: Spring Boot concepts for JavaScript applications
Introducing RaveJS: Spring Boot concepts for JavaScript applicationsIntroducing RaveJS: Spring Boot concepts for JavaScript applications
Introducing RaveJS: Spring Boot concepts for JavaScript applications
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 
Having Fun with Play
Having Fun with PlayHaving Fun with Play
Having Fun with Play
 
Build Web Apps using Node.js
Build Web Apps using Node.jsBuild Web Apps using Node.js
Build Web Apps using Node.js
 
Deployment talk dpc 13
Deployment talk dpc 13Deployment talk dpc 13
Deployment talk dpc 13
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
 
Story about module management with angular.js
Story about module management with angular.jsStory about module management with angular.js
Story about module management with angular.js
 
Building Web Apps with Express
Building Web Apps with ExpressBuilding Web Apps with Express
Building Web Apps with Express
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architecture
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
JQuery UK February 2015: Service Workers On Vacay
JQuery UK February 2015: Service Workers On VacayJQuery UK February 2015: Service Workers On Vacay
JQuery UK February 2015: Service Workers On Vacay
 
JQuery UK Service Workers Talk
JQuery UK Service Workers TalkJQuery UK Service Workers Talk
JQuery UK Service Workers Talk
 

Último

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Último (20)

FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Introduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationIntroduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG Evaluation
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 

Zero-config JavaScript apps with RaveJS -- SVCC fall 2014

  • 1. RaveJS Zero-config 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/
  • 2. JS Barbarian: The Good Parts™ ! 1996: Started using JavaScript ! 2005: Stopped using anything else ! 2010: Started writing architectural-level JavaScript tools (cujoJS) ! 2012: Hired into Spring team 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/ 2 @unscriptable everywhere
  • 3. The good old days <script> function validateUsername (value) { if (value.length === 0) { alert('Please enter a user name.'); return false; } else { return true; } } </script> <script src="scripts/myFaveLib.js"></script> 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/ 3
  • 4. Today: client-side development is complicated! 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/ 4
  • 5. We have become sophisticated Diff Sync, FRP, Promises, Streams AOP, DI, IOC, MVC, MV[WTF] Modules, Packages, WebComponents SASS/SCSS, LESS, Stylus, Dart Testing, CI 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/ 5
  • 6. “JavaScript needs a build step.” 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/ 6
  • 7.
  • 8. <script> doesn’t cut it Package management Bundling / building, Minification File watchers and transpilers SASS, LESS, Stylus, Dart, ES6 to/from ES5 Unit testing, integration testing, linting 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/ 8
  • 9. ! More sophistication ! ! ! ! ! More complexity ! More machinery ! More configuration ! More maintenance 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/ 9 maintenance yesterday today tomorrow I QUIT!
  • 10. "Most failures in complex systems result from inter-component interaction … less machinery is quadratically better." 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/ 10 — "Harvest, Yield, and Scalable Tolerant Systems" Armando Fox, Eric Brewer (1999)
  • 11. Real Life Example ! 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 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/ 11
  • 12. Gruntfile.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-g !runt')(grunt); // Define the configuration for all the tasks grunt.initConfi g!({ // 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.option s.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', chromeD river: '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 %>' ], middlewa re: function (connect, o!ptions) { if (! Array.isArray(o ptions.base)) { option s.base = [options.base]; 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/ } var middlewares = [require('grunt-connect- proxy/ lib/ utils').proxyRe q!uest]; options. base.forEach(f unction (base) { grunt.l og.warn(base); middle wares.push(co nnect.static(ba se)); }); 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, changeOr igin: 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.j s', '<%= 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: { sourceMa p: true, sourceMa pFilename: '< %= xd.app %>/ styles/ main.css.map', sourceMa pBasepath: '< %= xd.app %>/', sourceMa pRootpath: '/' } } }, // 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'] }, 12
  • 13. RequireJS main.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(document, ['xdAdmin']); }); require(['jquery', 'bootstrap'], function () { console.log('Loaded Twitter Bootstrap.'); updateGrowl(); $(window).on('scroll resize', function () { updateGrowl(); }); }); 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/ ! 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); } } }); 13
  • 14. karma.conf.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-s !cenario'], // 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: c!onfig.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: [ 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/ '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 }); }; 14
  • 15.
  • 16. It’s killing progress and innovation As long as it’s easier to do it the wrong way… 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/ 16
  • 17. "Getting started is too hard." 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/ — every front-end dev, ever 17
  • 18. "Maintenance is a full-time job. We had to hire a junior dev." — developer at a company with a 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/ handful of production apps 18
  • 19. "I didn’t use modules or promises because I wanted to create something quickly." — multiple experienced engineers 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/ on my own team :( 19
  • 20. It’s killing progress and innovation Not just applications… Prototypes and experiments Demos, guides, and tutorials 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/ 20
  • 21. How do we fix it? 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/ 21
  • 22. Option 1: Code generation Install machinery to generate code, config Yeoman, JHipster, etc. 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/ 22
  • 23. Option 1: Code generation ✓ Faster bootstrap X Tons of machinery X Lots of maintenance X Customization is a $&@#$& 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/ 23
  • 24.
  • 25. Option 2: Auto configure Provide a default, runnable config Automatically respond to the environment Spring Boot (Java) 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/ 25
  • 26. Option 2: Auto configure ✓ No configuration ✓ Minimum machinery and maintenance X Convention > config X Hidden heuristics and dependencies 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/ 26
  • 27. Auto-configure without the "cons"? ✓ Minimize conventions ✓ Detect when conventions are broken ✓ Document hidden heuristics and deps ✓ Detect conflicts with hidden heuristics and deps 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/ 27
  • 28. RaveJS Zero-configuration application bootstrap and development 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/ 28 ┏( ˆ◡ˆ)┛
  • 29. Create modern, modular browser apps Emphasize architecture, not global script-kiddie shiz! 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/ 29
  • 30. Get started fast "Rave Starters" AngularJS, React, cujoJS, etc. Everything you need to get started Even a web server, if you need one 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/ 30
  • 31. Use virtually any third-party packages Bower, npm Node-style modules AMD, including plugins and plugin syntax Legacy global scripts, too 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/ 31
  • 32. Reduce or eliminate machinery Respond to environment Transpile on the fly Use file watchers if/when you wish No build scripts ever 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/ 32
  • 33. Eliminate configuration at least 90% of the time Use the metadata supplied by bower and npm Acquire additional metadata in Rave Starters and "Rave Extensions" 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/ 33
  • 34. Embrace the future Use ES5 (node and AMD) modules in ES6 browsers Use ES6 module syntax in today’s browsers 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/ 34
  • 35. Any server-side environment Spring Boot Express, Rails, etc. PhoneGap, Cordova, etc. 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/ 35
  • 36. Debug by default Basic debugging is on until you say so Advanced debugging (firehose) is optional 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/ 36
  • 37. Use Rave 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/ 37
  • 38. Create a Rave project from scratch 1. A tiny index.html 2. A package.json (or bower.json) 3. A main.js file (listed in .json file) 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/ 38 <!doctype html> <html> <script src="rave.js" async></script> </html> $ bower init or $ npm init $ bower install —save rave console.log('Hello world!');
  • 39. Hey! That’s too much work! So that’s why we created… 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/ 39
  • 40. Rave Starters 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/ 40
  • 41. Rave Starters index.html boot.js (or other bootstrap code) bower.json and/or package.json main.js and/or other modules, as needed Static web server (use only if needed) 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/ 41
  • 42. Using a Rave Starter $ git clone git@github.com:RaveJS/rave-start.git myApp $ cd myApp $ bower install $ npm install $ npm run start 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/ 42
  • 43. Opinionated Starters AngularJS: RaveJS/rave-start-angular React: snichme/rave-start-react cujoJS: fabricematrat/rave-start-cujo 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/ 43
  • 44.
  • 45. Minimally opinionated Starter RaveJS/rave-start Start with the bare minimum Add your own opinions! 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/ 45
  • 46. Develop your RaveJS app Convention: use npm and Bower 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/ 46
  • 47. Add and update packages ! $ bower install --save rest $ bower install --save angular $ npm install --save jiff $ npm install --save topcoat-button 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/ 47 *Don't forget to save the metadata via --save!
  • 48. Remove packages ! $ bower uninstall --save rave-node-process $ npm uninstall --save topcoat-button 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/ 48 *Don't forget to save the metadata via --save!
  • 49. Rave auto-configures an ES6 loader Auto-detects module format Auto-selects browser-specific modules Finds "main entry points" and directories Auto-configures an ES6 module loader (polyfill included) 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/ 49
  • 50. Zero configuration >90% of the time Rave tells you when there’s a problem Override missing or erroneous metadata 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/ 50
  • 51. Just concentrate on writing code 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/ 51
  • 52.
  • 53. Rave Extensions Integrate, extend, and customize. 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/ 53
  • 54. Add integration middleware ! $ bower install --save rave-angular $ npm install --save rave-node-process 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/ 54
  • 55. Extend ES6 module loader capabilities ! $ npm install --save rave-load-text $ npm install --save rave-load-css $ npm install --save rave-load-json $ npm install --save rave-load-jsx 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/ 55
  • 56. Add additional debugging capabilities ! $ bower install --save rave-when-debug $ bower uninstall --save rave-when-debug 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/ 56
  • 57. Rave Extensions for build, deploy, and test (coming soon) 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/ 57
  • 58. Explore Rave Extensions Search for "rave-extension" http://bower.io/search/?q=rave-extension https://www.npmjs.org/search?q=rave-extension 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/ 58
  • 59.
  • 60. Let’s see a rave app! <Zero config demo!> 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/ 60
  • 61. Future: Rave CLI Enhances user experience Prevents common mistakes Coordinates bower and npm 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/ 61
  • 62. What might a Rave CLI look like? $ rave init [<starter>] [<extension1>…<extensionN>] $ rave search <query> $ rave install <package>|<extension> $ rave uninstall <package>|<extension> $ rave build [—production] $ rave unbuild $ rave validate $ rave test 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/ 62
  • 63. Rave CLI is optional Continue to use your favorite CLIs: npm, bower, etc. 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/ 63
  • 64.
  • 65. Why use RaveJS? ✓ Zero configuration ✓ Less machinery ✓ Less maintenance 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/ 65
  • 66. Why use RaveJS? ✓ Brain-dead simple project start-up ✓ Create easy-to-understand demos and tutorials ✓ Super fast prototyping 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/ 66
  • 67. Why use RaveJS? ✓ Huge selection of packages: Bower, npm ✓ Modern, modular architectures are simple! ✓ Fosters integration and customization 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/ 67
  • 68. Rave 0.4 (current) Ready for prototyping, demos, and tutorials! ✓ Bower, npm ✓ AMD, node format, global scripts ✓ Text, CSS, JSON ✓ Basic Rave Starters and Extensions 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/ 68
  • 69. Rave.next (in progress) Rave CLI Bundles, SPA (in-place deploy) ES6 module syntax 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/ 69
  • 70. Rave 1.0 (wish list!) SPDY 4 / HTTP 2.0 Spring Boot Testing patterns Minification 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/ 70
  • 71. Links RaveJS: https://github.com/RaveJS Bower: http://bower.io/search/?q=rave-extension npm: https://www.npmjs.org/search?q=rave-extension cujoJS: https://github.com/cujojs (IOC, AOP, Promises, etc.) 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/ 71 ┏( ˆ◡ˆ)┛
  • 72. Questions? 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/