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
1
110
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
870
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
240
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
8
1.8k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.8k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
21k
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
400
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
143
90k
Other Decks in Technology
See All in Technology
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
330
OPENLOGI Company Profile
hr01
0
60k
クラウドサービス事業者におけるOSS
tagomoris
3
970
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
180
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
530
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
74k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
250
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
450
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
170
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
270
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.4k
KATA
mclloyd
29
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Facilitating Awesome Meetings
lara
52
6.2k
The Invisible Side of Design
smashingmag
299
50k
Practical Orchestrator
shlominoach
186
10k
Code Review Best Practice
trishagee
67
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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!