Réaliser des applications
innovantes avec Symfony2
Symfony2, API REST et Javascript
Qui sommes-nous ?
Alexandre Salomé
Consultant
@alexandresalome
Kévin Dunglas
Co-fondateur
@dunglas
Architecture
API REST
- Exposer les données de l’application
- HTTP + JSON/XML
- Plus léger que SOAP (adapté pour le mobile)
- RESTful
...
SPA (Single Page Application)
- Application JavaScript
- S’exécute côté client
- Récupère et modifie les données via l’API...
Application
apps
mobiles
site web
responsive
autres applications et
sites
(ERP, logistique,
partenaires…)
application
Face...
Stockage de données
Application Serveur Web
Internet
Applications tierces
Fichiers
Ecosystème
- PHP 5.3, 5.4, 5.5 (namespaces, traits)
- Composer
- Frameworks / CMS / PSR (PHP-FIG)
- PHPUnit / phpspec / Behat
PHP-FIG...
- Framework “full stack”
- Découplé en composants
- Axé fiabilité (tests), sécurité et performance
- Design moderne (POO, ...
AngularJS
- Framework JavaScript MVC complet
- Maintenu par Google
- Communauté importante
- S’intègre parfaitement avec S...
Backbone.js
- Bibliothèque JavaScript
- Synchronise la couche modèle de l’application
cliente avec une API REST
- S’intègr...
Alternatives
- Ember.js :
http://emberjs.com/
- Chaplin.js :
http://chaplinjs.org/
Et bien d’autres.
Implémentation
Modèle relationnel objet
- Doctrine : http://www.doctrine-project.org/
(ORM + ODM + O*M)
- Propel : http://propelorm.org/
...
Sérialisation des objets
return new JsonResponse($object->toArray());
Composant Serializer
http://symfony.com/fr/doc/curre...
Exposer une API REST
- FOSRestBundle :
https://github.com/FriendsOfSymfony/FOSRestBundle
- NelmioApiDocBundle :
https://gi...
Envoyer des données
- “Désérialisation” du JSON ou du XML :
JMSSerializerBundle
- Validation des données et mise à jour de...
Gestion des assets
- Less, SASS
- Minify, Uglify, YUI Compressor, …
- Bower
Avec Symfony : Assetic
Sans Symfony : Grunt + ...
Show me the code
Exemple KISS
/**
* @Route(path="/user/{id}", name="user_show")
*/
public function showAction($id)
{
$user = $this
->getDoc...
Exemple (encore plus court)
/**
* @Route(path="/user/{id}", name="user_show")
*/
public function showAction(User $user)
{
...
Behat-Launcher
Côté serveur (80%)
- Silex
- Composant
Serializer
Côté client (20%)
- Twitter Bootstrap
- AngularJS
- Inter...
DunglasTodoMVCBundle
Côté serveur (50%)
- Symfony
- FOSRest / JMSSerializer
Côté client (50%)
- Backbone.js et Chaplin.js
...
Aller plus loin
Référencement
- Google ne sait pas exécuter le JavaScript
- Les SPA ne sont pas référencées par défaut
Solution : Prerende...
Sécurité
- Protection CSRF d’une SPA
https://github.com/dunglas/DunglasAngularCsrfBundle
- Utilisation de l’objet JsonResp...
Hypermedia API
Découverte dynamique des serveurs par les
clients :
- HATEOAS (HAL+JSON)
http://hateoas-php.org/
- Hydra / ...
Des questions ?
Une bière !
Upcoming SlideShare
Loading in …5
×

Diaporama du sfPot Lillois du 20 mars 2014

3,198 views

Published on

Diaporama diffusé lors du sfPot Lillois du 20 mars 2014.
Conférence animée par Kévin Dunglas, co-fondateur de
Les-Tilleuls.coop et Alexandre Salomé, consultant chez Sensiolabs.

Published in: Technology
  • Be the first to comment

Diaporama du sfPot Lillois du 20 mars 2014

  1. 1. Réaliser des applications innovantes avec Symfony2 Symfony2, API REST et Javascript
  2. 2. Qui sommes-nous ? Alexandre Salomé Consultant @alexandresalome Kévin Dunglas Co-fondateur @dunglas
  3. 3. Architecture
  4. 4. API REST - Exposer les données de l’application - HTTP + JSON/XML - Plus léger que SOAP (adapté pour le mobile) - RESTful curl -X POST http://example.com/api/user --data '{"username": "alice", "fullname": "Alice"}'
  5. 5. SPA (Single Page Application) - Application JavaScript - S’exécute côté client - Récupère et modifie les données via l’API REST - Seules les données utiles transitent
  6. 6. Application apps mobiles site web responsive autres applications et sites (ERP, logistique, partenaires…) application Facebook API REST Internet
  7. 7. Stockage de données Application Serveur Web Internet Applications tierces Fichiers
  8. 8. Ecosystème
  9. 9. - PHP 5.3, 5.4, 5.5 (namespaces, traits) - Composer - Frameworks / CMS / PSR (PHP-FIG) - PHPUnit / phpspec / Behat PHP-FIG : http://www.php-fig.org Awesome PHP : https://github.com/ziadoz/awesome-php PHP
  10. 10. - Framework “full stack” - Découplé en composants - Axé fiabilité (tests), sécurité et performance - Design moderne (POO, MVC, DIC, Events…) - Intègre des bibliothèques tierces reconnues : Twig, Swiftmailer, Doctrine http://symfony.com / http://github.com/symfony/symfony Symfony2
  11. 11. AngularJS - Framework JavaScript MVC complet - Maintenu par Google - Communauté importante - S’intègre parfaitement avec Symfony http://angularjs.org/
  12. 12. Backbone.js - Bibliothèque JavaScript - Synchronise la couche modèle de l’application cliente avec une API REST - S’intègre facilement dans du code JS existant - S’intègre parfaitement avec Symfony http://backbonejs.org/
  13. 13. Alternatives - Ember.js : http://emberjs.com/ - Chaplin.js : http://chaplinjs.org/ Et bien d’autres.
  14. 14. Implémentation
  15. 15. Modèle relationnel objet - Doctrine : http://www.doctrine-project.org/ (ORM + ODM + O*M) - Propel : http://propelorm.org/ - PHPCR : http://phpcr.github.io/ - ElasticSearch : http://www.elasticsearch.org/guide/en/elasticsearch/client/php-api/current/ Voir aussi https://github.com/ziadoz/awesome-php#orm-and-datamapping
  16. 16. Sérialisation des objets return new JsonResponse($object->toArray()); Composant Serializer http://symfony.com/fr/doc/current/components/serializer.html JMSSerializerBundle https://github.com/schmittjoh/JMSSerializerBundle
  17. 17. Exposer une API REST - FOSRestBundle : https://github.com/FriendsOfSymfony/FOSRestBundle - NelmioApiDocBundle : https://github.com/nelmio/NelmioApiDocBundle - JMSSerializerBundle : http://jmsyst.com/bundles/JMSSerializerBundle
  18. 18. Envoyer des données - “Désérialisation” du JSON ou du XML : JMSSerializerBundle - Validation des données et mise à jour des objets : Symfony Form framework
  19. 19. Gestion des assets - Less, SASS - Minify, Uglify, YUI Compressor, … - Bower Avec Symfony : Assetic Sans Symfony : Grunt + Yeoman
  20. 20. Show me the code
  21. 21. Exemple KISS /** * @Route(path="/user/{id}", name="user_show") */ public function showAction($id) { $user = $this ->getDoctrine() ->getRepository('AcmeDemoBundle:User') ->find($id) ; if (!$user) { throw $this->createNotFoundException(sprintf('User %s not found.', $id)); } return new JsonResponse($user->toArray()); }
  22. 22. Exemple (encore plus court) /** * @Route(path="/user/{id}", name="user_show") */ public function showAction(User $user) { return new JsonResponse($user->toArray()); }
  23. 23. Behat-Launcher Côté serveur (80%) - Silex - Composant Serializer Côté client (20%) - Twitter Bootstrap - AngularJS - Internationalisation - Grunthttp://github.com/alexandresalome/behat-launcher
  24. 24. DunglasTodoMVCBundle Côté serveur (50%) - Symfony - FOSRest / JMSSerializer Côté client (50%) - Backbone.js et Chaplin.js - CoffeeScript http://github.com/dunglas/DunglasTodoMVCBundle
  25. 25. Aller plus loin
  26. 26. Référencement - Google ne sait pas exécuter le JavaScript - Les SPA ne sont pas référencées par défaut Solution : Prerender.io (snapshots) http://prerender.io https://github.com/rjanot/YuccaPrerenderBundle
  27. 27. Sécurité - Protection CSRF d’une SPA https://github.com/dunglas/DunglasAngularCsrfBundle - Utilisation de l’objet JsonResponse JSON Vulnerability
  28. 28. Hypermedia API Découverte dynamique des serveurs par les clients : - HATEOAS (HAL+JSON) http://hateoas-php.org/ - Hydra / JSON-LD http://www.markus- lanthaler.com/hydra/
  29. 29. Des questions ? Une bière !

×