Symfony + Backbone.js

sfPot Marseille 2013-09 - Retour d'expérience

Transcript

1. Symfony 1.4 + Backbone.js
2. Symfony + Backbone.js Retour d'expérience sfPot Marseille 2013-09 - Jérémy Romey
3. Jérémy Romey Symfony, Propel, Composer, atoum, ... VeryLastRoom @jeremyFreeAgent - - - Twitter SensioLabsConnect Github GameCenter you can find me everywhere, mais surtout à la Caravelle
7. Application Backbone.js avec Marionette Application Symfony Routing Symfony en JS Templates avec Twig JS Utilisation des variables Assetic Date formattée avec la locale i18n : translations Symfony en JS
8. Application Backbone.js avec Marionette
9. Application Backbone.js avec Marionette ”Make your Backbone applications dance!“ Patterns en plus: ItemView CollectionView Region ...
10. Bower Bower est un manager de libraries Javascript. Dépendances d'un projet dans un fichier bower.json: { "dependencies": { "bootstrap": "3", "backbone.marionette": "1.1.0", "backbone-relational": "0.8.*", "backbone-query-parameters": "latest", "moment": "2.1.*" } } $ bower install
11. Assets dans le layout Symfony On structure les fichiers: Model dans ../marionette/model Collection dans ../marionette/collection Controller dans ../marionette/controller View dans ../marionette/view
12. Assets dans le layout Symfony Les dépendences {% javascripts '../components/jquery/jquery.min.js' '../components/moment/min/moment.min.js' '../components/underscore/underscore-min.js' '../components/backbone/backbone-min.js' '../components/backbone-relational/backbone-relational.js' '../components/backbone.marionette/lib/backbone.marionette.min.js' '../components/backbone-query-parameters/backbone.queryparams.js' ...
13. Assets dans le layout Symfony Les variables de base de l'app ... '../marionette/init.js' ... ../marionette/init.js: Albuquerque = {}; Albuquerque.Model = {}; Albuquerque.Collection = {};
14. Assets dans le layout Symfony Les models ... '../marionette/model/DeaAgent.js' '../marionette/model/MethCooker.js' '../marionette/model/MethDealer.js' ... ../marionette/model/DeaAgent.js: Albuquerque.Model.DeaAgent = Backbone.Model.extend({ urlRoot: 'dea-agents' });
15. Assets dans le layout Symfony Les collections ... '../marionette/collection/DeaAgent.js' '../marionette/collection/MethCooker.js' '../marionette/collection/MethDealer.js' ... ../marionette/collection/DeaAgent.js: Albuquerque.Collection.DeaAgent = Backbone.Collection.extend({ url: '/dea-agents', model: Albuquerque.Model.DeaAgent });
16. Assets dans le layout Symfony L'app ... '../marionette/app.js' ...
17. Assets dans le layout Symfony Les views ... '../marionette/view/Empty.js' '../marionette/view/WalterWhiteHouse/Bathroom.js' '../marionette/view/WalterWhiteHouse/Bedroom.js' '../marionette/view/WalterWhiteHouse/Kitchen.js' '../marionette/view/LosPollosHermanos/Lab.js' '../marionette/view/LosPollosHermanos/Laundry.js' ... ../marionette/view/LosPollosHermanos/Lab.js : App.View.LosPollosHermanos.Lab = Marionette.View.extend({ tagName: 'div', template: '<h1>Los Pollos Hermanos best meth lab</h1>', render: function() { this.$el.html(this.template); return this; } });
18. Assets dans le layout Symfony Les controllers ... '../marionette/controller/Meth.js' output='js/app.js' %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} ../marionette/controller/Meth.js: App.Controller.Meth = Marionette.Controller.extend({ //... });
20. Application Symfony
21. Application Symfony Web API qui fait le job, l'app Backbone.js est cliente de cette API. fetch et save
22. Routing Symfony en JS
23. Routing Symfony en JS Il y a un bundle pour ça: FOSJsRoutingBundle friendsofsymfony/jsrouting-bundle
24. Routing Symfony en JS Dans le controller Symfony: /** * @Route("/meth-cookers/{id}", name="meth_cooker", options={"expose"=true}) */ Modification des assets: 'bundles/fosjsrouting/js/router.js' 'js/fos_js_routes.js' Dans la console: $ app/console fos:js-routing:dump Dans Backbone.js: url = Routing.generate('meth_cookers', { id: 'walter-white' }); // url: /meth-cookers/walter-white
25. Templates avec Twig JS
26. Templates avec Twig JS Il y a un bundle pour ça: JMSTwigJsBundle jms/twig-js-bundle
27. Templates avec Twig JS Différences avec Twig PHP: On ne peut y passer que des objets JSON Seulement quelques fonctions et les filters - fork it! Twig JS compile des fichiers JS à partir des templates
28. Templates avec Twig JS ../marionette/template/LosPollosHermanos/Lab.twig: {% twig_js name="LosPollosHermanos_Lab" %} <h1>Los Pollos Hermanos best meth lab</h1> <p>Surface: {{ lab.surface }}</p> Modification des assets: '../vendor/jms/twig-js/twig.js' {% javascripts %} '../marionette/template/LosPollosHermanos/Lab.twig' output='js/templates.js' filter="twig_js" %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} ../marionette/view/LosPollosHermanos/Lab.js: App.View.LosPollosHermanos.Lab = Marionette.View.extend({ tagName: 'div', // template: '<h1>Los Pollos Hermanos best meth lab</h1>', template: LosPollosHermanos_Lab, render: function() { // this.$el.html(this.template); this.$el.html(Twig.render(this.template, {'lab': {'surface': 20 }})); return this; } });
29. Utilisation des variables Assetic
30. Utilisation des variables Assetic Permet de charger des fichiers JS différents Deux variables: env et locale Example avec locale [en, fr]: va générer js/lang.fr.js (lib-a/fr.js + lib-b/fr.js) et js/lang.en.js (lib-a/en.js + lib-b/en.js) {% javascripts %} '../lib-a/{locale}.js' '../lib-b/{locale}.js' output='js/lang.{locale}.js' vars=['locale'] %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %}
31. Utilisation des variables Assetic Avec Twig JS: trans() et locale permet de traduire des strings lors de la compilation en utilisant les translations de Symfony! Example avec locale [en, fr]: va générer js/templates.fr.js et js/templates.en.js dont le contenu sera différent selon la locale {% javascripts '../marionette/template/LosPollosHermanos/Lab.twig' output='js/templates.{locale}.js' filter="twig_js" vars=['locale'] %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %}
32. Date formattée avec la locale
33. Date formattée avec la locale Avec moment.js: Ajout dans les assets en utilisant locale: {% javascripts '../components/moment/min/lang/{locale}.js' output='js/date.{locale}.js' vars=['locale'] %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} Création d'un filter Twig JS: Twig.setFilter('date', function() { return moment(date).format('LL'); }); Utilisation dans un template Twig JS: {{ meth.delivery.scheduledDate|date() }}
34. i18n : translations Symfony en JS
35. i18n : translations Symfony en JS Il y a un bundle pour ça: BazingaExposeTranslationBundle willdurand/expose-translation-bundle
36. i18n : translations Symfony en JS Dans app/Resources/translations/messages.fr.yml: lospolloswelcome: "Bienvenue à Los Pollos %name%, vous aimez le poulet ?" Utilisation: Translator.get('lospolloswelcome', { "name" : "Jesse Pinkman" }); // Bienvenue à Los Pollos Jesse Pinkman, vous aimez le poulet ?
37. Conclusion Vous pouvez désormais vous servir dans votre application Backbone.js de ce que vous avez fait dans votre application Symfony!