SlideShare une entreprise Scribd logo
YEOMAN
BACKBONE
BOX2D
FRANÇOIS MICHAUDON & HUGO MALLET
OBJECTIFS

1. SAVOIR UTILISER L’OUTIL YEOMAN


1. STRUCTURER UNE APPLICATION AVEC BACKBONE.JS


1. AJOUTER UN MOTEUR PHYSIQUE A TOUT ET
   N’IMPORTE QUOI !!!


=> PROGRAMMER DE BELLES WEBAPPS EN JAVASCRIPT
YEOMAN                   ?
C’est quoi?
Un outil qui regroupe plein d’outils…


Ca sert à quoi?
A gagner du temps! En automatisant les tâches répétitives de
la création web.


Ca vient d’où?
Depuis Mai 2012, d’une communauté de développeurs
reconnus dans le monde du web.
YEOMAN
LES OUTILS
YEOMAN
PERMET DE
• Démarrer un projet en quelques secondes
• Compiler automatiquement les fichiers coffee, sass…
• Détecter les erreurs Javascript
• Démarrer un serveur de dev
• Recharger la page lorsqu’une modification est détectée
• Optimiser les images
• Minifier tous les fichiers javascript, css, html
• Gérer les dépendances
• Lancer des tests
ETC..
YEOMAN
INSTALLATION
Disponible pour: Linux, Mac OS, Windows


Instructions
http://yeoman.io/installation.html
https://github.com/yeoman/yeoman/wiki/Manual-Install


Et notre TP…
YEOMAN
DEMARRER
1. Créer un projet
    C’est à dire créer un dossier et se positionner dedans
    | mkdir MyProject
    | cd MyProject


2. Initialiser le projet
    | yo webapp


3. Prévisualiser le projet
    | grunt server
YEOMAN
ARCHITECTURE BASIQUE
MyProject/
   • app/
         •   index.html
         •   .htaccess
         •   scripts/
               • main.js
         •   styles/
         •   …
   •   test/
   •   Gruntfile.js
   •   component.js
   •   …
YEOMAN
GENERATEURS
| yo webapp


| yo << generatorName >>


Exemples:
| yo angular
| yo backbone
| yo backbone:view customer
| yo backbone:model customer
YEOMAN
COMMANDES UTILES
| grunt server


| grunt build


| grunt test


| grunt server:dist


| bower install / update
YEOMAN
POUR ALLER PLUS LOIN
http://yeoman.io/index.html


https://github.com/yeoman/yeoman


http://gruntjs.com/


http://compass-style.org/


http://coffeescript.org/


ETC…
BACKBONE                    ?
C’est quoi?
Une librairie Javascript.


Ca sert à quoi?
A développer des applications web notamment des single-
page webapps.


Ca vient d’où?
Depuis fin 2010, initialement développé par le créateur de
coffeescript et underscore.js
BACKBONE
STRUCTURE
DESIGN MV* (~ MVC)


BACKBONE CORE:
• MODEL
• COLLECTION
• VIEW
• ROUTER


DEPENDANCES: underscore.js
DOM MANIPULATION OPTIONS: jQuery / Zepto
BACKBONE
MODEL
Définition d’un modèle:
var MyModel = Backbone.Model.extend({
         … définition …
});



Initialisation d’un modèle:
var book = new Book({
         title: « One thousand and One Night »,
         author: « Scherazade »
});
BACKBONE
MODEL (SUITE)
Getters
console.log( book.get(« title ») );


Setters
// Un seul attribut
Book.set(« content », « Lorem ipsum dolor sit amet… »;
// Plusieurs attributs via JSON
book.set({
             title: « One Day »,
             content: « Lorem ipsum dolor sit amet… »
});
BACKBONE
MODEL EVENTS
Les modèles sont sensibles aux événements et déclenchent
des événements.
var BookModel = Backbone.Model.extend({
         initialize: function() {
                     this.on(« change:title », function() {
                                    console.log(« Le titre du livre a changé »);
                     });
         }
});

this.on()        -> enregistre un écouteur d’événements
« change:title » -> le modèle a déclenché un événement
BACKBONE
COLLECTION
Les collections sont des sets de models


Définition:
var Library = Backbone.Collection.extend({
         model: Book,
         …
});

Initialisation:
var students = new StudentCollection([
         {name: « Jean », id: 1}, {name: « Elisa », id: 2}
]);
BACKBONE
COLLECTION METHODS
Quelques méthodes sur les collections

collection.add( model );
collection.remove( model );
collection.reset();
collection.where( attributes );
collection.sort();
…



Plus toutes les méthodes de underscore.js:
forEach, sortBy, map, find, last, filter, ….
BACKBONE
VIEW
Les vues correspondent à l’interface utilisateur, elles sont
attachés au DOM et peuvent interagir avec un modèle ou une
collection.


Définition:
var BookView = Backbone.View.extend({
         tagName: « li »,
         ….
});
Initialisation:
var oneDayView = new BookView({
         model: oneDayBook
});
BACKBONE
VIEW DOM ELEMENT
Une vue correspond à un élément du DOM.
Elle peut être attachée à un élément existant:
var Cart = Backbone.View.extend({
         el: « #cart-id »
});

Elle peut créer un élément:
var CartProduct = Backbone.View.extend({
         tagName: « li »,
         className: « cart-item »
});
BACKBONE
VIEW MODEL EVENTS
Une vue observe son modèle attaché.


Mettre en place l’écouteur d’événements:
var CartProduct = Backbone.View.extend({
         initialize: function() {
                     this.model.on(« change:quantity », this.render, this);
         }
});
BACKBONE
VIEW USER EVENTS
Une vue écoute les événements déclenchés par l’utilisateur.


Mettre en place l’écouteur d’événements:
var CartProduct = Backbone.View.extend({
          events: {
                      « click .addOne »: « addOne »
          },
          addOne: function() {
                      var newQuantity = this.model.get(« quantity »)++;
                      this.model.set(« quantity », newQuantity);
          }
});
BACKBONE
VIEW TEMPLATES
Les vues peuvent utiliser le système de template fourni par la
libraire underscore.js
Exemple de définition d’un template:
<script type=« text/template » id=« cart-item-template »>
<li class=« cart-item »> <%= label %> </li>
</script>

Utilisation d’un template dans une vue:
var CartProduct = Backbone.View.extend({
            template: _.template( $(« #cart-item-template »).html() )
});
BACKBONE
VIEW TEMPLATES (SUITE)
Que signifie « <%= label %> » dans le slide précédent?
Cette expression sera remplacée via le moteur de template de
underscore.js par la valeur de label.


Exécution du template:
var CartProduct = Backbone.View.extend({
         template: _.template( $(« #cart-item-template »).html() ),
         render: function() {
                   this.$el.html( this.template( this.model.attributes) );
         }
});
BACKBONE
MODEL SYNC
Récupèrer les attributs du modèle sur le serveur:


model.fetch();



Sauvegarder le modèle sur le serveur:


model.save();


Supprimer le modèle côté serveur (et côté client) :

model.destroy();
BACKBONE
COLLECTION SYNC
Comme pour les modèles, les collections peuvent être
synchronisés avec le serveur:


collection.fetch();


collection.create( {
           name: « Tim »
} );
BACKBONE
MODEL SYNC (SUITE)
Comment Backbone connaît la requête à effectuer pour
synchroniser le modèle client et le modèle sur le serveur?
  RESTful JSON Interface
Autrement dit, si votre serveur suit la norme REST et est
capable de recevoir et produire des données au format
JSON, Il n’y a RIEN D’AUTRE A ECRIRE !!!


Exemple d’URL appelée après un comment.fetch():
http://monserveur.com/articles/14/comments/36
Où 36 == model.id
BACKBONE
ROUTER
SINGLE PAGE APPLICATION
  Les actions de l’utilisateur n’entrainent pas un
  changement de l’URL


Problème: Comment conserver un état de mon application et
le reproduire après, par exemple, un refresh de la page?


Le router va nous permettre de gérer les états de notre
application et de lier certains événements à une URL.
BACKBONE
ROUTER (SUITE)
Définition:

var ArticleRouter = Backbone.Router.extend({
          routes: {
                      « help »:           « showHelp »
                      « articles/:id »:   « showArticle »,
                      « *other »:                   « defaultRoute »
          },


          showArticle: function(id) {
                      …
          }
});
Backbone.history.start();
BACKBONE
ROUTER INITIALISATION
Initialisation:
new ArticleRouter;



Démarrage:
Backbone.history.start();
BACKBONE
ROUTER METHODS
Ajout manuel d’une route:
myRouter.route( /^(.*?)/special$/ , « special », function() {});

[Utilisation d’une expression régulière]


Mise à jour de l’URL:
this.navigate(« comment/ » + id);



Mise à jour de l’URL en déclenchant l’événement correspondant:
myRouter.navigate(« cart », {trigger: true});
BACKBONE
POUR ALLER PLUS LOIN
Documentation officielle:
http://backbonejs.org/
http://underscorejs.org/


Tutos:
http://weblog.bocoup.com/


Exemple:
http://backbonejs.org/docs/todos.html
BOX2D                     ?
C’est quoi?
Une librairie de moteur physique 2D.


Ca sert à quoi?
A simuler une gravité, une collision …


Ca vient d’où?
Initialement créée en C++, la librairie a été portée dans
plusieurs langages dont récemment en Javascript.
BOX2D
OBJETS FONDAMENTAUX
• World: le monde box2d, c’est à dire tous les objets,
  contraintes, joints créés
• Shape: les formes (cercles, rectangles, …)
• RigidBody: « les corps de matières »
• Fixture: lien entre shape et body avec des propriétés
  comme la densité, la friction
• Constraint: contraintes appliquées aux corps
• Joint: containtes liant les corps entre eux
• Solver: le moteur qui met à jour les propriétés des objets
  toutes les x secondes en fonction des contacts,
  contraintes …
BOX2D
THE WORLD
Initialisation:


// Définition du vecteur de gravité (dans le plan 2D)
var gravity = new Box2D.Common.Math.b2Vec2( 0, 10 );


// Augmente les performances
var doSleep = true;


// Initialisation du monde Box2D
var world = new Box2D.Dynamics.b2World( gravity, doSleep );
BOX2D
FIXTURES
Définition d’une fixture avec une shape rectangulaire:
// Ne pas utiliser directement des pixels, prendre une échelle plus petite
var SCALE = 30, width = 400, height = 100;
// Propriétés de la fixture
var fixtureDef = new Box2D.Dynamics.b2FixtureDef;
fixtureDef.density = 1.0;
fixtureDef.friction = 0.5;
fixtureDef.restitution = 0.2;
// Forme de la fixture
fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
fixtureDef.shape.SetAsBox( width / SCALE, height / SCALE);
BOX2D
BODY
Création d’un corps avec la fixture précédente
var x = 200, y = 1000, angle = 0; // angle en radians
// Définition du body
var bodyDef = new Box2D.Dynamics.b2BodyDef;
bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody; // b2_dynamicBody
bodyDef.position.x = x / SCALE; // Position du centre de l’objet!
bodyDef.position.y = y / SCALE;
bodyDef.angle = angle;
// Création du body dans le monde
var body = world.CreateBody( bodyDef );
// Ajout de la fixture au body (donc de sa forme et ses caractéristiques)
body.CreateFixture( fixtureDef );
BOX2D
BODY METHODS
body.GetPosition(); // Retourne le centre de la forme dans le monde
body.GetAngle();
body.SetType
body.SetPositionAndAngle



Agir sur le corps:
body.ApplyForce( vecteur, centre ) // Pousser un objet
body.ApplyImpulse ( vecteur, centre ) // Frapper un objet
BOX2D
RAFRAICHIR LE MONDE
Les éléments du monde sont recalculés toutes les x périodes.
Définition d’une période en Javascript:
var periode = 1000 / 60; // 60 fps
window.requestAnimFrame = (function(){
          return window.requestAnimationFrame                ||
              window.webkitRequestAnimationFrame             ||
              window.mozRequestAnimationFrame                ||
              window.oRequestAnimationFrame                  ||
              window.msRequestAnimationFrame                 ||
              function(/* function */ callback, /* DOMElement */ element){
               window.setTimeout(callback, periode);
              };
  })();
BOX2D
RAFRAICHIR LE MONDE (SUITE)
Rafraichir le monde en utilisant la période précédente:


(function update() {
          world.Step(
          1 / 60,      // frame-rate
                       10,       // velocity iterations
                       10        // position iterations
          );
          // world.ClearForces();
          requestAnimFrame(update);
})();
BOX2D
DEBUG DRAW
ATTENTION: BOX2D N’EST PAS FAIT POUR DESSINER MAIS
SEULEMENT POUR CALCULER DES INTERACTIONS !!!!
Cela-dit, le mode debug permet de dessiner le monde dans
un canvas (utile pour démarrer sans avoir à coder les
fonctions de dessins html5).
Initialisation:
var debugDraw = new Box2D.Dynamics.b2DebugDraw();
debugDraw.SetSprite( $(« #canvas »)[0].getContext("2d") );
debugDraw.SetDrawScale(SCALE);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
world.SetDebugDraw(debugDraw);
BOX2D
DEBUG DRAW (SUITE)
Ajouter après le world.Step:
world.DrawDebugData();


(function update() {
          world.Step(
                       1 / 60, // frame-rate
                       10,     // velocity iterations
                       10      // position iterations
          );
          world.DrawDebugData();
          // world.ClearForces();
          requestAnimFrame(update);
})();
BOX2D
POUR ALLER PLUS LOIN

http://code.google.com/p/box2dweb/


http://www.box2dflash.org/docs/2.1a/reference/


http://box2d.org/documentation/
CONCLUSION
Nous avons vu:
• Comment utiliser Yeoman pour s’éviter les tâches
  répétitives et ainsi gagner du temps pour notre
  développement
• La libraire Javascript Backbone pour structurer et
  organiser notre code Javascript
• La librairie Box2D pour animer notre interface utilisateur
  avec un moteur physique en Javascript


Y’a plus qu’à…
DOCUMENTATIONS
Yeoman
http://yeoman.io/index.html
https://github.com/yeoman/yeoman
Backbone.js
http://backbonejs.org/
http://underscorejs.org/
Box2D
http://code.google.com/p/box2dweb/
http://www.box2dflash.org/docs/2.1a/reference/
http://box2d.org/documentation/
A VOIR EGALEMENT
Sublime Text 2
http://www.sublimetext.com/


Git
http://git-scm.com/
http://git-scm.com/book/fr (documentation en français)


Github
https://github.com/
NOUS CONTACTER

Hugo Mallet
hugo.mallet@53js.org
@hugomallet


François Michaudon
francois.michaudon@53js.org
@_big26

Contenu connexe

Tendances

jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilite
mikeh
 
HTML5
HTML5HTML5
HTML5
Neovov
 
JQuery
JQueryJQuery
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
5pidou
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
Philippe Sfeir
 
Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)
Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)
Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)
Laurent Moccozet
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications Web
Nicolas Hoffmann
 
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)
hibnico
 
Doctrine en dehors des sentiers battus
Doctrine en dehors des sentiers battusDoctrine en dehors des sentiers battus
Doctrine en dehors des sentiers battus
Romaric Drigon
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
Sylvain Wallez
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 
Jquery
JqueryJquery
Jquery
krymo
 
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrenteCocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads France
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
Geoffrey Croftє
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
IZZA Samir
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
VISEO
 

Tendances (17)

jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilite
 
HTML5
HTML5HTML5
HTML5
 
JQuery
JQueryJQuery
JQuery
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)
Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)
Projet Plateforme de Partage de Contenus Multimédias 2013 (2/5)
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications Web
 
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)
Maven/Ivy vs OSGi (Toulouse Jug 26-05-2011)
 
Doctrine en dehors des sentiers battus
Doctrine en dehors des sentiers battusDoctrine en dehors des sentiers battus
Doctrine en dehors des sentiers battus
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Jquery
JqueryJquery
Jquery
 
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrenteCocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 

Similaire à Cours yeoman backbone box2d

Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
kate2013
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Comment organiser un gros projet backbone
Comment organiser un gros projet backboneComment organiser un gros projet backbone
Comment organiser un gros projet backbone
Nicolas Carlo
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
Sem Koto
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
Sem Koto
 
Les générateurs de code, pour se simplifier la vie au quotidien
Les générateurs de code, pour se simplifier la vie au quotidienLes générateurs de code, pour se simplifier la vie au quotidien
Les générateurs de code, pour se simplifier la vie au quotidien
Nicolas Carlo
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
svuillet
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
Valtech
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
Publicis Sapient Engineering
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Vincent Composieux
 
Présentation de Ruby on Rails
Présentation de Ruby on RailsPrésentation de Ruby on Rails
Présentation de Ruby on Rails
Julien Blin
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentaux
Alphorm
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
zineblahib2
 

Similaire à Cours yeoman backbone box2d (20)

Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Comment organiser un gros projet backbone
Comment organiser un gros projet backboneComment organiser un gros projet backbone
Comment organiser un gros projet backbone
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
Les générateurs de code, pour se simplifier la vie au quotidien
Les générateurs de code, pour se simplifier la vie au quotidienLes générateurs de code, pour se simplifier la vie au quotidien
Les générateurs de code, pour se simplifier la vie au quotidien
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Présentation de Ruby on Rails
Présentation de Ruby on RailsPrésentation de Ruby on Rails
Présentation de Ruby on Rails
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentaux
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 

Cours yeoman backbone box2d

  • 2. OBJECTIFS 1. SAVOIR UTILISER L’OUTIL YEOMAN 1. STRUCTURER UNE APPLICATION AVEC BACKBONE.JS 1. AJOUTER UN MOTEUR PHYSIQUE A TOUT ET N’IMPORTE QUOI !!! => PROGRAMMER DE BELLES WEBAPPS EN JAVASCRIPT
  • 3. YEOMAN ? C’est quoi? Un outil qui regroupe plein d’outils… Ca sert à quoi? A gagner du temps! En automatisant les tâches répétitives de la création web. Ca vient d’où? Depuis Mai 2012, d’une communauté de développeurs reconnus dans le monde du web.
  • 5. YEOMAN PERMET DE • Démarrer un projet en quelques secondes • Compiler automatiquement les fichiers coffee, sass… • Détecter les erreurs Javascript • Démarrer un serveur de dev • Recharger la page lorsqu’une modification est détectée • Optimiser les images • Minifier tous les fichiers javascript, css, html • Gérer les dépendances • Lancer des tests ETC..
  • 6. YEOMAN INSTALLATION Disponible pour: Linux, Mac OS, Windows Instructions http://yeoman.io/installation.html https://github.com/yeoman/yeoman/wiki/Manual-Install Et notre TP…
  • 7. YEOMAN DEMARRER 1. Créer un projet C’est à dire créer un dossier et se positionner dedans | mkdir MyProject | cd MyProject 2. Initialiser le projet | yo webapp 3. Prévisualiser le projet | grunt server
  • 8. YEOMAN ARCHITECTURE BASIQUE MyProject/ • app/ • index.html • .htaccess • scripts/ • main.js • styles/ • … • test/ • Gruntfile.js • component.js • …
  • 9. YEOMAN GENERATEURS | yo webapp | yo << generatorName >> Exemples: | yo angular | yo backbone | yo backbone:view customer | yo backbone:model customer
  • 10. YEOMAN COMMANDES UTILES | grunt server | grunt build | grunt test | grunt server:dist | bower install / update
  • 11. YEOMAN POUR ALLER PLUS LOIN http://yeoman.io/index.html https://github.com/yeoman/yeoman http://gruntjs.com/ http://compass-style.org/ http://coffeescript.org/ ETC…
  • 12. BACKBONE ? C’est quoi? Une librairie Javascript. Ca sert à quoi? A développer des applications web notamment des single- page webapps. Ca vient d’où? Depuis fin 2010, initialement développé par le créateur de coffeescript et underscore.js
  • 13. BACKBONE STRUCTURE DESIGN MV* (~ MVC) BACKBONE CORE: • MODEL • COLLECTION • VIEW • ROUTER DEPENDANCES: underscore.js DOM MANIPULATION OPTIONS: jQuery / Zepto
  • 14. BACKBONE MODEL Définition d’un modèle: var MyModel = Backbone.Model.extend({ … définition … }); Initialisation d’un modèle: var book = new Book({ title: « One thousand and One Night », author: « Scherazade » });
  • 15. BACKBONE MODEL (SUITE) Getters console.log( book.get(« title ») ); Setters // Un seul attribut Book.set(« content », « Lorem ipsum dolor sit amet… »; // Plusieurs attributs via JSON book.set({ title: « One Day », content: « Lorem ipsum dolor sit amet… » });
  • 16. BACKBONE MODEL EVENTS Les modèles sont sensibles aux événements et déclenchent des événements. var BookModel = Backbone.Model.extend({ initialize: function() { this.on(« change:title », function() { console.log(« Le titre du livre a changé »); }); } }); this.on() -> enregistre un écouteur d’événements « change:title » -> le modèle a déclenché un événement
  • 17. BACKBONE COLLECTION Les collections sont des sets de models Définition: var Library = Backbone.Collection.extend({ model: Book, … }); Initialisation: var students = new StudentCollection([ {name: « Jean », id: 1}, {name: « Elisa », id: 2} ]);
  • 18. BACKBONE COLLECTION METHODS Quelques méthodes sur les collections collection.add( model ); collection.remove( model ); collection.reset(); collection.where( attributes ); collection.sort(); … Plus toutes les méthodes de underscore.js: forEach, sortBy, map, find, last, filter, ….
  • 19. BACKBONE VIEW Les vues correspondent à l’interface utilisateur, elles sont attachés au DOM et peuvent interagir avec un modèle ou une collection. Définition: var BookView = Backbone.View.extend({ tagName: « li », …. }); Initialisation: var oneDayView = new BookView({ model: oneDayBook });
  • 20. BACKBONE VIEW DOM ELEMENT Une vue correspond à un élément du DOM. Elle peut être attachée à un élément existant: var Cart = Backbone.View.extend({ el: « #cart-id » }); Elle peut créer un élément: var CartProduct = Backbone.View.extend({ tagName: « li », className: « cart-item » });
  • 21. BACKBONE VIEW MODEL EVENTS Une vue observe son modèle attaché. Mettre en place l’écouteur d’événements: var CartProduct = Backbone.View.extend({ initialize: function() { this.model.on(« change:quantity », this.render, this); } });
  • 22. BACKBONE VIEW USER EVENTS Une vue écoute les événements déclenchés par l’utilisateur. Mettre en place l’écouteur d’événements: var CartProduct = Backbone.View.extend({ events: { « click .addOne »: « addOne » }, addOne: function() { var newQuantity = this.model.get(« quantity »)++; this.model.set(« quantity », newQuantity); } });
  • 23. BACKBONE VIEW TEMPLATES Les vues peuvent utiliser le système de template fourni par la libraire underscore.js Exemple de définition d’un template: <script type=« text/template » id=« cart-item-template »> <li class=« cart-item »> <%= label %> </li> </script> Utilisation d’un template dans une vue: var CartProduct = Backbone.View.extend({ template: _.template( $(« #cart-item-template »).html() ) });
  • 24. BACKBONE VIEW TEMPLATES (SUITE) Que signifie « <%= label %> » dans le slide précédent? Cette expression sera remplacée via le moteur de template de underscore.js par la valeur de label. Exécution du template: var CartProduct = Backbone.View.extend({ template: _.template( $(« #cart-item-template »).html() ), render: function() { this.$el.html( this.template( this.model.attributes) ); } });
  • 25. BACKBONE MODEL SYNC Récupèrer les attributs du modèle sur le serveur: model.fetch(); Sauvegarder le modèle sur le serveur: model.save(); Supprimer le modèle côté serveur (et côté client) : model.destroy();
  • 26. BACKBONE COLLECTION SYNC Comme pour les modèles, les collections peuvent être synchronisés avec le serveur: collection.fetch(); collection.create( { name: « Tim » } );
  • 27. BACKBONE MODEL SYNC (SUITE) Comment Backbone connaît la requête à effectuer pour synchroniser le modèle client et le modèle sur le serveur? RESTful JSON Interface Autrement dit, si votre serveur suit la norme REST et est capable de recevoir et produire des données au format JSON, Il n’y a RIEN D’AUTRE A ECRIRE !!! Exemple d’URL appelée après un comment.fetch(): http://monserveur.com/articles/14/comments/36 Où 36 == model.id
  • 28. BACKBONE ROUTER SINGLE PAGE APPLICATION Les actions de l’utilisateur n’entrainent pas un changement de l’URL Problème: Comment conserver un état de mon application et le reproduire après, par exemple, un refresh de la page? Le router va nous permettre de gérer les états de notre application et de lier certains événements à une URL.
  • 29. BACKBONE ROUTER (SUITE) Définition: var ArticleRouter = Backbone.Router.extend({ routes: { « help »: « showHelp » « articles/:id »: « showArticle », « *other »: « defaultRoute » }, showArticle: function(id) { … } }); Backbone.history.start();
  • 31. BACKBONE ROUTER METHODS Ajout manuel d’une route: myRouter.route( /^(.*?)/special$/ , « special », function() {}); [Utilisation d’une expression régulière] Mise à jour de l’URL: this.navigate(« comment/ » + id); Mise à jour de l’URL en déclenchant l’événement correspondant: myRouter.navigate(« cart », {trigger: true});
  • 32. BACKBONE POUR ALLER PLUS LOIN Documentation officielle: http://backbonejs.org/ http://underscorejs.org/ Tutos: http://weblog.bocoup.com/ Exemple: http://backbonejs.org/docs/todos.html
  • 33. BOX2D ? C’est quoi? Une librairie de moteur physique 2D. Ca sert à quoi? A simuler une gravité, une collision … Ca vient d’où? Initialement créée en C++, la librairie a été portée dans plusieurs langages dont récemment en Javascript.
  • 34. BOX2D OBJETS FONDAMENTAUX • World: le monde box2d, c’est à dire tous les objets, contraintes, joints créés • Shape: les formes (cercles, rectangles, …) • RigidBody: « les corps de matières » • Fixture: lien entre shape et body avec des propriétés comme la densité, la friction • Constraint: contraintes appliquées aux corps • Joint: containtes liant les corps entre eux • Solver: le moteur qui met à jour les propriétés des objets toutes les x secondes en fonction des contacts, contraintes …
  • 35. BOX2D THE WORLD Initialisation: // Définition du vecteur de gravité (dans le plan 2D) var gravity = new Box2D.Common.Math.b2Vec2( 0, 10 ); // Augmente les performances var doSleep = true; // Initialisation du monde Box2D var world = new Box2D.Dynamics.b2World( gravity, doSleep );
  • 36. BOX2D FIXTURES Définition d’une fixture avec une shape rectangulaire: // Ne pas utiliser directement des pixels, prendre une échelle plus petite var SCALE = 30, width = 400, height = 100; // Propriétés de la fixture var fixtureDef = new Box2D.Dynamics.b2FixtureDef; fixtureDef.density = 1.0; fixtureDef.friction = 0.5; fixtureDef.restitution = 0.2; // Forme de la fixture fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape; fixtureDef.shape.SetAsBox( width / SCALE, height / SCALE);
  • 37. BOX2D BODY Création d’un corps avec la fixture précédente var x = 200, y = 1000, angle = 0; // angle en radians // Définition du body var bodyDef = new Box2D.Dynamics.b2BodyDef; bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody; // b2_dynamicBody bodyDef.position.x = x / SCALE; // Position du centre de l’objet! bodyDef.position.y = y / SCALE; bodyDef.angle = angle; // Création du body dans le monde var body = world.CreateBody( bodyDef ); // Ajout de la fixture au body (donc de sa forme et ses caractéristiques) body.CreateFixture( fixtureDef );
  • 38. BOX2D BODY METHODS body.GetPosition(); // Retourne le centre de la forme dans le monde body.GetAngle(); body.SetType body.SetPositionAndAngle Agir sur le corps: body.ApplyForce( vecteur, centre ) // Pousser un objet body.ApplyImpulse ( vecteur, centre ) // Frapper un objet
  • 39. BOX2D RAFRAICHIR LE MONDE Les éléments du monde sont recalculés toutes les x périodes. Définition d’une période en Javascript: var periode = 1000 / 60; // 60 fps window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, periode); }; })();
  • 40. BOX2D RAFRAICHIR LE MONDE (SUITE) Rafraichir le monde en utilisant la période précédente: (function update() { world.Step( 1 / 60, // frame-rate 10, // velocity iterations 10 // position iterations ); // world.ClearForces(); requestAnimFrame(update); })();
  • 41. BOX2D DEBUG DRAW ATTENTION: BOX2D N’EST PAS FAIT POUR DESSINER MAIS SEULEMENT POUR CALCULER DES INTERACTIONS !!!! Cela-dit, le mode debug permet de dessiner le monde dans un canvas (utile pour démarrer sans avoir à coder les fonctions de dessins html5). Initialisation: var debugDraw = new Box2D.Dynamics.b2DebugDraw(); debugDraw.SetSprite( $(« #canvas »)[0].getContext("2d") ); debugDraw.SetDrawScale(SCALE); debugDraw.SetFillAlpha(0.3); debugDraw.SetLineThickness(1.0); world.SetDebugDraw(debugDraw);
  • 42. BOX2D DEBUG DRAW (SUITE) Ajouter après le world.Step: world.DrawDebugData(); (function update() { world.Step( 1 / 60, // frame-rate 10, // velocity iterations 10 // position iterations ); world.DrawDebugData(); // world.ClearForces(); requestAnimFrame(update); })();
  • 43. BOX2D POUR ALLER PLUS LOIN http://code.google.com/p/box2dweb/ http://www.box2dflash.org/docs/2.1a/reference/ http://box2d.org/documentation/
  • 44. CONCLUSION Nous avons vu: • Comment utiliser Yeoman pour s’éviter les tâches répétitives et ainsi gagner du temps pour notre développement • La libraire Javascript Backbone pour structurer et organiser notre code Javascript • La librairie Box2D pour animer notre interface utilisateur avec un moteur physique en Javascript Y’a plus qu’à…
  • 46. A VOIR EGALEMENT Sublime Text 2 http://www.sublimetext.com/ Git http://git-scm.com/ http://git-scm.com/book/fr (documentation en français) Github https://github.com/
  • 47. NOUS CONTACTER Hugo Mallet hugo.mallet@53js.org @hugomallet François Michaudon francois.michaudon@53js.org @_big26

Notes de l'éditeur

  1. J’aime pas trop programmer de « belles » App ou à la limiteDévelopper rapidement de belles webapps
  2. Manque un mot : Une vue correspond à élément du DOM.