With jQuery & CakePHP to World Domination

Felix Geisendörfer
Felix GeisendörferChief Quality Enforcer at Debuggable Limited
CakeFest Orlando 2008




                        With jQuery & CakePHP to


            World Domination

                                                   by Felix Geisendörfer
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
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

                                        Macedonian Empire
      Roman Empire
                                               Nazi Germany
 Ming Empire        Portuguese empire
                                         Arab Caliphate
                  French Empire
 Spanish Empire
                               Habsburg Empire
            Japanese Empire
                                             British Empire
         American Empire
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
CakePHP
   &



 jQuery
Quick battle analysis
The problems


• No jQuery JS helper available
• No manual on using jQuery + CakePHP
• No jQuery / CakePHP framework   (except Jamal)
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
• Server process stays alive
Jaxer: Why not?

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




• Might not scale
• No Framework yet
So let’s take over the world ...
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)
Problems you’ll run into
Not DRY
Not DRY
Confusing

                     wh at
              d o es    ?
         e  e
           r e fro    m
      w h      m
   F,
 T de c      o
W lu
 i nc
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
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”)
                                        Will talk about this in tomorrows
                                        talks
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
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 JavaScript
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 Domination            l Break
                                   e rcia
                             Co mm
jayDom
Microformats on steriods
MVC concept

                   HTML / DOM
 Model



                      CSS
  View


                    JavaScript
Controller
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 ...
jayDom Microformats
• Usually non-standardized formats, custom
  to your application


• Can change as your app evolves

• You are already using them
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 also need
  to be able to write to the microformat
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
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
                B
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 done
jQuery Selectors on steriods


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


• Only return posts that visible (not hidden)
Easy Ajax
jayDom Advantages
• Put your semantics to use

• Save tons of bandwidth on server calls
  using JSON


• Hassle-less client server communication
Questions

• Thanks for listening

• Thanks for helping the CakePHP project
  grow



Slides will be available on ThinkingPHP.org shortly!
1 of 62

More Related Content

Viewers also liked

Is soc a science?Is soc a science?
Is soc a science?smccormac7
7.6K views26 slides
Is Sociology Science?Is Sociology Science?
Is Sociology Science?tbroad
65.1K views26 slides

Viewers also liked(6)

Digital analytics lecture1Digital analytics lecture1
Digital analytics lecture1
Joni Salminen2.9K views
Sociology and scienceSociology and science
Sociology and science
M Usama Sehgal4.2K views
Sociology as a scienceSociology as a science
Sociology as a science
Karayme Bartley12.9K views
Is soc a science?Is soc a science?
Is soc a science?
smccormac77.6K views
A2 Sociology & ScienceA2 Sociology & Science
A2 Sociology & Science
April Lennox-Hill's Sociology Lessons14.3K views
Is Sociology Science?Is Sociology Science?
Is Sociology Science?
tbroad65.1K views

Similar to With jQuery & CakePHP to World Domination

When To Use Ruby On RailsWhen To Use Ruby On Rails
When To Use Ruby On Railsdosire
29K views31 slides

Similar to With jQuery & CakePHP to World Domination(20)

Jvm tuning in a rush! - Lviv JUGJvm tuning in a rush! - Lviv JUG
Jvm tuning in a rush! - Lviv JUG
Tomek Borek1.8K views
Wordpress as a CMSWordpress as a CMS
Wordpress as a CMS
Brad Touesnard963 views
Mongo NYC PHP Development Mongo NYC PHP Development
Mongo NYC PHP Development
Fitz Agard2K views
Efficient JavaScript DevelopmentEfficient JavaScript Development
Efficient JavaScript Development
wolframkriesing962 views
When To Use Ruby On RailsWhen To Use Ruby On Rails
When To Use Ruby On Rails
dosire29K views
Drupal 6 JavaScript and jQueryDrupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery
Matt Butcher3.2K views
Threads Needles Stacks Heaps - Java editionThreads Needles Stacks Heaps - Java edition
Threads Needles Stacks Heaps - Java edition
Ovidiu Dimulescu4.2K views
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
Christian Heilmann4.1K views
2008-12-21 Rubinius2008-12-21 Rubinius
2008-12-21 Rubinius
Lin Jen-Shin589 views
Practical Groovy DSLPractical Groovy DSL
Practical Groovy DSL
Guillaume Laforge10.3K views
Daniel Spiller's Wordpress PresentationDaniel Spiller's Wordpress Presentation
Daniel Spiller's Wordpress Presentation
Refresh Central Arkansas680 views
SPA Architecture Basics - Colombo JS meetupSPA Architecture Basics - Colombo JS meetup
SPA Architecture Basics - Colombo JS meetup
Hasith Yaggahavita1.1K views
Where2009 - Hacking Map APIsWhere2009 - Hacking Map APIs
Where2009 - Hacking Map APIs
Andrew Turner772 views

More from Felix Geisendörfer(17)

Node.js - As a networking toolNode.js - As a networking tool
Node.js - As a networking tool
Felix Geisendörfer12.9K views
Node.js  - Best practicesNode.js  - Best practices
Node.js - Best practices
Felix Geisendörfer58.6K views
Node.js  - A practical introduction (v2)Node.js  - A practical introduction (v2)
Node.js - A practical introduction (v2)
Felix Geisendörfer4.7K views
Nodejs a-practical-introduction-oredevNodejs a-practical-introduction-oredev
Nodejs a-practical-introduction-oredev
Felix Geisendörfer2.9K views
Building an alarm clock with node.jsBuilding an alarm clock with node.js
Building an alarm clock with node.js
Felix Geisendörfer10.8K views
How to Test Asynchronous Code (v2)How to Test Asynchronous Code (v2)
How to Test Asynchronous Code (v2)
Felix Geisendörfer4.8K views
How to Test Asynchronous CodeHow to Test Asynchronous Code
How to Test Asynchronous Code
Felix Geisendörfer3.3K views
Nodejs - A quick tour (v6)Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)
Felix Geisendörfer3.9K views
Nodejs - A quick tour (v5)Nodejs - A quick tour (v5)
Nodejs - A quick tour (v5)
Felix Geisendörfer2.8K views
Nodejs - Should Ruby Developers Care?Nodejs - Should Ruby Developers Care?
Nodejs - Should Ruby Developers Care?
Felix Geisendörfer3.8K views
Nodejs - A quick tour (v4)Nodejs - A quick tour (v4)
Nodejs - A quick tour (v4)
Felix Geisendörfer4.6K views
Node.js in productionNode.js in production
Node.js in production
Felix Geisendörfer8.4K views
Nodejs - A-quick-tour-v3Nodejs - A-quick-tour-v3
Nodejs - A-quick-tour-v3
Felix Geisendörfer3.1K views
Dirty - How simple is your database?Dirty - How simple is your database?
Dirty - How simple is your database?
Felix Geisendörfer10.3K views
Node.js - A Quick Tour IINode.js - A Quick Tour II
Node.js - A Quick Tour II
Felix Geisendörfer4.8K views
Node.js - A Quick TourNode.js - A Quick Tour
Node.js - A Quick Tour
Felix Geisendörfer9.3K views
ActiveDOMActiveDOM
ActiveDOM
Felix Geisendörfer5.2K views

With jQuery & CakePHP to World Domination