Symfony with angular.pptx

1 377 vues

Publié le

Utiliser AngularJs avec Symfony2,
Présentation réalisée par Jérémy de l'agence Esokia à l'occasion de la conférence des développeurs à l'île Maurice

Publié dans : Internet
1 commentaire
7 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
1 377
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
96
Commentaires
1
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Symfony with angular.pptx

  1. 1. Utiliser AngularJs avec Symfony2
  2. 2. Symfony et Angular JS Esokia Ltd •Agence de développement web •Depuis 7 ans à l’île Maurice •De très nombreux projets à Maurice et à l’international
  3. 3. Symfony et Angular JS Jérémy Gachet •Développeur web depuis près de 10 ans en France et à Maurice •Spécialisé dans les projets utilisant le framework Symfony depuis 5 ans.
  4. 4. Symfony et Angular JS •Framework de développement PHP très complet •Norme de codages •Un nombre énorme de “Bundles” (2500) •Une documentation très aboutie •Une communauté active •Grosse demande client
  5. 5. Symfony et Angular JS •Framework de développement front •MVC •Two way data binding •Routing •One page app •Projet lancé et supporté par Google
  6. 6. Symfony et Angular JS +
  7. 7. Symfony et Angular JS Pourquoi Coupler les deux frameworks? ● Vitesse et réactivité = meilleure expérience utilisateur ● Facilité de développements front avec AngularJS ● Indépendance du développement entre le front et le dev. (export plus facile vers le mobile)
  8. 8. Symfony et Angular JS Difficultés • Conflits ○ Routing géré par les deux systèmes ○ Même signe d’interpolation pour angular et twig ○ Gestion des formulaires • Gestion de la sécurité • Perte d’une partie des fonctionnalités apportées par les commandes de Symfony
  9. 9. Symfony et Angular JS SECTION BREAK- CENTURY GOTHIC REGULAR 45pt / LEADING 1.2 ALL CAPS
  10. 10. Symfony et Angular JS Solution proposée ● Symfony ○ Utiliser Symfony principalement en mode RESTfull. ○ Mais aussi pour la génération des templates et du cache serveur. ● AngularJS: ○ User interface, réception et traitement local des données en Json
  11. 11. Symfony et Angular JS Presentation REST ● REST (representational state transfer) est un style d’architecture pour les systèmes hypermédia distribués. Ses spécificités: ■ Séparation Client-serveur : les responsabilités sont séparées entre le client et le serveur. L'interface utilisateur est séparée de celle du stockage des données. Cela permet aux deux d'évoluer indépendamment. ■ Mise en cache : le serveur envoie une réponse qui donne l'information sur la propension de cette réponse à être mise en cache ■ Un système hiérarchisé par couche : les états de l'application sont identifiés par des ressources individuelles (URL) http://fr.wikipedia.org/wiki/Representational_State_Transfer
  12. 12. Symfony et Angular JS Presentation REST Créer des urls et renvoyer des données sérialisées. (en JSON ou XML) Normes d’urls pour la récupération des données: ●GET http://mywebsite.com/books renvoie une liste de livres ●GET http://mywebsite.com/books/123 renvoie le livre avec la PK 123 ●POST http://mywebsite.com/books + donnes en post pour ajouter un livre ●PUT http://mywebsite.com/books/123 + données PUT pour modifier un livre ●PATCH http://mywebsite.com/books/123 + données PATCH pour modifier une partie d’un livre ●DELETE http://mywebsite.com/books/87 pour supprimer le livre avec la PK 87 ●GET http://mywebsite.com/books/87/comments pour recuperer tous les commentaires sur le livre avec la PK 87 ●GET http://mywebsite.com/books/87/comments/125 pour recuperer le commentaire avec la PK 125 lie au livre avec la PK 87 Utilisation des méthodes et des codes réponses HTTP de manière adéquates.
  13. 13. Symfony et Angular JS Utiliser Symfony en mode RESTfull Une distribution: https://github.com/gimler/symfony-rest-edition Qui intègre les bundles pour faciliter la création d’API REST
  14. 14. Symfony et Angular JS Utiliser Symfony en mode RESTfull Les bundles: JMSSerializerBundle Pour serialize simplement vos entités en json et en xml. avec la possibilité de modifier les comportements à l’aide d’annotations ou de méthodes spécifiques un serilizer efficace : $serializer = JMSSerializerSerializerBuilder::create()->build(); $serializer->serialize($object, 'json');
  15. 15. Symfony et Angular JS Utiliser Symfony en mode RESTfull Les bundles: JMSSerializerBundle Des annotations pour modifier le contenu de vos serialisations: ● Changer le getter utilisé (et donc modifer le rendu d’un champs comme vous le souhaitez) /** @JMS/Accessor(getter="getTrimmedName",setter="setName") */ private $name; ● Exclure un champ de l’export de votre entité /** @JMS/Exclude */ private $password; ● Modifier la clé de l’export: /** @JMS/SerializedName(my_property) */ private $myProperty; Liste complète: http://jmsyst.com/libs/serializer/master/reference/annotations
  16. 16. Symfony et Angular JS Utiliser Symfony en mode RESTfull Les bundles: FOSRestBundle: Les routes REST sont normées et très répétitives à écrire. Ce bundle vous génère vos routes dynamiquement à partir du nom de vos controllers. # app/config/routing.yml users: type: rest resource: AcmeHelloBundleControllerUsersController
  17. 17. Symfony et Angular JS Utiliser Symfony en mode RESTfull <?php use FOSRestBundleRoutingClassResourceInterface; class UserController implements ClassResourceInterface { public function getUsersAction() {} // "get_users" [GET] /users public function postUsersAction() {} // "new_users" [POST] /users public function getUserAction($slug) {} // "get_user" [GET] /users/{slug} public function getUserCommentsAction($slug) {} // "get_user_comments" [GET] /users/{slug}/comments }
  18. 18. Symfony et Angular JS Exemple complet d’action : <?php /** * Returns an user by username/email. * @param string $slug Username or Email * @Secure(roles="ROLE_USER") */ public function getUserAction($slug) { $userManager = $this->container->get('fos_user.user_manager'); $user = $userManager->findUserByUsernameOrEmail($slug); return $user; } // "get_user" [GET] /users/{slug} Utiliser Symfony en mode RESTfull
  19. 19. Symfony et Angular JS Pensez à sécuriser vos actions ● En mode REST, vos URL sont les seuls garants de la sécurité de votre application. ● Annotation @secure : toute la puissance de symfony Utiliser Symfony en mode RESTfull
  20. 20. Symfony et Angular JS BazingaHateoasBundle Ajoutez automatiquement un lien vers votre ressource à vos réponses { "user": { "id": 123, "first_name": "John", "last_name": "Doe", "_links": { "self": { "href": "http://example.com/api/users/123" } } } } Possibilité de paramétrer la génération des liens en fonction des privilèges de l’utilisateur. (le lien delete n’est pas envoyé le l’utilisateur n’a pas le droit de supprimer une entité) Utiliser Symfony en mode RESTfull
  21. 21. Symfony et Angular JS BazingaHateoasBundle Vous pouvez également ajouter des liens vers les relations de votre entités ou les liens utilisés pour un page dans une collection { "page": 1, "limit": 10, "pages": 1, "_links": { "self": { "href": "/api/users?page=1&limit=10" }, "first": { "href": "/api/users?page=1&limit=10" }, "last": { "href": "/api/users?page=129&limit=10" Utiliser Symfony en mode RESTfull
  22. 22. Symfony et Angular JS La validation des formulaires • Désactivez le CSRF Cette protection n’est utile que lorsqu’on identifie l’utilisateur à l’aide de cookies. (voir la partie Sécurité pour plus d’informations sur l’authentification) Avec fos rest bundle: fos_rest: disable_csrf_role: ROLE_API Utiliser Symfony en mode RESTfull
  23. 23. Symfony et Angular JS La validation des formulaires Valider un formulaire : Valider les formulaires ne se fait pas aussi simplement que l’on pourrait s’y attendre o Utiliser les bons codes de responses HTTP :  201 created après une création  204 no content après un update ou un delete  400 bad request si l’utilisateur envoi des paramètres invalides, etc… Tips: Utiliser les constantes de la class Response: Response::HTTP_CREATED ou JsonResponse::HTTP_CREATED Utiliser Symfony en mode RESTfull
  24. 24. Symfony et Angular JS La validation des formulaires Une requête Ajax ne renvoie pas des données que les formulaires de Symfony peuvent bind automatiquement. Il faut donc le faire à la main: $json_data = json_decode($request->request->get(“datas”), true); $form = $this->createForm(new NoteType(), $note, array('method'=>$request->getMethod())); //remove extra forms fields $children = $form->all(); $data = array_intersect_key($json_data, $children); //bind $form->bind($data); //return $form; if ($form->isValid()) { …. Utiliser Symfony en mode RESTfull
  25. 25. Symfony et Angular JS La sécurité LexikJWTAuthenticationBundle ● Alterative simple à OAuth ● Utilisation d’un token JWT en header ● SSL ● Login via HTTP form Intégration avec AngularJs : https://github.com/auth0/angular-jwt Utiliser Symfony en mode RESTfull
  26. 26. Symfony et Angular JS Intégrer
  27. 27. Symfony et Angular JS Utiliser Bower pour télécharger vos modules ● Gestionnaire de dépendance pour Javascript ● Téléchargement en ligne de commande : bower install angularjs ● Creation d’un fichier bower.js fonctionnant comme le composer.json Intégrer Angular JS - Utiliser Bower
  28. 28. Symfony et Angular JS Utiliser assetic pour importer vos fichiers La déclaration de vos modules doit donc toujours être faite en suivant les best practices pour éviter les soucis lors de la minification : ['$scope', function($scope)... app.controller('mainController', ['$scope', function($scope) { $scope.message = 'HOORAY!'; }]); https://docs.angularjs.org/tutorial/step_05 Intégrer Angular JS
  29. 29. Symfony et Angular JS Twig et AngularJS utilisent les mêmes symboles d’interpolation : {{ }} Donc il faut modifier les symboles d'interprétation d’angularJS : Au niveau de la déclaration du module: angular.module('myApp', [], function($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }); Angular fonctionnera désormais avec [[ myScopeVariable ]] Intégrer Angular JS - les templates
  30. 30. Symfony et Angular JS Gérer les templates AngularJs avec twig ● Garder toute la puissance de twig o Utilisation des balises {% spaceless %} {% endspaceless %} o Utilisation du filtre |trans pour générer simplement et efficacement les traductions des interfaces ● Sortir les templates du dossier public de l’application Intégrer Angular JS - les templates
  31. 31. Symfony et Angular JS Créer des routes pour accéder au template: 1. Static controller de Symfony2: acme_privacy: path: /privacy defaults: _controller: FrameworkBundle:Template:template template: 'AcmeBundle:Static:privacy.html.twig' a. Permet de créer des routes sans controller b. inconvénient: 1 route à créer par template. Intégrer Angular JS - les templates
  32. 32. Symfony et Angular JS Créer des routes pour accéder au template: Universal route: Créer une route universelle pour accéder à vos templates statiques : get_static_template: path: /tpl/{templateName}.{_format} defaults: _controller: "EsokiaAdminBundle:Default:getStaticTemplate" requirements: _format: html templateName: .+ options: expose: true Intégrer Angular JS - les templates
  33. 33. Symfony et Angular JS Créer des routes pour accéder au template Universal route - controller : /** * @Cache(expires="tomorrow") */ public function getStaticTemplateAction($templateName, $_format){ return $this->render('EsokiaAdminBundle:Default:Static/'.$templateName.'.'.$_format.'.twig'); } Intégrer Angular JS - les templates
  34. 34. Symfony et Angular JS En dehors de l’interface REST, le routing de symfony n’est utilisé que pour ● Accéder à la home page ● Accéder aux templates statics ● Les autres routes sont gérées par Angular JS Intégrer Angular JS - Routing
  35. 35. Symfony et Angular JS Utiliser les routes dynamiques de Symfony avec Angular JS ● FOSJsRoutingBundle Créer un fichier Javascript pour exposer vos routes: o ajouter expose: true aux routes que vous voulez utiliser en JS options: expose: true ● Utiliser la fonction du bundle pour utiliser vos routes : Routing.generate('route_id', /* your params */) Intégrer Angular JS - Routing
  36. 36. Symfony et Angular JS Utiliser les routes dynamiques de Symfony avec Angular JS Exemple: var userDetailsUrl = Routing.generate('get_static_template', {'templateName': 'userDetails', '_format':'html'}); $routeProvider.when('/details/:username', { controller: 'userDetailsController', templateUrl: userDetailsUrl }) Avantages : ● Pas de soucis de routing dans angular si vous déplacez vos fichiers js quand vous les compressez avec assetic. ● Domain name agnostic Intégrer Angular JS - Routing
  37. 37. Symfony et Angular JS Solution 1 : Override les templates de générations des formulaires de Symfony ● Permet de générer les templates de formulaire avec la ligne de commande ● Proche des habitudes des développeurs Symfony2 ● Intéressant si beaucoup de formulaires sont standards Intégrer Angular JS - Les templates de formulaires
  38. 38. Symfony et Angular JS Gérer les templates de formulaires avec Angular Js ● Abandonner complètement les templates de formulaire Symfony ● Utiliser Xeditable Intégrer Angular JS - Les templates de formulaires
  39. 39. Symfony et Angular JS XEditable: ● Série de directive de formulaire permettant le click-to-edit aussi appelé edit-in- place ● Meilleure expérience utilisateur ● Une seule vue à créer pour les actions de visualisation et d’editing Intégrer Angular JS - Les templates de formulaires
  40. 40. Symfony et Angular JS Intégrer Angular JS - Les templates de formulaires Template de vue Template d’édition ● Un seul template, deux utilisations. ● Masquer le bouton d’édition pour les personnes non autorisées à éditer
  41. 41. Symfony et Angular JSSymfony et Angular JS Merci http://esokia-webagency.com

×