JavaScript on Rails 튜토리얼

1,409 views

Published on

2007.12 제5회 루비세미나 발표자료

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,409
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript on Rails 튜토리얼

  1. 1. Java Script on Rails 제 5 회 루비세미나 발표자료 (2007 년 12 월 1 일 ) 튜토리얼 [email_address] http://thinkr.egloos.com http ://usefulparadigm.com
  2. 2. 모든 자바스크립트 마법이 시작되는 한 줄 <%= javascript_include_tag :defaults %>
  3. 3. 레일스 Ajax 헬퍼 <ul><ul><li>link_to_remote (name, options = {}, html_options = {}) </li></ul></ul><ul><ul><li>link_to_function (name, function, html_options = {}) </li></ul></ul><ul><ul><li>observe_field (field_id, options = {}) </li></ul></ul><ul><ul><li>remote_function (options) </li></ul></ul><ul><ul><li>observe_form (form_id, options = {}) </li></ul></ul><ul><ul><li>form_remote_tag (options = {}) </li></ul></ul><ul><ul><li>form_remote_for (object_name, object, options = {}, &proc) </li></ul></ul><ul><ul><li>submit_to_remote (name, value, options = {}) </li></ul></ul><ul><ul><li>in_place_editor_field (object, method, tag_options = {}, in_place_editor_options = {}) </li></ul></ul><ul><ul><li>in_place_editor (field_id, options = {}) </li></ul></ul><ul><ul><li>drop_receiving_element (element_id, options = {}) </li></ul></ul><ul><ul><li>sortable_element (element_id, options = {}) </li></ul></ul><ul><ul><li>Ajax.Request (url, options) </li></ul></ul>
  4. 4. Ajax 응답의 3 유형 Client Server <ul><li>각종 Rails Ajax Helper </li></ul><ul><li>Partial Template </li></ul>HTML 조각 1 Client Server <ul><li>Rails Serialization </li></ul><ul><li>to_xml, to_json, … </li></ul><ul><li>Active Resource </li></ul><ul><li>with RIAs (Flex, Laszlo, …) </li></ul>데이터 only (XML, JSON, etc) 2 Client Server <ul><li>RJS </li></ul>자바스크립트 (instructions) 3 1 3 2 Client-side Processing Loosely-coupled Server-side Processing Tightly-coupled
  5. 5. RJS = Ruby generated JavaScript try { $(&quot;here&quot;).visualEffect(&quot;highlight&quot;); } catch (e) {alert('RJS error:nn' + e.toString()); alert('$(&quot;here&quot;).visualEffect(&quot;highlight&quot;);'); throw e } page[‘here’].visual_effect(…) page.select(‘xxx’).doSomething ... class ThingsController < .. def do ... # process rutines end <%= link_to_remote “Hello,”, :url => do_things_path %> <div id=“ here ”>World!</div> Form Rails RJS Hello, World! Hello, World!
  6. 6. Ajax Request Processing <div id=“ userlist ”>...</div> <% remote_form_for :user, :update => ‘ userlist ’, :position => :bottom, :url => users_path do … render :partial => :user, :locals => … <div id=“ userlist ”>...</div> <% remote_form_for :user, :url => users_path do … page.insert_html :bottom, ‘ userlist ’ , :partial => :user, :locals => … 액션 뷰 뷰 Ajax Request RJS Ajax Request
  7. 7. Why RJS? <ul><li>한번 호출로 여러 엘리먼트를 갱신한다 </li></ul><ul><li>Ajax 호출 중에 서버 측에서 동적으로 갱신할 엘리먼트 대상을 결정할 수 있다 </li></ul><ul><li>DRY! 코딩량이 줄어든다 </li></ul><ul><li>나는 자바스크립트가 싫어요 !! </li></ul>
  8. 8. JavaScriptGenerator 와 RJS 프록시 <ul><li>Element Proxies </li></ul><ul><ul><li>page[‘header’].hide </li></ul></ul><ul><ul><li>page[:header].hide </li></ul></ul><ul><ul><li>page[:header].hide.show </li></ul></ul><ul><li>Class Proxies </li></ul><ul><ul><li>page.form.reset('employee-form') </li></ul></ul><ul><ul><li>page.alerter.display_message('Welcome‘) </li></ul></ul><ul><ul><li>page.field.focus </li></ul></ul><ul><li>Collection Proxies </li></ul><ul><ul><li>page.select('#content p') </li></ul></ul><ul><ul><li>page.select('#form input[type=text]').each do |element| </li></ul></ul>
  9. 9. RJS Recipes <ul><li>DRYing RJS </li></ul><ul><ul><li>RJS Helper </li></ul></ul><ul><li>RJS without Ajax </li></ul><ul><ul><li>page object (a JavaScriptGenerator) </li></ul></ul><ul><li>Debugging RJS </li></ul><ul><ul><li>config.action_view.debug_rjs = true (default) </li></ul></ul><ul><ul><li>tail –f log/development.log </li></ul></ul><ul><ul><li>FireBug </li></ul></ul><ul><li>Plugins </li></ul><ul><ul><li>MinusMOR </li></ul></ul><ul><ul><li>RJS IF/UNLESS </li></ul></ul>
  10. 10. WHERE do I put my JS? <%= yield :javascript %> layouts/application.rhtml <% content_for :javascript do %> <%= javascript_include_tag :my_own %> <% end %> controllers/index.rhtml var myObject = function() { ... public/javascripts/my_own.js
  11. 11. Unobtrusiveness? <%= link_to_remote “ Click Me? ”, user_path(3) %>
  12. 12. Unobtrusive JavaScript <ul><li>Why Unobtrusive? </li></ul><ul><li>From Graceful Degration to Progressive Enhancement </li></ul><ul><li>Scope of Unobtrusiveness </li></ul><ul><li>Unobtrusive Ways on Rails </li></ul><ul><ul><li>Prototype + Low Pro </li></ul></ul><ul><ul><li>UJS(Unobtrusive JavaScript for Rails) </li></ul></ul><ul><ul><li>Simple UJS Plugin </li></ul></ul><ul><ul><li>Unobtrusive Ajax with jQuery </li></ul></ul><ul><li>Unobtrusiveness and RESTful Rails </li></ul>
  13. 13. Rails Way vs. jQuery Way? <ul><li>( 일편단심형 ) </li></ul><ul><ul><li>“ 레일스 자바스크립트 헬퍼만 믿을래요 ..” </li></ul></ul><ul><li>( 실용주의형 ) </li></ul><ul><ul><li>“ 필요하다면 갖다 써야죠 ...” </li></ul></ul><ul><li>( 완벽주의형 ) </li></ul><ul><ul><li>“ Unobtrusive! Unobtrusive!!” </li></ul></ul>Rails Javascript Helper Prototype + LowPro/UJS jQuery
  14. 14. DEMO

×