Du JavaScript dans mon 
prochain projet 
Christophe Jollivet
Au Secours ! Je vais faire 
du JavaScript
Chouette ! Je vais faire 
du JavaScript
Christophe Jollivet 
• Neurobiologiste 
• Informaticien 
• Homme de communauté 
! 
• jollivetc
Sondage 
• Qui a déjà fait du JavaScript ? 
• Autrement qu’un copier-coller du web ? 
• Autrement qu’intégrer un plugin JQ...
JavaScript n’est pas 
Java
Java is to JavaScript 
What ham is to hamster
«JavaScript is the only 
language that people feel they 
don’t need to learn to use it» 
Doug Crockford
http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
Faiblement typé
Dynamique
Prototype
Paramêtres
this 
• Function 
• Méthode 
• Constructeur 
• apply
Truthy et Falsy 
• false, "", 0, null, undefined, NaN, void sont 
FALSY 
• Tous les autres sont TRUTHY 
• même "0" et "FAL...
Valeur par défaut 
Attention si b vaut 0 car 0 est falsy
Appel sécurisé
Coercition de type
Coercition de type 
• Forcer le type d’une variable 
• == fait la coercition de type 
• === ne fait pas la coercition de t...
Coercition de type 
• '1' ==1 TRUE 
• '1'===1 FALSE
Coercition de type 
• false == 'false' FALSE 
• false == '0' TRUE 
• " trn " == 0 TRUE 
• ",,," == new Array(4) TRUE
Coercition et 
transitivité 
• 0 =='' TRUE 
• 0 =='0' TRUE 
• ''=='0' FALSE
Coercition de type
Point virgule 
• Séparation d’expression 
• Pas toujours obligatoire 
• Pose problème dans la minification 
• Grand débat ...
Point virgule 
https://github.com/twitter/bootstrap/issues/3057
Point virgule
Point virgule
Hoisting 
• Déplace les déclarations en tête de sa 
portée
Hoisting
Hoisting
Closure 
• Une fonction objet contient : 
• une fonction (nom, paramètres, body) 
• une référence à l’environnement où ell...
Closure 
•Pollution de Global 
•Risque de collision de nom 
•names est modifiable
Closure 
•Lent car construction de names à chaque appel
Closure
Asynchrone 
Et le this qui est global !
Conclusion
Il faut apprendre 
JavaScript
http://jsbooks.revolunet.com/
Le futur de Javascript
Ecmascript 6 
• Block Scope et Constante 
Juin 2015 
• default parameters 
• Array comprehension 
• Module : import / expo...
Langages alternatifs 
• TypeScript 
• Dart 
• CoffeeScript 
• Haxe 
• Roy 
• Iced Coffee Script 
Evaluation and comparison...
CoffeeScript 
• Héritage 
• List Compréhension 
• String interpolation 
• Number property lookup 
• Global variable 
• com...
Dart 
• Optionnellement typé 
• Génériques Réifiés 
• Orientation objet et Mixin 
• Big application ready : Module, librai...
TypeScript 
• Optionnellement typé 
• Type inférence 
• Orientation Objet 
• Modularisation et AMD
Architecture
Classique 
• Framework coté serveur 
• un système de templating pour le front
SPA + backend REST 
• Agnostic de la technologie du backend 
• cycle de vie différent
SPA Framework
Backbone 
• léger, apprentissage 
rapide 
• Communauté 
• Documentation 
• Choix nombreux 
• Pas de structure 
mais des ou...
EmberJS 
• Convention over 
configuration 
• Integration REST et 
tests 
• Performances 
orientés 
• exemples dépassés 
• ...
AngularJS 
• two way binding 
• promise integration 
• Communauté 
• blocs structurant 
• testabilité 
• Complexité des 
d...
Google Trends
Middleware framework
Middleware Framework 
• NodeJS 
• Express 
• Sails
Full Stack
Full Stack 
• Meteor 
• Derby
Usine logicielle
Usine logicielle 
• Intégration continue 
• tests 
• artefacts 
• Indicateur qualité
Build 
• Dépend du choix d’architecture et des 
technologies/frameworks 
• Deux modes 
• j’ignore l’écosystème 
• je joue ...
J’ignore l’écosystème 
• Mettre les JS dans Sauf ma webapp 
SPA 
• quelques plugins Maven
Je joue le jeu 
• Dépendances 
• NPM 
• BOWER 
• build : 
• Grunt 
• Gulp
NPM 
• Node Package Module 
• installation d’outils et de plugins 
• Permet l’installation d’outils de façon globale 
• Ex...
NPM 
• Installation par 
• MSI 
• pkg 
• make install 
• Installeur pour Jenkins
package.json 
• Metadata du projet 
• Dépendances pour BUILD et RUN
package.json 
{ 
"name": "my-project-name", 
"version": "0.1.0", 
"scripts": { 
"start": "node .bin/www" 
} 
"dependencies...
package.json 
• npm install 
• npm install <module> —save-dev 
• npm start
Bower
installation 
npm install -g bower
Configuration 
• bower.json 
• .bowerrc
Utilisation 
• bower install 
• bower install <package> 
• bower install <package>#<version> 
• bower list 
• bower search...
bower.json 
{ 
"name": "myApp", 
"version": "0.0.0", 
"dependencies": { 
"angular": "~1.2.3", 
"angular-route": "~1.2.3" 
...
Gruntfile.js 
module.exports = function(grunt) { 
! 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
uglify...
GULP
gulpfile.js 
var gulp = require('gulp'), 
uglify = require('gulp-uglify'); 
! 
gulp.task('minify', function () { 
gulp.src...
Intégration continue 
• Plugin fournissant Node pour Jenkins 
• Job Shell ou NodeJS Script 
• Intégration des résultats de...
Jenkins
Qualimétrie 
• Intégration possible dans Sonar via le sonar-runner
Sonar Dashboard
Sonar Issues
Support IDE 
• Langage dynamique 
• Complétion 
• Navigation 
• Refactoring
Merci 
! 
Questions ?
Du JavaScript dans mon projet
Du JavaScript dans mon projet
Du JavaScript dans mon projet
Prochain SlideShare
Chargement dans…5
×

Du JavaScript dans mon projet

891 vues

Publié le

Presentation about the starting my next project in JavaScript

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
891
Sur SlideShare
0
Issues des intégrations
0
Intégrations
62
Actions
Partages
0
Téléchargements
21
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Du JavaScript dans mon projet

  1. 1. Du JavaScript dans mon prochain projet Christophe Jollivet
  2. 2. Au Secours ! Je vais faire du JavaScript
  3. 3. Chouette ! Je vais faire du JavaScript
  4. 4. Christophe Jollivet • Neurobiologiste • Informaticien • Homme de communauté ! • jollivetc
  5. 5. Sondage • Qui a déjà fait du JavaScript ? • Autrement qu’un copier-coller du web ? • Autrement qu’intégrer un plugin JQuery ?
  6. 6. JavaScript n’est pas Java
  7. 7. Java is to JavaScript What ham is to hamster
  8. 8. «JavaScript is the only language that people feel they don’t need to learn to use it» Doug Crockford
  9. 9. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
  10. 10. Faiblement typé
  11. 11. Dynamique
  12. 12. Prototype
  13. 13. Paramêtres
  14. 14. this • Function • Méthode • Constructeur • apply
  15. 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. 16. Valeur par défaut Attention si b vaut 0 car 0 est falsy
  17. 17. Appel sécurisé
  18. 18. Coercition de type
  19. 19. Coercition de type • Forcer le type d’une variable • == fait la coercition de type • === ne fait pas la coercition de type
  20. 20. Coercition de type • '1' ==1 TRUE • '1'===1 FALSE
  21. 21. Coercition de type • false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE • ",,," == new Array(4) TRUE
  22. 22. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE • ''=='0' FALSE
  23. 23. Coercition de type
  24. 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
  25. 25. Point virgule https://github.com/twitter/bootstrap/issues/3057
  26. 26. Point virgule
  27. 27. Point virgule
  28. 28. Hoisting • Déplace les déclarations en tête de sa portée
  29. 29. Hoisting
  30. 30. Hoisting
  31. 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. 32. Closure •Pollution de Global •Risque de collision de nom •names est modifiable
  33. 33. Closure •Lent car construction de names à chaque appel
  34. 34. Closure
  35. 35. Asynchrone Et le this qui est global !
  36. 36. Conclusion
  37. 37. Il faut apprendre JavaScript
  38. 38. http://jsbooks.revolunet.com/
  39. 39. Le futur de Javascript
  40. 40. Ecmascript 6 • Block Scope et Constante Juin 2015 • default parameters • Array comprehension • Module : import / export • class extends and constructor • promise integration
  41. 41. 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
  42. 42. CoffeeScript • Héritage • List Compréhension • String interpolation • Number property lookup • Global variable • compile time checking • Existential Operator
  43. 43. 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
  44. 44. TypeScript • Optionnellement typé • Type inférence • Orientation Objet • Modularisation et AMD
  45. 45. Architecture
  46. 46. Classique • Framework coté serveur • un système de templating pour le front
  47. 47. SPA + backend REST • Agnostic de la technologie du backend • cycle de vie différent
  48. 48. SPA Framework
  49. 49. 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
  50. 50. EmberJS • Convention over configuration • Integration REST et tests • Performances orientés • exemples dépassés • templating avec handlebar
  51. 51. AngularJS • two way binding • promise integration • Communauté • blocs structurant • testabilité • Complexité des directives • Scope hiérarchie • Angular Expressions • Beaucoup de Magie
  52. 52. Google Trends
  53. 53. Middleware framework
  54. 54. Middleware Framework • NodeJS • Express • Sails
  55. 55. Full Stack
  56. 56. Full Stack • Meteor • Derby
  57. 57. Usine logicielle
  58. 58. Usine logicielle • Intégration continue • tests • artefacts • Indicateur qualité
  59. 59. Build • Dépend du choix d’architecture et des technologies/frameworks • Deux modes • j’ignore l’écosystème • je joue le jeu
  60. 60. J’ignore l’écosystème • Mettre les JS dans Sauf ma webapp SPA • quelques plugins Maven
  61. 61. Je joue le jeu • Dépendances • NPM • BOWER • build : • Grunt • Gulp
  62. 62. NPM • Node Package Module • installation d’outils et de plugins • Permet l’installation d’outils de façon globale • Exécution de projet
  63. 63. NPM • Installation par • MSI • pkg • make install • Installeur pour Jenkins
  64. 64. package.json • Metadata du projet • Dépendances pour BUILD et RUN
  65. 65. 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", } }
  66. 66. package.json • npm install • npm install <module> —save-dev • npm start
  67. 67. Bower
  68. 68. installation npm install -g bower
  69. 69. Configuration • bower.json • .bowerrc
  70. 70. Utilisation • bower install • bower install <package> • bower install <package>#<version> • bower list • bower search <keyword>
  71. 71. 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" } }
  72. 72. 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']); ! };
  73. 73. GULP
  74. 74. 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')) });
  75. 75. Intégration continue • Plugin fournissant Node pour Jenkins • Job Shell ou NodeJS Script • Intégration des résultats de tests
  76. 76. Jenkins
  77. 77. Qualimétrie • Intégration possible dans Sonar via le sonar-runner
  78. 78. Sonar Dashboard
  79. 79. Sonar Issues
  80. 80. Support IDE • Langage dynamique • Complétion • Navigation • Refactoring
  81. 81. Merci ! Questions ?

×