Embed Size (px)
Citation preview
With jQuery & CakePHP to
World Domination
by Felix Geisendörfer
CakeFest Orlando 2008
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
ThinkingPHP.org
Blog about CakePHP
Deep inside the CakePHP core
ThinkingPHP.org
Deep inside the CakePHP core
ThinkingPHP.orgSometimes things just go wrong
World Domination
World Domination
World Domination
World Domination
Many empires tried to achieve it
World Domination
American Empire
Persian Empire
Macedonian Empire
Mauryan Empire
Roman Empire
Arab Caliphate
Mongol Empire
Ming Empire Portuguese empire
Habsburg EmpireSpanish Empire
French Empire
British Empire
Soviet Union
Japanese Empire
Nazi Germany
American Empire
Persian Empire
Macedonian Empire
Mauryan Empire
Roman Empire
Arab Caliphate
Mongol Empire
Ming Empire Portuguese empire
Habsburg EmpireSpanish Empire
French Empire
British Empire
Soviet Union
Japanese Empire
Nazi Germany
World Domination
American Empire
Persian Empire
Macedonian Empire
Mauryan Empire
Roman Empire
Arab Caliphate
Mongol Empire
Ming Empire Portuguese empire
Habsburg EmpireSpanish Empire
French Empire
British Empire
Soviet Union
Japanese Empire
Nazi Germany
American Empire
Persian Empire
Macedonian Empire
Mauryan Empire
Roman Empire
Arab Caliphate
Mongol Empire
Ming Empire Portuguese empire
Habsburg EmpireSpanish Empire
French Empire
British Empire
Soviet Union
Japanese Empire
Nazi Germany
PhpNut
&
Chuck
Norri
s
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
• No Linux version yet
• Might not scale
• No Framework yet
Jaxer: Why not?
Jaxer also works with (Cake)PHP
So let’s take over the world ...
Getting your JS included
Layout (app/views/layouts/default.ctp)
View (app/views/posts/index.ctp)
Controller (app/controllers/posts_controller.php)
The Quick & Easy
Problems you’ll run into
Not DRY
Not DRY
Confusing
WTF, where does w
hat
include come from?
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
(Google “33 Lines of Magic Code”)
The Flexible
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
How to export your $jsonVars array to JavaScript
(put this in your layouts <head> section)
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
Commercial Break
jayDom
Microformats on steriods
Controller
View
MVC concept
ModelHTML / DOM
CSS
JavaScript
Microformats
• 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 ...
Ask audience who has heard about Microformat
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.time_doneTask.progress Task.time_total
Task.name
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
How to parse the encoded progress value
Task.progressAsk: Anybody who doesn’t know regex?
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:
Set:
Beats
Beats
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.time_doneTask.progress
jayDom Microformat Example
Task.time_doneTask.progress Task.time_total
jayDom Microformat Example
Task.time_doneTask.progress Task.time_total
Task.name
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!
