SlideShare une entreprise Scribd logo
1  sur  14
Java Script  on Rails 제 5 회 루비세미나 발표자료 (2007 년  12 월  1 일 ) 튜토리얼 [email_address] http://thinkr.egloos.com http ://usefulparadigm.com
모든 자바스크립트 마법이 시작되는 한 줄 <%= javascript_include_tag  :defaults  %>
레일스  Ajax  헬퍼 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ajax  응답의  3 유형 Client Server ,[object Object],[object Object],HTML  조각 1 Client Server ,[object Object],[object Object],[object Object],[object Object],데이터  only (XML, JSON, etc) 2 Client Server ,[object Object],자바스크립트 (instructions) 3 1 3 2 Client-side Processing Loosely-coupled Server-side Processing Tightly-coupled
RJS =  Ruby  generated JavaScript try { $(&quot;here&quot;).visualEffect(&quot;highlight&quot;); } catch (e) {alert('RJS error:' + e.toString());    alert('$(amp;quot;hereamp;quot;).visualEffect(amp;quot;highlightamp;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!
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
Why RJS? ,[object Object],[object Object],[object Object],[object Object]
JavaScriptGenerator 와  RJS  프록시 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
RJS Recipes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
Unobtrusiveness? <%=  link_to_remote “ Click Me? ”,    user_path(3)  %>
Unobtrusive  JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Rails Way vs. jQuery Way? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Rails Javascript Helper Prototype + LowPro/UJS jQuery
DEMO

Contenu connexe

Tendances

Tendances (20)

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Requirejs
RequirejsRequirejs
Requirejs
 
Symfony2 and AngularJS
Symfony2 and AngularJSSymfony2 and AngularJS
Symfony2 and AngularJS
 
RSpec 2 Best practices
RSpec 2 Best practicesRSpec 2 Best practices
RSpec 2 Best practices
 
Automated testing with RSpec
Automated testing with RSpecAutomated testing with RSpec
Automated testing with RSpec
 
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
22 j query1
22 j query122 j query1
22 j query1
 
How to learn to build your own PHP framework
How to learn to build your own PHP frameworkHow to learn to build your own PHP framework
How to learn to build your own PHP framework
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
JavaScript Basics with baby steps
JavaScript Basics with baby stepsJavaScript Basics with baby steps
JavaScript Basics with baby steps
 
Being a jsp
Being a jsp     Being a jsp
Being a jsp
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Js unit testing
Js unit testingJs unit testing
Js unit testing
 
Обзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptОбзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScript
 

En vedette

레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드
Sukjoon Kim
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요
Chris Ohk
 
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
MinGeun Park
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태
NAVER D2
 
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵
중선 곽
 

En vedette (18)

루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작
 
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
 
레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께
 
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
 
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101
 
초급 개발자 탈출
초급 개발자 탈출초급 개발자 탈출
초급 개발자 탈출
 
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태
 
손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.
 
EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기
 
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 

Similaire à JavaScript on Rails 튜토리얼

Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
Wen-Tien Chang
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applications
elliando dias
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
tonvanbart
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
wpnepal
 

Similaire à JavaScript on Rails 튜토리얼 (20)

Merb jQuery
Merb jQueryMerb jQuery
Merb jQuery
 
Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack Support
 
Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS Framework
 
Framework
FrameworkFramework
Framework
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Rails is not just Ruby
Rails is not just RubyRails is not just Ruby
Rails is not just Ruby
 
JS-05-Handlebars.ppt
JS-05-Handlebars.pptJS-05-Handlebars.ppt
JS-05-Handlebars.ppt
 
Intro to jquery
Intro to jqueryIntro to jquery
Intro to jquery
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applications
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous Merb
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
Rails <form> Chronicle
Rails <form> ChronicleRails <form> Chronicle
Rails <form> Chronicle
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
 

Plus de Sukjoon Kim (6)

워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드
 
Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발
 
Merb tutorial
Merb tutorialMerb tutorial
Merb tutorial
 
루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날
 
Realtime Web 간보기
Realtime Web 간보기Realtime Web 간보기
Realtime Web 간보기
 
페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011
 

Dernier

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Dernier (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 

JavaScript on Rails 튜토리얼

  • 1. Java Script on Rails 제 5 회 루비세미나 발표자료 (2007 년 12 월 1 일 ) 튜토리얼 [email_address] http://thinkr.egloos.com http ://usefulparadigm.com
  • 2. 모든 자바스크립트 마법이 시작되는 한 줄 <%= javascript_include_tag :defaults %>
  • 3.
  • 4.
  • 5. RJS = Ruby generated JavaScript try { $(&quot;here&quot;).visualEffect(&quot;highlight&quot;); } catch (e) {alert('RJS error:' + e.toString()); alert('$(amp;quot;hereamp;quot;).visualEffect(amp;quot;highlightamp;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. 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.
  • 8.
  • 9.
  • 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. Unobtrusiveness? <%= link_to_remote “ Click Me? ”, user_path(3) %>
  • 12.
  • 13.
  • 14. DEMO