Front End Developer en milieu hostile



Front End Developer en milieu hostile

1 3


slides-frontend-dev-en-milieu-hostile


On Github themouette / slides-frontend-dev-en-milieu-hostile

Front End Developer en milieu hostile

By Julien Muetton / @themouette

Define: Font End Developer

Qui est-il ?

Introduire milieu hostile

Cf inside theguardian post

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

Define: Milieu hostile

Le mieux c'est de prendre des exemples.

Dans le désert

Attention au sable ; Beaucoup boire.

Dans la jungle

Attention à l'humidité ; Attention aux animaux sauvages.

Dans Eclipse

Pour celui ci je n'ai pas encore trouvé. Il représente un écosystème, ses outils, méthodes et processus. Comme tous les IDE, c'est un milieu hostile pour un front end dev. Il faut faire cohabiter les deux écosystèmes. On va voir pourquoi

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

Le réseau
  • 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 Vs Repaint
  • 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.
Le retour doit être rapide

Le retour doit être rapide, attendre que les fichiers soient republiés n'est pas une option. Un éditeur et la ligne de commande.

Proxy de développement

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

Utiliser un proxy NodeJs en développement est simple et efficace.

É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
Doit rappeler maven :)

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

Pas forcément plus lisible que le XML, mais plus simple à écrire.

Démarrer avec Grunt

Tâches existantes

watchers

Recompile en permanence

Alternatives

Gulp Brunch Broccoli

Tests unitaires

Tests unitaires

Assertions

Runner

Mock

Cross browser runner

Tests fonctionnels

Tests fonctionnels

CasperJS

Selenium

Selenium As A Service

BrowserStack SauceLabs

Régression visuelle

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

Intégrer dans vos outils

Intégrer dans vos outils

README

Scripts

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

Merci

Questions ?