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
2.9k
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
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.2k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
19k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
19k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
320
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
139
85k
SSR以後の世界へ / techcamp05
yasaichi
3
1.5k
サービス開発の現場からOSSを生み出す思考技術 / genbaweb04
yasaichi
3
1.1k
Capybaraで変更に強いE2Eテストを書く / TokyuRubyKaigi12
yasaichi
6
2.1k
今更始めるGo言語 / techcamp04
yasaichi
0
2.9k
Other Decks in Technology
See All in Technology
NewSQL Landscape
oracle4engineer
PRO
0
140
生産性向上チームの紹介
cybozuinsideout
PRO
1
960
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.8k
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
600
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
180
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
840
.NET Profiler in 2024.
kkamegawa
2
2.3k
Cloud Service Mesh に触れ合う
phaya72
1
280
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
5
2.4k
同じ様なUIをiOS/Android間で合わせるヒントNo.2
fumiyasac0921
1
110
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
210
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
7
2.1k
Featured
See All Featured
Music & Morning Musume
bryan
41
5.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Designing for Performance
lara
601
67k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
How GitHub (no longer) Works
holman
305
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
Practical Orchestrator
shlominoach
183
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Web development in the modern age
philhawksworth
203
10k
It's Worth the Effort
3n
180
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
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!