Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Smaller JS Packages w/ Rails 3 Asset Pipeline

Avatar for mleglise mleglise
May 04, 2012
Programming
2
280

Smaller JS Packages w/ Rails 3 Asset Pipeline

From my talk at SD Ruby on 5/3/12. Slides provide an overview of the Garber-Irish "DOM-based Routing" method in Rails. Remainder of presentation was centered around code available here:
https://github.com/mleglise/rails-dom-routing-example

Avatar for mleglise

mleglise

May 04, 2012
Tweet

Other Decks in Programming

See All in Programming
Playwrightはどのようにクロスブラウザをサポートしているのか
Avatar for nus3 yotahada3
7
2.1k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
Avatar for Marco Roth marcoroth
3
510
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう！ #FEC余熱NIGHT
Avatar for Masayuki Izumi izumin5210
1
180
プログラマのための作曲入門
Avatar for CHEEBOW cheebow
0
480
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
Avatar for nekowen nekowen
0
190
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
240
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
Avatar for TOMIKAWA Sotaro ssssota
2
860
私はどうやって技術力を上げたのか
Avatar for Yusuke Wada yusukebe
35
15k
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
Avatar for kinocoboy kinocoboy2
4
610
iOSDC.pdf
Avatar for ビスター chronos2500
2
610
まだ世にないサービスをAIと創る話 〜 失敗から学ぶフルスタック開発への挑戦 〜
Avatar for Katato katayamatg
0
160
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
Avatar for Atsuya Sato natmark
0
130

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
78
6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k

Transcript

  1. Smaller JS Packages w/ Rails 3 Asset Pipeline Marc Leglise

    May 3rd, 2012

  2. “DOM-based Routing” Garber-Irish implementation Last Month at SDRb... presented by

    Rafael Cardoso

  3. <body data-controller="<%= controller_name %>" data-action="<%= action_name %>"> <body data-controller="users" data-action="show">

    app/views/layouts/application.html

  4. var RAILS = window.RAILS = {}; RAILS.controllers = {}; RAILS.currentPage

    = { controller: body.getAttribute( “data-controller” ), action: body.getAttribute( “data-action” ) }; app/assets/javascripts/rails_init.js

  5. window.RAILS.controllers.users = { init: function(){ // Do things on every

    Users#action }, show: function(){ // Do things on Users#show } }; app/assets/javascripts/rails/users_controller.js

  6. window.RAILS.controllers.common = { init: function(){ // Do things on EVERY

    page } }; app/assets/javascripts/rails/common_controller.js

  7. var UTIL = {}; UTIL.exec = function( controller, action ){

    var ns = window.RAILS.controllers, action = (action===undefined) ? "init":action; if( controller !== "" && ns[controller] && typeof ns[controller][action] == "function" ) { ns[controller][action](); } }; app/assets/javascripts/rails_start.js

  8. ...continued // Trigger all 3 actions for the current page.

    UTIL.init = function(){ UTIL.exec( "common" ); UTIL.exec( RAILS.currentPage.controller ); UTIL.exec( RAILS.currentPage.controller, RAILS.currentPage.action ); }; $(document).ready( UTIL.init ); app/assets/javascripts/rails_start.js

  9. $(document).ready( function(){ RAILS.common.init(); RAILS.users.init(); RAILS.users.show(); }); document is ready...

  10. Download all your JS together Only execute what’s appropriate

  11. SWEET!

  12. What if application.js is HUGE?

  13. application.js is a default it is NOT your only option

  14. And now some code... https:/ /github.com/mleglise/rails-dom-routing- example