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 JQuery ?

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 "FALSE"

• if( array.length )

• if( string )

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 type

Coercition de type

• '1' ==1 TRUE

• '1'===1 FALSE

Coercition de type

• false == 'false' FALSE

• false == '0' TRUE

• " \t\r\n " == 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 sur quand il est nécessaire

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ù elle a été créée (contexte)

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

• default parameters

• Array comprehension

• Module : import / export

• class extends and constructor

• promise integration

Juin 2015

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

CoffeeScript• Héritage

• List Compréhension

• String interpolation

• Number property lookup

• Global variable

• compile time checking

• Existential Operator

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

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 outils

• pas de two way binding

• Dur à tester

• Trop de choix

EmberJS

• Convention over configuration

• Integration REST et tests

• Performances orientés

• exemples dépassés

• templating avec handlebar

AngularJS

• two way binding

• promise integration

• Communauté

• blocs structurant

• testabilité

• Complexité des directives

• Scope hiérarchie

• Angular Expressions

• Beaucoup de Magie

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 le jeu

J’ignore l’écosystème

• Mettre les JS dans ma webapp

• quelques plugins MavenSauf SPA

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écution de projet

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": { "express": "~4.9.0" }, "devDependencies": { "grunt": "~0.4.1", }}

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 <keyword>

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" }}

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']);!};

GULP

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'))});

Intégration continue

• Plugin fournissant Node pour Jenkins

• Job Shell ou NodeJS Script

• Intégration des résultats de tests

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 ?