Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

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

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio

Eche un vistazo a continuación

1 de 72 Anuncio

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

Descargar para leer sin conexión

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.

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.

Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a Zero-config JavaScript apps with RaveJS -- SVCC fall 2014 (20)

Anuncio

Más reciente (20)

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

  1. 1. RaveJS Zero-config 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: Started writing architectural-level JavaScript tools (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. 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> Unless otherwise indicated, these 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. Today: client-side development is 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/ 4
  5. 5. 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 Unless otherwise indicated, these 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. “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/ 6
  7. 7. <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 Unless otherwise indicated, these 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
  8. 8. ! 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/ 9 maintenance yesterday today tomorrow I QUIT!
  9. 9. "Most failures in complex systems result from inter-component interaction … less machinery is quadratically better." Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 10 — "Harvest, Yield, and Scalable Tolerant Systems" Armando Fox, Eric Brewer (1999)
  10. 10. 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 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 11
  11. 11. 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-g !runt')(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, o!ptions) { if (! Array.isArray(o ptions.base)) { option s.base = [options.base]; Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ } var middlewares = [require('grunt-connect- proxy/ lib/ utils').proxyRe q!uest]; 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
  12. 12. 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(); }); }); Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ ! 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
  13. 13. 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-s !cenario'], // 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: c!onfig.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: [ Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ '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
  14. 14. It’s killing progress and innovation As long as it’s easier to do it the wrong way… Unless otherwise indicated, these 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
  15. 15. "Getting started is too hard." Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ — every front-end dev, ever 17
  16. 16. "Maintenance is a full-time job. We had to hire a junior dev." — developer at a company with a Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ handful of production apps 18
  17. 17. "I didn’t use modules or promises because I wanted to create something quickly." — multiple experienced engineers Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ on my own team :( 19
  18. 18. It’s killing progress and innovation Not just applications… Prototypes and experiments Demos, guides, and tutorials Unless otherwise indicated, these 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
  19. 19. How do we 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/ 21
  20. 20. Option 1: Code generation Install machinery to generate code, config Yeoman, JHipster, 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/ 22
  21. 21. Option 1: Code generation ✓ Faster bootstrap X Tons of machinery X Lots of maintenance X Customization is a $&@#$& Unless otherwise indicated, these 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
  22. 22. Option 2: Auto configure Provide a default, runnable config Automatically respond to the environment Spring Boot (Java) Unless otherwise indicated, these 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
  23. 23. Option 2: Auto configure ✓ No configuration ✓ Minimum machinery and maintenance X Convention > config X 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/ 26
  24. 24. Auto-configure without the "cons"? ✓ Minimize conventions ✓ Detect when conventions are broken ✓ Document hidden heuristics and deps ✓ Detect conflicts with hidden heuristics and deps Unless otherwise indicated, these 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
  25. 25. RaveJS Zero-configuration application bootstrap and 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 ┏( ˆ◡ˆ)┛
  26. 26. Create modern, modular browser apps Emphasize architecture, not global script-kiddie shiz! Unless otherwise indicated, these 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
  27. 27. Get started fast "Rave Starters" AngularJS, React, cujoJS, etc. Everything you need to get started Even a web server, if you need one Unless otherwise indicated, these 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
  28. 28. Use virtually any third-party packages Bower, npm Node-style modules AMD, including plugins and plugin syntax Legacy 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/ 31
  29. 29. Reduce or eliminate machinery Respond to environment Transpile on the fly Use file watchers if/when you wish No build scripts ever Unless otherwise indicated, these 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
  30. 30. 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" Unless otherwise indicated, these 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
  31. 31. Embrace the future Use ES5 (node and AMD) modules in ES6 browsers Use ES6 module syntax in today’s browsers Unless otherwise indicated, these 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
  32. 32. Any server-side environment Spring Boot Express, Rails, etc. PhoneGap, Cordova, 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/ 35
  33. 33. Debug by default Basic debugging is on until you say so Advanced debugging (firehose) is optional Unless otherwise indicated, these 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
  34. 34. Use 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/ 37
  35. 35. 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) Unless otherwise indicated, these 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 <!doctype html> <html> <script src="rave.js" async></script> </html> $ bower init or $ npm init $ bower install —save rave console.log('Hello world!');
  36. 36. Hey! That’s too much work! So that’s why we created… Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 39
  37. 37. 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/ 40
  38. 38. 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) Unless otherwise indicated, these 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
  39. 39. 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/ 42
  40. 40. Opinionated Starters AngularJS: RaveJS/rave-start-angular React: snichme/rave-start-react cujoJS: fabricematrat/rave-start-cujo Unless otherwise indicated, these 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
  41. 41. Minimally opinionated Starter RaveJS/rave-start Start with the bare minimum Add your own opinions! Unless otherwise indicated, these 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
  42. 42. Develop your RaveJS app Convention: use npm and Bower Unless otherwise indicated, these 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
  43. 43. Add and update packages ! $ 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/ 47 *Don't forget to save the metadata via --save!
  44. 44. Remove packages ! $ bower uninstall --save rave-node-process $ npm uninstall --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/ 48 *Don't forget to save the metadata via --save!
  45. 45. 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) Unless otherwise indicated, these 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
  46. 46. Zero configuration >90% of the time Rave tells you when there’s a problem Override missing or erroneous metadata Unless otherwise indicated, these 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
  47. 47. Just concentrate on writing code Unless otherwise indicated, these 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
  48. 48. Rave Extensions Integrate, extend, and customize. Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 53
  49. 49. Add integration middleware ! $ bower install --save rave-angular $ npm install --save rave-node-process Unless otherwise indicated, these 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
  50. 50. 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 Unless otherwise indicated, these 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
  51. 51. 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/ 56
  52. 52. Rave Extensions for build, deploy, and test (coming soon) Unless otherwise indicated, these 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
  53. 53. Explore Rave Extensions Search for "rave-extension" http://bower.io/search/?q=rave-extension 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/ 58
  54. 54. Let’s see a rave app! <Zero config demo!> Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 60
  55. 55. Future: Rave CLI Enhances user experience Prevents common mistakes Coordinates bower and npm Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 61
  56. 56. 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 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 62
  57. 57. Rave CLI is optional Continue to use your favorite CLIs: npm, bower, 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/ 63
  58. 58.
  59. 59. Why use RaveJS? ✓ Zero configuration ✓ Less machinery ✓ Less 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/ 65
  60. 60. Why use RaveJS? ✓ Brain-dead simple project start-up ✓ Create easy-to-understand demos and tutorials ✓ 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/ 66
  61. 61. Why use RaveJS? ✓ Huge selection of packages: Bower, npm ✓ Modern, modular architectures are simple! ✓ Fosters integration and customization Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 67
  62. 62. 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 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 68
  63. 63. Rave.next (in progress) Rave CLI Bundles, SPA (in-place deploy) ES6 module syntax Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 69
  64. 64. Rave 1.0 (wish list!) SPDY 4 / HTTP 2.0 Spring Boot Testing patterns Minification Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 70
  65. 65. 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.) Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 71 ┏( ˆ◡ˆ)┛
  66. 66. 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/

×