26 Nov 2015, 23:59

Retour sur Codeurs en Seine 2015

Aujourd'hui se tenait l'édition 2015 de Codeurs en Seine ; petit résumé de la journée :

  • Test Drive Infrastructure avec Docker (slides ; code):
    • L'idée est d'appliqué les principes du TDD sur la partie infrastructure (versionning, tests, intégration continue, etc).
    • Différents niveaux de tests possibles
      • Tests unitaires : tests au niveau de la fabrication du container en lui même
      • Tests d'intégration : tests du bon fonctionnement des composants de l'infrastructure
      • Mais aussi tests d'acceptance, tests de sécurité, tests de performance, etc.
    • Développement de docker-unit qui permet de tester la bonne exécution d'un docker build en testant le résultat du Dockerfile à chaque étape.
    • Le projet est basé sur dockramp, il est encore jeune mais l'idée est intéressante. L'auteur du projet doit contacter l'équipe Docker pour voir s'il doit continuer ou si cette dernière a déjà des choses dans les cartons.
  • 5 facteurs clés pour l'auto-organisation : l'auteur revient sur l'organisation d'Agile France qui s'est fait dans un contexte particulier. Il en retient 5 clés :
    • Ownership : il a fallu dépasser sa conception "égocentrique" de l'événement pour en faire l'événement de la communauté pour fédérer tout le monde autour du projet
    • Dialogue : passage de la discussion (bruit++) au dialogue (signal++) ; seules les personnes ayant un intérêt sur un sujet donné ont le droit de donner leur avis et de travailler ensemble. Le bruit ambiant généré par les autres est supprimé en les "excluant" du sujet (ou du moins en ignorant leur "moi je pense que...")
    • Leadership ; en prologement du point précédent, plutôt que de chercher un consensus mou, que les personnes intéressées par le sujet prennent le leadership du sujet et avancent. A noter qu'il n'y a pas d'opposition entre auto-organisation et leadership, c'est le passage d'avis vers des intentions.
    • Artefacts : il s'agit de produire des choses visibles et de s'organiser autour de ces artefacts (réunions, etc)
    • Vision : il faut définir un cadre et communiquer autour de ce cadre.
    • En reprenant de bas en haut, un moyen de se rappeler du mot via le terme VALDO.
  • HTTP/2, les bonnes pratiques du web évoluent ; une présentation rapide de HTTP/1.1 et des apports de HTTP/2 avec les principaux apports (push server, multiplexage, priorité des ressources, compression des entêtes, flux binaire plutôt que textuel et https quasi requis de part le support de http/2 dans Chrome/Firefox) et impacts sur nos pratiques actuelles (plus besoin de domain sharding, de concaténation, de sprites CSS ou d'inlining). Par contre, les optimisations d'images, la compression, la minification et l'optimisation des fontes et la gestion du cache restent de mise.
  • Bidouillabilité à l'ère du numérique : Tristan Nitot qui nous parle
    • des débuts de l'ordinateur où ils étaient bidouillables vs les modèles de plus en plus fermés de nos jours
    • des débuts du web s'appuyant sur des formats ouverts vs des sdk "fermés" où en gros on doit demander l'autorisation de...
    • du cloud (dans le sens des offres SaaS) qui n'est rien d'autres que l'ordinateur de quelqu'un d'autre et sur lequel vous n'avez aucun contrôle, dont le code source n'est pas disponible et qui n'est pas bidouillable.
    • Dans le SaaS, le client est celui qui paye pour les données, pas celui qui les fournit (contre un service "gratuit")
    • Tristan Nitot propose le SIRCUS : Système d'Information Redonnant le Contrôle Aux UtilisateurS et ses 7 principes
      • Pas de publicité ciblée
      • Utiliser du matériel que l'on contrôle (Raspberry, CubieTruck, etc en auto hébergement ou à la rigueur chez un hébergeur)
      • Utiliser du logiciel libre (CozyCloud, Owncloud, YunoHost, etc)
      • Utiliser le chiffrement
      • Une UX à la hauteur
      • Interopérabilité
      • Une killer feature que les offres SaaS ne peuvent fournir
        • A ce sujet, Cozycloud réfléchit à croiser les données qui seraient centralisées dans l'instance (ex afficher les noms des contacts en lieu et place de leur numéros sur la facture téléphonique en croisant la facture avec les contacts)
    • Mes enseignements :
      • Même en étant relativement sensibilité à la gestion des données personnelles, cette conférence donne une claque et montre le chemin à parcourir et les enjeux.
      • Toutefois la question de l'auto-hébergement reste un problème ; comment demander et permettre à Mme Michu d'avoir ses données de façon sécurisée ?
      • Par ailleurs, si CozyCloud arrive à tout concentrer en un seul lieu et à croiser les données, quid en cas d'intrusion sur le systmèe (via un hacker ou un cambrioleur ou des forces de l'ordre à la rigueur ?). Qu'est-ce qui est mieux entre une analyse partielle mais permanente des données chez les GAFA vs un risque faible mais un impact très fort si mon instance CozyCloud par ex est récupérée par un tiers, celle-ci contenant nos données ?
      • Il y a peut être des choses intéressantes à faire dans un contexte CozyCloud + VRM.
  • Apache Drill, le SQL pour Hadoop et plus... :
    • Drill permet de manipuler en SQL tout types de données issues d'un cluster hadoop, d'une base de données SQL/NoSQL, de fichiers CSV, JSON,XML, etc. Il permet même au sein d'une même requête de requêter sur plusieurs sources de données.
    • C'est donc du "SQL on everything" avec une logique de schema à la volée en fonction de la requête. Cela peut être distribué notamment dans un cluster Hadoop.
    • A intégrer dans les outils rapidement...
  • AngularJS, the good, the bad and the transition to Angular 2 :
    • Un talk qui présente les bons et mauvais côtés d'Angular V1, une rapide présentation d'Angular V2 et comment migrer
    • Un livre sur Angular2 est en cours de rédaction ; celui sur Angular V1 est dispo => books.ninja-squad.com ; j'ai la V1 mais toujours pas lu ;-)
    • The Good
      • ngHint
      • eslint + plugin Angular
    • The Bad
      • $scope-soup
      • Eviter les conflits de scope parents/enfants via les "ControllerAs"
      • Performances
        • Utliser les bindOnce pour réduire le nombre de watchers
        • Ajouter des "track by" pour éviter de reconstruire le dom d'une vue sur l'autre si on manipule les mêmes objets
        • Utiliser judicieusement ngIf vs ngShow
          • ngIf : détruit le dom et le reconsruit
          • ngShow : cache le bloc mais si celui-ci contient des instructions qui sont calculées, alors elles le seront quand même
        • ng-model-options pour conditionner le déclenchement du cycle de digest/watcher
      • Fuites mémoire ; rajouter des $scope.on("$destroy" ...) pour faire le ménage
    • Angular2
      • Prévoir de l'écrire en ES2015 ou TypeScript
      • Tout est composant
      • Nouveu modèle de template
        • Web Components compatible
        • Web Workers compatible
      • angular-cli
    • Migration vers NG2 dans le cadre d'un projet NG1
      • Utiliser la syntaxe ControllerAs
      • Utiliser les directives pour initier une approche composant ; Angular 1.5 apportera un début de syntaxe "component"
      • Commencer à écrire en ES6
      • ngUpgrade permettra d'utiliser une syntaxe orientée composant et de les "downgrader" en syntaxe Angular 1.
  • Ionic, le framework mobile hybrid carrément addictif :
    • Application hybride = WebView embarqué dans une application native
    • Ionic = AngularJS + Cordova
    • Plugins ng-cordova pour accéder au matériel et fonctionnalités du périphérique
    • Ionic fournit un ensemble d'outil pour aider au développement et au déploiement des applications avec un modèle économique en cours de définition
    • solution manquant encore un peu de maturité ?

Au final, globalement une bonne journée avec une bonne organisation. La diversité des tracks (agile, technologies, web et Java) permettent de trouver son bonheur et d'avoir un programme à la carte. Une bonne formule en somme.

29 Jul 2015, 09:30

Around the Web - July 2015 - Responsive Image & HTTP

Responsive Image

HTTP

  • HTTP Statuses : Database of HTTP status codes with their IETF + Wikipedia descriptions and helpful code references.

18 Dec 2013, 09:30

Sailing app - part 3 - AngularJS does not only fetch content, it can transform too

In part 1, I cheated to provide a JSON file AngularJS could directly interact with but as I told you, it came from an MS Excel file I converted into a CSV one. We can in fact avoid this XLS > CSV > JSON conversion and make the CSV to JSON conversion on the fly when application is loaded.

For today, we'll need :

  • The CSV version of the file : app/data/index-essais-215.csv
  • A library to transform the CSV file to JSON ; I quickly chose JQuery-CSV as it made the job even if it add JQuery as a dependancy (which is already used for the project somewhere as it is defined in bower.json file). Files will be stored in app/vendor/jquery-csv.

As all pre-requisites are satisfied, let's update our code :

In app/index.html, add the jquery-csv at the end, before </body> :

    <!-- CSV parser and JQuery as pre-requisites -->
    <script type="text/javascript" src="https://nicolas.steinmetz.fr/post/2013/12/18/vendor/jquery-csv/jquery.csv-0.71.min.js"></script>

In app/scripts/controller/index.js :

  • We'll change the $http.get() shortcut for a more complex http call. It will introduce the "transformResponse" method and the cache property.
  • As previously, this is made asynchronously
  • Once the file is fetched, we go into the transformResponse section in which we will transform the CSV file into a JSON array.
angular.module('vmCollectionApp')
  .controller('IndexCtrl', ['$scope', '$http', function ($scope, $http) {
    $http({
      method: 'GET',
      url: "./data/index-essais-215.csv",
      transformResponse: function(issuelist) {
        // Transform CSV file into a JSON object
        var json = $.csv.toObjects(issuelist);
        return json;
      },
      cache: true,
    })
    .success(function(issuelist, status) {
        $scope.issuelist = issuelist;
    })
    .error(function(data, status) {
      $scope.issuelist = issuelist || "Request failed";
    });

    $scope.orderProp = 'model';   
  }]); 

Almost perfect, still our test to update , ie in test/spec/controllers/index.js :

  • We need to change only the beforeEach section in which the file was fetched and fake the content of the CSV file
  // Initialize the controller and a mock scope
  beforeEach(inject(function (_$httpBackend_, $controller, $rootScope) {
    // Define the expect answer from the http request and content of the json file supposed to be fetched
    var issuelist = 'model,boat_type,category,issue,month,year\n \
      420,dériveur,présentation,11,novembre,1996 \n \
      420,dériveur,une occasion mise à nu,11,novembre,1996';

    // Initiate httpbackend service to get the json file in asynchronous mode and to fake the $http service
    $httpBackend = _$httpBackend_;
    $httpBackend.expectGET('./data/index-essais-215.csv').respond(issuelist);
   
    scope = $rootScope.$new();
    IndexCtrl = $controller('IndexCtrl', {
      $scope: scope
    });
  }));

If you run grunt test at this step, it... fails !

Indeed, you need to make karma (the test runner) aware of jquery and jquery-csv. For that, just edit karma.conf.js in the project root directory. You need to update the files section with the jquery declaration and the app/vendor "global" one :

    // list of files / patterns to load in the browser
    files: [
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/bower_components/angular-cookies/angular-cookies.js',
      'app/bower_components/angular-sanitize/angular-sanitize.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/bower_components/jquery/jquery.js',
      'app/scripts/*.js',
      'app/scripts/**/*.js',
      'app/vendor/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],

And we're done. grunt test should pass now and we have the same features as at the end of part 2.

Idea of this part was to show you that you don't strictly need JSON objects/array with AngularJS. You only need a ressource you can fetch and that you can "manipulate". Some other use cases could be the consumption of XML, RSS feeds, etc.

Of course, you can grab the code and see the results.

10 Jul 2013, 23:35

Google to reinvent how the web works one step further

Before going into details about this news, a reminder/introduction :

  • Web content is accessible using the HTTP protocol. So when you type "http://www.steinmetz.fr" in your browser, you ask it to use the http protocol and load the content from www.steinmetz.fr.
  • HTTP protocoal version is 1.1
  • The "HTTP" layer is on top another protocol which is called "TCP" for "Transmission Control Protocol". It aims to provide a safe and reliable trasnfer protocol over IP. The issue of TCP is that it will generate latency due to the control checking it provides.
  • IP has another protocol which does less error checing and transport validation and thus has a lower operation overhead and reduced latency. It's called UDP.

I encourage you to read the wikipedia articles on TCP & UDP to get more details , it's really a quick summary I made.

Back to 2009, Google announce the SPDY as an experimental protocoal for a faster web. It aims to be an improved version of the HTTP protocol by reducing page load time. It's mostly done using compression and multiplexing (several http request per tcp session instead of one). As of July 2012, SPDY is a de facto standard and Google is looking for an official standardisation as SPDY will be used as basis for the HTTP/2.0 project. It is currently implemented in most modern browsers (Internet Explorer will have it in IE11). On sever side, SPDY is already implemented also in Apache and Nginx web servers at least. 

End of June this year, Google announced QUIC which stands for Quick UDP Internet Connections. It aims to reduce the latency which is the main issue nowadays for web. Main QUIC highlights:

  • Secure by using a similar mechanism to TLS
  • Fast (often 0-RTT) connectivity  (RTT for Round Trip Time is the length of time it takes for a signal to be sent plus the length of time it takes for an acknowledgment of that signal to be received). It will use some checksum / identifying mechanism instead
  • Packet pacing to reduce packet loss
  • Packet error correction to reduce retransmission latency
  • UDP transport to avoid TCP head-of-line blocking
  • A connection identifier to reduce reconnections for mobile clients
  • A pluggable congestion control mechanism

At the end, it aims to provide a reliable and secure transport layer as TCP does but without its latency and congestion.

As explained in the FAQ, even if SPDY reduced latency, the issue was still that if a HTTP connection stalled, it would stall the whole process. With QUIC relying on UDP, it would be less true as packets will come in any order and then be formed whereas for TCP they arrive in series. 

Coming version of Google Chrome will have the QUIC protocol enabled so that Google Developpers will have some feedback about how it works for real when users access Google servers as part of them are QUIC compliant.

Let's see how it would move forward, if it works and if they manage to make it a standard for a QUICker web ;-)

08 May 2013, 22:49

Do you speak HTTP ?

Maybe I should have started with this one as it's web roots.

A few resources to know more about HTTP :

And as a bonus : HTTP Strict Transport Security (HSTS) which may interest you as soon as you implement HTTPS urls;

HSTS is a web security policy mechanism whereby a web server declares that complying user agents (such as a web browser) are to interact with it using only secure HTTPS connections

Now you should know more about interactions between your browser and websites