Upload
spring-io
View
1.815
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Speaker: John Hann Web / JavaScript Track Modern JavaScript frameworks have become quite sophisticated. Unfortunately, they have also become quite complicated. The demos and sample projects for these frameworks look deceptively simple. However, to build and deploy real applications, developers must scaffold, configure, and maintain a tremendous amount of intricate machinery. Until recently, the Java world wasn't very different. Spring Boot finally made it easy to create stand-alone, production-grade Spring Applications that can you can "just run". Can we do the same for JavaScript? Yes, we can! Introducing RaveJS. Rave eliminates configuration, machinery, and complexity. Stop configuring and tweaking machinery such as file watchers, minifiers, and transpilers just to get to a runnable app. Instead, go from zero to "hello world" in 30 seconds. In the next 30 seconds, easily add capabilities and frameworks to your application simply by installing *Rave Extensions* and *Rave Starter* packages from npm and Bower, the leading JavaScript package managers. Finally, install additional *Rave Extension* packages to apply your favorite build, deploy, and testing patterns.
Citation preview
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
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
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/
Client-side development: it’s complicated!
3
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/
“JavaScript needs a build step.”
4
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
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/
Client-side development: <script> doesn’t cut it
• Differential Synchronization • MV* • AOP, DI, IOC • Modules • WebComponents • SASS/SCSS, LESS, Stylus, Dart • Testing, CI
6
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/
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
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/
More is more
• More sophistication !!!!
• More complexity • More machinery • More configuration • More maintenance
8
mai
nten
ance
yesterday today tomorrow I QUIT!
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/
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
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/
'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
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/
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
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/
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
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/
13
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/
Can we clean up this mess?
14
We must
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/
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
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/
How do fix it?
16
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/
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
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/
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
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/
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
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/
RaveJS
20
Kinda like Spring Boot… but for client-side JavaScript/HTML5 apps
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/
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/
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/
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
Source: http://projects.spring.io/spring-boot/
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/
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
Source: http://projects.spring.io/spring-boot/
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/
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
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/
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
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/
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
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/
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
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/
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
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/
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
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/
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
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/
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
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/
Using Rave
32
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/
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
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/
Hey! That’s too much work! I want a default, runnable configuration!
34
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/
Rave Starters
35
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/
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
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/
Using a Rave Starter
$ git clone [email protected]:RaveJS/rave-start.git myApp $ cd myApp $ bower install $ npm install $ npm run start
37
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/
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
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/
Next step: develop your app
39
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/
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!
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/
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
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/
But wait. That’s not all…
42
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/
Rave Extensions
43
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/
Rave Extensions
• Additional metadata, heuristics, and logic • Integrate • Extend • Customize
44
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/
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
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/
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
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/
Rave Extensions
• Growing list of extensions: • Bower: http://bower.io/search/?q=rave-extension • npm: https://www.npmjs.org/search?q=rave-extension
47
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
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/
Let’s build an app!
49
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/
Rave CLI
50
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/
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
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/
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
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/
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
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/
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
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/
What are we working on?
• Build+deploy patterns • Bundles • SPA (in-place deploy)
• More Starters • Spring Boot • React
• ES6 module syntax • IE8 compatibility
55
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/
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
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/
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
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/
Questions?
58