Catégorie : programmation javascript

From Django/Python to NodeJS. Une année après : from NodeJS to Django/Python

Tiens, un blog d’un geek qui explique pourquoi il est passé de python à NodeJS.

Why I’m switching from Python to NodeJS

Ah j’oubliais le plus important : un an après avoir utilisé nodejs en production :

After a year of nodejs in production: back to Python

Au moins ça vient d’un développeur talentueux qui a bossé jour et nuit sur du NodeJS pendant toute une année et il sait bien de quoi il parle.

Spoiler :

  • Easy to learn, impossible to master
  • Good luck handling errors: You’ll need to double your client invoices to makeup for debug time
  • Would I recommend it for large-scale products? Absolutely not.

Traduction de ce qui importe le plus : votre client devra payer le double pour le même projet : développement + autant de temps pour déboguer.

Je vous laisse faire votre propre expérience, moi j’ai la mienne qui se rapproche assez de ces billets de blog.

NodeJS et MongoDB : requête « JOIN » fonctionnelle

// Exemple copié collé et adapté sur stackoverflow :              
// http://stackoverflow.com/questions/15630770/node-js-check-if-path-is-file-or-directory
// http://stackoverflow.com/questions/7268033/basic-static-file-server-in-nodejs 
//                                                                               
var http = require('http'),                                            
    url = require('url'),                          
    fs = require('fs'),                            
    mongoose = require('mongoose'),                
    fileSystem = require('fs'),                    
    path = require('path');                        
var mimeTypes = {                                                                
    "html": "text/html",                 
    "jpeg": "image/jpeg",                
    "jpg": "image/jpeg",                 
    "png": "image/png",                  
    "js": "text/javascript",             
    "css": "text/css"};                  
                                                                                 
var server;                                                                      
var Schema = mongoose.Schema;                                                    
                                                                                 
mongoose.connect('mongodb://localhost/test');                          
var db = mongoose.connection;                                                    
                                                                                 
var creneauSchema = new Schema({                                                 
    libelle:    String,                                      
    date_debut: { type: Date, default: Date.now },           
    date_fin:   { type: Date, default: Date.now },           
    heure_debut: Number,                                     
    duree: Number,                                           
    creneauxJours_id: { type: Schema.Types.ObjectId, ref: 'CreneauJours' }
});                                                                              
var Creneau = db.model('Creneau', creneauSchema);                      
                                                                                 
var creneauJoursSchema = new Schema({                                            
    jours_semaine: [Number]                                  
});                                                                              
var CreneauJours = db.model('CreneauJours', creneauJoursSchema);       
                                                                                 
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {                                          
    console.log('DB connexion reussie');           
    //var cj = new CreneauJours({                            
    //    jours_semaine: [1,2,3,4,5]                         
    //});                                                    
    //cj.save(function (err) {                               
    //    if (err) { return console.log(err); }              
    //    console.log('Écriture réussie');
    //    var c = new Creneau({                              
    //        libelle: "Après midi à 16 heures",
    //        date_debut: new Date(2010, 1, 1),              
    //        date_fin:   new Date(2020, 1, 1),              
    //        heure_debut: 16,                               
    //        duree: 120,                                    
    //        creneauxJours_id: cj._id                       
    //    });                                                
    //    c.save(function (err) {                            
    //        if (err) { return console.log(err); }          
    //        console.log('Écriture 2 réussie');
    //    });                                                
    //});                                                    
    //return;                                                
                                                                                 
    server = http.createServer(function (request, response) {
        if (request.url=='/creneaux') {
            console.log("> JSON");
            Creneau  
            .find({})
            .select('_id libelle date_debut date_fin heure_debut duree creneauxJours_id')
            .populate('creneauxJours_id')
            .exec(function (err, c) {
                if (err) {
                    return console.log(err);
                }
                console.log(c);
                var retour='[';
                for (var i = 0; i < c.length; i++) {
                    retour += '{'
                        + 'id:' + JSON.stringify(c[i]._id)+', '
                        + 'libelle:' + JSON.stringify(c[i].libelle)+', '
                        + 'date_debut:' + c[i].date_debut+', '
                        + 'date_fin:' + c[i].date_fin+', '
                        + 'heure_debut:' + c[i].heure_debut+', '
                        + 'duree:' + c[i].duree+', '
                        + 'jours:[' + c[i].creneauxJours_id.jours_semaine + ']'
                        + '},';
                };
                /* Enlever la dernière virgule : */
                retour=retour.substr(0, retour.length-1)+']';
                response.writeHead(200, {
                    'Cache-Control': 'no-cache, must-revalidate',
                    'Expires': 'Mon, 26 Jul 1997 05:00:00 GMT',
                    'Content-type': 'application/json'
                });
                response.end(retour);
            });      
            // Stopper tout traitement :
            return;  
        }                                
        var uri = url.parse(request.url).pathname;
        var filename = path.join(process.cwd(), uri);
        console.log("> " + filename);
        fs.exists(filename, function(exists) {
            if ((!exists) || (fs.lstatSync(filename).isDirectory())) {
                console.log(">> fichier inexistant : " + filename);
                response.writeHead(200, {'Content-Type': 'text/plain'});
                response.write('404 Not Found\n');
                response.end();
                // Stopper tout traitement :
                return;
            }        
            var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
            response.writeHead(200, {'Content-Type':mimeType});
                                                                                 
            var fileStream = fs.createReadStream(filename);
            fileStream.pipe(response);
        });                              
                                                                                 
    });                                                      
    // Listen on port 8000, IP defaults to 127.0.0.1         
    server.listen(8000);                                     
    // Put a friendly message on the terminal                
    console.log("Server running at http://127.0.0.1:8000/");
});

Exemple de serveur NodeJs et mongoose

Fichier téléchargeable ici.

Code shell pour tester le serveur :

wget --quiet 127.0.0.1:8000/personnes -O - ; echo

Lien vers la dernière version du cours en PDF : ici.

Pour faire des jointures avec mongoose: populate. Lien ici.

Article à lire sur les Promise ici.

Exemple de création sous Visual Studio : ici.

JavaScript : comment faire un truncate

L’idée est ingénieuse, mais il fallait y penser.

Le principe est d’utiliser une fonction d’opération sur les bits.

Comme JavaScript ne peut que faire une opération sur des entiers, il est « forcé » de convertir ce qui n’est pas un entier en entier.

Donc :

"6874654" | 0

forcera JavaScript à convertir les deux opérandes en entier. Dans la réalité c’est carrément des entiers sur 32 bits, donc ce principe ne peut pas s’appliquer à des chiffres supérieurs à (2^32)-1.

Par contre, si, comme moi, vous n’avez que des petits chiffres à convertir, surtout n’hésitez pas, c’est la méthode la plus rapide.

Ainsi, vous aurez :

"6874654" | 0 = 6874654
"6.87" | 0 = 6
"8.999" | 0 = 8
"azazea" | 0 = 0

L’idée vient de stackoverflow, bien sûr ! 😉

jQuery Mobile : rafraîchir une liste créée dynamiquement

Si vous créez dynamiquement une liste en jQuery Mobile, et que la liste n’apparaît pas correctement, il faut demander à jQuery Mobile de la rafraîchir. La solution ? « Refresh ». Voici le code, avec en gras la ligne qu’il vous faut ajouter :

$(document).ready(function() {
    $.ajax("../php/monajax.php")
    .done(function(data) {
        /* Vider la liste avant de la remplir : */
        $("#list").empty();
        /* Remplir la liste : */
        for (var i in data) {
            $('#list').append(
                $('<li />').append(
                    $('<a />')
                        .attr('title', tab[i].description)
                        .html(tab[i].contenu)
                )
            );
        }
        $("#list").listview("refresh");
    });
});

ExtJS : comment envoyer une form au format JSON ?

Je viens de passer 4 heures à chercher comment envoyer, avec ExtJS, une forme au format JSON.

Ce qui suit ne fonctionne pas :

form.submit({
    type: 'ajax',
    headers: {
        'Content-Type': 'application/json'
    },
    url: '/json/destination.php',
    jsonData: data,
    params: {
        mode: 'update'
    },
    success: function(form, action) {
        /* ok !! */
    },
    failure: function(form, action) {
        /* gérer les erreurs */
    }
});

Si vous essayez d’utiliser la fonction « submit » alors vous risquez, comme moi peut être, de ne pas y arriver.
La solution est :

  • récupérer soi même les données via getValues() ;
  • les encoder au format JSON ;
  • les envoyer avec la méthode Ext.Ajax.request().

Voici un exemple de code qui fonctionne :

var data = Ext.JSON.encode({ data: form.getValues(false) }); 
Ext.Ajax.request({
    headers: {
        'Content-Type': 'application/json'
    },
    url: '/json/destination.php',
    method : 'POST',
    jsonData : data,
    params : {
        mode: 'update'
    },
    success: function(form, action) {
        /* ok !! */
    },
    failure: function(form, action) {
        /* gérer les erreurs */
    }   
});

J’ai perdu 4 heures là dessus, alors si je vous en fais gagner 3, n’oubliez pas de me « flattr » 😉

jQuery Mobile : comment forcer le rechargement d’une page ?

Si vous faites des boutons de navigation, votre code jQuery Mobile va ressembler à ceci :

<a href="/">Home</a>

Le seul hic, c’est qu’en cliquant dessus, le navigateur ne va pas recharger réellement la page, il va se baser sur son cache, en supposant que la page n’a pas changé. Ce qui peut poser problème. Par exemple, sur mon site mobile, lorsqu’un commande est validée, je vide le panier côté serveur et je fais un lien vers la page racine, le « home ». Avec le code précédent, le navigateur ne recharge pas réellement la page, et garde le panier toujours « rempli » car il garde les informations et variables JavaScript en mémoire. Dans ce cas, il faut forcer au rechargement de la page. Comment faire ?

Grâce à l’astuce de ce site, voici la solution : il suffit d’ajouter cette balise : rel="external".

Et la page sera rechargée.

<a href="/" rel="external">Home</a>

En espérant que cela aide du monde !

Sencha / ExtJS : comment garder une colonne triée avec une grid ?

Quand on fait une grille de données (datagrid) et qu’on la lie avec un magasin (store) c’est facile.

On peut autoriser à trier par colonnes dans la datagrid.

Seul problème : si le store est un stocké sur le serveur, il fait une seule fois l’appel et ensuite c’est la datagrid qui gère les tris.

Quand on modifie un enregistrement, il est envoyé au serveur, le serveur l’enregistre, et renvoie le résultat de ce qu’il a enregistré. Généralement, il renvoie exactement ce qu’il a reçu. Le seul problème, c’est qu’au retour, la grille ne rafraichit pas l’ordre de tri selon les colonnes qu’on a choisies.

Exemple concret : vous avez une grille avec plein de noms. Vous cliquez sur la colonne « nom », pour la trier par ordre alphabétique. Vous changez le nom « Albert » par « Zoé ». Voici ce qu’il se passe :

  • Le store envoie id=54, nom="Zoé" au serveur ;
  • Le serveur fait la modification en base, et renvoie id=54, nom="Zoé" en retour ;
  • Le store reçoit id=54, nom="Zoé", fait son changement en interne et le transmet à la datagrid ;
  • La datagrid se rafraichit mais ne change pas le tri et laisse "Zoé" à la même place.

La solution : dans le store, lors de l’événement qui signale que le résultat de l’écriture a été intégré (« write« ) il faut forcer l’appel à sort(); qui sera répercuté sur la datagrid automatiquement.

Voici mon code (raccourci à l’extrême sur ma classe de store qui gère les exceptions et plein d’autres choses) :

Ext.define('Ext.data.StoreHandleErrors', {
    extend: 'Ext.data.Store',
    alias: 'data.storehandleerrors',

    constructor: function(config) {
        this.callParent([config]);

        this.on(
            'write',
            function(me, opts) {
                this.sort();
            },
            this
        );
    }
});

ExtJs : dériver un Store « générique » et s’en servir

Ça fait plus d’une journée que je cherche comment faire un Store générique, c’est à dire que j’ai plusieurs Store qui sont tous basés sur le même modèle avec le même type de proxy, etc.

Donc au lieu de faire un copier coller pour chaque Store, j’ai cherché comment en faire un « générique » auquel je pourrai appliquer une configuration « par défaut ».

Voilà le code complet résultat, avec les fonctions qui gère les erreurs possibles renvoyées par Php (session expirée, problème d’écriture en base de données, etc).

Ce qui m’a pris le plus de temps à trouver c’est que pour « surcharger » le constructeur, ça n’est pas la fonction classique « initComponent: function(){ } » mais la fonction de base "constructor: function(config) { }".

Il ne faut, de plus, surtout pas oublier d’appeler le parent, non pas via this.callParent(); mais via this.callParent([config]);.

Ci suit du code, le code de plus d’une journée de travail, en deux parties (j’espère qu’il sauvera du temps à des personnes, ou qu’il les mettra sur la bonne voie !) :

  • première partie = la surcharge
  • seconde partie = exemple d’utilisation de cette surcharge

Première partie : code de la classe

Ext.define('Ext.data.StoreHandleErrors', {
    extend: 'Ext.data.Store',
    alias: 'data.storehandleerrors',

    constructor: function(config) {
        /* (!!) Réécriture par dessus certaines propriétés
         *      du proxy : si jamais elles existent déjà,
         *      elles vont être réécrites.
         */
        config.autoLoad= true;
        config.autoSync= true;
        config.proxy.type= 'ajax';
        config.proxy.reader= {
            type: 'json',
            successProperty: 'success',
            root: 'data',
            messageProperty: 'message'
        };  
        config.proxy.writer= {
            type: 'json',
            writeAllFields: true,
            root: 'data'
        };  
        config.proxy.listeners= {

            exception: function(proxy, response, operation) {

                var error=operation.getError(),
                    title='Erreur du serveur';

                if (error instanceof Array) {
                  error=error.join("
"); } switch(response.status) { case 200: if (response.responseText!='') { var b = Ext.JSON.decode(response.responseText); if (b.title) { title=b.title; } if (b.success==false) { if (b.timeout==true) { windowLoginPanel.show(); } } } break; case -1: var error= 'Le serveur met trop de temps à répondre'+ '

'+ 'On ne peut rien faire, essayez '+ 'd\'actualiser la page.'; break; case 500: var error= 'Le serveur a une erreur interne.'+ '

'+ 'On ne peut rien faire, essayez '+ 'd\'actualiser la page.'; break; default: var error= 'Erreur renvoyée par le serveur non gérée.
'+ 'Détails :
'+ response.statusText+ '

'+ 'On ne peut rien faire, essayez '+ 'd\'actualiser la page.'; break; } Ext.MessageBox.show({ title: title, msg: error, icon: Ext.MessageBox.ERROR, buttons: Ext.Msg.OK }); } }; this.callParent([config]); this.on( 'write', function(proxy, operation) { if ( (operation.action == 'create') || (operation.action == 'update') ) { var m = this.getById( parseInt( operation.resultSet.records[0].internalId ) ); } else if (operation.action == 'destroy') { var m = this.getAt(0); } if (m) { this.panelGridEtEdit.gsGrid.getSelectionModel().select(m); } else { this.panelGridEtEdit.gsGrid.getSelectionModel().deselectAll(); } Ext.example.msg( Ext.String.capitalize(operation.action), operation.resultSet.message ); }, this ); } });

Seconde partie : utilisation de la classe

    var storeAdresses = Ext.create('Ext.data.StoreHandleErrors', {
        model: 'Intranet.Adresse',
        proxy: {
            api: {
                read: '/json/intranet/liste/adresses/',
                create:  '/json/intranet/item/adresse/?mode=create',
                update:  '/json/intranet/item/adresse/?mode=update',
                destroy: '/json/intranet/item/adresse/?mode=destroy'
            }   
        }   
    });