Throw away Sprockets!!

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

Transcript

1. Throw away
   Sprockets!!
   Tomohiro Hashidate (joker1007)
   

   View Slide

2. in Japanese...
   Rails
   の片手間でJS
   を
   書く人のための
   JS
   ビルドツー
   ル入門
   

   View Slide

3. Self Introduction
   Tomohiro Hashidate
   (joker1007)
   

   View Slide

4. Skill Ratio
   ‒
   Ruby/Rails: 6
   JavaScript: 3
   Scala: 1
   

   View Slide

5. Sprockets is not
   required now
   Let's use ecosystem
   of JavaScript
   

   View Slide

6. Why JavaScript
   Ecosystem?
   Libraries version control
   alt‒JS handling
   More general technique, Not specialized
   for Rails
   

   View Slide

7. How do you update JS
   Libraries?
   

   View Slide

8. Ruby way or manual
   *‒rails gem
   git submodule
   Or Manual ?
   

   View Slide

9. JavaScript Package
   Manager
   npm
   bower
   

   View Slide

10. rails­assets.org
    convert from bower packages to
    rubygems
    

    View Slide

11. alt­JS is increasing
    CoffeeScript
    TypeScript
    LiveScript
    scala.js
    PureScript
    etc ...
    

    View Slide

12. *­rails gem cannot
    fully follow them
    

    View Slide

13. I want to learn
    technique not
    specialized for Rails.
    

    View Slide

14. Sprockets features VS
    JS Ecosystem
    

    View Slide

15. require directive
    (Sprockets)
    //= require jquery
    //= require jquery_ujs
    //= require lodash
    //= require backbone
    

    View Slide

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

    View Slide

17. Embed JS libraries
    and define require
    function
    

    View Slide

18. Compile alt­JS, Sass
    And minify assets
    (Sprockets)
    

    View Slide

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

    View Slide

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

    View Slide

21. Debugging
    (sprockets)
    

    View Slide

22. Use sourcemap
    browserify(entries: ["assets/ts/bundle.ts"], debug: true)
    

    View Slide

23. digest asset
    (Sprocets)
    application-1305b1f70b09d06be2d6e1a074f38a29.js
    

    View Slide

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

    View Slide

25. joker1007/gulp­rev­rails­
    manifest
    Output manifest.json for Rails assets
    helper
    

    View Slide

26. testing (Sprockets)
    

    View Slide

27. 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");
    })
    });
    

    View Slide

28. Use test runner
    testem
    karma
    

    View Slide

29. View Slide

30. I implemented sample
    application
    typescript
    browserify
    gulp
    gulp‒sass
    gulp‒rev
    gulp‒rev‒rails‒manifest
    

    View Slide

31. jquery
    backbone, marionette
    power‒assert
    

    View Slide

32. joker1007/rails_browserify_s
    ample
    

    View Slide