SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
Unobtrusive
 JavaScript
behavior oriented JS with
   graceful degradation
progressive enhancement

    matt aimonetti - SDRuby - Dec 2007
          http://railsontherun.com
                                         1
2
Graceful
Degradation

              3
• create a page that works with
 and without javascript

• page degrades to a less
 advanced one if javascript
 isn’t enabled in the browser


                                  4
Progressive
Enhancement

               5
• graceful degradation is good
 but...

• first build the basic functionality
 available to all

• then build advanced features
 on top of the foundations

                                        6
how?

       7
• register event handlers
 programmatically
• use CSS selectors to select the
 elements to register
• keep things separate
                                    8
V from MVC

             9
• Structure: HTML
• Presentation: CSS


                      10
• Structure: HTML
• Presentation: CSS
• Behavior: JavaScript
            Keep the layers separate

                                       11
structure:




             12
presentation:




                13
behavior:




            14
JQuery + livequery




                     15
Prototype + LowPro




                     16
resources
•   http://prototypejs.org

•   http://danwebb.net/lowpro

•   http://lowpro.stikipad.com/

•   http://groups.google.co.uk/group/low-pro?hl=en

•   http://jquery.com/

•   http://brandonaaron.net/docs/livequery/

•   http://railsontherun.com

                                                     17

Más contenido relacionado

La actualidad más candente

Angular js & Reactjs 접근방법
Angular js & Reactjs 접근방법Angular js & Reactjs 접근방법
Angular js & Reactjs 접근방법Peter YoungSik Yun
 
Last Month in PHP - May 2016
Last Month in PHP - May 2016Last Month in PHP - May 2016
Last Month in PHP - May 2016Eric Poe
 
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018Mike Hale
 
Prepara tu entorno para Magento 2
Prepara tu entorno para Magento 2Prepara tu entorno para Magento 2
Prepara tu entorno para Magento 2Óscar Recio Soria
 
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINSHOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINSDevClub_lv
 
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...Mário Valente
 
Creating Content in a Pattern Library
Creating Content in a Pattern LibraryCreating Content in a Pattern Library
Creating Content in a Pattern LibraryRachel DeLauder
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with mavenRahul Nanwani
 
Spring Framework - Study Group
Spring Framework - Study GroupSpring Framework - Study Group
Spring Framework - Study GroupAdiyat Mubarak
 
Best Practices in Component Development for MODX
Best Practices in Component Development for MODXBest Practices in Component Development for MODX
Best Practices in Component Development for MODXJan Tezner
 
The Full Stack Web Development
The Full Stack Web DevelopmentThe Full Stack Web Development
The Full Stack Web DevelopmentSam Dias
 

La actualidad más candente (20)

Ruby course-1-practice
Ruby course-1-practiceRuby course-1-practice
Ruby course-1-practice
 
Angular js & Reactjs 접근방법
Angular js & Reactjs 접근방법Angular js & Reactjs 접근방법
Angular js & Reactjs 접근방법
 
The Role Of Java Script
The Role Of Java ScriptThe Role Of Java Script
The Role Of Java Script
 
Last Month in PHP - May 2016
Last Month in PHP - May 2016Last Month in PHP - May 2016
Last Month in PHP - May 2016
 
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
 
work-experience
work-experiencework-experience
work-experience
 
Prepara tu entorno para Magento 2
Prepara tu entorno para Magento 2Prepara tu entorno para Magento 2
Prepara tu entorno para Magento 2
 
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINSHOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
 
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
 
Creating Content in a Pattern Library
Creating Content in a Pattern LibraryCreating Content in a Pattern Library
Creating Content in a Pattern Library
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with maven
 
Spring Framework - Study Group
Spring Framework - Study GroupSpring Framework - Study Group
Spring Framework - Study Group
 
HTML5 for the Ruby Developer
HTML5 for the Ruby DeveloperHTML5 for the Ruby Developer
HTML5 for the Ruby Developer
 
Best Practices in Component Development for MODX
Best Practices in Component Development for MODXBest Practices in Component Development for MODX
Best Practices in Component Development for MODX
 
Javascript fullstasck
Javascript fullstasckJavascript fullstasck
Javascript fullstasck
 
Table module
Table moduleTable module
Table module
 
Php laravel training
Php laravel trainingPhp laravel training
Php laravel training
 
The Full Stack Web Development
The Full Stack Web DevelopmentThe Full Stack Web Development
The Full Stack Web Development
 
Blazor
BlazorBlazor
Blazor
 
Paas
PaasPaas
Paas
 

Similar a Unobtrusive Javascript - SD.rb 2007

Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison
 
Ruby on Rails 101 - Presentation Slides for a Five Day Introductory Course
Ruby on Rails 101 - Presentation Slides for a Five Day Introductory CourseRuby on Rails 101 - Presentation Slides for a Five Day Introductory Course
Ruby on Rails 101 - Presentation Slides for a Five Day Introductory Coursepeter_marklund
 
Server Side Javascript
Server Side JavascriptServer Side Javascript
Server Side Javascriptrajivmordani
 
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side renderingOnce upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side renderingAndrea Giannantonio
 
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...
Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...railsconf
 
Ajax World Oracle Ria
Ajax World Oracle RiaAjax World Oracle Ria
Ajax World Oracle Riarajivmordani
 
Scripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full VersionScripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full VersionEduardo Pelegri-Llopart
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web DevelopmentDivya Manian
 
Javascript Dependency Management
Javascript Dependency ManagementJavascript Dependency Management
Javascript Dependency ManagementSean Duncan
 
Scripting Support in GlassFish v3 Prelude
Scripting Support in GlassFish v3 PreludeScripting Support in GlassFish v3 Prelude
Scripting Support in GlassFish v3 PreludeEduardo Pelegri-Llopart
 
Modern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On RailsModern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On RailsRobert Glaser
 
Jaoo Michael Neale 09
Jaoo Michael Neale 09Jaoo Michael Neale 09
Jaoo Michael Neale 09Michael Neale
 
Enterprise Portal 2.0
Enterprise Portal 2.0Enterprise Portal 2.0
Enterprise Portal 2.0Jeremi Joslin
 
企业级软件的组件化和动态化开发实践
企业级软件的组件化和动态化开发实践企业级软件的组件化和动态化开发实践
企业级软件的组件化和动态化开发实践Jacky Chi
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsRasheed Waraich
 
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...MarcinStachniuk
 
Groovy and Grails in Google App Engine
Groovy and Grails in Google App EngineGroovy and Grails in Google App Engine
Groovy and Grails in Google App EngineGuillaume Laforge
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationAndrew Rota
 

Similar a Unobtrusive Javascript - SD.rb 2007 (20)

Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
Ruby on Rails 101 - Presentation Slides for a Five Day Introductory Course
Ruby on Rails 101 - Presentation Slides for a Five Day Introductory CourseRuby on Rails 101 - Presentation Slides for a Five Day Introductory Course
Ruby on Rails 101 - Presentation Slides for a Five Day Introductory Course
 
Server Side Javascript
Server Side JavascriptServer Side Javascript
Server Side Javascript
 
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side renderingOnce upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
 
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...
Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...Develop With Pleasure  Deploy With Fun  Glass Fish And Net Beans For A Better...
Develop With Pleasure Deploy With Fun Glass Fish And Net Beans For A Better...
 
Ajax World Oracle Ria
Ajax World Oracle RiaAjax World Oracle Ria
Ajax World Oracle Ria
 
Scripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full VersionScripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full Version
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web Development
 
L R U G - JRuby
L R U G - JRubyL R U G - JRuby
L R U G - JRuby
 
Javascript Dependency Management
Javascript Dependency ManagementJavascript Dependency Management
Javascript Dependency Management
 
Scripting Support in GlassFish v3 Prelude
Scripting Support in GlassFish v3 PreludeScripting Support in GlassFish v3 Prelude
Scripting Support in GlassFish v3 Prelude
 
Modern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On RailsModern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On Rails
 
Jaoo Michael Neale 09
Jaoo Michael Neale 09Jaoo Michael Neale 09
Jaoo Michael Neale 09
 
Enterprise Portal 2.0
Enterprise Portal 2.0Enterprise Portal 2.0
Enterprise Portal 2.0
 
企业级软件的组件化和动态化开发实践
企业级软件的组件化和动态化开发实践企业级软件的组件化和动态化开发实践
企业级软件的组件化和动态化开发实践
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
 
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
Java Web Start czyli jak żyć z tą dziwną technologią? & Continuous Delivery w...
 
Ajax World West
Ajax World WestAjax World West
Ajax World West
 
Groovy and Grails in Google App Engine
Groovy and Grails in Google App EngineGroovy and Grails in Google App Engine
Groovy and Grails in Google App Engine
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 

Último

To Create Your Own Wig Online To Create Your Own Wig Online
To Create Your Own Wig Online  To Create Your Own Wig OnlineTo Create Your Own Wig Online  To Create Your Own Wig Online
To Create Your Own Wig Online To Create Your Own Wig Onlinelng ths
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsWristbands Ireland
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toumarfarooquejamali32
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Winbusinessin
 
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...IMARC Group
 
Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsP&CO
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examplesamberjiles31
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.mcshagufta46
 
Slicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinSlicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinAnton Skornyakov
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGlokeshwarmaha
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..dlewis191
 
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBBPMedia1
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarNathanielSchmuck
 
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdfChicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdfSourav Sikder
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024Stephan Koning
 
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdfGraham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdfAnhNguyen97152
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyHanna Klim
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxWorkforce Group
 
Plano de marketing- inglês em formato ppt
Plano de marketing- inglês  em formato pptPlano de marketing- inglês  em formato ppt
Plano de marketing- inglês em formato pptElizangelaSoaresdaCo
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.ukaroemirsr
 

Último (20)

To Create Your Own Wig Online To Create Your Own Wig Online
To Create Your Own Wig Online  To Create Your Own Wig OnlineTo Create Your Own Wig Online  To Create Your Own Wig Online
To Create Your Own Wig Online To Create Your Own Wig Online
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and Festivals
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb to
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024
 
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
 
Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizations
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examples
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.
 
Slicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinSlicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup Berlin
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..
 
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry Webinar
 
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdfChicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdfGraham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdf
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agency
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
 
Plano de marketing- inglês em formato ppt
Plano de marketing- inglês  em formato pptPlano de marketing- inglês  em formato ppt
Plano de marketing- inglês em formato ppt
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.uk
 

Unobtrusive Javascript - SD.rb 2007