Slide 1
Slide 1 text
The State of Sprockets
Ruby on Rails Tech Meetup 2016/10/24
yasaichi
Slide 2
Slide 2 text
self.inspect
• Twitter: @_yasaichi
• GitHub: yasaichi
• OSS: gakubuchi
• Blog: http://web-salad.hateblo.jp
Slide 3
Slide 3 text
[PR] Software Design 8݄߸
• RRRSpecʹ͍ͭͯͷ
هࣄΛدߘ
• ςετͷ࣮ߦ࣌ؒʹ
͓ΈͷํͲ͏ͧ
※ 70->15ʹʂ@ฐࣾ
Slide 4
Slide 4 text
৽֞݁ҥ͞Μͱڞԋ ✌
@Ր༵υϥϚʮಀ͛Δஏ͕ͩʹཱͭʯ
Slide 5
Slide 5 text
Outline
1. Past and Present
2. Future: Sprockets 4
3. Extension interface changes
Slide 6
Slide 6 text
Past and Present
Slide 7
Slide 7 text
Sprocketsͱ
"Sprockets is a Ruby library for
compiling and serving web
assets."
- https://github.com/rails/sprockets/blob/3.x/README.md
Slide 8
Slide 8 text
Compiling web assets
• ґଘͷఆٛͱassetͷ࿈݁
• CoffeeScript, Sass/SCSSͷτϥϯεύΠϧ
• CSS, JSͷѹॖ
• ϑΝΠϧ໊ʹdigestΛ༩
Slide 9
Slide 9 text
Serving web assets
• RackΞϓϦέʔγϣϯͱ࣮ͯ͠
• ಛఆͷURLʹϚϯτͯ͠͏
Railsͷ߹: /assets -> /public/assets
• ϑϨʔϜϫʔΫΛΘͣར༻Ͱ͖Δ
ྫ: Rails, Sinatra
Slide 10
Slide 10 text
Railsͱͷؔ
• Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺҎ߱
ޓ͍ʹಠཱͯ͠։ൃ͞Ε͍ͯΔ
• RailsSprocketsʹΑΓAsset PipelineΛ࣮
• Railsݻ༗ͷॲཧsprockets-rails gem͕ٵऩ
ྫ: RakeλεΫͷొɺॳظԽ ͳͲ
Slide 11
Slide 11 text
Sprockets 3
• ݱࡏͷϝδϟʔόʔδϣϯ
• v2 -> v3ʢ͜ͷؒ4ʣ
• ϢʔβʔଆͷAPI͋·ΓมΘ͍ͬͯͳ͍
• ֦ு͢Δํ๏͕େ͖͘มΘͬͨʢޙड़ʣ
Slide 12
Slide 12 text
Future: Sprockets 4
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Source Maps
• developmentϞʔυʹ͓͚Δڍಈ͕มΘΔ
• v3·Ͱ: ϑΝΠϧΛͻͱͭͣͭ৴
• v4: application.(js|css) + Source Maps͚ͩ
-> ґଘϑΝΠϧ͕ଟ͍߹ʹߴԽ͕ظ
Slide 15
Slide 15 text
͏ͻͱͭͷԸܙ: 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ͱ
ಉ͡ઃఆ͕͑Δ
Slide 16
Slide 16 text
Sprockets 4 would make
development faster!
Slide 17
Slide 17 text
ES6 Support
• babel-transpiler gemͱͷΈ߹ΘͤͰ࣮ݱ
• babel-transpilerbabel-sourceʹґଘ
• babel-sourceBabel 5ܥΛgemԽͨ͠ͷ
• ֦ுࢠ͕.es6ͷϑΝΠϧͰ༗ޮ
Slide 18
Slide 18 text
Pros and Cons
⭕ ໘ͳઃఆͳ͠ͰαΫοͱES6͕ॻ͚Δ
❌ Babel 5ܥΛར༻͍ͯ͠Δ
• Plugin/PresetsͪΖΜ͑ͳ͍
• ৽͍༷͠ʹ͍ͭ·ͰैͰ͖Δ͔ʁ
Slide 19
Slide 19 text
ྫ: ·͡Ίʹߟ͑Δ߹
1. Browserify/WebpackͰϏϧυ
2. SprocketsͷཧԼʢapp/assetsʣʹग़ྗ
3. digestͷ༩ͱ৴ΛSprocketsʹͤΔ
ref. WebPackΛͬͯRails͔ΒJavaScriptΛָʹྑ͍ײ͡ʹ͢Δ
http://qiita.com/necojackarc/items/afa674ab10aafa9784eb
Slide 20
Slide 20 text
Extension interface
changes
Slide 21
Slide 21 text
Extensionͱ
• ඪ४ʹͳ͍ॲཧΛՃ͍ͨ࣌͠ͷͨΊʹ
Sprockets͕༻ҙ͍ͯ͠Δػߏ
• ໊শͱΠϯλʔϑΣΠε͕มԽ͖ͯͨ͠
1. Engine (v2 - v3)
2. Processor (v3 ~)
Slide 22
Slide 22 text
Engine (v2 - v3)
• TiltʢςϯϓϨʔτΤϯδϯͷ൚༻Πϯλʔ
ϑΣΠεΛఏڙ͢Δgemʣʹ४ڌ
• ςϯϓϨʔτͷύεΛࢦఆͯ͠ॳظԽ͠ɺ
#renderϝιουͰධՁ݁ՌͷจࣈྻΛฦ͢
• v3ͰඇਪͱͳΓv4Ͱഇࢭ
Slide 23
Slide 23 text
ྫ: 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Λ࣮
Slide 24
Slide 24 text
Processor (v3 ~)
• HashΛड͚औͬͯHashΛฦ͢#callϝιουΛ
࣮ͨ͠ΦϒδΣΫτ
• ม݁Ռʹؔ͢ΔใΛProcessorؒͰڞ༗
͍ͨ͠ͱ͍͏Ϟνϕʔγϣϯ͔Βੜ·Εͨ
-> v4ͰSource MapsΛಋೖ͢Δ͜ͱ͕Ͱ͖ͨ
Slide 25
Slide 25 text
ྫ: 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Λฦ͢Α͏ʹ࣮
Slide 26
Slide 26 text
gakubuchi
• https://github.com/yasaichi/gakubuchi
• ੩తϖʔδΛAsset PipelineͰཧ͢ΔͨΊͷgem
• CSS/JSΛ֎෦ϑΝΠϧʹͰ͖Δ
• Haml/SlimͳͲͰίʔσΟϯάͰ͖Δ
• ΤϥʔϖʔδͳͲΛαΫοͱॻ͖͍ͨ࣌ʹศར
Slide 27
Slide 27 text
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')
Slide 28
Slide 28 text
grease (New!)
• https://github.com/yasaichi/grease
• Tiltͷ൚༻ΠϯλʔϑΣΠεΛSprocketsͷ
Processorʹม͢ΔAdapterΛఏڙ
• v4Ҏ߱ͰTiltͷࢿ࢈Λ׆͔͢͜ͱ͕Ͱ͖Δ
※ ͜ΕͰgakubuchiͷv4ରԠ͠·͢ʢະணखʣ
Slide 29
Slide 29 text
• 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)
Slide 30
Slide 30 text
Conclusion
Slide 31
Slide 31 text
·ͱΊ
• Sprocketsͷ͜Ε·Ͱͱ͜Ε͔ΒΛઆ໌ͨ͠
1. Past and Present
2. Future: Sprockets 4
3. Extension interface changes
※ gem։ൃऀ͚
Slide 32
Slide 32 text
Past and Present
• assetͷίϯύΠϧͱ৴Λߦ͏ͨΊͷgem
• Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺAssetɹ
Pipelineʹར༻͞Ε͍ͯΔ
• v2 -> v3ʢ4ʣͰϢʔβʔଆͷAPIʹ
େ͖ͳมԽͳ͔ͬͨ
Slide 33
Slide 33 text
Future: Sprockets 4
• ৽ػೳ: Source Maps, ES6 Support
• ։ൃڥͰassetͷ݁߹ɾѹॖ͕Ͱ͖Δ
Α͏ʹͳΓɺ։ൃͷߴԽ͕ظ͞ΕΔ
• JSͷ৽͍༷͠ʹ͍ͭ·ͰैͰ͖Δ͔৺
͢ΔΑ͏ͳਓͦͦରʹͯ͠ͳ͍ײ
Slide 34
Slide 34 text
Extension interface changes
• v3Ͱେ͖ͳมߋ͕͋ͬͨ
• EngineʢTilt४ڌʣͷஈ֊తഇࢭ
• v4ͰͷSource MapsରԠͷͨΊ
• greaseΛͬͯv4ʹରԠ͠Α͏
Slide 35
Slide 35 text
Happy coding on Rails!