Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The State of Sprockets
Search
Yuichi Goto
October 24, 2016
Technology
2
3.2k
The State of Sprockets
Ruby on Rails Tech Meetup(2016/10/24)
Yuichi Goto
October 24, 2016
Tweet
Share
More Decks by Yuichi Goto
See All by Yuichi Goto
[Teaser] Type-Safe Lightweight DDD with Effect Schema
yasaichi
2
400
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
1.6k
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
320
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
9
2.3k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
3.1k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
22k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
21k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
450
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
144
93k
Other Decks in Technology
See All in Technology
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
140
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
260
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
7
2k
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
880
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
210
CoRL 2025 Survey
harukiabe
1
200
incident_commander_demaecan__1_.pdf
demaecan
0
130
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
120
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
140
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
240
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
760
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Gamification - CAS2011
davidbonilla
81
5.5k
For a Future-Friendly Web
brad_frost
180
9.9k
Producing Creativity
orderedlist
PRO
347
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
The Art of Programming - Codeland 2020
erikaheidi
56
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Building an army of robots
kneath
306
46k
Docker and Python
trallard
46
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Transcript
The State of Sprockets Ruby on Rails Tech Meetup 2016/10/24
yasaichi
self.inspect • Twitter: @_yasaichi • GitHub: yasaichi • OSS: gakubuchi
• Blog: http://web-salad.hateblo.jp
[PR] Software Design 8݄߸ • RRRSpecʹ͍ͭͯͷ هࣄΛدߘ • ςετͷ࣮ߦ࣌ؒʹ ͓ΈͷํͲ͏ͧ
※ 70->15ʹʂ@ฐࣾ
৽֞݁ҥ͞Μͱڞԋ ✌ @Ր༵υϥϚʮಀ͛Δஏ͕ͩʹཱͭʯ
Outline 1. Past and Present 2. Future: Sprockets 4 3.
Extension interface changes
Past and Present
Sprocketsͱ "Sprockets is a Ruby library for compiling and serving
web assets." - https://github.com/rails/sprockets/blob/3.x/README.md
Compiling web assets • ґଘͷఆٛͱassetͷ࿈݁ • CoffeeScript, Sass/SCSSͷτϥϯεύΠϧ • CSS,
JSͷѹॖ • ϑΝΠϧ໊ʹdigestΛ༩
Serving web assets • RackΞϓϦέʔγϣϯͱ࣮ͯ͠ • ಛఆͷURLʹϚϯτͯ͠͏ Railsͷ߹: /assets ->
/public/assets • ϑϨʔϜϫʔΫΛΘͣར༻Ͱ͖Δ ྫ: Rails, Sinatra
Railsͱͷؔ • Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺҎ߱ ޓ͍ʹಠཱͯ͠։ൃ͞Ε͍ͯΔ • RailsSprocketsʹΑΓAsset PipelineΛ࣮ • Railsݻ༗ͷॲཧsprockets-rails
gem͕ٵऩ ྫ: RakeλεΫͷొɺॳظԽ ͳͲ
Sprockets 3 • ݱࡏͷϝδϟʔόʔδϣϯ • v2 -> v3ʢ͜ͷؒ4ʣ • ϢʔβʔଆͷAPI͋·ΓมΘ͍ͬͯͳ͍
• ֦ு͢Δํ๏͕େ͖͘มΘͬͨʢޙड़ʣ
Future: Sprockets 4
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
Source Maps • developmentϞʔυʹ͓͚Δڍಈ͕มΘΔ • v3·Ͱ: ϑΝΠϧΛͻͱͭͣͭ৴ • v4: application.(js|css)
+ Source Maps͚ͩ -> ґଘϑΝΠϧ͕ଟ͍߹ʹߴԽ͕ظ
͏ͻͱͭͷԸܙ: 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ͱ ಉ͡ઃఆ͕͑Δ
Sprockets 4 would make development faster!
ES6 Support • babel-transpiler gemͱͷΈ߹ΘͤͰ࣮ݱ • babel-transpilerbabel-sourceʹґଘ • babel-sourceBabel 5ܥΛgemԽͨ͠ͷ
• ֦ுࢠ͕.es6ͷϑΝΠϧͰ༗ޮ
Pros and Cons ⭕ ໘ͳઃఆͳ͠ͰαΫοͱES6͕ॻ͚Δ ❌ Babel 5ܥΛར༻͍ͯ͠Δ • Plugin/PresetsͪΖΜ͑ͳ͍
• ৽͍༷͠ʹ͍ͭ·ͰैͰ͖Δ͔ʁ
ྫ: ·͡Ίʹߟ͑Δ߹ 1. Browserify/WebpackͰϏϧυ 2. SprocketsͷཧԼʢapp/assetsʣʹग़ྗ 3. digestͷ༩ͱ৴ΛSprocketsʹͤΔ ref. WebPackΛͬͯRails͔ΒJavaScriptΛָʹྑ͍ײ͡ʹ͢Δ
http://qiita.com/necojackarc/items/afa674ab10aafa9784eb
Extension interface changes
Extensionͱ • ඪ४ʹͳ͍ॲཧΛՃ͍ͨ࣌͠ͷͨΊʹ Sprockets͕༻ҙ͍ͯ͠Δػߏ • ໊শͱΠϯλʔϑΣΠε͕มԽ͖ͯͨ͠ 1. Engine (v2 -
v3) 2. Processor (v3 ~)
Engine (v2 - v3) • TiltʢςϯϓϨʔτΤϯδϯͷ൚༻Πϯλʔ ϑΣΠεΛఏڙ͢Δgemʣʹ४ڌ • ςϯϓϨʔτͷύεΛࢦఆͯ͠ॳظԽ͠ɺ #renderϝιουͰධՁ݁ՌͷจࣈྻΛฦ͢
• v3ͰඇਪͱͳΓv4Ͱഇࢭ
ྫ: 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Λ࣮
Processor (v3 ~) • HashΛड͚औͬͯHashΛฦ͢#callϝιουΛ ࣮ͨ͠ΦϒδΣΫτ • ม݁Ռʹؔ͢ΔใΛProcessorؒͰڞ༗ ͍ͨ͠ͱ͍͏Ϟνϕʔγϣϯ͔Βੜ·Εͨ ->
v4ͰSource MapsΛಋೖ͢Δ͜ͱ͕Ͱ͖ͨ
ྫ: 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Λฦ͢Α͏ʹ࣮
gakubuchi • https://github.com/yasaichi/gakubuchi • ੩తϖʔδΛAsset PipelineͰཧ͢ΔͨΊͷgem • CSS/JSΛ֎෦ϑΝΠϧʹͰ͖Δ • Haml/SlimͳͲͰίʔσΟϯάͰ͖Δ
• ΤϥʔϖʔδͳͲΛαΫοͱॻ͖͍ͨ࣌ʹศར
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')
grease (New!) • https://github.com/yasaichi/grease • Tiltͷ൚༻ΠϯλʔϑΣΠεΛSprocketsͷ Processorʹม͢ΔAdapterΛఏڙ • v4Ҏ߱ͰTiltͷࢿ࢈Λ׆͔͢͜ͱ͕Ͱ͖Δ ※
͜ΕͰgakubuchiͷv4ରԠ͠·͢ʢະணखʣ
• 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)
Conclusion
·ͱΊ • Sprocketsͷ͜Ε·Ͱͱ͜Ε͔ΒΛઆ໌ͨ͠ 1. Past and Present 2. Future: Sprockets
4 3. Extension interface changes ※ gem։ൃऀ͚
Past and Present • assetͷίϯύΠϧͱ৴Λߦ͏ͨΊͷgem • Rails 3.1ͱಉ࣌ʹv2͕ϦϦʔε͞ΕɺAssetɹ Pipelineʹར༻͞Ε͍ͯΔ •
v2 -> v3ʢ4ʣͰϢʔβʔଆͷAPIʹ େ͖ͳมԽͳ͔ͬͨ
Future: Sprockets 4 • ৽ػೳ: Source Maps, ES6 Support •
։ൃڥͰassetͷ݁߹ɾѹॖ͕Ͱ͖Δ Α͏ʹͳΓɺ։ൃͷߴԽ͕ظ͞ΕΔ • JSͷ৽͍༷͠ʹ͍ͭ·ͰैͰ͖Δ͔৺ ͢ΔΑ͏ͳਓͦͦରʹͯ͠ͳ͍ײ
Extension interface changes • v3Ͱେ͖ͳมߋ͕͋ͬͨ • EngineʢTilt४ڌʣͷஈ֊తഇࢭ • v4ͰͷSource MapsରԠͷͨΊ
• greaseΛͬͯv4ʹରԠ͠Α͏
Happy coding on Rails!