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.
RaveJS 
Zero-config JavaScript applications 
John Hann 
Javascript Barbarian & Principal Engineer @ Pivotal 
Unless otherw...
JS Barbarian: The Good Parts™ 
! 1996: Started using JavaScript 
! 2005: Stopped using anything else 
! 2010: Started writ...
The good old days 
<script> 
function validateUsername (value) { 
if (value.length === 0) { 
alert('Please enter a user na...
Today: 
client-side development is 
complicated! 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Softwar...
We have become 
sophisticated 
Diff Sync, FRP, Promises, Streams 
AOP, DI, IOC, MVC, MV[WTF] 
Modules, Packages, WebCompon...
“JavaScript needs a 
build step.” 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and lic...
<script> doesn’t cut it 
Package management 
Bundling / building, Minification 
File watchers and transpilers 
SASS, LESS,...
! More sophistication 
! 
! 
! 
! 
! More complexity 
! More machinery 
! More configuration 
! More maintenance 
Unless o...
"Most failures in complex 
systems result from inter-component 
interaction … less 
machinery is quadratically 
better." 
...
Real Life Example 
! 
Task config: 400 LOC in Gruntfile.js 
Loader config: >60 LOC in app/scripts/main.js 
Test config: >1...
Gruntfile.js 
'!use strict'; 
module.exports 
= function 
(!grunt) { 
// Load grunt 
tasks 
automatically 
require('load-g...
RequireJS main.js 
require.config({ 
paths: { 
domReady: '../lib/requirejs-domready/ 
domReady', 
angular: '../lib/angular...
karma.conf.js 
module.exports = 
function(config) { 
config.set({ 
// base path, that will be 
used to resolve files and 
...
It’s killing 
progress and innovation 
As long as it’s easier to 
do it the wrong way… 
Unless otherwise indicated, these ...
"Getting started is too hard." 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licens...
"Maintenance is a full-time job. 
We had to hire a junior dev." 
— developer at a company with a 
Unless otherwise indicat...
"I didn’t use modules or 
promises because I wanted to 
create something quickly." 
— multiple experienced engineers 
Unle...
It’s killing 
progress and innovation 
Not just applications… 
Prototypes and experiments 
Demos, guides, and tutorials 
U...
How do we fix it? 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
C...
Option 1: Code generation 
Install machinery to generate code, config 
Yeoman, JHipster, etc. 
Unless otherwise indicated,...
Option 1: Code generation 
✓ Faster bootstrap 
X Tons of machinery 
X Lots of maintenance 
X Customization is a $&@#$& 
Un...
Option 2: Auto configure 
Provide a default, runnable config 
Automatically respond to the environment 
Spring Boot (Java)...
Option 2: Auto configure 
✓ No configuration 
✓ Minimum machinery and maintenance 
X Convention > config 
X Hidden heurist...
Auto-configure 
without the "cons"? 
✓ Minimize conventions 
✓ Detect when conventions are broken 
✓ Document hidden heuri...
RaveJS 
Zero-configuration application bootstrap 
and development 
Unless otherwise indicated, these slides are © 2013-201...
Create modern, modular 
browser apps 
Emphasize architecture, not global script-kiddie shiz! 
Unless otherwise indicated, ...
Get started fast 
"Rave Starters" 
AngularJS, React, cujoJS, etc. 
Everything you need to get started 
Even a web server, ...
Use virtually any 
third-party packages 
Bower, npm 
Node-style modules 
AMD, including plugins and plugin syntax 
Legacy ...
Reduce or 
eliminate machinery 
Respond to environment 
Transpile on the fly 
Use file watchers if/when you wish 
No build...
Eliminate configuration 
at least 90% of the time 
Use the metadata supplied by bower and npm 
Acquire additional metadata...
Embrace the future 
Use ES5 (node and AMD) modules in ES6 browsers 
Use ES6 module syntax in today’s browsers 
Unless othe...
Any server-side 
environment 
Spring Boot 
Express, Rails, etc. 
PhoneGap, Cordova, etc. 
Unless otherwise indicated, thes...
Debug by default 
Basic debugging is on until you say so 
Advanced debugging (firehose) is optional 
Unless otherwise indi...
Use Rave 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative C...
Create a Rave project from scratch 
1. A tiny index.html 
2. A package.json 
(or bower.json) 
3. A main.js file 
(listed i...
Hey! 
That’s too much work! 
So that’s why we created… 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal S...
Rave Starters 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creat...
Rave Starters 
index.html 
boot.js (or other bootstrap code) 
bower.json and/or package.json 
main.js and/or other modules...
Using a Rave Starter 
$ git clone git@github.com:RaveJS/rave-start.git myApp 
$ cd myApp 
$ bower install 
$ npm install 
...
Opinionated Starters 
AngularJS: RaveJS/rave-start-angular 
React: snichme/rave-start-react 
cujoJS: fabricematrat/rave-st...
Minimally opinionated 
Starter 
RaveJS/rave-start 
Start with the bare minimum 
Add your own opinions! 
Unless otherwise i...
Develop your RaveJS app 
Convention: use npm and Bower 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal S...
Add and update packages 
! 
$ bower install --save rest 
$ bower install --save angular 
$ npm install --save jiff 
$ npm ...
Remove packages 
! 
$ bower uninstall --save rave-node-process 
$ npm uninstall --save topcoat-button 
Unless otherwise in...
Rave auto-configures 
an ES6 loader 
Auto-detects module format 
Auto-selects browser-specific modules 
Finds "main entry ...
Zero configuration 
>90% of the time 
Rave tells you when there’s a problem 
Override missing or erroneous metadata 
Unles...
Just concentrate on 
writing code 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and lic...
Rave Extensions 
Integrate, extend, and customize. 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Softw...
Add integration middleware 
! 
$ bower install --save rave-angular 
$ npm install --save rave-node-process 
Unless otherwi...
Extend ES6 module loader 
capabilities 
! 
$ npm install --save rave-load-text 
$ npm install --save rave-load-css 
$ npm ...
Add additional debugging 
capabilities 
! 
$ bower install --save rave-when-debug 
$ bower uninstall --save rave-when-debu...
Rave Extensions for 
build, deploy, and test 
(coming soon) 
Unless otherwise indicated, these slides are © 2013-2014 Pivo...
Explore 
Rave Extensions 
Search for "rave-extension" 
http://bower.io/search/?q=rave-extension 
https://www.npmjs.org/sea...
Let’s see a rave app! 
<Zero config demo!> 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc...
Future: Rave CLI 
Enhances user experience 
Prevents common mistakes 
Coordinates bower and npm 
Unless otherwise indicate...
What might a Rave CLI look like? 
$ rave init [<starter>] [<extension1>…<extensionN>] 
$ rave search <query> 
$ rave insta...
Rave CLI is optional 
Continue to use your favorite CLIs: 
npm, bower, etc. 
Unless otherwise indicated, these slides are ...
✓
Why use RaveJS? 
✓ Zero configuration 
✓ Less machinery 
✓ Less maintenance 
Unless otherwise indicated, these slides are ...
Why use RaveJS? 
✓ Brain-dead simple project start-up 
✓ Create easy-to-understand demos and tutorials 
✓ Super fast proto...
Why use RaveJS? 
✓ Huge selection of packages: Bower, npm 
✓ Modern, modular architectures are simple! 
✓ Fosters integrat...
Rave 0.4 (current) 
Ready for prototyping, demos, and tutorials! 
✓ Bower, npm 
✓ AMD, node format, global scripts 
✓ Text...
Rave.next (in progress) 
Rave CLI 
Bundles, SPA (in-place deploy) 
ES6 module syntax 
Unless otherwise indicated, these sl...
Rave 1.0 (wish list!) 
SPDY 4 / HTTP 2.0 
Spring Boot 
Testing patterns 
Minification 
Unless otherwise indicated, these s...
Links 
RaveJS: https://github.com/RaveJS 
Bower: http://bower.io/search/?q=rave-extension 
npm: https://www.npmjs.org/sear...
Questions? 
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a 
Creative...
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Upcoming SlideShare
Loading in …5
×

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

2,728 views

Published on

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.

Published in: Technology
  • Be the first to comment

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/

×