Throw away Sprockets!!

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

29. None

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