symfony & jQuery (phpDay)

1,908 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,908
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • a brief history of my develeper evolution, with some stages: first  a plain procedural PHP developer, then some objects with PEAR, then full OOP with symfony, last (but not least) agile methods.
  • is there anyone that DOES NOT know symfony? Well, symfony is a full-stack MVC framework written in PHP. This talk uses symfony for PHP code, but the core issue is not strictly related to symfony (so, you can just apply what we'll see to any framework, or generally to any PHP code)
  • is there anyone that DOES NOT know jQuery? Weel, jQuery is a Javascript library.
  • Here is a schema of MVC pattern, with separation between the three layes: Model, View, Controller
  • Here is instead the separation concerning web pages: Conten, Presentation, Behavior
  • What is behavior? It's mainly two things: progressive enhancement, and AJAX
  • So, the progressive enhancement has been wrongly implemented in the past, with symfony. Those widgets, from sfFormExtraPlugin, do it the wrong way, by mixing php and javascript
  • the right way is dead simple: just use plain javascript. Attach "ready" event and enhance.
  • Here come the most interesting part: the famous AJAX. Let's see what AJAX is, in 4 simple steps.
  • Like for behavior, also AJAX has been implemented in wrong ways in the past, with symfony. Helpers to do AJAX calls: again, this leads to php/js mixing (and to disregard separation between C and B)
  • We can implement correctly AJAX in 4 steps.
  • A practical example: a simple e-commerce site, with a link in the cart, to increase a quantity of an item in the cart itself.
  • These two functions deals with AJAX request and with DOM manipulation after succeeded AJAX call.
  • The added view is simply a JSON file, with needed data
  • The only modify needed in the controller is not redirecting when request is coming from AJAX
  • A similar approach is applied to forms
  • This is just like the link example seen above, just with different point of tie (the form's "action" instead of link's "href")
  • That's it! You can find a complete symfony project on a github repository
  • symfony & jQuery (phpDay)

    1. 1. symfony & jQuery ties and separations Massimiliano Arione May, 14th 2011
    2. 2. About me <ul><ul><li>2001 PHP </li></ul></ul><ul><ul><li>2004 PEAR </li></ul></ul><ul><ul><li>2007 symfony </li></ul></ul><ul><ul><li>2009 agile </li></ul></ul>
    3. 3. symfony
    4. 4. jQuery
    5. 5. MVC
    6. 6. CPB
    7. 7. B ehavior <ul><ul><li>progressive enhancement </li></ul></ul><ul><ul><li>AJAX </li></ul></ul>
    8. 8. PROGRESSIVE ENHANCEMENT: THE WRONG WAY <ul><li>sfFormExtraPlugin : </li></ul><ul><ul><li>sfWidgetFormJQueryDate </li></ul></ul><ul><ul><li>sfWidgetFormJQueryAutocompleter </li></ul></ul><ul><ul><li>sfWidgetFormTextareaTinyMCE </li></ul></ul>
    9. 9. PROGRESSIVE   ENHACEMENT: THE GOOD WAY Just use plain Javascript!
    10. 10. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
    11. 11. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
    12. 12. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
    13. 13. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
    14. 14. AJAX: THE WRONG WAY sf 1.0: Javascript helper sf 1.4: sfJqueryPlugin <?php echo link_to_remote ('...'); echo jq_link_to_remote ('...');
    15. 15. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
    16. 16. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
    17. 17. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
    18. 18. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
    19. 19. IN PRACTICE: LINK <?php // in the view echo link_to (' + ', ' cart_increase ', $item) $(' div#cart a.increase ').click(ajaxIncrease);
    20. 20. var ajaxIncrease = function (e) {   $.ajax({     url:     this.href + ' ?sf_format=json ',     success: function (r) { increase(r, e.target); }   });   return false ; }; var increase = function (result, a) {   var $span = $(a).parents(' li ').find(' span.qty ');   var newqty = parseInt($span.text(), 10 ) + 1 ;   $span.empty().append(newqty);   $(' span#total ').empty();   $(' span#total ').append(result.total); };
    21. 21. <?php // in the view // cartIncreaseSuccess.json.php use_helper(' Number ');   $arr = array(   ' total ' => format_currency($sf_user->getCartTotal(), ' EUR '), ); echo json_encode($arr);
    22. 22. <?php // in the controller // actions.class.php public function executeCartIncrease(sfWebRequest $request) {   $this->product = $this->getRoute()->getProduct();   $this->getUser()->cartIncrease($this->product);   // was $this->redirect('@homepage');     $this->redirectUnless($request->isXmlHttpRequest(), ' @homepage '); }
    23. 23. IN PRACTICE: FORM $(' div#filters form ').submit(ajaxFilter);
    24. 24. var ajaxFilter = function(e) {   var $form = $(this);   $.ajax({     type: ' POST ',     url:  $form.attr(' action ') + ' ?sf_format=json ',     data: $form.serializeArray(),     success: showProducts   });   return false ; };
    25. 25. Thanks! Massimiliano Arione @ garakkio blog.garak.it github.com/garak/sfjqec joind.in/talk/view/3034

    ×