SlideShare a Scribd company logo
1 of 25
symfony & jQuery ties and separations Massimiliano Arione May, 14th 2011
About me ,[object Object],[object Object],[object Object],[object Object]
symfony
jQuery
MVC
CPB
B ehavior ,[object Object],[object Object]
PROGRESSIVE ENHANCEMENT: THE WRONG WAY ,[object Object],[object Object],[object Object],[object Object]
PROGRESSIVE   ENHACEMENT: THE GOOD WAY Just use  plain  Javascript!
AJAX: THE 4 STEPS ,[object Object],[object Object],[object Object],[object Object]
AJAX: THE 4 STEPS ,[object Object],[object Object],[object Object],[object Object]
AJAX: THE 4 STEPS ,[object Object],[object Object],[object Object],[object Object]
AJAX: THE 4 STEPS ,[object Object],[object Object],[object Object],[object Object]
AJAX: THE WRONG WAY sf 1.0: Javascript helper  sf 1.4: sfJqueryPlugin <?php echo   link_to_remote ('...'); echo   jq_link_to_remote ('...');
AJAX: THE GOOD WAY ,[object Object],[object Object],[object Object],[object Object]
AJAX: THE GOOD WAY ,[object Object],[object Object],[object Object],[object Object]
AJAX: THE GOOD WAY ,[object Object],[object Object],[object Object],[object Object]
AJAX: THE GOOD WAY ,[object Object],[object Object],[object Object],[object Object]
IN PRACTICE: LINK <?php // in the view   echo   link_to (' + ', ' cart_increase ', $item) $(' div#cart a.increase ').click(ajaxIncrease);
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); };
<?php // in the view   // cartIncreaseSuccess.json.php use_helper(' Number ');   $arr = array(   ' total ' => format_currency($sf_user->getCartTotal(), ' EUR '), ); echo  json_encode($arr);
<?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 '); }
IN PRACTICE: FORM $(' div#filters form ').submit(ajaxFilter);
var  ajaxFilter = function(e) {    var  $form = $(this);   $.ajax({     type: ' POST ',     url:  $form.attr(' action ') + ' ?sf_format=json ',     data: $form.serializeArray(),     success: showProducts   });    return false ; };
Thanks! Massimiliano Arione @ garakkio blog.garak.it github.com/garak/sfjqec joind.in/talk/view/3034

More Related Content

What's hot

シックス・アパート・フレームワーク
シックス・アパート・フレームワークシックス・アパート・フレームワーク
シックス・アパート・フレームワーク
Takatsugu Shigeta
 

What's hot (20)

Introduction to thymeleaf
Introduction to thymeleafIntroduction to thymeleaf
Introduction to thymeleaf
 
Laravel the right way
Laravel   the right wayLaravel   the right way
Laravel the right way
 
Excellent
ExcellentExcellent
Excellent
 
Introduction To Lamp
Introduction To LampIntroduction To Lamp
Introduction To Lamp
 
Rails is not just Ruby
Rails is not just RubyRails is not just Ruby
Rails is not just Ruby
 
Laravel, the right way - PHPConference 2016
Laravel, the right way - PHPConference 2016Laravel, the right way - PHPConference 2016
Laravel, the right way - PHPConference 2016
 
Broadleaf Presents Thymeleaf
Broadleaf Presents ThymeleafBroadleaf Presents Thymeleaf
Broadleaf Presents Thymeleaf
 
Introduction to JQuery
Introduction to JQueryIntroduction to JQuery
Introduction to JQuery
 
TDC 2016 (Florianópolis) - Vá para o próximo nível - Dicas e truques para a c...
TDC 2016 (Florianópolis) - Vá para o próximo nível - Dicas e truques para a c...TDC 2016 (Florianópolis) - Vá para o próximo nível - Dicas e truques para a c...
TDC 2016 (Florianópolis) - Vá para o próximo nível - Dicas e truques para a c...
 
Thymeleaf Introduction
Thymeleaf IntroductionThymeleaf Introduction
Thymeleaf Introduction
 
ZCPE - PHP Conference 2015
ZCPE   - PHP Conference 2015ZCPE   - PHP Conference 2015
ZCPE - PHP Conference 2015
 
シックス・アパート・フレームワーク
シックス・アパート・フレームワークシックス・アパート・フレームワーク
シックス・アパート・フレームワーク
 
Алексей Плеханов: Новинки Laravel 5
Алексей Плеханов: Новинки Laravel 5Алексей Плеханов: Новинки Laravel 5
Алексей Плеханов: Новинки Laravel 5
 
Extending the WordPress REST API - Josh Pollock
Extending the WordPress REST API - Josh PollockExtending the WordPress REST API - Josh Pollock
Extending the WordPress REST API - Josh Pollock
 
RESTful web services
RESTful web servicesRESTful web services
RESTful web services
 
Changing Template Engine
Changing Template EngineChanging Template Engine
Changing Template Engine
 
Inside Bokete: Web Application with Mojolicious and others
Inside Bokete:  Web Application with Mojolicious and othersInside Bokete:  Web Application with Mojolicious and others
Inside Bokete: Web Application with Mojolicious and others
 
Evolution of API With Blogging
Evolution of API With BloggingEvolution of API With Blogging
Evolution of API With Blogging
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous Merb
 
Merb jQuery
Merb jQueryMerb jQuery
Merb jQuery
 

Viewers also liked (6)

Priority based K-Erlang Distribution Method in Cloud Computing
Priority based K-Erlang Distribution Method in Cloud ComputingPriority based K-Erlang Distribution Method in Cloud Computing
Priority based K-Erlang Distribution Method in Cloud Computing
 
Frontend caching - PHP Day, Italy, 2011
Frontend caching - PHP Day, Italy, 2011Frontend caching - PHP Day, Italy, 2011
Frontend caching - PHP Day, Italy, 2011
 
PHP Day 2011 PHP goes to the cloud
PHP Day 2011 PHP goes to the cloudPHP Day 2011 PHP goes to the cloud
PHP Day 2011 PHP goes to the cloud
 
Integrating Erlang with PHP
Integrating Erlang with PHPIntegrating Erlang with PHP
Integrating Erlang with PHP
 
Localisation typo3
Localisation typo3Localisation typo3
Localisation typo3
 
An year of Pomodoros
An year of PomodorosAn year of Pomodoros
An year of Pomodoros
 

Similar to symfony & jQuery (phpDay)

Cakefest 2010: API Development
Cakefest 2010: API DevelopmentCakefest 2010: API Development
Cakefest 2010: API Development
Andrew Curioso
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applications
elliando dias
 

Similar to symfony & jQuery (phpDay) (20)

Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
JavaScript Web Development
JavaScript Web DevelopmentJavaScript Web Development
JavaScript Web Development
 
mukesh
mukeshmukesh
mukesh
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
jQuery and AJAX with Rails
jQuery and AJAX with RailsjQuery and AJAX with Rails
jQuery and AJAX with Rails
 
Cakefest 2010: API Development
Cakefest 2010: API DevelopmentCakefest 2010: API Development
Cakefest 2010: API Development
 
Think jQuery
Think jQueryThink jQuery
Think jQuery
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Introduction to AJAX and DWR
Introduction to AJAX and DWRIntroduction to AJAX and DWR
Introduction to AJAX and DWR
 
Ajax
AjaxAjax
Ajax
 
Os Pruett
Os PruettOs Pruett
Os Pruett
 
TPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and FluxTPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and Flux
 
Asynchronous Interfaces
Asynchronous InterfacesAsynchronous Interfaces
Asynchronous Interfaces
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Scti 2011 minicurso jquery
Scti 2011 minicurso jqueryScti 2011 minicurso jquery
Scti 2011 minicurso jquery
 
Session3
Session3Session3
Session3
 
Ditching JQuery
Ditching JQueryDitching JQuery
Ditching JQuery
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applications
 

More from Massimiliano Arione

Gestione delle dipendenze con Composer
Gestione delle dipendenze con ComposerGestione delle dipendenze con Composer
Gestione delle dipendenze con Composer
Massimiliano Arione
 

More from Massimiliano Arione (20)

Typed models pug roma febbraio 2020
Typed models   pug roma febbraio 2020Typed models   pug roma febbraio 2020
Typed models pug roma febbraio 2020
 
Pipelines!
Pipelines! Pipelines!
Pipelines!
 
Il nostro amico Stan
Il nostro amico Stan   Il nostro amico Stan
Il nostro amico Stan
 
PSR7 - interoperabilità HTTP
PSR7 - interoperabilità HTTPPSR7 - interoperabilità HTTP
PSR7 - interoperabilità HTTP
 
Disinstallare fos user bundle e vivere felici
Disinstallare fos user bundle e vivere feliciDisinstallare fos user bundle e vivere felici
Disinstallare fos user bundle e vivere felici
 
MAGA - PUG Roma giugno 2017
MAGA - PUG Roma giugno 2017MAGA - PUG Roma giugno 2017
MAGA - PUG Roma giugno 2017
 
PHP7 e Rich Domain Model
PHP7 e Rich Domain ModelPHP7 e Rich Domain Model
PHP7 e Rich Domain Model
 
PHP on the desktop
PHP on the desktopPHP on the desktop
PHP on the desktop
 
Scrivere e leggere log con elastic
Scrivere e leggere log con elasticScrivere e leggere log con elastic
Scrivere e leggere log con elastic
 
The metrics
The metricsThe metrics
The metrics
 
Managing frontend libs in your Symfony project
Managing frontend libs in your Symfony projectManaging frontend libs in your Symfony project
Managing frontend libs in your Symfony project
 
Translating symfony docs
Translating symfony docsTranslating symfony docs
Translating symfony docs
 
Managing frontend libs in your php project
Managing frontend libs in your php projectManaging frontend libs in your php project
Managing frontend libs in your php project
 
Gestire librerie di frontend in php
Gestire librerie di frontend in phpGestire librerie di frontend in php
Gestire librerie di frontend in php
 
PHP, non lo stesso vecchio linguaggio
PHP, non lo stesso vecchio linguaggioPHP, non lo stesso vecchio linguaggio
PHP, non lo stesso vecchio linguaggio
 
Gestione delle dipendenze con Composer
Gestione delle dipendenze con ComposerGestione delle dipendenze con Composer
Gestione delle dipendenze con Composer
 
Migrare da symfony 1 a Symfony2
 Migrare da symfony 1 a Symfony2  Migrare da symfony 1 a Symfony2
Migrare da symfony 1 a Symfony2
 
Case study OmniAuto.it
Case study OmniAuto.itCase study OmniAuto.it
Case study OmniAuto.it
 
Symfony: un framework per il web
Symfony: un framework per il webSymfony: un framework per il web
Symfony: un framework per il web
 
Paypal + symfony
Paypal + symfonyPaypal + symfony
Paypal + symfony
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

symfony & jQuery (phpDay)

  • 1. symfony & jQuery ties and separations Massimiliano Arione May, 14th 2011
  • 2.
  • 5. MVC
  • 6. CPB
  • 7.
  • 8.
  • 9. PROGRESSIVE   ENHACEMENT: THE GOOD WAY Just use plain Javascript!
  • 10.
  • 11.
  • 12.
  • 13.
  • 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.
  • 16.
  • 17.
  • 18.
  • 19. IN PRACTICE: LINK <?php // in the view echo link_to (' + ', ' cart_increase ', $item) $(' div#cart a.increase ').click(ajaxIncrease);
  • 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. <?php // in the view // cartIncreaseSuccess.json.php use_helper(' Number ');   $arr = array(   ' total ' => format_currency($sf_user->getCartTotal(), ' EUR '), ); echo json_encode($arr);
  • 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. IN PRACTICE: FORM $(' div#filters form ').submit(ajaxFilter);
  • 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. Thanks! Massimiliano Arione @ garakkio blog.garak.it github.com/garak/sfjqec joind.in/talk/view/3034

Editor's Notes

  1. 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.
  2. 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&apos;ll see to any framework, or generally to any PHP code)
  3. is there anyone that DOES NOT know jQuery? Weel, jQuery is a Javascript library.
  4. Here is a schema of MVC pattern, with separation between the three layes: Model, View, Controller
  5. Here is instead the separation concerning web pages: Conten, Presentation, Behavior
  6. What is behavior? It&apos;s mainly two things: progressive enhancement, and AJAX
  7. 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
  8. the right way is dead simple: just use plain javascript. Attach &amp;quot;ready&amp;quot; event and enhance.
  9. Here come the most interesting part: the famous AJAX. Let&apos;s see what AJAX is, in 4 simple steps.
  10. 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)
  11. We can implement correctly AJAX in 4 steps.
  12. 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.
  13. These two functions deals with AJAX request and with DOM manipulation after succeeded AJAX call.
  14. The added view is simply a JSON file, with needed data
  15. The only modify needed in the controller is not redirecting when request is coming from AJAX
  16. A similar approach is applied to forms
  17. This is just like the link example seen above, just with different point of tie (the form&apos;s &amp;quot;action&amp;quot; instead of link&apos;s &amp;quot;href&amp;quot;)
  18. That&apos;s it! You can find a complete symfony project on a github repository