The State of Sprockets

Transcript

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

   yasaichi

2. self.inspect • Twitter: @_yasaichi • GitHub: yasaichi • OSS: gakubuchi

   • Blog: http://web-salad.hateblo.jp

3. [PR] Software Design 8݄߸ • RRRSpecʹ͍ͭͯͷ هࣄΛدߘ • ςετͷ࣮ߦ࣌ؒʹ ͓೰Έͷํ͸Ͳ͏ͧ

   ※ 70->15෼ʹʂ@ฐࣾ

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

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

   Extension interface changes

6. Past and Present

7. Sprocketsͱ͸ "Sprockets is a Ruby library for compiling and serving

   web assets." - https://github.com/rails/sprockets/blob/3.x/README.md

8. Compiling web assets • ґଘͷఆٛͱassetͷ࿈݁ • CoffeeScript, Sass/SCSSͷτϥϯεύΠϧ • CSS,

   JSͷѹॖ • ϑΝΠϧ໊ʹdigest஋Λ෇༩

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

   /public/assets • ϑϨʔϜϫʔΫΛ໰Θͣར༻Ͱ͖Δ
 ྫ: Rails, Sinatra

10. Railsͱͷؔ܎ • Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺҎ߱͸
 ޓ͍ʹಠཱͯ͠։ൃ͞Ε͍ͯΔ • Rails͸SprocketsʹΑΓAsset PipelineΛ࣮૷ • Railsݻ༗ͷॲཧ͸sprockets-rails

    gem͕ٵऩ
 ྫ: RakeλεΫͷొ࿥ɺॳظԽ ͳͲ

11. Sprockets 3 • ݱࡏͷϝδϟʔόʔδϣϯ • v2 -> v3ʢ͜ͷؒ໿4೥ʣ • ϢʔβʔଆͷAPI͸͋·ΓมΘ͍ͬͯͳ͍

    • ֦ு͢Δํ๏͕େ͖͘มΘͬͨʢޙड़ʣ

12. Future: Sprockets 4

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

14. Source Maps • developmentϞʔυʹ͓͚Δڍಈ͕มΘΔ • v3·Ͱ: ϑΝΠϧΛͻͱͭͣͭ഑৴ • v4: application.(js|css)

    + Source Maps͚ͩ -> ґଘϑΝΠϧ਺͕ଟ͍৔߹ʹߴ଎Խ͕ظ଴

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ͱ ಉ͡ઃఆ͕࢖͑Δ

16. Sprockets 4 would make development faster!

17. ES6 Support • babel-transpiler gemͱͷ૊Έ߹ΘͤͰ࣮ݱ • babel-transpiler͸babel-sourceʹґଘ • babel-source͸Babel 5ܥΛgemԽͨ͠΋ͷ

    • ֦ுࢠ͕.es6ͷϑΝΠϧͰ༗ޮ

18. Pros and Cons ⭕ ໘౗ͳઃఆͳ͠ͰαΫοͱES6͕ॻ͚Δ ❌ Babel 5ܥΛར༻͍ͯ͠Δ఺ • Plugin/Presets͸΋ͪΖΜ࢖͑ͳ͍

    • ৽͍͠࢓༷ʹ͍ͭ·Ͱ௥ैͰ͖Δ͔ʁ

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


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

20. Extension interface changes

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

    v3) 2. Processor (v3 ~)

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

    • v3Ͱඇਪ঑ͱͳΓv4Ͱഇࢭ

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Λ࣮૷

24. Processor (v3 ~) • HashΛड͚औͬͯHashΛฦ͢#callϝιουΛ ࣮૷ͨ͠ΦϒδΣΫτ • ม׵݁Ռʹؔ͢Δ৘ใΛProcessorؒͰڞ༗
 ͍ͨ͠ͱ͍͏Ϟνϕʔγϣϯ͔Βੜ·Εͨ ->

    v4ͰSource MapsΛಋೖ͢Δ͜ͱ͕Ͱ͖ͨ

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Λฦ͢Α͏ʹ࣮૷

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

    • ΤϥʔϖʔδͳͲΛαΫοͱॻ͖͍ͨ࣌ʹศར

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

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

    ͜ΕͰgakubuchiͷv4ରԠ͠·͢ʢະணखʣ

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)

30. Conclusion

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

    4 3. Extension interface changes
 ※ gem։ൃऀ޲͚

32. Past and Present • assetͷίϯύΠϧͱ഑৴Λߦ͏ͨΊͷgem • Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺAssetɹ Pipelineʹར༻͞Ε͍ͯΔ •

    v2 -> v3ʢ໿4೥ʣͰ͸ϢʔβʔଆͷAPIʹ
 େ͖ͳมԽ͸ͳ͔ͬͨ

33. Future: Sprockets 4 • ৽ػೳ: Source Maps, ES6 Support •

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

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

    • greaseΛ࢖ͬͯv4ʹରԠ͠Α͏

35. Happy coding on Rails!