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