Presentation about the starting my next project in JavaScript

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é

18. Coercition de type

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

23. Coercition de type

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. Point virgule
https://github.com/twitter/bootstrap/issues/3057

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

38. http://jsbooks.revolunet.com/

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

55. Middleware framework

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 ?