Define: Font End Developer

Qui est-il ?

Cf inside theguardian post

• Vit dans le navigateur (Markup, style, accessibility, javascript);
• porte des Converse

Define: Milieu hostile

Dans le désert

Dans la jungle

Dans Eclipse

Vis ma vie de front

Cross browser

• 1331 specifications (source W3C)
• multiples implémentations
• Guerre des implémentations

Il est indispensable de tester.

Equipements

• multiples systèmes et formats (appareils)

Dans le HTML, attention à bien "html_encode" les variables venant de l'utilisateur.

Sécurité

• Sandboxing
• Sécurité des API interrogées (authentification, fin de session, CORS)
• cross-site scripting (XSS)
• Content Security Policy (CSP)

Il est indispensable d'optimiser ses fichiers statiques

• mobile: 57% d'abandon après 3 secondes (source : strangeloop)
• Amazon: 1% revenue increase for every 100ms of improvement (source : Amazon)

Contraintes du navigateur

• 5 requêtes en parallèle par domaine ;
• Chargement du JS bloquant ;
• reflow + repaint ;
• asynchrone

Reflow

• reflow: impact on layout
• repaint: impact rendering

Javascript

• 1 seul fichier ;
• En bas de page.

CSS, images

• Charger les CSS tôt pour éviter le reflow ;
• Bonne gestion du cache HTTP.

Un CDN en production

• distribué
• autre domaine
• gestion du cache
• utiliser les ressources du serveur d'application pour l'application

Attention au chemin des assets dans le html.

Environnement

Environnement

Le workflow

• Tests unitaires pour le métier ;
• Rechargement de page pour le visuel.

Proxy de développement

Attention à bien tenir compte du proxy dans les générations d'URL (redirect, liens...)

Éditeurs

Vim Sublime Text Backets ATOM Chrome Workspace

Yeoman

$ npm install -g yeoman
$ npm install -g generator-webapp
$ yo webapp

Building Apps With the Yeoman Workflow

Ligne de commande sous windows

npm

package.json

$ npm install

bower

bower.json

$ bower install

• installe des dépôts git
• exposé en mode dev, compilé en release

SVN

grunt

$ grunt --help
$ grunt default

Gruntfile.js

module.exports = function(grunt) {

    var concat = {
        dist: {
            src: ['src/**/*.js'],
            dest: 'dist/<%= pkg.name %>.js'
        }
    };

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: concat
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.registerTask('default', ['concat']);
};

Gruntfile.js

    var concat = {
        options: {
            separator: ';'
        },

        dist: {
            src: ['src/**/*.js'],
            dest: 'dist/<%= pkg.name %>.js'
        }

    };

ANT configuré en JSON

Démarrer avec Grunt

• Getting started
• Your first GruntJS plugin
• Supercharging your Gruntfile

Tâches existantes

• officielles
• toutes

watchers

Alternatives

Gulp Brunch Broccoli

Tests unitaires

Tests unitaires

Assertions

• Chai
• should
• NodeJS assert

Runner

• Mocha
• Jasmine

Mock

• Sinon.JS

Cross browser runner

• Karma
• browserling et testling
• Yeti

Tests fonctionnels

Tests fonctionnels

CasperJS

Selenium

Selenium As A Service

BrowserStack SauceLabs

Régression visuelle

• PhantomCSS
• Viff
• About CSS Regression Testing

Le serveur peut être nécessaire pour les tests, pensez au provisionning.

Intégrer dans vos outils

Intégrer dans vos outils

README

• Intégrer dans Maven
• Intégrer dans Graddle

Scripts

• bin/install
• bin/start
• bin/stop
• bin/tests
• bin/release