With jQuery & CakePHP to World Domination

Slide 1: CakeFest Orlando 2008 With jQuery & CakePHP to World Domination by Felix Geisendörfer

Slide 2: About me • Felix Geisendörfer, 20 years old, Germany • Blogger / Programmer / Entrepreneur • Used jQuery & CakePHP in all battle ﬁelds • School projects, small business sites, 300++ DB table monster project

Slide 3: Blog about CakePHP ThinkingPHP.org

Slide 4: Deep inside the CakePHP core ThinkingPHP.org

Slide 5: Deep inside the CakePHP core Sometimes things just go wrong ThinkingPHP.org

Slide 6: World Domination

Slide 10: Many empires tried to achieve it

Slide 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

Slide 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

Slide 13: CakePHP & jQuery

Slide 14: Quick battle analysis

Slide 15: The problems • No jQuery JS helper available • No manual on using jQuery + CakePHP • No jQuery / CakePHP framework (except Jamal)

Slide 16: Why jQuery? • Embraces succinct code • Huge number of plugins out there • Plays nice with other libraries

Slide 17: Why CakePHP? just kidding ...

Slide 18: Why CakePHP? ... well actually

Slide 19: Jaxer: The new guy in town • Write entire web applications in JavaScript • MySQL, SQLite, SMTP, File system access • Server process stays alive

Slide 20: Jaxer: Why not? • No Linux version yet Jaxer also works with (Cake)PHP • Might not scale • No Framework yet

Slide 21: So let’s take over the world ...

Slide 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)

Slide 23: Problems you’ll run into

Slide 24: Not DRY

Slide 25: Not DRY

Slide 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

Slide 27: How to KISS this? • Have a central place to deﬁne JS includes • Only one reference to each JS ﬁle • Simple rules for inclusion on a per action basis

Slide 28: Rule based JS inclusion app/conﬁg/js_includes.php (custom approach, not in cake core!)

Slide 29: The inclusion rule parser ib le Fl ex T he (Google “33 Lines of Magic Code”) Will talk about this in tomorrows talks

Slide 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

Slide 31: Getting controller data to JS Yummy function for your AppController

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

Slide 33: Getting controller data to JS (put this in your layouts <head> section) How to export your $jsonVars array to JavaScript

Slide 34: Getting controller data to JS How to access jsonVars in JavaScript

Slide 36: PostTask.com • Personal time management • Next step: Becoming the best project management tool • After that: World Domination l Break e rcia Co mm

Slide 37: jayDom Microformats on steriods

Slide 38: MVC concept HTML / DOM Model CSS View JavaScript Controller

Slide 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 ...

Slide 40: jayDom Microformats • Usually non-standardized formats, custom to your application • Can change as your app evolves • You are already using them

Slide 41: jayDom Microformat Example

Slide 42: jayDom Microformat Example Task.id Task.date

Slide 43: jayDom Microformat Example Task.name Task.progress Task.time_done Task.time_total

Slide 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

Slide 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

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

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

Slide 48: jayDom way of semantic encoding Get: ea ts B Set: ea ts B

Slide 49: Mapping DOM accessors Get: Set:

Slide 50: A real world example

Slide 51: jayDom Microformat Example Task.id

Slide 52: jayDom Microformat Example Task.id Task.date

Slide 53: jayDom Microformat Example Task.progress

Slide 54: jayDom Microformat Example Task.progress Task.time_done

Slide 55: jayDom Microformat Example Task.progress Task.time_done Task.time_total

Slide 56: jayDom Microformat Example Task.name Task.progress Task.time_done Task.time_total

Slide 58: jQuery Selectors on steriods Select all tasks with the name ‘New Task’ Select all tasks that are more then half done

Slide 59: jQuery Selectors on steriods • Find all Posts • That have at least one Comment written by Felix • Only return posts that visible (not hidden)

Slide 60: Easy Ajax

Slide 61: jayDom Advantages • Put your semantics to use • Save tons of bandwidth on server calls using JSON • Hassle-less client server communication

Slide 62: Questions • Thanks for listening • Thanks for helping the CakePHP project grow Slides will be available on ThinkingPHP.org shortly!

Slideshare.net (beta)