zero-config javascript apps with ravejs -- svcc fall 2014

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

RaveJS Zero-config JavaScript applications

John Hann Javascript Barbarian & Principal Engineer @ Pivotal

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




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




Today: client-side development is

complicated!

4




We have become sophisticated

Diff Sync, FRP, Promises, Streams AOP, DI, IOC, MVC, MV[WTF]

Modules, Packages, WebComponents SASS/SCSS, LESS, Stylus, Dart

Testing, CI5




“JavaScript needs a build step.”

6




! More sophistication !!!!

! More complexity ! More machinery ! More configuration ! More maintenance9

mai

nten

ance

yesterday today tomorrow I QUIT!




"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)




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




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.initConfig({ ! // Project settings

xd: { app: 'app', dist: 'dist' }, // Set bower task's targetDir to use app directory bower: { options: { targetDir: '<%= xd.app %>/lib' }, // Provide install target install: {} }, // Watches files for changes and runs tasks based on the changed files watch: { files: ['<%= xd.app %>/**/*', '*.js', '.jshintrc'],

tasks: ['build'], livereload: { options: { livereload: '<%= connect.options.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', chromeDriver: 'node_modules/protractor/selenium/chromedriver' } }, run: { } }, // The actual grunt server settings connect: { options: { port: 8000,

// Set to '0.0.0.0' to access the server from outside. hostname: '0.0.0.0', livereload: 35729 }, livereload: { options: { open: true, base: [ '.tmp', '<%= xd.app %>' ], middleware: function (connect, options) { ! if (!Array.isArray(options.base)) { options.base = [options.base];

} var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest]; ! options.base.forEach(function (base) { grunt.log.warn(base); middlewares.push(connect.static(base)); }); return middlewares; } } }, test: { options: { port: 9001, base: [

'.tmp', 'test', '<%= xd.app %>' ] } }, dist: { options: { base: '<%= xd.dist %>' } }, proxies: [ { context: ['/batch', '/job', '/modules', '/streams'], host: 'localhost', port: 9393, changeOrigin: true } ] }, !

// Make sure code styles are up to par and there are no obvious mistakes jshint: { options: { jshintrc: '.jshintrc', reporter: require('jshint-stylish') }, all: [ 'Gruntfile.js', '<%= xd.app %>/scripts/{,**/}*.js' ], test: { options: { jshintrc: 'test/.jshintrc' }, src: ['test/spec/{,*/}*.js'] } },

less: { dist: { files: { '<%= xd.app %>/styles/main.css': ['<%= xd.app %>/styles/main.less'] }, options: { sourceMap: true, sourceMapFilename: '<%= xd.app %>/styles/main.css.map', sourceMapBasepath: '<%= xd.app %>/', sourceMapRootpath: '/' } } },

// 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



http://localhost:8000


RequireJS main.jsrequire.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




karma.conf.jsmodule.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



http://localhost:8000/'


It’s killing progress and innovation

As long as it’s easier to do it the wrong way…

16




"Getting started is too hard."— every front-end dev, ever

17




"Maintenance is a full-time job. We had to hire a junior dev."

— developer at a company with a handful of production apps

18




"I didn’t use modules or promises because I wanted to

create something quickly."— multiple experienced engineers

on my own team :(

19




It’s killing progress and innovation

Not just applications… Prototypes and experiments Demos, guides, and tutorials

20




How do we fix it?

21




Option 1: Code generationInstall machinery to generate code, config

Yeoman, JHipster, etc.

22




Option 1: Code generation✓ Faster bootstrap

X Tons of machinery X Lots of maintenance

X Customization is a $&@#$&

23




Option 2: Auto configureProvide a default, runnable config

Automatically respond to the environment Spring Boot (Java)

25




Option 2: Auto configure✓ No configuration

✓ Minimum machinery and maintenance X Convention > config

X Hidden heuristics and dependencies

26




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




RaveJSZero-configuration application bootstrap

and development

28

┏( ˆ◡ˆ)┛




Create modern, modular browser apps

Emphasize architecture, not global script-kiddie shiz!

29




Get started fast"Rave Starters"

AngularJS, React, cujoJS, etc. Everything you need to get started Even a web server, if you need one

30




Use virtually any third-party packages

Bower, npm Node-style modules

AMD, including plugins and plugin syntax Legacy global scripts, too

31




Reduce or eliminate machinery

Respond to environment Transpile on the fly

Use file watchers if/when you wish No build scripts ever

32




Eliminate configuration at least 90% of the timeUse the metadata supplied by bower and npm Acquire additional metadata in Rave Starters

and "Rave Extensions"

33




Embrace the futureUse ES5 (node and AMD) modules in ES6 browsers

Use ES6 module syntax in today’s browsers

34




Any server-side environment

Spring Boot Express, Rails, etc.

PhoneGap, Cordova, etc.

35




Debug by defaultBasic debugging is on until you say so

Advanced debugging (firehose) is optional

36




Use Rave

37




Create a Rave project from scratch1. 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!');




Hey! That’s too much work!

So that’s why we created…

39




Rave Starters

40




Rave Startersindex.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




Using a Rave Starter

$ git clone [email protected]:RaveJS/rave-start.git myApp $ cd myApp $ bower install $ npm install $ npm run start

42




Opinionated StartersAngularJS: RaveJS/rave-start-angular

React: snichme/rave-start-react cujoJS: fabricematrat/rave-start-cujo

43



https://github.com/RaveJS/rave-start-angular

https://github.com/snichme/rave-start-react

https://github.com/fabricematrat/rave-start-cujo


Minimally opinionated Starter

RaveJS/rave-start Start with the bare minimum

Add your own opinions!

45



https://github.com/RaveJS/rave-start


Develop your RaveJS appConvention: use npm and Bower

46




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!




Remove packages!$ bower uninstall --save rave-node-process $ npm uninstall --save topcoat-button

48

*Don't forget to save the metadata via --save!




Rave auto-configures an ES6 loaderAuto-detects module format

Auto-selects browser-specific modules Finds "main entry points" and directories

Auto-configures an ES6 module loader (polyfill included)

49




Zero configuration >90% of the time

Rave tells you when there’s a problem Override missing or erroneous metadata

50




Just concentrate on writing code

51




Rave ExtensionsIntegrate, extend, and customize.

53




Add integration middleware!$ bower install --save rave-angular $ npm install --save rave-node-process

54




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




Add additional debugging capabilities

!$ bower install --save rave-when-debug $ bower uninstall --save rave-when-debug

56




Rave Extensions for build, deploy, and test

(coming soon)

57




Explore Rave Extensions

Search for "rave-extension" http://bower.io/search/?q=rave-extension

https://www.npmjs.org/search?q=rave-extension

58



http://bower.io/search/?q=rave-extension



Let’s see a rave app!<Zero config demo!>

60




Future: Rave CLIEnhances user experience Prevents common mistakes Coordinates bower and npm

61




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




Rave CLI is optionalContinue to use your favorite CLIs:

npm, bower, etc.

63




Why use RaveJS?✓ Zero configuration ✓ Less machinery ✓ Less maintenance

65




Why use RaveJS?✓ Brain-dead simple project start-up

✓ Create easy-to-understand demos and tutorials ✓ Super fast prototyping

66




Why use RaveJS?✓ Huge selection of packages: Bower, npm ✓ Modern, modular architectures are simple! ✓ Fosters integration and customization

67




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




Rave.next (in progress)Rave CLI

Bundles, SPA (in-place deploy) ES6 module syntax

69




Rave 1.0 (wish list!)SPDY 4 / HTTP 2.0

Spring Boot Testing patterns

Minification

70




LinksRaveJS: 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

┏( ˆ◡ˆ)┛



https://github.com/RaveJS

http://bower.io/search/?q=rave-extension


https://github.com/cujojs


Questions?



zero-config javascript apps with ravejs -- svcc fall 2014

Technology