Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducing RaveJS: Spring Boot 
concepts for JavaScript applications 
John Hann 
Javascript Barbarian & Principal Enginee...
JS Barbarian: The Good Parts™ 
• 1996: Started using JavaScript 
• 2005: Stopped using anything else 
• 2010: Co-founded c...
Client-side development: it’s complicated! 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc...
“JavaScript needs a build step.” 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and lice...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative Commons Att...
Client-side development: <script> doesn’t cut it 
• Differential Synchronization 
• MV* 
• AOP, DI, IOC 
• Modules 
• WebC...
More sophistication == more complexity 
• Package management 
• Bundling / building 
• Minification 
• JS, CSS, and HTML 
...
More is more 
• More sophistication 
! 
! 
! 
! 
• More complexity 
• More machinery 
• More configuration 
• More mainten...
Example: Spring XD UI 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under ...
'use strict'; ! 
module.exports = 
function (grunt) { ! 
// Load grunt 
tasks 
automatically 
require('load-grunt- 
tasks'...
require.config({ 
paths: { 
domReady: '../lib/ 
requirejs-domready/ 
domReady', 
angular: '../lib/angular/ 
angular', 
jqu...
module.exports = 
function(config) { 
config.set({ 
// base path, that 
will be used to 
resolve files and 
exclude 
baseP...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative Commons Att...
Can we clean up this mess? 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed u...
It’s preventing progress and innovation 
• "Maintenance is a full-time job." 
• "Getting started is too hard." 
• Not just...
How do fix it? 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Crea...
Option 1: Code Generation 
• Generate a grunt or gulp config and an AMD config 
• Pros: 
• Easy to get started if you find...
Option 2: Auto-configure 
• Like Spring Boot! 
• Start with a default, runnable configuration 
• Detect when things are in...
Reduce the "cons" of auto-configure 
• Minimize conventions 
• Detect when conventions are broken 
• Document hidden heuri...
RaveJS 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative Com...
Review: What is Spring Boot? 
Spring Boot makes it easy to create stand-alone, production-grade Spring based 
Unless other...
Spring Boot’s features… 
• Creates stand-alone Spring applications 
• Embeds Tomcat or Jetty 
• Provides opinionated start...
Spring Boot’s features (à la JavaScript/HTML5)… 
• Creates stand-alone JavaScript/HTML5 applications 
• Provides a run-tim...
Rave concerns !== Spring Boot concerns 
• Client-side concerns are different 
• Code size 
• Page load speed 
• Different ...
Rave goals 
• Quickly create JavaScript / HTML5 apps 
• Require zero configuration >90% of the time 
• Reduce or eliminate...
Quickly create JavaScript / HTML5 apps 
• Emphasize architecture, not global script-kiddie shiz 
• Provide a run-time envi...
Require zero configuration >90% of the time 
• Provide a basic runnable setup out of the box 
• Use metadata and heuristic...
Reduce or eliminate machinery 
• Detect and respond to the environment 
• Transform / transpile on-the-fly 
• No build scr...
Integrate with all popular third-party packages 
• Support Bower and npm 
• Support AMD 
• Plugins (text, css, json, etc.)...
Embrace EcmaScript 6 while being grounded in ES5 
• ES6 in today’s ES5 browsers 
• ES6 Loader polyfill is built in 
• ES6 ...
Allow any server-side environment 
• Rave runs in the browser 
• Metadata must be accessible from browser during 
developm...
Using Rave 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative...
Create a Rave project from scratch 
• Requires only a few files… 
1. A tiny index.html: 
<!doctype html> 
<html><script sr...
Hey! That’s too much work! 
I want a default, runnable configuration! 
Unless otherwise indicated, these slides are © 2013...
Rave Starters 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creat...
Rave Starters 
• Includes minimal starter files 
• index.html 
• boot.js (or other application bootstrapper) 
• bower.json...
Using a Rave Starter 
$ git clone git@github.com:RaveJS/rave-start.git myApp 
$ cd myApp 
$ bower install 
$ npm install 
...
Choosing a Rave Starter 
• Minimally opinionated starter 
• rave-start: https://github.com/RaveJS/rave-start 
• Specialize...
Next step: develop your app 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed ...
Easily add, remove, and update packages 
• Use JavaScript package managers as you normally would* 
$ bower install --save ...
Rave auto-configures Bower and npm packages 
• Auto-detects module formats 
• AMD, node, or globals (ES6 coming v1.0) 
• A...
But wait. That’s not all… 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed un...
Rave Extensions 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Cre...
Rave Extensions 
• Additional metadata, heuristics, and logic 
• Integrate 
• Extend 
• Customize 
Unless otherwise indica...
Rave Extensions 
• Add integration middleware 
$ bower install --save rave-angular 
! 
• Extend ES6 module loader capabili...
Rave Extensions for build, deploy, and test (v1.0) 
• Choose to develop a SPA or mobile web app 
$ bower install --save ra...
Rave Extensions 
• Growing list of extensions: 
• Bower: http://bower.io/search/?q=rave-extension 
• npm: https://www.npmj...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative Commons Att...
Let’s build an app! 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a ...
Rave CLI 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative C...
Rave CLI 
• Enhance user experience 
• Coordinate Bower and npm 
• Eliminate manual editing of package.json 
• Remove sour...
Rave CLI (1.0.0) 
$ rave init [<starter>] [<extension1>…<extensionN>] 
$ rave search <query> 
$ rave install <package>|<ex...
Summary: the benefits of RaveJS 
• Zero configuration 
• Less machinery and maintenance 
• Brain-dead simple project start...
What does Rave support today (0.3)? 
• Ready for prototyping and experiments! 
• Package managers 
• Bower, npm 
• ES5 mod...
What are we working on? 
• Build+deploy patterns 
• Bundles 
• SPA (in-place deploy) 
• More Starters 
• Spring Boot 
• Re...
What are we planning for 1.0? 
• Rave CLI 
• More build+deploy patterns 
• SPDY 4 / HTTP 2.0 
• Spring Boot 
• Testing pat...
Links 
• RaveJS: https://github.com/RaveJS 
• Rave extensions 
• Bower: http://bower.io/search/?q=rave-extension 
• npm: h...
Questions? 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative...
Upcoming SlideShare
Loading in …5
×

Introducing RaveJS: Spring Boot concepts for JavaScript applications

2,854 views

Published on

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.

Published in: Technology
  • Be the first to comment

Introducing RaveJS: Spring Boot concepts for JavaScript applications

  1. 1. 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/
  2. 2. JS Barbarian: The Good Parts™ • 1996: Started using JavaScript • 2005: Stopped using anything else • 2010: Co-founded 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. 3. Client-side development: it’s 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/ 3
  4. 4. “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/ 4
  5. 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/ 5
  6. 6. Client-side development: <script> doesn’t cut it • Differential Synchronization • MV* • AOP, DI, IOC • Modules • 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/ 6
  7. 7. 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 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/ 7
  8. 8. More is more • 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/ 8 maintenance yesterday today tomorrow I QUIT!
  9. 9. Example: Spring XD UI 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 ! 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
  10. 10. 'use strict'; ! module.exports = function (grunt) { ! // Load grunt tasks automatically require('load-grunt- tasks') (grunt); ! // Time how long tasks take. Can help when optimizing build times require('time-grunt')( grunt); ! // Define the configuration for all the tasks grunt.initConfig({ ! // Project settings xd: { app: 'app', dist: 'dist' }, // Set bower task's targetDir to use app directory bower: { options: { targetDir: '< %= xd.app %>/lib' }, // Provide install target install: {} }, // Watches files for changes and runs tasks based on the changed files watch: { files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc'], tasks: ['build'], livereload: { options: { livereload: '<%= connect.options.li vereload %>' }, files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc'] } }, protractor: { options: { //configFile: "test/ protractor.conf.js", // Default config file keepAlive: true, // If false, the grunt process stops when the test fails. noColor: false, // If true, protractor will not use colors in its output. args: { specs: [ './test/e2e/ **/*.spec.js' ], baseUrl: 'http://localhost: 8000', chromeDriv er: 'node_modules/ protractor/ selenium/ chromedriver' } }, run: { } }, // The actual grunt server settings connect: { options: { port: 8000, // Set to '0.0.0.0' to access the server from outside. hostname: '0.0.0.0', livereload: 35729 }, livereload: { options: { open: true, base: [ '.tmp', '<%= xd.app %>' ], middleware : function (connect, options) { ! if (! Array.isArray(opti ons.base)) { options.b ase = [options.base]; } var middlewares = [require('grunt-connect- 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/ proxy/lib/ utils').proxyReque st]; ! options.ba se.forEach(functi on (base) { grunt.log .warn(base); middlew ares.push(connec t.static(base)); }); return middlewares; } } }, test: { options: { port: 9001, base: [ '.tmp', 'test', '<%= xd.app %>' ] } }, dist: { options: { base: '<%= xd.dist %>' } }, proxies: [ { context: ['/ batch', '/job', '/ modules', '/ streams'], host: 'localhost', port: 9393, changeOrig in: true } ] }, ! // Make sure code styles are up to par and there are no obvious mistakes jshint: { options: { jshintrc: '.jshintrc', reporter: require('jshint-stylish') }, all: [ 'Gruntfile.js', '<%= xd.app %>/scripts/{,**/} *.js' ], test: { options: { jshintrc: 'test/.jshintrc' }, src: ['test/ spec/{,*/}*.js'] } }, less: { dist: { files: { '<%= xd.app %>/styles/ main.css': ['<%= xd.app %>/styles/ main.less'] }, options: { sourceMap: true, sourceMap Filename: '<%= xd.app %>/styles/ main.css.map', sourceMap Basepath: '<%= xd.app %>/', sourceMap Rootpath: '/' } } }, // Empties folders to start fresh clean: { dist: { files: [ { dot: true, src: [ '.tmp', '<%= xd.dist %>/*' ] } ] }, server: '.tmp' }, ! // Add vendor prefixed styles autoprefixer: { options: { browsers: ['last 1 version'] }, dist: { files: [ 10 Gruntfile.js
  11. 11. 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) { 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'; ! require(['domReady!'], function (document) { console.log('Start angular application.'); angular.bootstrap(docu ment, ['xdAdmin']); }); require(['jquery', 'bootstrap'], function () { console.log('Loaded Twitter Bootstrap.'); updateGrowl(); $(window).on('scroll resize', function () { updateGrowl(); }); }); ! function updateGrowl() { var bodyScrollTop = $ ('body').scrollTop(); var navHeight = $ ('nav').outerHeight(); ! if (bodyScrollTop > navHeight) { $('.growl').css('top', 10); } else if (bodyScrollTop >= 0) { var distance = navHeight - bodyScrollTop; $('.growl').css('top', distance + 10); } } }); 11 RequireJS main.js
  12. 12. 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. 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', 'app/lib/ angular-cookies/ angular-cookies.js', 'app/lib/ angular-sanitize/ angular-sanitize.js', 'app/lib/ angular-route/ angular-route.js', 'app/lib/ angular-ui-router/ angular-ui-router. js', 'app/lib/ angular-growl/ angular-growl.js', 'app/lib/ angular-promise-tracker/ promise-tracker. js', 'app/lib/ angular-busy/ angular-busy.js', 'app/scripts/ *.js', 'app/scripts/**/ *.js', 'test/spec/**/ *.js', 'test/test-main. js' ], ! // list of files / patterns to exclude exclude: [], ! // web server port port: 7070, ! // level of logging // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG logLevel: config.LOG_INFO, !! // enable / disable watching file and executing tests whenever any file changes autoWatch: true, !! // Start these browsers, currently available: // - Chrome // - ChromeCanary // - Firefox // - Opera // - Safari (only Mac) // - PhantomJS // - IE (only Windows) browsers: ['PhantomJS'], !! // Continuous Integration mode // if true, it capture browsers, run tests and exit singleRun: false }); }; 12 karma.conf.js
  13. 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/ 13
  14. 14. Can we clean up this mess? 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/ 14 We must
  15. 15. 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." 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/ 15
  16. 16. How do 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/ 16
  17. 17. 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 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/ 17
  18. 18. 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 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/ 18
  19. 19. 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 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/ 19
  20. 20. RaveJS 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 Kinda like Spring Boot… but for client-side JavaScript/HTML5 apps
  21. 21. Review: What is Spring Boot? Spring Boot makes it easy to create stand-alone, production-grade Spring based 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 Applications that can you can "just run". Source: http://projects.spring.io/spring-boot/
  22. 22. 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 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 Source: http://projects.spring.io/spring-boot/
  23. 23. 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?) 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 Source: http://projects.spring.io/spring-boot/
  24. 24. 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 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/ 24
  25. 25. 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 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. 26. 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 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. 27. 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 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. 28. 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 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. 29. 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 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. 30. 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 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. 31. 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) 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. 32. Using 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/ 32
  33. 33. 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) 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. 34. Hey! That’s too much work! I want a default, runnable configuration! 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 So that’s why we created…
  35. 35. 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/ 35
  36. 36. 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 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. 37. 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/ 37
  38. 38. 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… 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
  39. 39. Next step: develop your app 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. 40. 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 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 *Don't forget to save the metadata via --save!
  41. 41. 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) 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 Zero configuration 99% of the time
  42. 42. But wait. That’s not all… 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. 43. 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/ 43 Integrate, extend, and customize.
  44. 44. Rave Extensions • Additional metadata, heuristics, and logic • Integrate • Extend • 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/ 44
  45. 45. 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 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. 46. 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 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. 47. Rave Extensions • Growing list of extensions: • Bower: http://bower.io/search/?q=rave-extension • npm: 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/ 47
  48. 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/ 48
  49. 49. Let’s build an app! 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 config demo!
  50. 50. Rave CLI 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. 51. 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 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. 52. 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 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/ 52
  53. 53. 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 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. 54. 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 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. 55. What are we working on? • Build+deploy patterns • Bundles • SPA (in-place deploy) • More Starters • Spring Boot • React • ES6 module syntax • IE8 compatibility 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. 56. 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 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. 57. 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 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. 58. 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/ 58

×