Aujourd’hui la version 4 d’ExtJS est disponible, stable et remplie de nouveautés faisant toute la différence avec la version 3 qui était deja tres appréciées des codeurs de webapps.

Chez REVOLUNET ça fait deja quelques mois que nous utilisons cette version et il est temps pour nous de vous faire un petit retour d’expérience.

SO WHAT’S NEW ?

Les nouveautés implémentées dans ExtJS 4 sont nombreuses, nous n’allons pas les lister ici mais simplement parler de ce qui nous parait comme une avancée notable par rapport aux versions précédentes.

1) The MVC model
Le but d’architecturer sont code selon le modèle MVC est une avancée importante. Auparavant le code métier (controlleurs) etait souvent mélangé avec la description de l’interface et des données (views and models), les actions concernant les éléments du design étant déclarées au meme niveau que les attributs influants sur l’affichage.

Exemple avec ExtJS 3 : un bouton et sa fonction s’exécutant lors du clic.

Bien sûr cette facon de déclarer un bouton dans ExtJS 4 est encore valide mais lors du développement d’interfaces complexes cette méthode peut s’avérer assez inefficace. Imaginons que notre bouton soit perdu au milieu de l’imbrication de plusieurs widgets et que le clic sur ce dernier doit déclencher différentes actions un peu partout dans l’application. Et bien notre seule facon de faire les choses proprement était de déclencher des évenement personnalisés et de les relayer “à la main” (bubble, cascade, relayEvent…) pour qu’ils soient pris en compte dans les autres éléments de l’interface.

Désormais ExtJS 4 nous propose une alternative à cette architecture que nous avions l’habitude d’avoir avec ExtJS 3. Il suffit pour cela de séparer les deux codes, la déclaration de notre bouton dans une “vue” et les actions le concernant dans un “controlleur”.

Exemple avec ExtJS 4 :

myView.js

myControlleur.js

Dans cet exemple on peut voir l’utilisation du nouveau concept de “ComponentQuery” qui a la maniere des selecteurs CSS permet d’obtenir une référence à n’importe quel composant de notre interface. Ici ‘viewport button[action=submit_a_form]‘ signifie “le bouton du viewport qui comporte un attribut action égal à submit_a_form”.
Il suffit ensuite d’associer les évènements a notre bouton sans ce soucier des son imbrication dans les widgets de notre application. Cerise sur le gateau grace à cette technique, les évènement peuvent etre déclarés avant que les widgets (ici notre bouton) n’aient été “render”.
Si un nouveau bouton faisant parti de notre viewport et ayant un attribut action égal à submit_a_form est créé il repondra au meme fonctionnement, meme s’il n’est pas rendu au load initial de l’application.

Dans cet exemple on peut aussi apprécier l’utilisation de Ext.create qui évite d’avoir un code truffé de “new Ext.Button” qui étaient interprétés au run time. Cela a pour effet d’accélérer grandement le chargement de l’application.

2) Ext.loader

Ce n’est pas à proprement dit une nouveauté d’ExtJS 4 car cette fonctionnalité existait deja en partie dans la version 3 du framework. Disons simplement que le load dynamique des ressources de votre application est désormais induite pour peu qu’on en ai envie.

Si nous reprenons les projets que nous avons développer chez REVOLUNET avec ExtJS 3, on peut voir des fichiers “index.html” démesurément grands car ils comportent toutes les inclusions des differents scripts necessaires au bon fonctionnement de l’application, meme si ces resources ne sont pas utilisées au load de la page.

Aujourd’hui la donne a changée, ExtJS se chargeant d’aller chercher les ressources nécessaires au fur et a mesure de leur utilisation. Ceci comporte deux avantages a nos yeux, le premier etant de ne plus se soucier de savoir si les bons fichiers sont inclus dans l’index, le deuxième est que cette technique nous force a organiser notre projet d’un facon bien spécifique afin qu’ExtJS soit en mesure de trouver le code qu’il souhaite charger quand il le juge necessaire.

Afin de bien comprendre le fonctionnement du chargement dynamique de vos scripts nous vous invitons à lire cet article: http://www.sencha.com/blog/using-ext-loader-for-your-application

SO WHAT’S THE POINT ?

Il aurait beaucoup de choses a dire sur la nouvelle version d’ExtJS 4, la gestion des données, la configuration des objets complexes comme les grids ou les forms, les améliorations de performances… les avancées apportées par le nouvelles version de ce framework sont nombreuses.

En ce qui nous concerne il est évident qu’ExtJS a fait un réel bon en avant avec la sortie de la version 4. Concrètement notre point de vue de développeurs spécialisés dans les applications web est qu’ExtJS 4 va nous faire gagner un temps precieux lors du développement de nos nouveaux projets. Et ca, ca vaut de l’or

De plus, de nombreuses améliorations ont également été portées dans Sencha Touch 2 (gestion des classes, loader…), ce qui nous permet de capitaliser en compétence sur les projets basés sur les frameworks Sencha, que ce soit pour les applis Desktop, ou mobiles.

N’hésitez pas à nous consulter pour vos besoins en développement d’applications web riches.

Une fois inscrit à QuickPrez (essai gratuit), vous pouvez créer des conférences web et inviter des correspondants. Vous pourrez alors échanger par chat ou par webcam mais aussi présenter en temps réel vos documents PDF, Office, images ou vidéos. Vous pouvez également partager des captures d’écran ou des pages web.

L’interface est ergonomique et tire parti des fonctionnalités HTML5 : drag&drop, uploads, wtemps réel..

QuickPrez propose également un widget à intégrer sur votre site qui permettra de rentrer en relation directe avec vos visiteurs !

Ci dessous une petite vidéo de présentation :

Vous intégrerez une équipe d’une quinzaine de développeurs dans le quartier de l’Opéra à Paris.

Salaire à négocier + Primes.

Nous envoyer votre CV et quelques mots sur vos compétences et motivations sur contact@revolunet.com

DNS setup

SPF : http://www.google.com/support/a/bin/answer.py?hl=en&answer=33786
MX : http://www.google.com/support/a/bin/answer.py?answer=56217
JABBER SRV records : http://www.google.com/support/a/bin/answer.py?hl=en&answer=34143

Example zone :

@ 28800 IN TXT v=spf1 include:aspmx.googlemail.com a mx include:sfr.fr ~all
@ 28800 IN MX 5 ASPMX2.GOOGLEMAIL.COM.
@ 28800 IN MX 5 ASPMX3.GOOGLEMAIL.COM.
@ 28800 IN MX 3 ALT1.ASPMX.L.GOOGLE.COM.
@ 28800 IN MX 3 ALT2.ASPMX.L.GOOGLE.COM.
@ 28800 IN MX 1 ASPMX.L.GOOGLE.COM.
_jabber._tcp 28800 IN SRV 5 0 5269 xmpp-server.l.google.com.
_jabber._tcp 28800 IN SRV 20 0 5269 xmpp-server1.l.google.com.
_jabber._tcp 28800 IN SRV 20 0 5269 xmpp-server2.l.google.com.
_jabber._tcp 28800 IN SRV 20 0 5269 xmpp-server3.l.google.com.
_jabber._tcp 28800 IN SRV 20 0 5269 xmpp-server4.l.google.com.
_xmpp-server._tcp 28800 IN SRV 5 0 5269 xmpp-server.l.google.com.
_xmpp-server._tcp 28800 IN SRV 20 0 5269 xmpp-server1.l.google.com.
_xmpp-server._tcp 28800 IN SRV 20 0 5269 xmpp-server2.l.google.com.
_xmpp-server._tcp 28800 IN SRV 20 0 5269 xmpp-server3.l.google.com.
_xmpp-server._tcp 28800 IN SRV 20 0 5269 xmpp-server4.l.google.com.
_xmpp-client._tcp 28800 IN SRV 5 0 5222 talk.l.google.com.
_xmpp-client._tcp 28800 IN SRV 20 0 5222 talk1.l.google.com.
_xmpp-client._tcp 28800 IN SRV 20 0 5222 talk2.l.google.com.
_xmpp-client._tcp 28800 IN SRV 20 0 5222 talk3.l.google.com.
_xmpp-client._tcp 28800 IN SRV 20 0 5222 talk4.l.google.com.

Gmail

Config Thunderbird to send/receive use Gapps via IMAP :
http://www.howtogeek.com/howto/internet/setting-up-gmail-imap-support-in-thunderbird-2x/

Migration tips :

Dont change your DNS at first

1. Create your gapps account http://www.google.com/apps/intl/fr/business/index.html
2. Activate email, gtalk, calendar, sites…
3. Manually replicate your actual mail server config (users, forwards, lists…) into gapps
4. Test it with the temporary domain
5. Migrate your DNS zone
6. Use old and new systems a few days
7. Breathe !

Gtalk

Create a chatback badge

gmail : http://www.google.com/talk/service/badge/New
gapps : http://www.google.com/talk/service/a/DOMAIN.COM/badge/New

Gtalk widget (iframe)

gmail : http://talkgadget.google.com/talkgadget/popout
gapps: http://hostedtalkgadget.google.com/a/DOMAIN.COM/talkgadget/client?

Use a standard jabber client

http://www.google.com/support/a/bin/answer.py?hl=fr&answer=49159

Your gmail url is : http://mail.google.com/a/DOMAIN.COM and you can create a CNAME mail.DOMAIN.com in your DNS zone that points to ghs.gmail.com.

Car la donne a changé depuis l’arrivée de l’iPhone et des mobiles sous Android : aujourd’hui, le logiciel du téléphone, et surtout les applications que l’on peut installer, comptent tout autant que le le mobile lui-même. A quoi sert un matériel très évolué si le logiciel interne ne l’est pas ou est trop fermé ? En arrivant sur un marché ou déjà deux géants s’affrontent déjà depuis plusieurs années, avec 100000 applications dans l’AppStore et près de 50000 dans l’android market, et un android qui s’impose chez tous les fabricants, comment pourra faire Nokia pour lutter ?

Nokia fait d’excellents téléphones (6230, N900…), mais Symbian, qui équipe la plupart de leur gamme, n’est pas à la hauteur et aura beaucoup de mal a conquérir les développeurs. Je ne vois plus qu’une alliance Google-Nokia pour sauver cette marque et lui offrir enfin un OS digne de ce nom.

Les appels vers le Maroc sont maintenant inclus en illimité dans le forfait ADSL les appels vers le Maroc ! Allez vite dans votre interface de gestion pour accepter les nouvelles CGV pour profiter de cette nouvelle offre !!

Cela fait un joli cadeau de fin d’année, en plus des dernières annonces fracassantes de notre FAI préféré :

• Obtention de la nouvelle licence 3G
• Jeux vidéos sur la Freebox
• La gestion des enregistrements à distance
• Les point d’accès Free WiFi

L’utilisation de GIT peut être assez déroutante au premier abord, notamment pour les habitués à SVN, mais on devient très vite accro à la gestion des branches de GIT , qui permet d’organiser correctement son propre code, celui d’une équipe et de suivre l’évolution du projet. GIT possède son propre vocabulaire, j’espère vous éclairer un peu avec ces premiers pas. Pour tous les détails, consultez les livres online : Pro Git et GIT community Book.

Quelques avantages de git :

• Souplesse dans la gestion des branches
• Décentralisé
• Pas de serveur, un accès SSH suffit
• Un seul dossier .git à la racine du projet
• Le développeur peut créer ses propres branches locales
• Espace disque et transferts réseau très limités

A contrario de SVN, les branches sont stockées dans le même répertoire de travail, et vous switchez de l’une à l’autre grâce la commande ‘git checkout’. cette commande remplace/supprimer et déplace les fichiers à la demande. Pour pouvoir changer de branche, tous les changements doivent être commités.

Dans un cas classique, plusieurs développeurs vont travailler sur le même projet, chacun sur sa branche, et l’un d’eux (le ‘dictator’) sera chargé de réintégrer toutes les modifs dans le ‘master’ (via des ‘merge’). Une fois ces modifs publiées, chaque développeur pourra alors les réintégrer dans son propre code. Ce workflow est un exemple de base, de nombreux cas plus évolués sont possibles.

Si vous avez besoin de centraliser votre repository, vous pouvez utiliser un simple serveur avec accès SSH pour vos users, ou GitHub.com qui offre des repos gratuits pour les projets open source et 12$/mois pour 5 repos privés si besoin. L’avantage de cette dernière solution est sa facilité de mise en oeuvre ainsi que l’accès à l’excellente interface web de GitHub qui permet de consulter le code, les commits, d’avoir des stats, un systeme de wiki, but tracker… De plus, GitHub propose une fonction de Click&Fork qui permet de forker nimporte quel projet en un clic. La mise à jour du code peut ensuite se faire dans les deux sens… ce qui est parfait pour le modèle open source.

Une fois l’installation de git effectuée, récupérez un projet :

pour un projet hébérgé sur un serveur SSH :

pour un projet hébérgé sur GitHub :

Dans les deux cas,  cela crée un dossier KillerApp.git avec le projet et la branche ‘master’ uniquement.

Si vous voulez rappatrier d’autres branches du serveur distant (origin), il faut les ajouter manuellement ;

Ceci crée les branches locales, qui sont ‘linkées’ à leurs branches remotes respectives

On va passer dans la branche ‘juju’

l’étoile indique qu’on travaille dans la branche ‘juju’

Pour créer une nouvelle branche locale ‘newfeature’ depuis la branche actuelle et se déplacer dedans :

Attention, la branche est issue par defaut de la branche en cours, et pas du ‘master’

Pour changer de branche :

Pour repasser dans la branche newfeature :

Une fois dans votre branche de dev, faites des git commit dès que nécessaire. Les fichiers modifies/ajoutes doivent etre ajoutés a l’index GIT via :

ou, pour ajouter automatiquement tous les fichiers :

Il faut savoir que GIT est complètement décentralisé et que les branches locales/remote ne sont pas forcement synchronisées (’trackées’). Dans notre exemple, la branche ‘newfeature’ n’existe qu’en local et ne pourra pas etre ‘pushée’ sur le remote, sauf si on spécifie manuellement un lien vers un repo distant.

Une fois la ‘newfeature’ codée, le développeur doit la réintégrer dans sa branche;  il doit bien sur d’abord commit son code, puis faire un merge :

Il passe d’abord dans sa branche :

Puis merge le code de sa ‘newfeature’

Maintenant, la branche juju contient le code de newfeature et il a été commit automatiquement (en local).

Envoi de notre nouveau code sur le repository distant

Envoyer sur la branche ‘juju’

Il peut envoyer son code sur le remote (cela pushera la branche juju vers la branche remote ‘juju’) :

Un responsable se chargera alors de merger la branche juju dans la branche master et de mettre a jour le master sur le repo central.

Envoyer sur la branche ‘master’ directement

Éventuellement, le développeur peut intégrer ses modifs directement dans la branche ‘master’ :

Il passe sur la branch master :

Il récupère déjà le code du master actuel :

Puis merge sa branche dedans :

Puis envoi sur le remote :

Récupération de code sur le repository distant

Si le developpeur veut réintégrer dans sa branche les mises à jour de ses collègues :

récupérer toutes les branches distantes configurées :

merger le code du master dans la branch actuelle

La branche ‘juju’ est alors mise à jour avec le nouveau code issu de ‘master’ (le trunk)

Quelques commandes utiles :

• Lister les branches sur le repo distant :

• Créer une nouvelle branche ‘daniel’  locale, la créer aussi sur le remote, et la tracker : (double – before ‘track’)

• Sauvegarder en mémoire les modifs depuis le dernier checkout pour les réappliquer dans une autre branche. Attention, ‘git stash’ reset votre branch au dernier commit (HEAD) :

• Créer un nouveau repository local vide : (double – before ‘bare’)

• Express local commit :

• Afficher un diff des modifications

• Afficher un logdes commits

Tips :

• Créez un fichier .gitignore pour ignorer des fichiers/dossiers (ce fichier peut etre different par branche)
• Utilisez ce script dans votre .bashrc pour afficher la branche dans votre prompt
• Consultez stackoverflow.com il y a pleins d’idées intéressantes
• SVN GIT Crach course : http://git.or.cz/course/svn.html
• GIT magic
• Exemple de workflow, avec des graphiques instructifs

Sanyo Xacti CA9

Si vous êtes à la recherche d’un camescope pratique, économique et performant, alors le nouveau Xacti CA9 est peut etre fait pour vous. Principal point fort de cette gamme : la simplicité d’utilisation, la polyvalence et la robustesse. Le nouveau Xacti CA9 de Sanyo conserve le mode ‘torche’ propre à la série des Xacti et apporte son lot de nouveautés :

• Films en HD 720p, MP4, AVC, h264  (jusqu’a 9mbit/s)
• Photos en 9MP
• Etanche jusqu’à 1.5m !
• Simplicité d’utilisation
• Cartes SD ou SDHC jusqu’a 32Go
• Zoom optique 5x
• Prises de photos possible pendant que l’on filme
• Flash pour les photos (uniquement)
• Stabilisateur (assez décevant)
• Détection des visages

Camescope idéal pour les geeks et autres bloggers, il enregistre directement en MP4/h264, ce qui permet de produire des films directement  lisibles dans un player Flash comme FlowPlayer sans aucun conversion. Récupérez la carte SD, transférez sur votre FTP et la vidéo sera directement lisible par vos amis sur Internet.

L’utilisation est simple et intuitive, très peu de boutons et un petit joystick permettent d’accéder à toutes les fonctions et réglages, notamment le montage, découpage et assemblage de scènes si besoin. L’appareil est petit et léger, robuste et étanche, ce qui permet de l’emmener à la plage sans se soucier des grains de sable ! La qualité de la finition et des materiaux est excellente, il faudra simplement faire attention à l’écran rotatif qui est le seul point fragile.

La qualité des images est bonne sans être exceptionnelle et vous n’avez le choix pour la vidéo qu’entre 3 résolutions : 640×480 en 30 ou 60 images/seconde et 1280×720 en 30 img/secondes. Différents modes et filtres vous permettront d’adapter votre prise de vue à la scene si besoin.

Enfin, à 450€ environ, cet appareil bien pensé rassemble toutes les qualités d’un bon camescope de base, avec en plus l’érgonomie et la solidité des Xacti. Seul point noir, l’autonomie, d’environ 70 minutes, qui vous obligera à investir dans une batterie supplémentaire au cas ou. (40 € environ). Si vous avez besoin d’une qualité d’image plus professionnelle ou d’un zoom plus puissant, les modèles Xacti supérieurs comme le HD1010 ou le HD2000 vous l’offriront pour un peu plus cher.

Vous pouvez voir une vidéo de test ici en cliquant ici (HD 720p, dans FlowPlayer)

Et quelques photos : le chat, la macro, un paysage, une cascade. (non je ne donnerai pas l’adresse de ceslieux magiques)

En plus d’enrichir les actionnaires plutôt que les consommateurs, fermer un marché freine la stimulation économique et le développement de nouveaux services, toujours au détriment du consommateur.

Depuis des années, Free se bat pour enfin obtenir une licence de téléphonie mobile 3G, dont l’obtention est retardée, refusée, et re-retardée maintes fois. Or Free s’est engagé à faire économiser jusqu’a 30% de leur facture annuelle de téléphone mobile à 40 Millions d’utilisateurs Francais.

Et on a vu ce que Free a réussi dans l’ADSL en France : développer un marché extraordinaire en un temps record, innover, apporter de nouveaux services et usages, démocratiser internet et stimuler la concurrence. On peut se demander ce que serait aujourdhui  l’Internet en France sans Free ? 

Il est donc plus que nécessaire pour le consommateur que Free obtienne enfin cette licence pour enfin rendre le téléphone mobile plus accessible, faire baisser les couts, notamment ceux, scandaleux, des SMS.

D’après Numerama, le dossier de l’attribution des licences pourrait trainer jusqu’en Juin 2010, date à partir de laquelle le cout de déploiement technique triplera, car les 3 opérateurs actuels n’auraient alors plus à céder une partie de leurs fréquences au nouvel entrant : http://www.numerama.com/magazine/12970_3-4eme-licence-3G-le-dossier-Free-bientot-enterre.html

Suivez bien ce dossier !

La série de disques durs seagate utilisés, des ‘Barracuda’, a posé de nombreux problèmes, à Seagate, qui a changé non-stop de firmware mais aussi aux fabricant de NAS comme QNAP. J’ai du attendre presque 2 mois pour qu’un firmware compatible soit enfin releasé mais cela a finalement été fait et bien fait grâce au support technique très réactif  de QNAP. Une fois ces problèmes materiels résolus, la création du RAID5 a duré près de 30h, entre le formatage et la synchronisation. Il faut dire que le CPU de ce QNAP est assez misérable (500Mhz) ce qui vous pénalisera si vous avez par exemple de gros rsync a faire.

L’interface web de gestion du QNAP est claire et efficace, on yretrouve toutes les fonctions de configuration, mais aussi une section “Download Station” qui permet de lancer directement sur le NAS des téléchargements http/ftp/BT. Le boitier est également compatible DLNA pour ceux qui ont des consoles XBOX 360 ou PS3 et souhaitent partager les fichiers. Les principaux protocoles de partage de fichier son supportés : Samba/AFS/NFS/FTP… D’autres fonctions sont interessantes : réplication entre plusieurs NAS à distance, serveur Web et MySQL intégrés, bouton “hotcopy” pour copier rapidement le contenu d’un disque USB externe sur le NAS, gestion imprimantes USB (comme la freebox), Corbeille réseau, iTunes station… 

Au niveau des performances, le bilan est assez mitigé :

• Transfert avec rsync du port USB du QNAP d’un disque en NTFS vers le RAID5 : 2.5mb/s (cpu a fond)
• Transfert avec cp du port USB du QNAP d’un disque en NTFS vers le RAID5 : 6.5mb/s
• Transfert avec rsync entre un linux et le QNAP via ssh : 2.5mb/s (cpu a fond)
• Transfert avec rsync entre un linux et le QNAP via NFS : 7.5mb/s
• Transfert entre un explorateur windows et le QNAP via samba : 6mb/s

Points positifs :

• Configuration facile et rapide
• Fonctionnalités multiples
• Linux

Point négatifs :

• Pas de support du ReiserFS
• CPU trop lent
• seulement 256 de RAM

Conclusion : Le QNAP reste un bon NAS, accessible et fonctionnel. Idéal pour le stockage sécurisé, les sauvegardes et le partage réseau.

CF comparatif des NAS 2009 sur clubic : http://www.clubic.com/article-151126-17-stockage-reseau-nas.html avec tests complets et comparatif des performances. On voit que le TS509, nouveau modele avec un CPU plus puissant et 1Go de RAM est largement devant. donc si vous avez les moyens, foncez sur le TS-509 Pro (environ 800€ TTC sans les disques).