![Gruntfile.js
module.exports = function(grunt) {
!
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
!
grunt.loadNpmTasks('grunt-contrib-uglify');
!
grunt.registerTask('default', ['uglify']);
!
};](https://image.slidesharecdn.com/javascript-141008063052-conversion-gate02/85/Du-JavaScript-dans-mon-projet-75-320.jpg)
Du JavaScript dans mon projet
- 1. Du JavaScript dans mon prochain projet Christophe Jollivet
- 2. Au Secours ! Je vais faire du JavaScript
- 3. Chouette ! Je vais faire du JavaScript
- 4. Christophe Jollivet • Neurobiologiste • Informaticien • Homme de communauté ! • jollivetc
- 5. Sondage • Qui a déjà fait du JavaScript ? • Autrement qu’un copier-coller du web ? • Autrement qu’intégrer un plugin JQuery ?
- 6. JavaScript n’est pas Java
- 7. Java is to JavaScript What ham is to hamster
- 8. «JavaScript is the only language that people feel they don’t need to learn to use it» Doug Crockford
- 9. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
- 10. Faiblement typé
- 11. Dynamique
- 12. Prototype
- 13. Paramêtres
- 14. this • Function • Méthode • Constructeur • apply
- 15. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE" • if( array.length ) • if( string )
- 16. Valeur par défaut Attention si b vaut 0 car 0 est falsy
- 17. Appel sécurisé
- 19. Coercition de type • Forcer le type d’une variable • == fait la coercition de type • === ne fait pas la coercition de type
- 20. Coercition de type • '1' ==1 TRUE • '1'===1 FALSE
- 21. Coercition de type • false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE • ",,," == new Array(4) TRUE
- 22. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE • ''=='0' FALSE
- 24. Point virgule • Séparation d’expression • Pas toujours obligatoire • Pose problème dans la minification • Grand débat sur quand il est nécessaire
- 26. Point virgule
- 27. Point virgule
- 28. Hoisting • Déplace les déclarations en tête de sa portée
- 29. Hoisting
- 30. Hoisting
- 31. Closure • Une fonction objet contient : • une fonction (nom, paramètres, body) • une référence à l’environnement où elle a été créée (contexte)
- 32. Closure •Pollution de Global •Risque de collision de nom •names est modifiable
- 33. Closure •Lent car construction de names à chaque appel
- 34. Closure
- 35. Asynchrone Et le this qui est global !
- 36. Conclusion
- 37. Il faut apprendre JavaScript
- 40. Le futur de Javascript
- 41. Ecmascript 6 • Block Scope et Constante Juin 2015 • default parameters • Array comprehension • Module : import / export • class extends and constructor • promise integration
- 42. Langages alternatifs • TypeScript • Dart • CoffeeScript • Haxe • Roy • Iced Coffee Script Evaluation and comparison of alternate Programming languages to JavaScript Aansa Ali Research conférence in Technical Discipline November, 18-22.2013 • Live Script • Kaffeine • ParenScript • Fay • Ceylon
- 43. CoffeeScript • Héritage • List Compréhension • String interpolation • Number property lookup • Global variable • compile time checking • Existential Operator
- 44. Dart • Optionnellement typé • Génériques Réifiés • Orientation objet et Mixin • Big application ready : Module, librairie et refactorisation • Support de concurrence avec Isolation
- 45. TypeScript • Optionnellement typé • Type inférence • Orientation Objet • Modularisation et AMD
- 47. Architecture
- 48. Classique • Framework coté serveur • un système de templating pour le front
- 49. SPA + backend REST • Agnostic de la technologie du backend • cycle de vie différent
- 50. SPA Framework
- 51. Backbone • léger, apprentissage rapide • Communauté • Documentation • Choix nombreux • Pas de structure mais des outils • pas de two way binding • Dur à tester • Trop de choix
- 52. EmberJS • Convention over configuration • Integration REST et tests • Performances orientés • exemples dépassés • templating avec handlebar
- 53. AngularJS • two way binding • promise integration • Communauté • blocs structurant • testabilité • Complexité des directives • Scope hiérarchie • Angular Expressions • Beaucoup de Magie
- 54. Google Trends
- 56. Middleware Framework • NodeJS • Express • Sails
- 57. Full Stack
- 58. Full Stack • Meteor • Derby
- 59. Usine logicielle
- 60. Usine logicielle • Intégration continue • tests • artefacts • Indicateur qualité
- 61. Build • Dépend du choix d’architecture et des technologies/frameworks • Deux modes • j’ignore l’écosystème • je joue le jeu
- 62. J’ignore l’écosystème • Mettre les JS dans Sauf ma webapp SPA • quelques plugins Maven
- 63. Je joue le jeu • Dépendances • NPM • BOWER • build : • Grunt • Gulp
- 64. NPM • Node Package Module • installation d’outils et de plugins • Permet l’installation d’outils de façon globale • Exécution de projet
- 65. NPM • Installation par • MSI • pkg • make install • Installeur pour Jenkins
- 66. package.json • Metadata du projet • Dépendances pour BUILD et RUN
- 67. package.json { "name": "my-project-name", "version": "0.1.0", "scripts": { "start": "node .bin/www" } "dependencies": { "express": "~4.9.0" }, "devDependencies": { "grunt": "~0.4.1", } }
- 68. package.json • npm install • npm install <module> —save-dev • npm start
- 69. Bower
- 70. installation npm install -g bower
- 71. Configuration • bower.json • .bowerrc
- 72. Utilisation • bower install • bower install <package> • bower install <package>#<version> • bower list • bower search <keyword>
- 73. bower.json { "name": "myApp", "version": "0.0.0", "dependencies": { "angular": "~1.2.3", "angular-route": "~1.2.3" }, "devDependencies": { "angular-mocks": "~1.2.3" }, "resolutions": { "angular": "~1.2.3" } }
- 75. Gruntfile.js module.exports = function(grunt) { ! grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); ! grunt.registerTask('default', ['uglify']); ! };
- 76. GULP
- 77. gulpfile.js var gulp = require('gulp'), uglify = require('gulp-uglify'); ! gulp.task('minify', function () { gulp.src('js/app.js') .pipe(uglify()) .pipe(gulp.dest('build')) });
- 78. Intégration continue • Plugin fournissant Node pour Jenkins • Job Shell ou NodeJS Script • Intégration des résultats de tests
- 79. Jenkins
- 80. Qualimétrie • Intégration possible dans Sonar via le sonar-runner
- 81. Sonar Dashboard
- 82. Sonar Issues
- 83. Support IDE • Langage dynamique • Complétion • Navigation • Refactoring
- 84. Merci ! Questions ?