Le développement d'applications lourdes à base de JavaScript est désormais possible. Cependant, cela requiert de bien connaître le langage en lui-même ainsi que les meilleurs patterns et pratiques établit ces 10 dernières années à travers des frameworks comme YUI ou jQuery par exemple. Vous verrez donc ici comment bien structurer votre code, comment utiliser des approches permettant de palier à certaines limitations de JS et comment également industrialiser le code grâce à la mise en place de tests unitaires.

1. Javascript
La POO
Bonnes pratiques
Jean-pierre VINCENT (indépendant)

2. Qui ça ?
Jean-pierre VINCENT
braincracking.org (veille techno)
@theystolemynick
12 ans de Web
Expertise technique, formateur,
consultant

4. Voici John l'ingénieur

5. Lvl 1 : décorateur de page

8. Lvl 1 : décorateur de page
<script>
$('#id').randomPlugin();
</script>

9. Démo plugin easySlider

10. Moralité
JavaScript ça se copie / colle

11. Lvl 2 : scripteur

12. Lvl 2 : scripteur
<script>
function init( id ) {
$(id).randomPlugin();
};
$(document).ready( function() {
init( '#main' );
init( '#side' );
});
</script>

13. Lvl 2 : scripteur débogueur
Ajouts :
●
Pubs
●
Widgets sociaux
●
Trackers
●
Autres plugins
●
Autres scripts maison

14. Lvl 2 : scripteur débogueur
Ajouts :
●
Pubs
●
Widgets sociaux
●
Trackers
●
Autres plugins
●
Autres scripts maison

15. Lvl 2 : scripteur débogueur
<script>
function init( id ) {
$(id).randomPlugin();
};
// init se fait écraser
$(document).ready( function() {
init( '#main' );
init( '#side' );
});
</script>

16. Pollution globale

17. Pollution globale
2 exemples complètement au hasard
●
Gmail : 33 variables globales (450K lignes
de code)
●
Lemonde.fr : 480 variables globales

18. Actions
✓pattern module anonyme + var
✗ Function action() {}
✓ var action = function() {
var myVariable;
}
✓namespaces

19. Création d'un scope
Rappel
(function(){ // début de scope local
var private = true;
// ici je suis chez moi
})(); // fin de scope local

20. Lvl 3 : scripteur prudent
Correction 1
(function(){ // début de scope local
var init = function( id ) {
$(id).randomPlugin();
};
$(document).ready( function() {
init( '#main' );
init( '#side' );
});
})(); // fin de scope local

21. Namespaces
var MY = {};

22. Namespaces
var MY = {};
MY.init = function() {};

23. Namespaces
var MY = {};
MY.init = function() {};
MY.utils = {};

24. Namespaces
var MY = {};
MY.init = function() {};
MY.utils = {};
MY.utils.XHR = function() {};

25. Namespaces
var MY = {};
MY.init = function() {};
MY.utils = {};
MY.utils.XHR = function() {};
MY.utils.XHR.instances = {};

26. Namespaces - astuce
récupérer ou créer un namespace
MY = window.MY || {};
MY.utils = MY.utils || {};

27. Lvl 4 scripteur organisé
(function(){
MY = window.MY || {};
MY.init = function( id ) {
$(id).randomPlugin();
};
})( );
$(document).ready( function() {
MY.init( '#main' );
MY.init( '#side' );
});

28. Lvl 4 scripteur organisé
Démo code final namespaces

29. Lvl 5 : développeur

30. Programmation
Orienté
Objet

31. POO Classique
new, class, static, public,
private, __construct, $this,
const, self::, extends,
protected, parent::,
abstract, final, interface,
implements, instanceof

32. POO JS
EcmaScript 3
new (optionnel)
this (particulier)
instanceof

33. POO JS
new (optionel)
this (particulier)
instanceof
Rien n'est littéral
Tout est simulable

34. Le choix
Prototype ou closure ?

35. Le choix
Prototype ou closure ?
●
Prototype :
• The JS way
• performance (grand nombres)
●
Closure :
• variables privées
• plus lisible ?

36. Closure
myClass = function () {
var privateVariable = 0;
// public methods
};

37. Closure
myClass = function () {
var privateVariable = 0;
// public methods
return {
decrement:function() {
console.log( --privateVariable );
},
increment:function() {
console.log( ++privateVariable );
}
}
};

38. Renvoi d'objets
myClass = function () {
return {
decrement:function() { },
increment:function() { }
}
};
myObject = myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2
myObject2 = myClass();
myObject2.increment(); // 1
myObject2.increment(); // 2

39. Lvl 5 : développeur
Démo « interface publique »
Implémentation d'un « next »

40. Lvl 6 : développeur
Développeur
DHTML
AJAX
2.0
HTML5 !

41. Lvl 6 : programmation
événementielle
Démo « événements »

42. Tout est émulable
●
Pattern factory

43. Statiques
myClass = function () {
return {
publicMethod:function() {}
}
};
myClass.staticMethod = function() {};

44. Statiques
myClass = function () {
return {
publicMethod:function() {}
}
};
myClass.staticMethod = function() {};
myObject = myClass();
MyClass .staticMethod(); // OK
MyObject .publicMethod(); // OK

45. Statiques
myClass = function () {
return {
publicMethod:function() {}
}
};
myClass.staticMethod = function() {};
myObject = myClass();
MyClass .staticMethod(); // OK
MyObject .publicMethod(); // OK
MyObject .staticMethod(); // Error
MyClass .publicMethod(); // Error

46. Factory
Démo « factory »

47. Lvl 6 : développeur objet

48. Tout est émulable
●
programmation évènementielle
●
patterns classiques :
●
MVC,
●
observer,
●
facade, proxy,
●
singleton, factory ...

49. Librairies
Frameworks divers :
●
Tests U
●
Events
●
MVC
●
Data-bindings

56. Librairies

57. Conclusion
●
Javascript est différent, apprenez le
●
OOP réutilisable

58. Questions ?
Jean-pierre VINCENT
braincracking.org
@theystolemynick
RDV maintenant :
stand Generative Objects
(N° 55 à côté HP)

59. Function.prototype

60. Tout est objet
"abc".indexOf('a'); // 0
[1,2,3].slice(1); // [2, 3]
13.3714 .toFixed(1); // "13.4"
/[0-9]/g.test('10/11/2011'); // true

61. Function.prototype
Tout est objet
var myFunction = function() {};
myFunction.prototype; // object

62. Function.prototype
var myClass = function () {
// pas de variable privée
this.publicVariable = 0;
};
myClass.prototype = {
decrement:function() {
console.log( --this.publicVariable );
},
increment:function() {
console.log( ++this.publicVariable );
}
};

63. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;

64. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;

65. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
myObject2 = new subClass();
myObject2.increment(); // 11
myObject2.increment(); // 12

66. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
subClass.prototype.square = function(){}
myObject2 = new subClass();
myObject2.square(); // 100

67. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
subClass.prototype.square = function(){}
myObject2 = new subClass();
myObject2.square(); // 100