javascript dans l'usine logicielle
DESCRIPTION
Slide for my presentation at JugSummerCamp about integration of JavaScript in software factory. First trying to use Java Tools like Maven, then embrassing JavaScript Tools like Grunt and Bower.TRANSCRIPT
![Page 1: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/1.jpg)
Du JavaScript dans votre Usine Logiciel
Christophe Jollivet
![Page 2: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/2.jpg)
Christophe Jollivet
• Neurobiologiste
• Informaticien
• Communautaire
• @jollivetc
![Page 3: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/3.jpg)
Usine logicielle
• Construire le livrable
• compilation / dépendances
• packaging
• Exécution des tests
• Génération de métriques / doc
![Page 4: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/4.jpg)
![Page 5: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/5.jpg)
La solution de facilité
• drop les fichiers dans webapp
• quelques tests Selenium...
![Page 6: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/6.jpg)
Intégration
• « A la Java »
• « A la JavaScript »
![Page 7: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/7.jpg)
« A la Java »
![Page 8: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/8.jpg)
Jasmine
• Framework de Test
• TestRunner
![Page 9: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/9.jpg)
FeedBack Continue
• Testem
• capture de navigateur
• exécution en continue
![Page 10: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/10.jpg)
Testem dans Jenkins
![Page 11: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/11.jpg)
Jasmine dans Maven
• Jasmine-maven-plugin
![Page 12: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/12.jpg)
Maven Tools for JavaScript Developers• http://mojo.codehaus.org/javascript-maven-
tools/
• Fourni
• Tests
• Minification
• JSLint
• Archetype
![Page 13: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/13.jpg)
<build> <extensions>! <extension>! <groupId>org.codehaus.mojo</groupId>! <artifactId>javascript-maven-plugin</artifactId>! ! <version>2.0.0-alpha-1</version>! </extension> </extensions></build>
![Page 14: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/14.jpg)
WebJar
• Dépendances transitives des librairies JS
• container Servlet3 compatible
• compatible SBT, Maven, Gradle, Leiningen
![Page 15: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/15.jpg)
WebJar
![Page 16: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/16.jpg)
WebJar
• Les WebJars sont dans WEB-INF/lib
![Page 17: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/17.jpg)
WebJar
• Les WebJars sont dans WEB-INF/lib
• ce qui est sous META-INF/resources d’un JAR sour WEB-INF/lib est accessible
![Page 18: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/18.jpg)
WebJar
• avantages
• dépendances transitives
• pas dans le SCM
• Inconvénients
• IDE ne fait pas de complétion
![Page 19: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/19.jpg)
« A la JavaScript »
![Page 20: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/20.jpg)
A la JavaScript
• Ecosystème d’outils
• NPM, Grunt, Bower
![Page 21: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/21.jpg)
A la JavaScript
• Ecosystème d’outils
• NPM, Grunt, Bower
PEINTURE FRAICHE
![Page 22: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/22.jpg)
NPM
• Node Package Module
• installation d’outils et de plugins
• Permet l’installation d’outils de façon globale
![Page 23: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/23.jpg)
NPM
• Installation par
• MSI
• pkg
• make install
• Installeur pour Jenkins
![Page 24: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/24.jpg)
![Page 25: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/25.jpg)
Grunt
• The JavaScript Task Runner
• version 0.4.1
![Page 26: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/26.jpg)
Installation
npm install -g grunt-cli
![Page 27: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/27.jpg)
configuration
• package.json
• Gruntfile.js ou Gruntfile.coffe
![Page 28: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/28.jpg)
package.json
• project metadata
• Grunt plugins as devDependencies
![Page 29: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/29.jpg)
package.json
{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" }}
![Page 30: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/30.jpg)
package.json
• npm install
• npm install <module> --save-dev
![Page 31: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/31.jpg)
Gruntfile.js
• Il comprend
• la fonction wrapper
• configuration du projet et tâches
• chargement plugins et tâches
• tâches personnalisées
![Page 32: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/32.jpg)
Gruntfile.jsmodule.exports = function(grunt) {
// Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });
// Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s). grunt.registerTask('default', ['uglify']);
};
![Page 33: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/33.jpg)
CLI
• grunt <task>
• grunt --help
![Page 34: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/34.jpg)
Istanbul
• Couverture de test
![Page 35: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/35.jpg)
Plato
• Analyse de source JavaScript
![Page 36: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/36.jpg)
JsDuck
• Documentation
• syntaxe à la JavaDoc
• Support de Markdown
![Page 37: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/37.jpg)
![Page 38: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/38.jpg)
Yeoman
• Yo : scaffolding
• Grunt : build, preview, test...
• Bower : dependency management
![Page 39: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/39.jpg)
Yo
• Scaffolding
• installation interactive de Generator
![Page 40: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/40.jpg)
![Page 41: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/41.jpg)
Bower
• package manager for the web
![Page 42: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/42.jpg)
installation
npm install -g bower
![Page 43: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/43.jpg)
Configuration
• bower.json
• .bowerrc
![Page 44: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/44.jpg)
Utilisation
• bower install
• bower install <package>
• bower install <package>#<version>
![Page 45: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/45.jpg)
Utilisation
• bower list
• bower search
![Page 46: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/46.jpg)
bower.json
![Page 47: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/47.jpg)
Yeoman-maven-plugin
• configuration clean et war plugin
• Intégration dans le cycle Maven
![Page 48: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/48.jpg)
Sonar
![Page 49: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/49.jpg)
Sonar
• Plugin dans SonarQube
• Sonar-runner
• sonar-project.properties
• Complexe sur des projets mixtes
![Page 50: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/50.jpg)
Conclusion
• http://addyosmani.com/blog/making-maven-grunt/
• 3 solutions
• Code séparé
• ignorer outillage moderne
• Maven-exec plugin
![Page 51: JavaScript dans l'usine logicielle](https://reader033.vdocuments.mx/reader033/viewer/2022061616/555a8ea8d8b42a991b8b477d/html5/thumbnails/51.jpg)
Questions ?
https://github.com/jollivetc/JugSummerCamp