La présentation de Frédéric Dewinne aborde l'importance de JavaScript dans le développement web, en mettant l'accent sur sa fonctionnalité en tant que langage de programmation et non seulement comme langage de présentation. Il conseille l'utilisation de bonnes pratiques telles que le développement orienté tests (TDD) et présente le framework de test 'jstestdriver', qui facilite les tests sur différents clients. Enfin, il discute de l'automatisation des tests avec Jenkins pour une meilleure gestion et analyse des résultats.

1. Le javascript
Un ami du php souvent délaissé lors des tests
PHP’tit Déj
«Intégration Continue»
16.05.2013 - Luxembourg
mercredi 22 mai 13

2. Présentation
Frédéric Dewinne
= Consultant @ VA Consulting
= Architecte logiciel, formateur, coach
= Expert PHP / JS depuis 2007
mercredi 22 mai 13

3. Le javascript
mercredi 22 mai 13

4. Le javascript
≠ langage de présentation
mercredi 22 mai 13

5. Le javascript
≠ langage de présentation
= langage de programmation
mercredi 22 mai 13

6. Le javascript
≠ langage de présentation
= langage de programmation
= langage événementiel
mercredi 22 mai 13

7. Le javascript
≠ langage de présentation
= langage de programmation
= langage événementiel
= s’exécute sur un client, un serveur ou isolé
(applications Windows 8)
mercredi 22 mai 13

8. Le javascript
≠ langage de présentation
= langage de programmation
= langage événementiel
= s’exécute sur un client, un serveur ou isolé
(applications Windows 8)
mercredi 22 mai 13

9. Problématique dans le cadre d’un site web
mercredi 22 mai 13

10. Problématique dans le cadre d’un site web
= le client utilisé
(OS, type et version de navigateur, ...)
mercredi 22 mai 13

11. Problématique dans le cadre d’un site web
= le client utilisé
(OS, type et version de navigateur, ...)
= la testabilité du code
mercredi 22 mai 13

12. Problématique dans le cadre d’un site web
= le client utilisé
(OS, type et version de navigateur, ...)
= la testabilité du code
= la détection des erreurs
mercredi 22 mai 13

13. Comment procéder dès lors ?
mercredi 22 mai 13

14. Comment procéder dès lors ?
= écrire du code réutilisable
plugins, widgets, prototypes, ...
mercredi 22 mai 13

15. Comment procéder dès lors ?
= écrire du code réutilisable
plugins, widgets, prototypes, ...
= et testable
Test Driven Development (TDD)
mercredi 22 mai 13

16. Comment procéder dès lors ?
= écrire du code réutilisable
plugins, widgets, prototypes, ...
= et testable
Test Driven Development (TDD)
= tester le code sur différents clients
mercredi 22 mai 13

17. JsTestDriver
mercredi 22 mai 13

18. JsTestDriver
= initié par Google
mercredi 22 mai 13

19. JsTestDriver
= initié par Google
= framework de test
mercredi 22 mai 13

20. JsTestDriver
= initié par Google
= framework de test
= support d’autres frameworks de test
mercredi 22 mai 13

21. JsTestDriver
= initié par Google
= framework de test
= support d’autres frameworks de test
= serveur http pour une exécution client / serveur
mercredi 22 mai 13

22. JsTestDriver
= initié par Google
= framework de test
= support d’autres frameworks de test
= serveur http pour une exécution client / serveur
= proxy web pour les dépendances
mercredi 22 mai 13

23. JsTestDriver
= initié par Google
= framework de test
= support d’autres frameworks de test
= serveur http pour une exécution client / serveur
= proxy web pour les dépendances
= exécutable en ligne de commande
mercredi 22 mai 13

24. JsTestDriver
= initié par Google
= framework de test
= support d’autres frameworks de test
= serveur http pour une exécution client / serveur
= proxy web pour les dépendances
= exécutable en ligne de commande
= plugins pour IDE
mercredi 22 mai 13

25. JsTestDriver
= initié par Google
= framework de test
= support d’autres frameworks de test
= serveur http pour une exécution client / serveur
= proxy web pour les dépendances
= exécutable en ligne de commande
= plugins pour IDE
= plugin de code coverage
mercredi 22 mai 13

26. Exemple
TestCase('form-collection-test', {
"test add fieldset on add button click": function () {
/*:DOC collection = <div><fieldset><input name="toto[0]" /></fieldset></div>*/
/*:DOC addButton = <button></button>*/
$(this.collection).formCollection({
addButtonSelector: this.addButton,
template: '<fieldset><input name="toto[__index__]" /></fieldset>',
childrenSelector: 'fieldset'
});
$(this.addButton).click();
assertEquals(2, $(this.collection).find('fieldset').length);
}
});
mercredi 22 mai 13

27. mercredi 22 mai 13

28. Et ensuite ?
mercredi 22 mai 13

29. Et ensuite ?
= exécuter les tests de manière automatique
mercredi 22 mai 13

30. Jenkins
mercredi 22 mai 13

31. Jenkins
= démarrage du serveur
mercredi 22 mai 13

32. Jenkins
= démarrage du serveur
= gestion des browsers
mercredi 22 mai 13

33. Jenkins
= démarrage du serveur
= gestion des browsers
= aggrégation des résultats de tests
mercredi 22 mai 13

34. Jenkins
= démarrage du serveur
= gestion des browsers
= aggrégation des résultats de tests
= analyse du code coverage
mercredi 22 mai 13

35. Résultats
mercredi 22 mai 13

36. Des questions ?
mercredi 22 mai 13

37. Merci
Frédéric Dewinne
twitter => @dwebconsulting
email => frederic.dewinne@vaconsulting.lu
mercredi 22 mai 13