29 février 2012

Plénière d'ouverture @confoo 2012

Je vais tenter de "live-bloguer" ma première journée à ConFoo 2012.  Vous devriez donc avoir l'information en temps réel en rafraichissant cette page:

NOTE: Le WIFI à 5.8Ghz est vraiment performant...pour l'instant

8:00AM: Arrivé au Hilton Bonaventure

8:50AM: La plénière d'ouverture n'est pas encore débuté... (déjà un retard de 20 minutes)

9:06AM: L'adapteur VGA est la cause du retard...

9:10AM: Je viens de me rendre compte qu'il n'y aura pas de présentation technique en ouverture.  Je vais donc modifier ce billet en fonction des présentations auxquelles je vais assister aujourd'hui (GIT, HTML5, Javascript, WebSocket)

9:30AM: "Git: a beginners guide for developers" par @MikeMcQuaid
Je connais Git mais pas suffisamment à mon goût.  J'espère en apprendre un peu plus sur les bonnes pratiques avec ce système de contrôle (versions) de code source.  Contrairement à SVN, Git n'est pas centralisé mais local sur votre ordinateur ce qui permet d'être totalement fonctionnel ("standalone") en mode déconnecté (sans connexion Internet) incluant tous les historiques.

Il est recommandé de ne pas utiliser un GUI pour accélérer l'apprentissage de Git.

gitx and gitk sont des meilleurs outils (que Git log) pour visualiser les statuts

Si vous avez de gros fichiers binaires à gérer, il semble que Git ne soit pas le meilleur outil (commentaires de quelques personnes dans la salle)

Le "branching" avec Git est BEAUCOUP plus simple qu'avec SVN.

Excellente référence pour Git: http://progit.org/

10:45AM: "HTML5: mode déconnecté et push" par @goldoraf
l'Application Cache permet de forcer la sauvegarde des ressources (html, js, css) même si l'utilisateur vide la cache de son browser.  Il faut ajouter un numéro de version dans ce manifeste de cache ce qui permet un rafraichissement des ressources advenant une mise à jour du manifeste.  Se référer à l'objet window.applicationCache pour plus d'information.  À noter que cette fonctionnalité n'est pas supporté par IE (éventuellement dans version 10+).

3 options pour stocker localement des données:
A) FileSystem API (Chrome seulement version 13+)
B) WebStorage (localstorage et sessionStorage) API.  (compatible avec la plupart des navigateurs)
Il est recommandé d'utiliser JSON.stringify et JSON.parse pour sauvegarder des objets dans cet hashmap persistent.  À noter qu'il y a un quota de 5Mo.  Dans les inconvénients on retrouve la performance et l'absence d'indexation dans le hash
C) IndexedDB (compatible seulement avec FF 8+ et Chrome 16+ et peut-être IE 10+)
Concepts intéressants de stockage, de requête (simili SQL) et d'indexation MAIS tout ça en local.

La librairie Lawnchair est très intéressante car elle utilise la meilleure méthode disponible pour stocker les données.

Il existe une superbe librairie Socket.IO qui permet d'utiliser les WebSockets dans TOUS les navigateurs (même sur IE 5, faut le faire).  Voir aussi la nouvelle norme Server-Sent event.  Pour faire du "push" avec du Python dans le back-end: Twisted.

13:15PM: "Migrating MVC to the front-end using Backbone JS" par Martin Drapeau
Salle pleine pour cette présentation très attendue (de ma part à tout le moins).  Désolé mais cette présentation était tellement intéressante que je n'ai pas été en mesure d'écrire des notes.  Un billet dédié à Backbone.js verra le jour sur mon blog éventuellement.




16 février 2012

Le HTML5 peut modifier vos données

J'affectionne particulièrement développer avec JQuery mais hier, je me suis buté à un problème important. En fait, le problème ne provient pas de JQuery lui-même, mais plutôt de sa conformité à la spécification W3C du HTML5 en matière de nommage des attributs non visibles.  Pour ceux, qui comme moi, aiment utiliser la méthode .data() de JQuery, cette spécification à une incidence assez importante; elle enlève systématiquement les tirets dans le nom de vos attributs...OUCH!

Si vous stockez la valeur 1 dans la variable Foo-Bar:
$('body').data('Foo-Bar', 1)
Vous pourrez ensuite la récupérer comme ceci:
console.log($('body').data('Foo-Bar')) = 1
Mais de façon interne, la valeur sera conservée sous FooBar:
$.each($('body').data(),function(i,e){console.log(i)}) = FooBar
Donc FooBar contiendra également la valeur 1:
console.log($('body').data('FooBar')) = 1
L'action suivante écrasera la valeur initiale:
$('body').data('FooBar', 2)
Dorénavant:
console.log($('body').data('Foo-Bar')) = 2
et évidemment:
console.log($('body').data('FooBar')) = 2

À partir du moment que l'on est conscient de ce problème comportement, il est facilement contournable.  Je fais partie de ceux qui essaient tant bien que mal de se conformer aux normes et spécifications dans le développement d'applications. Je dois par contre avouer que je n'aime pas que l'on altère mes données, SURTOUT sans même m'en avertir.  C'est probablement mon côté franco-canadien hyperprotecteur de mes données...