Symfony + Backbone.js

Symfony + Backbone.js

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

Tweet

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
  4. None
  5. None
  6. None
  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({ //... });
  19. None
  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!
  38. None
  39. None