Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of Sprockets

Yuichi Goto
October 24, 2016

The State of Sprockets

Ruby on Rails Tech Meetup(2016/10/24)

Yuichi Goto

October 24, 2016
Tweet

More Decks by Yuichi Goto

Other Decks in Technology

Transcript

  1. The State of Sprockets
    Ruby on Rails Tech Meetup 2016/10/24
    yasaichi

    View Slide

  2. self.inspect
    • Twitter: @_yasaichi
    • GitHub: yasaichi
    • OSS: gakubuchi
    • Blog: http://web-salad.hateblo.jp

    View Slide

  3. [PR] Software Design 8݄߸
    • RRRSpecʹ͍ͭͯͷ
    هࣄΛدߘ
    • ςετͷ࣮ߦ࣌ؒʹ
    ͓೰Έͷํ͸Ͳ͏ͧ
    ※ 70->15෼ʹʂ@ฐࣾ

    View Slide

  4. ৽֞݁ҥ͞Μͱڞԋ ✌
    @Ր༵υϥϚʮಀ͛Δ͸ஏ͕ͩ໾ʹཱͭʯ

    View Slide

  5. Outline
    1. Past and Present
    2. Future: Sprockets 4
    3. Extension interface changes

    View Slide

  6. Past and Present

    View Slide

  7. Sprocketsͱ͸
    "Sprockets is a Ruby library for
    compiling and serving web
    assets."
    - https://github.com/rails/sprockets/blob/3.x/README.md

    View Slide

  8. Compiling web assets
    • ґଘͷఆٛͱassetͷ࿈݁
    • CoffeeScript, Sass/SCSSͷτϥϯεύΠϧ
    • CSS, JSͷѹॖ
    • ϑΝΠϧ໊ʹdigest஋Λ෇༩

    View Slide

  9. Serving web assets
    • RackΞϓϦέʔγϣϯͱ࣮ͯ͠૷
    • ಛఆͷURLʹϚ΢ϯτͯ͠࢖͏

    Railsͷ৔߹: /assets -> /public/assets
    • ϑϨʔϜϫʔΫΛ໰Θͣར༻Ͱ͖Δ

    ྫ: Rails, Sinatra

    View Slide

  10. Railsͱͷؔ܎
    • Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺҎ߱͸

    ޓ͍ʹಠཱͯ͠։ൃ͞Ε͍ͯΔ
    • Rails͸SprocketsʹΑΓAsset PipelineΛ࣮૷
    • Railsݻ༗ͷॲཧ͸sprockets-rails gem͕ٵऩ

    ྫ: RakeλεΫͷొ࿥ɺॳظԽ ͳͲ

    View Slide

  11. Sprockets 3
    • ݱࡏͷϝδϟʔόʔδϣϯ
    • v2 -> v3ʢ͜ͷؒ໿4೥ʣ
    • ϢʔβʔଆͷAPI͸͋·ΓมΘ͍ͬͯͳ͍
    • ֦ு͢Δํ๏͕େ͖͘มΘͬͨʢޙड़ʣ

    View Slide

  12. Future: Sprockets 4

    View Slide

  13. Sprockets 4
    • 4.0.0.beta4ʢ2016/10/18ϦϦʔεʣ
    • ଴๬ͷ৽ػೳ
    1. Source Maps
    2. ES6 Support
    - https://github.com/rails/sprockets/blob/v4.0.0.beta4/UPGRADING.md

    View Slide

  14. Source Maps
    • developmentϞʔυʹ͓͚Δڍಈ͕มΘΔ
    • v3·Ͱ: ϑΝΠϧΛͻͱͭͣͭ഑৴
    • v4: application.(js|css) + Source Maps͚ͩ
    -> ґଘϑΝΠϧ਺͕ଟ͍৔߹ʹߴ଎Խ͕ظ଴

    View Slide

  15. ΋͏ͻͱͭͷԸܙ: Minifying
    • ຊ൪؀ڥͱಉ͡Α͏ʹJS/CSSΛѹॖͯ͠

    ։ൃͰ͖Δʢ΍ͬͱ͜͜·Ͱɾɾɾʂײʣ
    # config/environments/development.rb
    Rails.application.configure do
    # Compress JavaScripts and CSS.
    config.assets.js_compressor = :uglifier
    config.assets.css_compressor = :sass
    end
    production.rbͱ
    ಉ͡ઃఆ͕࢖͑Δ

    View Slide

  16. Sprockets 4 would make
    development faster!

    View Slide

  17. ES6 Support
    • babel-transpiler gemͱͷ૊Έ߹ΘͤͰ࣮ݱ
    • babel-transpiler͸babel-sourceʹґଘ
    • babel-source͸Babel 5ܥΛgemԽͨ͠΋ͷ
    • ֦ுࢠ͕.es6ͷϑΝΠϧͰ༗ޮ

    View Slide

  18. Pros and Cons
    ⭕ ໘౗ͳઃఆͳ͠ͰαΫοͱES6͕ॻ͚Δ
    ❌ Babel 5ܥΛར༻͍ͯ͠Δ఺
    • Plugin/Presets͸΋ͪΖΜ࢖͑ͳ͍
    • ৽͍͠࢓༷ʹ͍ͭ·Ͱ௥ैͰ͖Δ͔ʁ

    View Slide

  19. ྫ: ·͡Ίʹߟ͑Δ৔߹
    1. Browserify/WebpackͰϏϧυ
    2. Sprocketsͷ؅ཧԼʢapp/assets౳ʣʹग़ྗ
    3. digest஋ͷ෇༩ͱ഑৴ΛSprocketsʹ೚ͤΔ
    ref. WebPackΛ࢖ͬͯRails͔ΒJavaScriptΛָʹྑ͍ײ͡ʹ෼཭͢Δ

    http://qiita.com/necojackarc/items/afa674ab10aafa9784eb

    View Slide

  20. Extension interface
    changes

    View Slide

  21. Extensionͱ͸
    • ඪ४ʹ͸ͳ͍ॲཧΛ௥Ճ͍ͨ࣌͠ͷͨΊʹ
    Sprockets͕༻ҙ͍ͯ͠Δػߏ
    • ໊শͱΠϯλʔϑΣΠε͕มԽ͖ͯͨ͠
    1. Engine (v2 - v3)
    2. Processor (v3 ~)

    View Slide

  22. Engine (v2 - v3)
    • TiltʢςϯϓϨʔτΤϯδϯͷ൚༻Πϯλʔ
    ϑΣΠεΛఏڙ͢Δgemʣʹ४ڌ
    • ςϯϓϨʔτͷύεΛࢦఆͯ͠ॳظԽ͠ɺ
    #renderϝιουͰධՁ݁ՌͷจࣈྻΛฦ͢
    • v3Ͱඇਪ঑ͱͳΓv4Ͱഇࢭ

    View Slide

  23. ྫ: SassTemplate
    # https://github.com/rails/sprockets/blob/2.x/lib/
    sprockets/sass_template.rb
    class SassTemplate < Tilt::Template
    def evaluate(context, locals, &block)
    end
    end
    # https://github.com/rails/sprockets/blob/2.x/lib/
    sprockets.rb
    register_engine '.sass', SassTemplate
    Tilt::TemplateΛܧঝͯ͠
    #evaluateΛ࣮૷

    View Slide

  24. Processor (v3 ~)
    • HashΛड͚औͬͯHashΛฦ͢#callϝιουΛ
    ࣮૷ͨ͠ΦϒδΣΫτ
    • ม׵݁Ռʹؔ͢Δ৘ใΛProcessorؒͰڞ༗

    ͍ͨ͠ͱ͍͏Ϟνϕʔγϣϯ͔Βੜ·Εͨ
    -> v4ͰSource MapsΛಋೖ͢Δ͜ͱ͕Ͱ͖ͨ

    View Slide

  25. ྫ: SassProcessor
    # https://github.com/rails/sprockets/blob/v4.0.0.beta4/lib/sprockets/
    sass_processor.rb
    class SassProcessor
    def self.instance
    @instance ||= new
    end
    def self.call(input)
    instance.call(input)
    end
    def call(input)
    end
    end
    # https://github.com/rails/sprockets/blob/v4.0.0.beta4/lib/sprockets.rb
    register_transformer 'text/sass', 'text/css', SassProcessor
    #call͸ॲཧ݁ՌΛؚΉ
    HashΛฦ͢Α͏ʹ࣮૷

    View Slide

  26. gakubuchi
    • https://github.com/yasaichi/gakubuchi
    • ੩తϖʔδΛAsset PipelineͰ؅ཧ͢ΔͨΊͷgem
    • CSS/JSΛ֎෦ϑΝΠϧʹ෼཭Ͱ͖Δ
    • Haml/SlimͳͲͰίʔσΟϯάͰ͖Δ
    • ΤϥʔϖʔδͳͲΛαΫοͱॻ͖͍ͨ࣌ʹศར

    View Slide

  27. v4Ͱಥવಈ͔ͳ͘ͳͬͨ
    ※ ͜ΕΛػʹ৭ʑͱௐ΂ͨ͜ͱ͕ࠓճͷൃදʹܨ͕͍ͬͯ·͢
    # https://github.com/yasaichi/gakubuchi/blob/v1.2.2/lib/gakubuchi/
    engine_registrar.rb
    class EngineRegistrar
    def register(target, engine)
    klass = constantize(engine)
    return false if !klass.instance_of?(::Class) || registered?
    (target)
    @env.register_engine(target, klass)
    true
    end
    end
    # https://github.com/yasaichi/gakubuchi/blob/v1.2.2/lib/gakubuchi/
    railtie.rb
    engine_registrar.register(:haml, '::Tilt::HamlTemplate')

    View Slide

  28. grease (New!)
    • https://github.com/yasaichi/grease
    • Tiltͷ൚༻ΠϯλʔϑΣΠεΛSprocketsͷ
    Processorʹม׵͢ΔAdapterΛఏڙ
    • v4Ҏ߱Ͱ΋Tiltͷࢿ࢈Λ׆͔͢͜ͱ͕Ͱ͖Δ
    ※ ͜ΕͰgakubuchiͷv4ରԠ͠·͢ʢະணखʣ

    View Slide

  29. • Sprockets΁ͷొ࿥࣌ʹgreaseͰม׵͢Δ͚ͩ
    ref. https://github.com/yasaichi/grease/blob/v0.2.0/README.md
    ྫ: HamlΛv3Ҏ߱Ͱར༻͢Δ
    # For v3
    register_engine ".haml", Grease.apply(Tilt::HamlTemplate),
    mime_type: "text/html", silence_deprecation: true
    # For v4
    register_mime_type "text/haml", extensions: %w(.haml)
    register_transformer "text/haml", "text/html",
    Grease.apply(Tilt::HamlTemplate)

    View Slide

  30. Conclusion

    View Slide

  31. ·ͱΊ
    • Sprocketsͷ͜Ε·Ͱͱ͜Ε͔ΒΛઆ໌ͨ͠
    1. Past and Present
    2. Future: Sprockets 4
    3. Extension interface changes

    ※ gem։ൃऀ޲͚

    View Slide

  32. Past and Present
    • assetͷίϯύΠϧͱ഑৴Λߦ͏ͨΊͷgem
    • Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺAssetɹ
    Pipelineʹར༻͞Ε͍ͯΔ
    • v2 -> v3ʢ໿4೥ʣͰ͸ϢʔβʔଆͷAPIʹ

    େ͖ͳมԽ͸ͳ͔ͬͨ

    View Slide

  33. Future: Sprockets 4
    • ৽ػೳ: Source Maps, ES6 Support
    • ։ൃ؀ڥͰ΋assetͷ݁߹ɾѹॖ͕Ͱ͖Δ

    Α͏ʹͳΓɺ։ൃͷߴ଎Խ͕ظ଴͞ΕΔ
    • JSͷ৽͍͠࢓༷ʹ͍ͭ·Ͱ௥ैͰ͖Δ͔৺഑
    ͢ΔΑ͏ͳਓ͸ͦ΋ͦ΋ର৅ʹͯ͠ͳ͍ײ

    View Slide

  34. Extension interface changes
    • v3Ͱେ͖ͳมߋ͕͋ͬͨ
    • EngineʢTilt४ڌʣͷஈ֊తഇࢭ
    • v4ͰͷSource MapsରԠͷͨΊ
    • greaseΛ࢖ͬͯv4ʹରԠ͠Α͏

    View Slide

  35. Happy coding on Rails!

    View Slide