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
320
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
1.4k
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
300
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
9
2.3k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
3k
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
440
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
144
92k
Other Decks in Technology
See All in Technology
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
590
2025-06-26 GitHub CopilotとAI駆動開発:実践と導入のリアル
fl_kawachi
1
240
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
100
AI導入の理想と現実~コストと浸透〜
oprstchn
0
150
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
230
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
250
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
340
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
240
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
100
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Being A Developer After 40
akosma
90
590k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Docker and Python
trallard
44
3.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Language of Interfaces
destraynor
158
25k
BBQ
matthewcrist
89
9.7k
Statistics for Hackers
jakevdp
799
220k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
A designer walks into a library…
pauljervisheath
207
24k
Designing for Performance
lara
609
69k
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!