$30 off During Our Annual Pro Sale. View Details »

Throw away Sprockets!!

Throw away Sprockets!!

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

Tomohiro Hashidate

September 21, 2014
Tweet

More Decks by Tomohiro Hashidate

Other Decks in Programming

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