Introducing RaveJS: Spring Boot concepts for JavaScript applications
-
Upload
john-hann -
Category
Technology
-
view
1.170 -
download
0
description
Transcript of Introducing RaveJS: Spring Boot concepts for JavaScript applications
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Introducing RaveJS: Spring Boot concepts for JavaScript applications
John Hann Javascript Barbarian & Principal Engineer @ Pivotal
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