1. Experiments in Mobile/Desktop Web Framework Design James Rutherford @creativenucleus www.creativenucleus.co m Freelance Freelance Design + build Design + build PHP developer PHP developer HTML / CSS / etc. HTML / CSS / etc. JavaScript / jQuery JavaScript / jQuery some other stuff... some other stuff...

2. Starting at the Beginning Built an iPhone web appBuilt an iPhone web app –Served by web –Fits on screen –Uses Apple meta-tags – scale and boot screen –Can be added to users home screen with your icon NOT a native appNOT a native app iPhone??iPhone?? –Have I sold out? –Is this a problem? –Would I do this for a real client?

3. Torunnify.com iPhone-shaped websiteiPhone-shaped website Long, but looks OK on desktopLong, but looks OK on desktop Links in with Twitter for user authentication (OAuth)Links in with Twitter for user authentication (OAuth) Rapid buildRapid build Negative: any link breaks appnessNegative: any link breaks appness –Doh!

4. Framework Theory Make things easierMake things easier Consolidate developmentConsolidate development –Solve problems once –Reusable components Introduce structure (e.g. MVC)Introduce structure (e.g. MVC) –But dont constrain development Nice framework / App splitNice framework / App split Why not extend an existing Framework?Why not extend an existing Framework? –Drupal, CodeIgniter, jQuery Mobile, Titanium No panderingNo pandering Utility vs Extensibility vs PerformanceUtility vs Extensibility vs Performance

5. Framework Requirements Smooth flow on iPhone and desktopSmooth flow on iPhone and desktop –(this means JavaScript) –(this means jQuery) –Gracefully enhanced DatabaseDatabase Login accountsLogin accounts Base / extension architectureBase / extension architecture A parsimonious functional flowA parsimonious functional flow –dont make developer duplicate code Clean URLs (.htaccessium reroutaro)Clean URLs (.htaccessium reroutaro)

6. Flow FULL LOAD function workhorse( $action_id ) { switch( $action_id ) { case /do_it: return array( main => Hi! ); } SELECTIVE UPDATE Lets DO IT! Lets DO IT! $(a.js_action) ajax.php?action=/do_it json_encode( $result ) $(div#main).html( Hi! ) index.php?action=/do_i t www.website.com/do_it (build complete page) Hi!

7. James Rutherford @creativenucleus www.creativenucleus.co m Build Build Play Play Extend Extend Open source? Open source? Talk to me Talk to me Future Code Challenge PHP Wallpaper