Introducing RaveJS: Spring Boot concepts for JavaScript applications

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.

Transcript

1. Unless otherwise indicated, these 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
2. Unless otherwise indicated, these 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
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/ Client-side development: it’s complicated! 3
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/ “JavaScript needs a build step.” 4
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. Unless otherwise indicated, these 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
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 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
8. Unless otherwise indicated, these 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 maintenance yesterday today tomorrow I QUIT!
9. Unless otherwise indicated, these 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
10. Unless otherwise indicated, these 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.li vereload %>' }, files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc'] } }, protractor: { options: { //configFile: "test/ protractor.conf.js", // Default config file keepAlive: true, // If false, the grunt process stops when the test fails. noColor: false, // If true, protractor will not use colors in its output. args: { specs: [ './test/e2e/ **/*.spec.js' ], baseUrl: 'http://localhost: 8000', chromeDriv er: 'node_modules/ protractor/ selenium/ chromedriver' } }, run: { } }, // The actual grunt server settings connect: { options: { port: 8000, // Set to '0.0.0.0' to access the server from outside. hostname: '0.0.0.0', livereload: 35729 }, livereload: { options: { open: true, base: [ '.tmp', '<%= xd.app %>' ], middleware : function (connect, options) { ! if (! Array.isArray(opti ons.base)) { options.b ase = [options.base]; } var middlewares = [require('grunt- connect-proxy/lib/ utils').proxyReque st]; ! options.ba se.forEach(functi on (base) { grunt.log .warn(base); middlew ares.push(connec t.static(base)); }); return middlewares; } } }, test: { options: { port: 9001, base: [ '.tmp', 'test', '<%= xd.app %>' ] } }, dist: { options: { base: '<%= xd.dist %>' } }, proxies: [ { context: ['/ batch', '/job', '/ modules', '/ streams'], host: 'localhost', port: 9393, changeOrig in: true } ] }, ! // Make sure code styles are up to par and there are no obvious mistakes jshint: { options: { jshintrc: '.jshintrc', reporter: require('jshint- stylish') }, all: [ 'Gruntfile.js', '<%= xd.app %>/scripts/{,**/} *.js' ], test: { options: { jshintrc: 'test/.jshintrc' }, src: ['test/ spec/{,*/}*.js'] } }, less: { dist: { files: { '<%= xd.app %>/styles/ main.css': ['<%= xd.app %>/styles/ main.less'] }, options: { sourceMap: true, sourceMap Filename: '<%= xd.app %>/styles/ main.css.map', sourceMap Basepath: '<%= xd.app %>/', sourceMap Rootpath: '/' } } }, // Empties folders to start fresh clean: { dist: { files: [ { dot: true, src: [ '.tmp', '<%= xd.dist %>/*' ] } ] }, server: '.tmp' }, ! // Add vendor prefixed styles autoprefixer: { options: { browsers: ['last 1 version'] }, dist: { files: [ 10 Gruntfile.js
11. Unless otherwise indicated, these 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(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. Unless otherwise indicated, these 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
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. Unless otherwise indicated, these 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
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/ 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
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/ How do fix it? 16
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 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
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/ 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
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/ 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
20. Unless otherwise indicated, these 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
21. Unless otherwise indicated, these 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/
22. Unless otherwise indicated, these 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/
23. Unless otherwise indicated, these 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/
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 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
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/ 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
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/ 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
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/ 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
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/ 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
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/ 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
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/ 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
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/ 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
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/ Using Rave 32
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/ 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
34. Unless otherwise indicated, these 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…
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 35
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/ 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
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/ Using a Rave Starter $ git clone git@github.com:RaveJS/rave-start.git myApp $ cd myApp $ bower install $ npm install $ npm run start 37
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/ 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
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/ Next step: develop your app 39
40. Unless otherwise indicated, these 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!
41. Unless otherwise indicated, these 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
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/ But wait. That’s not all… 42
43. Unless otherwise indicated, these 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.
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 • Additional metadata, heuristics, and logic • Integrate • Extend • Customize 44
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 • 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
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 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
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/ Rave Extensions • Growing list of extensions: • Bower: http://bower.io/search/?q=rave-extension • npm: https://www.npmjs.org/search?q=rave-extension 47
48. Unless otherwise indicated, these 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. Unless otherwise indicated, these 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!
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 50
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 • 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
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/ 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
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/ 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
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 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
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 working on? • Build+deploy patterns • Bundles • SPA (in-place deploy) • More Starters • Spring Boot • React • ES6 module syntax • IE8 compatibility 55
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/ 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
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/ 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
58. Unless otherwise indicated, these 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