Throw away Sprockets!!

SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話

Transcript

1. Throw away Sprockets!! Tomohiro Hashidate (joker1007)
2. in Japanese... Rails の片手間でJS を 書く人のための JS ビルドツー ル入門
3. Self Introduction Tomohiro Hashidate (joker1007)
4. Skill Ratio ‒ Ruby/Rails: 6 JavaScript: 3 Scala: 1
5. Sprockets is not required now Let's use ecosystem of JavaScript
6. Why JavaScript Ecosystem? Libraries version control alt‒JS handling More general technique, Not specialized for Rails
7. How do you update JS Libraries?
8. Ruby way or manual *‒rails gem git submodule Or Manual ?
9. JavaScript Package Manager npm bower
10. rails­assets.org convert from bower packages to rubygems
11. alt­JS is increasing CoffeeScript TypeScript LiveScript scala.js PureScript etc ...
12. *­rails gem cannot fully follow them
13. I want to learn technique not specialized for Rails.
14. Sprockets features VS JS Ecosystem
15. require directive (Sprockets) //= require jquery //= require jquery_ujs //= require lodash //= require backbone
16. 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');
17. Embed JS libraries and define require function
18. Compile alt­JS, Sass And minify assets (Sprockets)
19. (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"))
20. 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"))
21. Debugging (sprockets)
22. Use sourcemap browserify(entries: ["assets/ts/bundle.ts"], debug: true)
23. digest asset (Sprocets) application-1305b1f70b09d06be2d6e1a074f38a29.js
24. gulp­rev 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"))
25. joker1007/gulp­rev­rails­ manifest Output manifest.json for Rails assets helper
26. testing (Sprockets)
27. Use Mocha, power­ assert espowerify enable power‒assert on browserify. /// <reference path="../../frontend/assets/typings/tsd.d.ts" /> /// <reference path="../../frontend/assets/typings/power-assert.d.ts" /> 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"); }) });
28. Use test runner testem karma
30. I implemented sample application typescript browserify gulp gulp‒sass gulp‒rev gulp‒rev‒rails‒manifest
31. jquery backbone, marionette power‒assert
32. joker1007/rails_browserify_s ample