Slide 1
Slide 1 text
Throw away
Sprockets!!
Tomohiro Hashidate (joker1007)
Slide 2
Slide 2 text
in Japanese...
Rails
の片手間でJS
を
書く人のための
JS
ビルドツー
ル入門
Slide 3
Slide 3 text
Self Introduction
Tomohiro Hashidate
(joker1007)
Slide 4
Slide 4 text
Skill Ratio
‒
Ruby/Rails: 6
JavaScript: 3
Scala: 1
Slide 5
Slide 5 text
Sprockets is not
required now
Let's use ecosystem
of JavaScript
Slide 6
Slide 6 text
Why JavaScript
Ecosystem?
Libraries version control
alt‒JS handling
More general technique, Not specialized
for Rails
Slide 7
Slide 7 text
How do you update JS
Libraries?
Slide 8
Slide 8 text
Ruby way or manual
*‒rails gem
git submodule
Or Manual ?
Slide 9
Slide 9 text
JavaScript Package
Manager
npm
bower
Slide 10
Slide 10 text
railsassets.org
convert from bower packages to
rubygems
Slide 11
Slide 11 text
altJS is increasing
CoffeeScript
TypeScript
LiveScript
scala.js
PureScript
etc ...
Slide 12
Slide 12 text
*rails gem cannot
fully follow them
Slide 13
Slide 13 text
I want to learn
technique not
specialized for Rails.
Slide 14
Slide 14 text
Sprockets features VS
JS Ecosystem
Slide 15
Slide 15 text
require directive
(Sprockets)
//= require jquery
//= require jquery_ujs
//= require lodash
//= require backbone
Slide 16
Slide 16 text
browserify, webpack
enable CommonJS Style require.
Command
$ npm install browserify tsify jquery backbone
$ browserify -p tsify bundle.ts > bundle.js
JS
var jQuery = require('jquery');
var Backbone = require('backbone');
TypeScript
import jQuery = require('jquery');
import Backbone = require('backbone');
Slide 17
Slide 17 text
Embed JS libraries
and define require
function
Slide 18
Slide 18 text
Compile altJS, Sass
And minify assets
(Sprockets)
Slide 19
Slide 19 text
(gulp or grunt) and
compiler and
livereload
npm install coffee-script tsify gulp-ruby-sass gulp-uglify
gulp.task 'browserify', ->
browserify(entries: ["assets/ts/bundle.ts"])
.plugin("tsify")
.bundle()
.pipe(source("bundle.js"))
.pipe(streamify(uglify()))
.pipe(gulp.dest("public/assets/bundle.js"))
Slide 20
Slide 20 text
gulp.task 'sass', ['glyphicon'], ->
gulp.src(['frontend/assets/stylesheets/**/*.scss', 'frontend/assets/stylesheets/**
.pipe(gulp.dest("public/assets/sass"))
.pipe(plumber())
.pipe(sass(
sourcemap: true
sourcemapPath: "./sass"
compass: true
bundleExec: true
loadPath: [
"./bower_components"
]
)).pipe(gulp.dest("public/assets"))
Slide 21
Slide 21 text
Debugging
(sprockets)
Slide 22
Slide 22 text
Use sourcemap
browserify(entries: ["assets/ts/bundle.ts"], debug: true)
Slide 23
Slide 23 text
digest asset
(Sprocets)
application-1305b1f70b09d06be2d6e1a074f38a29.js
Slide 24
Slide 24 text
gulprev and generate
manifest.json
rev = require("gulp-rev")
manifest = require("gulp-rev-rails-manifest")
browserify(....)
.bundle()
.pipe(streamify(rev()))
.pipe(gulp.dest("public/assets"))
.pipe(manifest())
.pipe(gulp.dest("public/assets"))
Slide 25
Slide 25 text
joker1007/gulprevrails
manifest
Output manifest.json for Rails assets
helper
Slide 26
Slide 26 text
testing (Sprockets)
Slide 27
Slide 27 text
Use Mocha, power
assert
espowerify enable power‒assert on
browserify.
///
///
import assert = require('power-assert');
import Hello = require('../../frontend/assets/javascripts/hello');
var hello = Hello.hello;
var fib = Hello.fib;
describe('hello', () => {
it('should return "Hello, name"', () => {
assert(hello("Name") == "Hello, Name");
})
});
Slide 28
Slide 28 text
Use test runner
testem
karma
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
I implemented sample
application
typescript
browserify
gulp
gulp‒sass
gulp‒rev
gulp‒rev‒rails‒manifest
Slide 31
Slide 31 text
jquery
backbone, marionette
power‒assert
Slide 32
Slide 32 text
joker1007/rails_browserify_s
ample