Your SlideShare is downloading. ×
Comment organiser un gros projet backbone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Comment organiser un gros projet backbone

256
views

Published on

This talk was built in French (for now), at the occasion of Backbone.js Meetup #2 hold in Paris. …

This talk was built in French (for now), at the occasion of Backbone.js Meetup #2 hold in Paris.

http://www.meetup.com/backbone-paris/events/189771252

Online presentation : http://metidia.com/talk-enlarge-your-backbone-project/
GitHub source : https://github.com/metidia/talk-enlarge-your-backbone-project


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
256
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ENLARGE YOUR BACKBONE PROJECT COMMENT ORGANISER SON PROJET DE FAÇON MODULAIRE ? PrésentéparNicolasCARLO( )etFabienBERNARD( )@nicoespeon @fabien0102
  • 2. KIKON EST ? NICOLAS CARLO VPofEngineering FABIEN BERNARD CTO
  • 3. SAYKOIKON FAIT ? Jeu socialsur le thème du vin dans lequelon peut acheter en vrailes bouteilles que l'on produitvirtuellement En HTML 5…‘‘full-stack JavaScript’’ Backbone.js + Marionette Node.js + MongoDB Grunt, Mocha, Yeoman, …
  • 4. LES GARS, CE SOIR ON FAIT UN PROTO ! - UN MANAGER UN PEU TROP CONFIANT //Probablementàl'arrache,dansun`main.js`FTW //Note-pasbesoinderoutagepournousdonconfaitsans=) $(function(){ //(…) //Onpréparenosbouteilles varbottlesModel=Backbone.Model.extend({...}); varbottlesCollection=Backbone.Collection.extend({...}); varbottlesView=Backbone.View.extend({...}); varbottlesCollectionView=Backbone.View.extend({...}); //(…) //Etoninitialisetoutlemonde! varmyBottlesList=newbottlesCollection(); myBottlesList.fetch(); varmyBottlesListView=newbottlesCollectionView({
  • 5. LE LENDEMAIN - AKA THE HANGOVER $(function(){ //(…) //Onpréparenosbouteilles varbottlesModel=Backbone.Model.extend({...}); varbottlesCollection=Backbone.Collection.extend({...}); varbottlesView=Backbone.View.extend({...}); varbottlesCollectionView=Backbone.View.extend({...}); //Onpréparenosbâtiments varbuildingsModel=Backbone.Model.extend({...}); varbuildingsCollection=Backbone.Collection.extend({...}); varbuildingsView=Backbone.View.extend({...}); varbuildingsCollectionView=Backbone.View.extend({...}); //Onpréparenoscépages varcepagesModel=Backbone.Model.extend({...}); varcepagesCollection=Backbone.Collection.extend({...});
  • 6. TIENS, C'EST DRÔLE... parfois çaplante, parfois çapasse… quand j'enlève ce boutde code y'atoutquiplante ! je retrouve plus où on acodé cette boite de dialogue ?! faudraitp'têtr qu'on mette des tests unit... oh wait! le soleilse lève dehors =)
  • 7. IL FAUT S'ORGANISER!
  • 8. YAKA SÉPARER LES FICHIERS PAR TYPES
  • 9. CONCRÈTEMENT, ÇA DONNE QUOI ? app/ main.js models/ bottles.js buildings.js collections/ views/ tests/(parce-qu'ilfautpas déconner non plus)
  • 10. THE GOOD PARTS =) On yvoitplus clair quand même ! Les tests sontisolés Facile de trouver des exemples pour cette archi
  • 11. THE BOF PARTS =/ L'achitecture du code ne reflète pas vraimentnos ‘‘modules’’ Etmon style, ilestpas modulaire mon style ? Pis faudrapas oublier : beware ladépendance entre les ‘‘modules’’
  • 12. LES QUESTIONS À SE POSER - MERCI ADDY OSMANI O/ Aquelpointce module estinstantanémentré-utilisable ? Mes modules peuvent-ils exister indépendamment? Mes modules peuvent-ils être testés indépendamment? Mon application n'est-elle pas trop étroitementliée ? Siune partie de mon applifail, est-ce-que touts'écroule ?
  • 13. NOTRE SOLUTION (PROPOSÉE)
  • 14. LA THÉORIE Source- (inspiredbyN.Zakas)http://scaleapp.org/
  • 15. UN DOSSIER = UN MODULE - ETPICÉTOUT ! app/ main.js main.less modules/ bottles/ bottles.js bottles.less models/ collections/ views/ bottles.views.composite.js bottles.views.item.js templates/ tests/
  • 16. EN PRATIQUE LES ÉLÉMENTS DE BOTTLES //bottles.model.js //Uneseuledépendance->ApplicationCore define(["app"],function(app){ returnBackbone.Model.extend({...}); }); //bottles.views.item.js //Uneseuledépendance->ApplicationCore define(["app"],function(app){ returnBackbone.Marionette.ItemView.extend({...}); });
  • 17. EN PRATIQUE LE MODULE BOTTLES //bottles.js define([ "app", //Lemodèle "bottles/models/bottles", //Lesvues "bottles/views/bottles.views.item" ],function(app,Model,ItemView){ //Initialiselemoduleaveclesméthodesdebase. varBottles=app.module(); //OnspécifienosAPI Bottles.Model=Model.extend({...}); Bottles.Views.Item=ItemView.extend({...});
  • 18. EN PRATIQUE LE MAIN.JS //main.js define([ "app", //Lesmodules "bottles/bottles.js" ],function(app,Bottles){ //Initialiselemoduleaveclesméthodesdebase. varmyBottlesList=newBottles.Collection(); myBottlesList.fetch(); varmyBottlesListView=newBottles.Views.Collection({ collection:myBottlesList }); myBottlesListView.appendTo("#bottom-bar"); });
  • 19. UN MODULE C'EST COMME UN ENFANT - MERCI MONSIEUR ZAKAS O/ Les modules doiventgarder les mains dans leurs poches On ne touche pas au DOM des autres On ne touche pas aux méthodes des autres Les modules demandent, ils ne prennentpas Les modules ne laissentpas traîner leurs jouets : pas de variables globales, encapsulation Les modules ne parlentpas àdes étrangers : on ne parle pas directementaux autres modules
  • 20. NOS OUTILS
  • 21. REQUIRE.JS GESTION DE DÉPENDANCES + OPTIMIZER AVEC R.JS Détermine les dépendances de chaque boutde code Re-compile ces dépendances en un seulfichier JS optimisé
  • 22. NOM DE CODE BRAIN.JS NOTRE PATTERN MEDIATOR À NOUS Tour de contrôle des modules Centralise lacommunication = découplage des modules Écoute les événements intéressants -Backbone.Event Trigger d'autres événements pour déclencher des actions
  • 23. MARIONETTE.JS ENTRE AUTRES UTILITAIRES Boite àoutilindispensable pour gérer des vues de plus en plus complexes Abstraction + cache de l'UI Simplifier laconf. Enregistrer de requests pour découpler son code Sinon y'aChaplinaussisibesoin d'aller plus loin
  • 24. ABSTRACTION + CACHE DE L'UI <divclass="builds__menu"> <ulclass="builds__menu__tabs"> <lidata-ui="tab">Bâtiments</li> <lidata-ui="tab">Décorations</li> </ul> </div> <!--(…)--> returnBackbone.Marionette.ItemView.extend({ ui:{ "tab":"[data-ui~=tab]" }, events:{ "click@ui.tab":"switchTab" } //(…) highlightTabs:function(){ this.ui.tab.each(function(){ //Dosomethingawesome! });
  • 25. SIMPLIFICATION DE LA CONF. returnBackbone.Collection.extend({ events:{ "click":"displayName" } appEvents:{ "bottles:do:setName":"setName" } //(…) initialize:function(){ Marionette.bindEntityEvents(this,app,Marionette.getOption(this,"app Events")); } setName:function(appellation,name){
  • 26. ENREGISTRER DES REQUESTS returnBackbone.Collection.extend({ requests:{ getCategories:function(){ //Retrievecategories… returncategories; } }, //(…) initialize:function(){ app.reqres.setHandler("builds:getCategories",this.requests.getCategori es,this); } //Pendantcetemps,ailleursdanslecode varbuildsCategories=app.request("builds:getCategories"); //(…)
  • 27. AXES D'AMÉLIORATION Améliorer l'init. des modules dans le main Multiples Brain.js, parce-que çagrossitvite Différents ‘‘channels’’ pour les événements Des suggestions ?