MarcArea.com 2010 et les suggestions via JSON

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

Salutations à tous mes petits fanatiques. Vous avez vu la nouvelle façade ? Pas mal hein, c'est Français. Maintenant que je commence à mieux maîtriser Django et Python, je peux à nouveau mettre plus d'énergie dans le front pur.

Bon, il était temps de mettre en ligne quelque chose de plus corporate (et qui justifie mes tarifs... lulz). Mais bon, vous avez vu, on garde quelques touches de fun quand même, parce que bon, faut rigoler bordel. Sinon à force de traîner sur IRC et sur Twitter on va tous finir par devenir des grosses langues de putes. Je le sais, je suis tombé dans le piège aussi.

Quoi vous dire à propos de ce redesign ? Ben c'est du 100% Kemar, du zéro foutaises quoi. Une bonne livraison de javascript pour faire tourner le fun en HP, pour faire défiler le super portfolio et pour motoriser les suggestions sous l'input de recherche, là, sur votre gauche. Ah ça vous le savez que j'aime coder ce genre de scripts :)

Et ça tombe bien parce que c'est surtout de son mode de fonctionnement dont j'ai envie de vous parler aujourd'hui. Pour que ça reste simple et rapide, je ne cherche que dans le titre des billets. Dans le temps, quand j'étais un noobzor, j'aurais fait un XHR basique avec une query SQL derrière, du genre cherche dans le titre avec un LIKE. Ah oui c'est porc de faire ça. Même si ça ne coûte pas cher sur un site comme le mien j'ai quand même décidé de soulager la DB au max d'autant que je n'ai pas (encore) de stratégie de cache ici.

Du coup j'ai décidé de générer un index JSON des titres des billets. Il suffit ensuite de parser le JSON (qui est chargé une seule fois) via jQuery.getJSON() qui fallback sur le parseur natif du navigateur si disponible par exemple, et de chercher dedans à chaque événement keyup détecté sur l'input de recherche. Pour chercher dans le JSON j'ai utilisé jsonquery parce que j'ai trouvé ça génial (ça vient de Dojo). Et putain, ça poutre sa maman.

Pour générer le JSON avec Django, un petit Signal suffit sur le post_save du modèle des posts, et ça donne un truc dans le genre :

import os
import codecs
from django.conf import settings
from django.utils import simplejson

def generate_json_index(sender, instance=None, **kwargs):
    all_posts = Post.objects.only('date_created','title','slug').filter(is_online=True).order_by('-pk')
    data = [
      {
        'title': post.title,
        'year': post.date_created.strftime('%Y'),
        'url': post.get_absolute_url(),
      }
      for post in all_posts
    ]
    output_file = os.path.join(settings.MEDIA_ROOT, 'json/blog_suggest.js')
    output = codecs.open(output_file, encoding='utf-8', mode='w')
    simplejson.dump(data, output, indent=None)
    output.close()
    return

post_save.connect(generate_json_index, sender=Post)

Voilou, bon ça me fait penser qu'il manque encore un bout de js pour highlighter le code des billets ici.

Si vous voulez voir la source js, vous savez où la chercher, un bon éditeur de code vous reformatera la syntaxe minifiée, si vous voulez le fichier raw avec les commentaires, z'avez qu'à enlever le -min de l'URL du fichier, il est en ligne aussi.

Je voulais encore passer tout ça sous gunicorn et virer mon Apache mais j'ai plus le courage là. Ah et puis je voulais aussi upgrader mon serveur avec une Ubuntu récente, mais j'ai les boules de l'apt dist-upgrade. Je prendrai des nouvelles parts pour faire une clean install un de ces jours, même si j'étais content d'avoir une des 1ères IPs du cloud :).

#1 Nicolas O

26/03/2010 07:56

Kemar rules the world :)

#2 Vincent Voyer

26/03/2010 13:58

Clairement ça poutre comme tu dis et j'étais impressionné au début de pas voir de requêtes js partir constamment ainsi que de la rapidité de la recherche !

SI je voulais faire mon insolent :
- je ne téléchargerais la liste qu'au moment ou l'internaute clique la première fois dans le champs recherche (sinon 90% des gens téléchargent ton json pour rien)
- je mettrais la ressource blog_suggest en cache côté navigateur pendant 30 minutes
- je mettrais les javascripts en bas de page parce que ça coute pas plus cher

Ça y est je l'ai fait mon insolent, ça fait du bien

#3 Kemar

26/03/2010 14:26

@Vincent Voyer : tu as raison de faire ton insolent et tes conseils sont excellents. Effectivement je vais faire ça un de ces quatre pour aller au bout du truc :)

Edit : Et voilou, c'est fait, avec en sus un JSON sans indentation pour gagner en poids.

Avant Dégradés CSS 3 dans WebKit et Gecko Après Quoi de neuf sur la planète HTML5 ?

Tag Kemar Joint