CakeFest Orlando 2008




                        With jQuery & CakePHP to


            World Domination

               ...
About me

•   Felix Geisendörfer, 20 years old, Germany


•   Blogger / Programmer / Entrepreneur


•   Used jQuery & Cake...
Blog about CakePHP

                     ThinkingPHP.org
Deep inside the CakePHP core

                               ThinkingPHP.org
Deep inside the CakePHP core
Sometimes things just go wrong
                                 ThinkingPHP.org
World Domination
World Domination
World Domination
World Domination
Many empires tried to achieve it
World Domination
        Mauryan Empire                  Persian Empire
Soviet Union                Mongol Empire

       ...
World Domination
        Mauryan Empire                  Persian Empire
Soviet Union
                          & is
      ...
CakePHP
   &



 jQuery
Quick battle analysis
The problems


• No jQuery JS helper available
• No manual on using jQuery + CakePHP
• No jQuery / CakePHP framework   (ex...
Why jQuery?

• Embraces succinct code
• Huge number of plugins out there
• Plays nice with other libraries
Why CakePHP?


  just kidding ...
Why CakePHP?


 ... well actually
Jaxer: The new guy in town

• Write entire web applications in JavaScript
• MySQL, SQLite, SMTP, File system access
• Serv...
Jaxer: Why not?

• No Linux version yet   Jaxer also works with
                         (Cake)PHP




• Might not scale
•...
So let’s take over the world ...
Getting your JS included
 Controller (app/controllers/posts_controller.php)




            The Q
                 uick &
...
Problems you’ll run into
Not DRY
Not DRY
Confusing

                     wh at
              d o es    ?
         e  e
           r e fro    m
      w h      m
   ...
How to KISS this?

• Have a central place to define JS includes
• Only one reference to each JS file
• Simple rules for incl...
Rule based JS inclusion
app/config/js_includes.php (custom approach, not in cake core!)
The inclusion rule parser


                   ib le
             Fl ex
        T he

    (Google “33 Lines of Magic Code”...
Automatic JS inclusion

• If “app/webroot/js/views/layouts/{layout}.js”
  exists -> load it


• If “app/webroot/js/views/{...
Getting controller data to JS




  Yummy function for your AppController
Getting controller data to JS




 How to make a list of $posts available in JS
Getting controller data to JS

(put this in your layouts <head> section)




 How to export your $jsonVars array to JavaSc...
Getting controller data to JS




   How to access jsonVars in JavaScript
World Domination
PostTask.com

• Personal time management
• Next step: Becoming the best project
  management tool


• After that: World Do...
jayDom
Microformats on steriods
MVC concept

                   HTML / DOM
 Model



                      CSS
  View


                    JavaScript
Con...
Ask audience

         Microformats                     who has heard
                                          about
    ...
jayDom Microformats
• Usually non-standardized formats, custom
  to your application


• Can change as your app evolves

•...
jayDom Microformat Example
jayDom Microformat Example




Task.id              Task.date
jayDom Microformat Example
                   Task.name




Task.progress   Task.time_done   Task.time_total
Microformat I/O

• In order to read data from our
  microformat, we need to parse it


• If we want to update our data we ...
Reading Microformat data
Microformat snippet we are interested in



                        Task.progress
               ...
Writing Microformat data
Microformat snippet we are interested in




How to encode progress value of “75”
Writing Microformat data
Microformat snippet we are interested in




How to encode progress value of “75”
jayDom way of semantic encoding

Get:

                 ea ts
                B

Set:


                 ea ts
           ...
Mapping DOM accessors




Get:


Set:
A real world example
jayDom Microformat Example




Task.id
jayDom Microformat Example




Task.id              Task.date
jayDom Microformat Example




Task.progress
jayDom Microformat Example




Task.progress   Task.time_done
jayDom Microformat Example




Task.progress   Task.time_done   Task.time_total
jayDom Microformat Example
                   Task.name




Task.progress   Task.time_done   Task.time_total
World Domination
jQuery Selectors on steriods
    Select all tasks with the name ‘New Task’




   Select all tasks that are more then half...
jQuery Selectors on steriods


• Find all Posts
• That have at least one Comment written by
  Felix


• Only return posts ...
Easy Ajax
jayDom Advantages
• Put your semantics to use

• Save tons of bandwidth on server calls
  using JSON


• Hassle-less clien...
Questions

• Thanks for listening

• Thanks for helping the CakePHP project
  grow



Slides will be available on Thinking...
Upcoming SlideShare
Loading in...5
×

With jQuery & CakePHP to World Domination

37,248

Published on

Slides for my talk at CakeFest 2008.

Published in: Business, Technology
5 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
37,248
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
577
Comments
5
Likes
17
Embeds 0
No embeds

No notes for slide

With jQuery & CakePHP to World Domination

  1. 1. CakeFest Orlando 2008 With jQuery & CakePHP to World Domination by Felix Geisendörfer
  2. 2. About me • Felix Geisendörfer, 20 years old, Germany • Blogger / Programmer / Entrepreneur • Used jQuery & CakePHP in all battle fields • School projects, small business sites, 300++ DB table monster project
  3. 3. Blog about CakePHP ThinkingPHP.org
  4. 4. Deep inside the CakePHP core ThinkingPHP.org
  5. 5. Deep inside the CakePHP core Sometimes things just go wrong ThinkingPHP.org
  6. 6. World Domination
  7. 7. World Domination
  8. 8. World Domination
  9. 9. World Domination
  10. 10. Many empires tried to achieve it
  11. 11. World Domination Mauryan Empire Persian Empire Soviet Union Mongol Empire Macedonian Empire Roman Empire Nazi Germany Ming Empire Portuguese empire Arab Caliphate French Empire Spanish Empire Habsburg Empire Japanese Empire British Empire American Empire
  12. 12. World Domination Mauryan Empire Persian Empire Soviet Union & is Mongol Empire Roman Empire ut Macedonian Empire r N or Caliphate p N Arab Nazi Germany h Empire Ming Empire Portuguese empire P ck French Spanish Empire u Habsburg Empire hEmpire C Japanese British Empire American Empire
  13. 13. CakePHP & jQuery
  14. 14. Quick battle analysis
  15. 15. The problems • No jQuery JS helper available • No manual on using jQuery + CakePHP • No jQuery / CakePHP framework (except Jamal)
  16. 16. Why jQuery? • Embraces succinct code • Huge number of plugins out there • Plays nice with other libraries
  17. 17. Why CakePHP? just kidding ...
  18. 18. Why CakePHP? ... well actually
  19. 19. Jaxer: The new guy in town • Write entire web applications in JavaScript • MySQL, SQLite, SMTP, File system access • Server process stays alive
  20. 20. Jaxer: Why not? • No Linux version yet Jaxer also works with (Cake)PHP • Might not scale • No Framework yet
  21. 21. So let’s take over the world ...
  22. 22. Getting your JS included Controller (app/controllers/posts_controller.php) The Q uick & View (app/views/posts/index.ctp) Easy Layout (app/views/layouts/default.ctp)
  23. 23. Problems you’ll run into
  24. 24. Not DRY
  25. 25. Not DRY
  26. 26. Confusing wh at d o es ? e e r e fro m w h m F, T de c o W lu i nc
  27. 27. How to KISS this? • Have a central place to define JS includes • Only one reference to each JS file • Simple rules for inclusion on a per action basis
  28. 28. Rule based JS inclusion app/config/js_includes.php (custom approach, not in cake core!)
  29. 29. The inclusion rule parser ib le Fl ex T he (Google “33 Lines of Magic Code”) Will talk about this in tomorrows talks
  30. 30. Automatic JS inclusion • If “app/webroot/js/views/layouts/{layout}.js” exists -> load it • If “app/webroot/js/views/{controller}/{view}.js” exists -> load it
  31. 31. Getting controller data to JS Yummy function for your AppController
  32. 32. Getting controller data to JS How to make a list of $posts available in JS
  33. 33. Getting controller data to JS (put this in your layouts <head> section) How to export your $jsonVars array to JavaScript
  34. 34. Getting controller data to JS How to access jsonVars in JavaScript
  35. 35. World Domination
  36. 36. PostTask.com • Personal time management • Next step: Becoming the best project management tool • After that: World Domination l Break e rcia Co mm
  37. 37. jayDom Microformats on steriods
  38. 38. MVC concept HTML / DOM Model CSS View JavaScript Controller
  39. 39. Ask audience Microformats who has heard about Microformat • A collection of standardized HTML snippets • Can be parsed by spiders, making your site semantic in a way thats actually useful • Examples: hCard, rel-license, adr, geo ...
  40. 40. jayDom Microformats • Usually non-standardized formats, custom to your application • Can change as your app evolves • You are already using them
  41. 41. jayDom Microformat Example
  42. 42. jayDom Microformat Example Task.id Task.date
  43. 43. jayDom Microformat Example Task.name Task.progress Task.time_done Task.time_total
  44. 44. Microformat I/O • In order to read data from our microformat, we need to parse it • If we want to update our data we also need to be able to write to the microformat
  45. 45. Reading Microformat data Microformat snippet we are interested in Task.progress Ask: Anybody who doesn’t know regex? How to parse the encoded progress value
  46. 46. Writing Microformat data Microformat snippet we are interested in How to encode progress value of “75”
  47. 47. Writing Microformat data Microformat snippet we are interested in How to encode progress value of “75”
  48. 48. jayDom way of semantic encoding Get: ea ts B Set: ea ts B
  49. 49. Mapping DOM accessors Get: Set:
  50. 50. A real world example
  51. 51. jayDom Microformat Example Task.id
  52. 52. jayDom Microformat Example Task.id Task.date
  53. 53. jayDom Microformat Example Task.progress
  54. 54. jayDom Microformat Example Task.progress Task.time_done
  55. 55. jayDom Microformat Example Task.progress Task.time_done Task.time_total
  56. 56. jayDom Microformat Example Task.name Task.progress Task.time_done Task.time_total
  57. 57. World Domination
  58. 58. jQuery Selectors on steriods Select all tasks with the name ‘New Task’ Select all tasks that are more then half done
  59. 59. jQuery Selectors on steriods • Find all Posts • That have at least one Comment written by Felix • Only return posts that visible (not hidden)
  60. 60. Easy Ajax
  61. 61. jayDom Advantages • Put your semantics to use • Save tons of bandwidth on server calls using JSON • Hassle-less client server communication
  62. 62. Questions • Thanks for listening • Thanks for helping the CakePHP project grow Slides will be available on ThinkingPHP.org shortly!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×