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
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!