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
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({
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 =)
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 ?
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
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.
24. 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
28. 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 ?