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

Rave eliminates configuration, machinery, and complexity. Stop configuring and tweaking 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/ RaveJS Zero-config 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: Started writing architectural-
 level JavaScript tools (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/ The good old days <script> function validateUsername (value) { if (value.length === 0) { alert('Please enter a user name.'); return false; } else { return true; } } </script> <script src="scripts/myFaveLib.js"></script> 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/ Today: client-side development is complicated! 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/ We have become sophisticated Diff Sync, FRP, Promises, Streams AOP, DI, IOC, MVC, MV[WTF] Modules, Packages, WebComponents SASS/SCSS, LESS, Stylus, Dart Testing, CI 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/ “JavaScript needs a build step.” 6
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/ <script> doesn’t cut it Package management Bundling / building, Minification File watchers and transpilers SASS, LESS, Stylus, Dart, ES6 to/from ES5 Unit testing, integration testing, linting 8
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/ ! More sophistication ! ! ! ! ! More complexity ! More machinery ! More configuration ! More maintenance 9 maintenance yesterday today tomorrow I QUIT!
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/ "Most failures in complex systems result from inter- component interaction … less machinery is quadratically better." 10 — "Harvest, Yield, and Scalable Tolerant Systems" Armando Fox, Eric Brewer (1999)
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/ Real Life Example ! Task config: 400 LOC in Gruntfile.js Loader config: >60 LOC in app/scripts/main.js Test config: >100 LOC in karma.conf.js and karma-e2e.conf.js 11
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/ Gruntfile.js 'use strict'; ! module.exports = function (grunt) { ! // Load grunt tasks automatically require('load- grunt-tasks') (grunt); ! // Time how long tasks take. Can help when optimizing build times require('time- grunt')(grunt); ! // Define the configuration for all the tasks grunt.initConfi g({ ! // Project settings xd: { app: 'app', dist: 'dist' }, // Set bower task's targetDir to use app directory bower: { options: { targetDir: '<%= xd.app %>/lib' }, // Provide install target install: {} }, // Watches files for changes and runs tasks based on the changed files watch: { files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc'], tasks: ['build'], livereload: { options: { livereload : '<%= connect.option s.livereload %>' }, files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc'] } }, protractor: { options: { // configFile: "test/ protractor.conf. js", // Default config file keepAlive: true, // If false, the grunt process stops when the test fails. noColor: false, // If true, protractor will not use colors in its output. args: { specs: [ './test/ e2e/**/*.spec.js' ], baseUrl: 'http:// localhost:8000', chromeD river: 'node_modules /protractor/ selenium/ chromedriver' } }, run: { } }, // The actual grunt server settings connect: { options: { port: 8000, // Set to '0.0.0.0' to access the server from outside. hostname: '0.0.0.0', livereload: 35729 }, livereload: { options: { open: true, base: [ '.tmp', '<%= xd.app %>' ], middlewa re: function (connect, options) { ! if (! Array.isArray(o ptions.base)) { option s.base = [options.base]; } var middlewares = [require('grunt- connect-proxy/ lib/ utils').proxyRe quest]; ! options. base.forEach(f unction (base) { grunt.l og.warn(base); middle wares.push(co nnect.static(ba se)); }); return middlewares; } } }, test: { options: { port: 9001, base: [ '.tmp', 'test', '<%= xd.app %>' ] } }, dist: { options: { base: '< %= xd.dist %>' } }, proxies: [ { context: ['/batch', '/job', '/modules', '/ streams'], host: 'localhost', port: 9393, changeOr igin: true } ] }, ! // Make sure code styles are up to par and there are no obvious mistakes jshint: { options: { jshintrc: '.jshintrc', reporter: require('jshint- stylish') }, all: [ 'Gruntfile.j s', '<%= xd.app %>/ scripts/{,**/}*.js' ], test: { options: { jshintrc: 'test/.jshintrc' }, src: ['test/ spec/{,*/}*.js'] } }, less: { dist: { files: { '<%= xd.app %>/ styles/ main.css': ['< %= xd.app %>/ styles/ main.less'] }, options: { sourceMa p: true, sourceMa pFilename: '< %= xd.app %>/ styles/ main.css.map', sourceMa pBasepath: '< %= xd.app %>/', sourceMa pRootpath: '/' } } }, // Empties folders to start fresh clean: { dist: { files: [ { dot: true, src: [ '.tmp', '<%= xd.dist %>/*' ] } ] }, server: '.tmp' }, ! // Add vendor prefixed styles autoprefixer: { options: { browsers: ['last 1 version'] }, 12
13. Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ RequireJS main.js require.config({ paths: { domReady: '../lib/requirejs- domready/domReady', angular: '../lib/angular/ angular', jquery: '../lib/jquery/jquery', bootstrap: '../lib/bootstrap/ bootstrap', ngResource: '../lib/angular- resource/angular-resource', uiRouter: '../lib/angular-ui- router/angular-ui-router', cgBusy: '../lib/angular-busy/ angular-busy', ngGrowl: '../lib/angular-growl/ angular-growl', angularHighlightjs: '../lib/ angular-highlightjs/angular- highlightjs', highlightjs: '../lib/highlightjs/ highlight.pack' }, shim: { angular: { deps: ['bootstrap'], exports: 'angular' }, bootstrap: { deps: ['jquery'] }, 'uiRouter': { deps: ['angular'] }, 'ngResource': { deps: ['angular'] }, 'cgBusy': { deps: ['angular'] }, 'ngGrowl': { deps: ['angular'] }, 'angularHighlightjs': { deps: ['angular', 'highlightjs'] } } }); ! define([ 'require', 'angular', 'app', './routes' ], function (require, angular) { 'use strict'; ! require(['domReady!'], function (document) { console.log('Start angular application.'); angular.bootstrap(document, ['xdAdmin']); }); require(['jquery', 'bootstrap'], function () { console.log('Loaded Twitter Bootstrap.'); updateGrowl(); $(window).on('scroll resize', function () { updateGrowl(); }); }); ! function updateGrowl() { var bodyScrollTop = $ ('body').scrollTop(); var navHeight = $ ('nav').outerHeight(); ! if (bodyScrollTop > navHeight) { $('.growl').css('top', 10); } else if (bodyScrollTop >= 0) { var distance = navHeight - bodyScrollTop; $('.growl').css('top', distance + 10); } } }); 13
14. Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ karma.conf.js module.exports = function(config) { config.set({ // base path, that will be used to resolve files and exclude basePath: '', ! // testing framework to use (jasmine/mocha/ qunit/...) frameworks: ['ng- 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 }); }; 14
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/ It’s killing progress and innovation As long as it’s easier to do it the wrong way… 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/ "Getting started is too hard." — every front-end dev, ever 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/ "Maintenance is a full-time job. We had to hire a junior dev." — developer at a company with a handful of production apps 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/ "I didn’t use modules or promises because I wanted to create something quickly." — multiple experienced engineers on my own team :( 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/ It’s killing progress and innovation Not just applications… Prototypes and experiments Demos, guides, and tutorials 20
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/ How do we fix it? 21
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/ Option 1: Code generation Install machinery to generate code, config Yeoman, JHipster, etc. 22
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/ Option 1: Code generation ✓ Faster bootstrap X Tons of machinery X Lots of maintenance X Customization is a $&@#$& 23
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/ Option 2: Auto configure Provide a default, runnable config Automatically respond to the environment Spring Boot (Java) 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/ Option 2: Auto configure ✓ No configuration ✓ Minimum machinery and maintenance X Convention > config X Hidden heuristics and dependencies 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/ Auto-configure without the "cons"? ✓ Minimize conventions ✓ Detect when conventions are broken ✓ Document hidden heuristics and deps ✓ Detect conflicts with hidden heuristics and deps 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/ RaveJS Zero-configuration application bootstrap and 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/ Create modern, modular browser apps Emphasize architecture, not global script-kiddie shiz! 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/ Get started fast "Rave Starters" AngularJS, React, cujoJS, etc. Everything you need to get started Even a web server, if you need one 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/ Use virtually any third-party packages Bower, npm Node-style modules AMD, including plugins and plugin syntax Legacy global scripts, too 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/ Reduce or eliminate machinery Respond to environment Transpile on the fly Use file watchers if/when you wish No build scripts ever 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/ Eliminate configuration at least 90% of the time Use the metadata supplied by bower and npm Acquire additional metadata in Rave Starters and "Rave Extensions" 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/ Embrace the future Use ES5 (node and AMD) modules in ES6 browsers Use ES6 module syntax in today’s browsers 34
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/ Any server-side environment Spring Boot Express, Rails, etc. PhoneGap, Cordova, etc. 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/ Debug by default Basic debugging is on until you say so Advanced debugging (firehose) is optional 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/ Use Rave 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/ Create a Rave project from scratch 1. A tiny index.html
 
 
 
 2. A package.json 
 (or bower.json)
 3. A main.js file
 (listed in .json file) 38 <!doctype html> <html> <script src="rave.js" async></script> </html> $ bower init or $ npm init $ bower install —save rave console.log('Hello world!');
39. Unless otherwise indicated, these 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! So that’s why we created… 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/ Rave Starters 40
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 Starters index.html boot.js (or other bootstrap code) bower.json and/or package.json main.js and/or other modules, as needed Static web server (use only if needed) 41
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/ Using a Rave Starter $ git clone git@github.com:RaveJS/rave-start.git myApp $ cd myApp $ bower install $ npm install $ npm run start 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/ Opinionated Starters AngularJS: RaveJS/rave-start-angular React: snichme/rave-start-react cujoJS: fabricematrat/rave-start-cujo 43
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/ Minimally opinionated Starter RaveJS/rave-start Start with the bare minimum Add your own opinions! 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/ Develop your RaveJS app Convention: use npm and Bower 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/ Add and update packages ! $ bower install --save rest $ bower install --save angular $ npm install --save jiff $ npm install --save topcoat-button 47 *Don't forget to save the metadata via --save!
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/ Remove packages ! $ bower uninstall --save rave-node-process $ npm uninstall --save topcoat-button 48 *Don't forget to save the metadata via --save!
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/ Rave auto-configures an ES6 loader Auto-detects module format Auto-selects browser-specific modules Finds "main entry points" and directories Auto-configures an ES6 module loader (polyfill included) 49
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/ Zero configuration >90% of the time Rave tells you when there’s a problem Override missing or erroneous metadata 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/ Just concentrate on writing code 51
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/ Rave Extensions Integrate, extend, and customize. 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/ Add integration middleware ! $ bower install --save rave-angular $ npm install --save rave-node-process 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/ Extend ES6 module loader capabilities ! $ npm install --save rave-load-text $ npm install --save rave-load-css $ npm install --save rave-load-json $ npm install --save rave-load-jsx 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/ Add additional debugging capabilities ! $ bower install --save rave-when-debug $ bower uninstall --save rave-when-debug 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/ Rave Extensions for build, deploy, and test (coming soon) 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/ Explore Rave Extensions Search for "rave-extension" http://bower.io/search/?q=rave-extension https://www.npmjs.org/search?q=rave-extension 58
60. Unless otherwise indicated, these 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 see a rave app! <Zero config demo!> 60
61. Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Future: Rave CLI Enhances user experience Prevents common mistakes Coordinates bower and npm 61
62. Unless otherwise indicated, these 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 might a Rave CLI look like? $ rave init [<starter>] [<extension1>…<extensionN>] $ rave search <query> $ rave install <package>|<extension> $ rave uninstall <package>|<extension> $ rave build [—production] $ rave unbuild $ rave validate $ rave test 62
63. Unless otherwise indicated, these 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 is optional Continue to use your favorite CLIs: npm, bower, etc. 63
64. ✓
65. Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Why use RaveJS? ✓ Zero configuration ✓ Less machinery ✓ Less maintenance 65
66. Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Why use RaveJS? ✓ Brain-dead simple project start-up ✓ Create easy-to-understand demos and tutorials ✓ Super fast prototyping 66
67. Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Why use RaveJS? ✓ Huge selection of packages: Bower, npm ✓ Modern, modular architectures are simple! ✓ Fosters integration and customization 67
68. Unless otherwise indicated, these 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 0.4 (current) Ready for prototyping, demos, and tutorials! ✓ Bower, npm ✓ AMD, node format, global scripts ✓ Text, CSS, JSON ✓ Basic Rave Starters and Extensions 68
69. Unless otherwise indicated, these 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.next (in progress) Rave CLI Bundles, SPA (in-place deploy) ES6 module syntax 69
70. Unless otherwise indicated, these 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 1.0 (wish list!) SPDY 4 / HTTP 2.0 Spring Boot Testing patterns Minification 70
71. Unless otherwise indicated, these 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 Bower: http://bower.io/search/?q=rave-extension npm: https://www.npmjs.org/search?q=rave-extension cujoJS: https://github.com/cujojs (IOC, AOP, Promises, etc.) 71 ᵆ( ˆ◡ˆ)ᵒ
72. Unless otherwise indicated, these 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?