Slide 1

Slide 1 text

Symfony 1.4 + Backbone.js

Slide 2

Slide 2 text

Symfony + Backbone.js Retour d'expérience sfPot Marseille 2013-09 - Jérémy Romey

Slide 3

Slide 3 text

Jérémy Romey Symfony, Propel, Composer, atoum, ... VeryLastRoom @jeremyFreeAgent - - - Twitter SensioLabsConnect Github GameCenter you can find me everywhere, mais surtout à la Caravelle

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Application Backbone.js avec Marionette

Slide 9

Slide 9 text

Application Backbone.js avec Marionette ”Make your Backbone applications dance!“ Patterns en plus: ItemView CollectionView Region ...

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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' ...

Slide 13

Slide 13 text

Assets dans le layout Symfony Les variables de base de l'app ... '../marionette/init.js' ... ../marionette/init.js: Albuquerque = {}; Albuquerque.Model = {}; Albuquerque.Collection = {};

Slide 14

Slide 14 text

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' });

Slide 15

Slide 15 text

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 });

Slide 16

Slide 16 text

Assets dans le layout Symfony L'app ... '../marionette/app.js' ...

Slide 17

Slide 17 text

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: '

Los Pollos Hermanos best meth lab

', render: function() { this.$el.html(this.template); return this; } });

Slide 18

Slide 18 text

Assets dans le layout Symfony Les controllers ... '../marionette/controller/Meth.js' output='js/app.js' %} {% endjavascripts %} ../marionette/controller/Meth.js: App.Controller.Meth = Marionette.Controller.extend({ //... });

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Application Symfony

Slide 21

Slide 21 text

Application Symfony Web API qui fait le job, l'app Backbone.js est cliente de cette API. fetch et save

Slide 22

Slide 22 text

Routing Symfony en JS

Slide 23

Slide 23 text

Routing Symfony en JS Il y a un bundle pour ça: FOSJsRoutingBundle friendsofsymfony/jsrouting-bundle

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Templates avec Twig JS

Slide 26

Slide 26 text

Templates avec Twig JS Il y a un bundle pour ça: JMSTwigJsBundle jms/twig-js-bundle

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Templates avec Twig JS ../marionette/template/LosPollosHermanos/Lab.twig: {% twig_js name="LosPollosHermanos_Lab" %}

Los Pollos Hermanos best meth lab

Surface: {{ lab.surface }}

Modification des assets: '../vendor/jms/twig-js/twig.js' {% javascripts %} '../marionette/template/LosPollosHermanos/Lab.twig' output='js/templates.js' filter="twig_js" %} {% endjavascripts %} ../marionette/view/LosPollosHermanos/Lab.js: App.View.LosPollosHermanos.Lab = Marionette.View.extend({ tagName: 'div', // template: '

Los Pollos Hermanos best meth lab

', template: LosPollosHermanos_Lab, render: function() { // this.$el.html(this.template); this.$el.html(Twig.render(this.template, {'lab': {'surface': 20 }})); return this; } });

Slide 29

Slide 29 text

Utilisation des variables Assetic

Slide 30

Slide 30 text

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'] %} {% endjavascripts %}

Slide 31

Slide 31 text

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'] %} {% endjavascripts %}

Slide 32

Slide 32 text

Date formattée avec la locale

Slide 33

Slide 33 text

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'] %} {% 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() }}

Slide 34

Slide 34 text

i18n : translations Symfony en JS

Slide 35

Slide 35 text

i18n : translations Symfony en JS Il y a un bundle pour ça: BazingaExposeTranslationBundle willdurand/expose-translation-bundle

Slide 36

Slide 36 text

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 ?

Slide 37

Slide 37 text

Conclusion Vous pouvez désormais vous servir dans votre application Backbone.js de ce que vous avez fait dans votre application Symfony!

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content