Du JavaScript dans mon projet

983 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
983
Sur SlideShare
0
Issues des intégrations
0
Intégrations
39
Actions
Partages
0
Téléchargements
29
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 ?

×