The State of Sprockets

Ruby on Rails Tech Meetup（2016/10/24）

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