SlideShare a Scribd company logo

ActiveDOM

•
•
Felix Geisendörfer
Felix Geisendörfer

The document discusses using jQuery to map database columns to DOM elements to allow easy manipulation of data in the DOM. It recommends making the DOM represent data semantics, abstracting DOM interaction, and using JSON for data transfer. Key aspects are mapping database columns to getter and setter functions for corresponding DOM elements, and using this mapping to build plugins for common operations like getting, setting, adding and deleting data in the DOM.

1 of 19
Downloaded 120 times
ActiveDOM jQuery(‘a.nd > html :tricks’).for(‘web application’).data(); by Felix Geisendörfer
About me • Felix Geisendörfer, 20 years old, Germany • Blogger / Programmer / Entrepreneur • Used jQuery in all battle fields • School projects, small business sites, 300++ DB table monster project
Key ideas • Make the DOM represent you data (semantics) • Abstract the DOM interaction away from • Known your audience - no silver bullets. • JSON is your friend in times of trouble.
Data on your server posts id user_id title users text created tags modified Database Tables Rows Columns
Data in your client id user_id title text created modified Table ‘posts’ DOM / Html representation
Manipulating data in the DOM Lets say we want to change the ‘text’ field ...
This is why we love, jQuery!
Lets make it more difficult ... Lets try to change the ‘user_id’ ...
And a last one Changing the ‘created’ column
What about reading the data?
What is the Pattern?
Mapping columns to get /set functions get id set user_id title get text set created get modified se t Columns DOM transformation / access functions
A map for DOM-land
How to use the map?
Use it directly? beats
Problems • Only operates on one ‘post’ object • Clumsy syntax • No Chaining
How far can you go? with some abstraction with custom css selectors
How to get there? • Plugin generator • Routing plugin function calls to sub-functions • Re-using the ‘fields’ map logic for plugins
Questions? Thanks goes to John & the jQuery team! Talk will be online at: thinkingphp.org

More Related Content

ActiveDOM

  • 1. ActiveDOM jQuery(‘a.nd > html :tricks’).for(‘web application’).data(); by Felix Geisendörfer
  • 2. About me • Felix Geisendörfer, 20 years old, Germany • Blogger / Programmer / Entrepreneur • Used jQuery in all battle fields • School projects, small business sites, 300++ DB table monster project
  • 3. Key ideas • Make the DOM represent you data (semantics) • Abstract the DOM interaction away from • Known your audience - no silver bullets. • JSON is your friend in times of trouble.
  • 4. Data on your server posts id user_id title users text created tags modified Database Tables Rows Columns
  • 5. Data in your client id user_id title text created modified Table ‘posts’ DOM / Html representation
  • 6. Manipulating data in the DOM Lets say we want to change the ‘text’ field ...
  • 7. This is why we love, jQuery!
  • 8. Lets make it more difficult ... Lets try to change the ‘user_id’ ...
  • 9. And a last one Changing the ‘created’ column
  • 10. What about reading the data?
  • 11. What is the Pattern?
  • 12. Mapping columns to get /set functions get id set user_id title get text set created get modified se t Columns DOM transformation / access functions
  • 13. A map for DOM-land
  • 14. How to use the map?
  • 16. Problems • Only operates on one ‘post’ object • Clumsy syntax • No Chaining
  • 17. How far can you go? with some abstraction with custom css selectors
  • 18. How to get there? • Plugin generator • Routing plugin function calls to sub-functions • Re-using the ‘fields’ map logic for plugins
  • 19. Questions? Thanks goes to John & the jQuery team! Talk will be online at: thinkingphp.org