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

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/

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, CI
5

“JavaScript needs a
build step.”
6

! More sophistication
!
!
!
!
! More complexity
! More machinery
! More configuration
! More maintenance
9
maintenance
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-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];
}
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

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

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'
! ],
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'],
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'
! ],
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

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 generation
Install 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 configure
Provide 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

RaveJS
Zero-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 time
Use the metadata supplied by bower and npm
Acquire additional metadata in Rave Starters
and "Rave Extensions"
33

Embrace the future
Use 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 default
Basic debugging is on until you say so
Advanced debugging (firehose) is optional
36

Use Rave
37

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!');

Hey!
That’s too much work!
So that’s why we created…
39

Rave Starters
40

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

Using a Rave Starter
$ git clone git@github.com:RaveJS/rave-start.git myApp
$ cd myApp
$ bower install
$ npm install
$ npm run start
42

Opinionated Starters
AngularJS: RaveJS/rave-start-angular
React: snichme/rave-start-react
cujoJS: fabricematrat/rave-start-cujo
43

Minimally opinionated
Starter
RaveJS/rave-start
Start with the bare minimum
Add your own opinions!
45

Develop your RaveJS app
Convention: 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 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

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 Extensions
Integrate, 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

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

Future: Rave CLI
Enhances 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 optional
Continue 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

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
┏( ˆ◡ˆ)┛

Questions?

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

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

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

Último

Último (20)

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