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.1k
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
290
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
1.3k
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
290
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
9
2.3k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.9k
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
20k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
430
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
144
91k
Other Decks in Technology
See All in Technology
Streamline Cloud-Native App Development Using CDEs
saeedzf
0
680
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.2k
Introduction to Bill One Development Engineer
sansan33
PRO
0
230
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
7
890
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
540
初めてのGoogle Cloud by AWS出身者
harukasakihara
1
730
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
Postman AI エージェントビルダー最新情報
nagix
0
190
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
120
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
It's Worth the Effort
3n
184
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Navigating Team Friction
lara
185
15k
Designing for Performance
lara
608
69k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
740
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!