ActiveDOM
jQuery(‘a.nd > html :tricks’).for(‘web application’).data();




                                               ...
About me

•   Felix Geisendörfer, 20 years old, Germany


•   Blogger / Programmer / Entrepreneur


•   Used jQuery in all...
Key ideas
•   Make the DOM represent you data (semantics)


•   Abstract the DOM interaction away from


•   Known your au...
Data on your server

                posts               id

                                  user_id

                  ...
Data in your client
      id

   user_id

     title

    text

   created

   modified




Table ‘posts’          DOM / Ht...
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
     ...
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 fo...
Questions?


Thanks goes to John & the jQuery team!




 Talk will be online at: thinkingphp.org
Upcoming SlideShare
Loading in …5
×

ActiveDOM

8,450 views

Published on

Published in: Technology
  • Be the first to comment

ActiveDOM

  1. 1. ActiveDOM jQuery(‘a.nd > html :tricks’).for(‘web application’).data(); by Felix Geisendörfer
  2. 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. 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. 4. Data on your server posts id user_id title users text created tags modified Database Tables Rows Columns
  5. 5. Data in your client id user_id title text created modified Table ‘posts’ DOM / Html representation
  6. 6. Manipulating data in the DOM Lets say we want to change the ‘text’ field ...
  7. 7. This is why we love, jQuery!
  8. 8. Lets make it more difficult ... Lets try to change the ‘user_id’ ...
  9. 9. And a last one Changing the ‘created’ column
  10. 10. What about reading the data?
  11. 11. What is the Pattern?
  12. 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. 13. A map for DOM-land
  14. 14. How to use the map?
  15. 15. Use it directly? beats
  16. 16. Problems • Only operates on one ‘post’ object • Clumsy syntax • No Chaining
  17. 17. How far can you go? with some abstraction with custom css selectors
  18. 18. How to get there? • Plugin generator • Routing plugin function calls to sub-functions • Re-using the ‘fields’ map logic for plugins
  19. 19. Questions? Thanks goes to John & the jQuery team! Talk will be online at: thinkingphp.org

×