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
Throw away Sprockets!!
Search
Tomohiro Hashidate
September 21, 2014
Programming
7
2.8k
Throw away Sprockets!!
SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話
Tomohiro Hashidate
September 21, 2014
Tweet
Share
More Decks by Tomohiro Hashidate
See All by Tomohiro Hashidate
rubygem開発で鍛える設計力
joker1007
3
900
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
1k
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
1k
5分で分かった気になるDebezium
joker1007
1
120
Rustで作るtree-sitterパーサーのRubyバインディング
joker1007
5
1.3k
tree-sitter-rbsで作って学ぶRBSとパーサージェネレーター
joker1007
3
290
Kafka Streamsで作る10万rpsを支えるイベント駆動マイクロサービス
joker1007
7
4.8k
neovimで作る最新Ruby開発環境2023
joker1007
3
4.5k
ReproのImport/Exportを支えるサーバーレスアーキテクチャ
joker1007
1
1.3k
Other Decks in Programming
See All in Programming
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
780
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
530
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
420
AIのメモリー
watany
12
1.2k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
150
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.1k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.3k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
900
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
710
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Statistics for Hackers
jakevdp
799
220k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Rails Girls Zürich Keynote
gr2m
95
14k
Practical Orchestrator
shlominoach
190
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Music & Morning Musume
bryan
46
6.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
Throw away Sprockets!! Tomohiro Hashidate (joker1007)
in Japanese... Rails の片手間でJS を 書く人のための JS ビルドツー ル入門
Self Introduction Tomohiro Hashidate (joker1007)
Skill Ratio ‒ Ruby/Rails: 6 JavaScript: 3 Scala: 1
Sprockets is not required now Let's use ecosystem of JavaScript
Why JavaScript Ecosystem? Libraries version control alt‒JS handling More general
technique, Not specialized for Rails
How do you update JS Libraries?
Ruby way or manual *‒rails gem git submodule Or Manual
?
JavaScript Package Manager npm bower
railsassets.org convert from bower packages to rubygems
altJS is increasing CoffeeScript TypeScript LiveScript scala.js PureScript etc ...
*rails gem cannot fully follow them
I want to learn technique not specialized for Rails.
Sprockets features VS JS Ecosystem
require directive (Sprockets) //= require jquery //= require jquery_ujs //=
require lodash //= require backbone
browserify, webpack enable CommonJS Style require. Command $ npm install
browserify tsify jquery backbone $ browserify -p tsify bundle.ts > bundle.js JS var jQuery = require('jquery'); var Backbone = require('backbone'); TypeScript import jQuery = require('jquery'); import Backbone = require('backbone');
Embed JS libraries and define require function
Compile altJS, Sass And minify assets (Sprockets)
(gulp or grunt) and compiler and livereload npm install coffee-script
tsify gulp-ruby-sass gulp-uglify gulp.task 'browserify', -> browserify(entries: ["assets/ts/bundle.ts"]) .plugin("tsify") .bundle() .pipe(source("bundle.js")) .pipe(streamify(uglify())) .pipe(gulp.dest("public/assets/bundle.js"))
gulp.task 'sass', ['glyphicon'], -> gulp.src(['frontend/assets/stylesheets/**/*.scss', 'frontend/assets/stylesheets/** .pipe(gulp.dest("public/assets/sass")) .pipe(plumber()) .pipe(sass( sourcemap:
true sourcemapPath: "./sass" compass: true bundleExec: true loadPath: [ "./bower_components" ] )).pipe(gulp.dest("public/assets"))
Debugging (sprockets)
Use sourcemap browserify(entries: ["assets/ts/bundle.ts"], debug: true)
digest asset (Sprocets) application-1305b1f70b09d06be2d6e1a074f38a29.js
gulprev and generate manifest.json rev = require("gulp-rev") manifest = require("gulp-rev-rails-manifest")
browserify(....) .bundle() .pipe(streamify(rev())) .pipe(gulp.dest("public/assets")) .pipe(manifest()) .pipe(gulp.dest("public/assets"))
joker1007/gulprevrails manifest Output manifest.json for Rails assets helper
testing (Sprockets)
Use Mocha, power assert espowerify enable power‒assert on browserify. ///
<reference path="../../frontend/assets/typings/tsd.d.ts" /> /// <reference path="../../frontend/assets/typings/power-assert.d.ts" /> import assert = require('power-assert'); import Hello = require('../../frontend/assets/javascripts/hello'); var hello = Hello.hello; var fib = Hello.fib; describe('hello', () => { it('should return "Hello, name"', () => { assert(hello("Name") == "Hello, Name"); }) });
Use test runner testem karma
None
I implemented sample application typescript browserify gulp gulp‒sass gulp‒rev gulp‒rev‒rails‒manifest
jquery backbone, marionette power‒assert
joker1007/rails_browserify_s ample