fukajun · March 31, 2015 04:17
diff --git a/minamirb-lt-2015-03-28.html b/minamirb-lt-2015-03-28.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
      body { 
        font-family: 'VL Gothic';
      }
      .remark-slide-content h1,
      .remark-slide-content h2,
      .remark-slide-content h3 {
        font-size: 44px;
        font-weight: normal;
      }
      ul {
        font-size: 18pt;
      }
      .remark-code, .remark-inline-code {
        font-family: 'VL Gothic', Consolas, 'Courier New', Courier, Monaco, monospace;
        font-size: 16pt;
      }
    </style>
  </head>
  <body>
 <textarea id="source">

 class: center, middle
 # RailsにおけるJavascriptのエンドポイントどうする？

 fukajun minami.rb 2015-03-28 最初で最後のLT大会
 ---
 # 自己紹介

 - @fukajun
 - minami.rbでrailsはじめました
 - sendagaya.rbという勉強会をやっています　まもなく100回目
 - Railsで仕事してる at メガネ通販
 - ruby,rails,javascript, backbone.js, vue.js, react.js, node.js
 - RubyKaja2014 new

 ---
 class: center, middle
 # 話したいこと

 #　Railsで特定のページ毎にJSの実行を分けたい

 ---
 # 背景
 - UX向上のためリッチなUI　`静的　< ココ < SPA`
 - どのページでもなにかしらのJSをの実行が必要

 ???
 ページが増えるとjavascriptが増える
 ---
 # 方法: selector による実行

 ```haml
 %body
  %ul.articles-list
     %li ruby
     %li c++
 ```

 ```coffeescript
 # articles.js
 $('.articles-list').hide()

 # users.js
 $('.users-list').fadeOut().fadeIn()
 ```

 ---
 # 課題
 - articles.js, users.jsなどファイル分割して管理してる → application.js
 - 全ページでページ個別の処理が呼ばれてしまってたりする
 - どこで使われている処理なのかわからない
 - 不要だと思うけど消せない
 - なんかエラーが出てるけど修正できない
 - 触らぬ神にたたり無し
 - 逆にこのパーシャルで必要なJSの処理があるはずなんだけどどれよべばいいんだっけ?
 ---

 class: center, middle
 # 解決できそうな方法


 ---
 # 方法: id,classをつけて制御系

 ```haml
 %body{ class: "#{controller_name}-#{action_name}" }
 ```

 ```coffeescript
 if $('body').hasClass('.posts-new')
  console.log 'munya munya'
 ```

 ---
 # メリデリ

 - メリット
  - シンプル
 - デメリット
  - アクション単位になる

 ???
 メモ: このプラグイン便利そう

 ```coffeescript
 $('.articles-new').ready( ->
  # DOMに対する処理
 ```

 https://github.com/Verba/jquery-readyselector
 ---
 # 方法: inlineスクリプト

 ```haml
 @posts.each do |post|
  .post= post.name

 :coffeescript
  $ ->
    $('.post').each, ->
    console.log $(@).text()
 ```

 ---
 # メリデリ

 - メリット
  - すげぇわかりやすい
  - rubyのコードで分岐できたりする便利
 - デメリット
  - rubyのコードから引き剥がしにくくなる
  - 重複したコードが増える原因にもなる(適度に外部化すれば良いけど)

 ---
 # 方法: 読み込むjsファイルで制御

 ```haml
 javascript_include_tag 'post'
 ```

 ---
 # メリデリ

 - メリット
  - わかりやすい
 - デメリット
  - asset_pipelineを生かせてない

 ---
 # 方法: URLに応じて実行を分けるようにする

 dispatcherで、location.path毎に呼び分ける

 ```coffeescript
 dispathcher '.', ->
  # 全ページで使うよう内容
 
 dispatcher'^/articles$', ->
  # /articlesで使う内容
 ```

 ---
 # 方法: こういう仕組み作った invoker

 ```haml
 # app/views/posts/index.html.haml
 = js_invoke_tag # = <div data-js-invoke='post/index'></div>
 ```

 ```coffeescript
 window.invoker ||= new JsInvoker()
 window.invoker.register 'posts/index', ->
  $ ->
    console.log $(@).text()
 ```

 ```haml
 # app/views/layout/application.html.haml
 = yield

 :javascript
 $(function(){
  window.invoker.invoke()
 });
 ```

 ---
 # メリデリ

 - メリット
  - partialがふくまれていれば実行される
  - どのJSが使われてるかわかりやすい
 - デメリット
  - おおげさ

 ---
 # まとめ

 - URLまたは、パーシャル(コンポーネント)に処理を結びつけるのが良さそう
 - ページ数やアプリケーションのサイズに合わせて使い分けたい 

 ---
 # まだある課題

 - ajaxのときどうしようか？

 </textarea>
 <script src="remark-latest.min.js">
 </script>
 <script>
  var slideshow = remark.create();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<style type="text/css">
	@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
	body {
	font-family: 'VL Gothic';
	}
	.remark-slide-content h1,
	.remark-slide-content h2,
	.remark-slide-content h3 {
	font-size: 44px;
	font-weight: normal;
	}
	ul {
	font-size: 18pt;
	}
	.remark-code, .remark-inline-code {
	font-family: 'VL Gothic', Consolas, 'Courier New', Courier, Monaco, monospace;
	font-size: 16pt;
	}
	</style>
	</head>
	<body>
	<textarea id="source">

	class: center, middle
	# RailsにおけるJavascriptのエンドポイントどうする？

	fukajun minami.rb 2015-03-28 最初で最後のLT大会
	---
	# 自己紹介

	- @fukajun
	- minami.rbでrailsはじめました
	- sendagaya.rbという勉強会をやっています　まもなく100回目
	- Railsで仕事してる at メガネ通販
	- ruby,rails,javascript, backbone.js, vue.js, react.js, node.js
	- RubyKaja2014 new

	---
	class: center, middle
	# 話したいこと

	#　Railsで特定のページ毎にJSの実行を分けたい

	---
	# 背景
	- UX向上のためリッチなUI　`静的　< ココ < SPA`
	- どのページでもなにかしらのJSをの実行が必要

	???
	ページが増えるとjavascriptが増える
	---
	# 方法: selector による実行

	```haml
	%body
	%ul.articles-list
	%li ruby
	%li c++
	```

	```coffeescript
	# articles.js
	$('.articles-list').hide()

	# users.js
	$('.users-list').fadeOut().fadeIn()
	```

	---
	# 課題
	- articles.js, users.jsなどファイル分割して管理してる → application.js
	- 全ページでページ個別の処理が呼ばれてしまってたりする
	- どこで使われている処理なのかわからない
	- 不要だと思うけど消せない
	- なんかエラーが出てるけど修正できない
	- 触らぬ神にたたり無し
	- 逆にこのパーシャルで必要なJSの処理があるはずなんだけどどれよべばいいんだっけ?
	---

	class: center, middle
	# 解決できそうな方法


	---
	# 方法: id,classをつけて制御系

	```haml
	%body{ class: "#{controller_name}-#{action_name}" }
	```

	```coffeescript
	if $('body').hasClass('.posts-new')
	console.log 'munya munya'
	```

	---
	# メリデリ

	- メリット
	- シンプル
	- デメリット
	- アクション単位になる

	???
	メモ: このプラグイン便利そう

	```coffeescript
	$('.articles-new').ready( ->
	# DOMに対する処理
	```

	https://github.com/Verba/jquery-readyselector
	---
	# 方法: inlineスクリプト

	```haml
	@posts.each do \|post\|
	.post= post.name

	:coffeescript
	$ ->
	$('.post').each, ->
	console.log $(@).text()
	```

	---
	# メリデリ

	- メリット
	- すげぇわかりやすい
	- rubyのコードで分岐できたりする便利
	- デメリット
	- rubyのコードから引き剥がしにくくなる
	- 重複したコードが増える原因にもなる(適度に外部化すれば良いけど)

	---
	# 方法: 読み込むjsファイルで制御

	```haml
	javascript_include_tag 'post'
	```

	---
	# メリデリ

	- メリット
	- わかりやすい
	- デメリット
	- asset_pipelineを生かせてない

	---
	# 方法: URLに応じて実行を分けるようにする

	dispatcherで、location.path毎に呼び分ける

	```coffeescript
	dispathcher '.', ->
	# 全ページで使うよう内容

	dispatcher'^/articles$', ->
	# /articlesで使う内容
	```

	---
	# 方法: こういう仕組み作った invoker

	```haml
	# app/views/posts/index.html.haml
	= js_invoke_tag # = <div data-js-invoke='post/index'></div>
	```

	```coffeescript
	window.invoker \|\|= new JsInvoker()
	window.invoker.register 'posts/index', ->
	$ ->
	console.log $(@).text()
	```

	```haml
	# app/views/layout/application.html.haml
	= yield

	:javascript
	$(function(){
	window.invoker.invoke()
	});
	```

	---
	# メリデリ

	- メリット
	- partialがふくまれていれば実行される
	- どのJSが使われてるかわかりやすい
	- デメリット
	- おおげさ

	---
	# まとめ

	- URLまたは、パーシャル(コンポーネント)に処理を結びつけるのが良さそう
	- ページ数やアプリケーションのサイズに合わせて使い分けたい

	---
	# まだある課題

	- ajaxのときどうしようか？

	</textarea>
	<script src="remark-latest.min.js">
	</script>
	<script>
	var slideshow = remark.create();
	</script>
	</body>
	</html>