AlcionTech

Aller au contenu | Aller au menu | Aller à la recherche

Tag - Ajax-Client riche

Fil des billets - Fil des commentaires

lundi 1 décembre 2008

Javascript bouscule le modèle MVC

Vu sur Advogato : Javascript bouscule le modèle MVC.

''When HTML first came out, browsers could have been called "Application Thin Clients", if the buzzword had been in use at the time. The introduction of javascript made it possible to execute code on the client, and this turned browsers into something much more than just a "display" mechanism.

Before Javascript, Web application development was simple: everything was done server-side. The concept of MVC - Model View Controller - was easy: the HTML was generated, and that was the view. With Javascript being a full-blown programming language, the lines are being blurred between which code is responsible for the View, the Controller and even the Model. The resultant split of responsibility across client and server in wildly diverse programming languages is driving many developers to alternative technologies such as Flash, and causing headaches for those Web developers who remain.''

mardi 4 novembre 2008

Les Google Apps disponibles 99.9% du temps

Google vient de l'annoncer sur son blog officiel: le taux de disponibilité des Google Apps est de 99,9%

C'est plutôt une bonne nouvelle pour le million d'utilisateurs professionnels (dont Alcion Group) ayant choisi d'externaliser une partie de leur infrastructure informatique en utilisant les Google Apps, afin de se lancer dans le Cloud computing, concept à la mode du monde informatique.

Lire la suite...

lundi 10 décembre 2007

Mashups cartographiques...

MapifiedKayak.screenshot.jpgJe me fais un petit peu de pub:

Si vous êtes intéressés par les technos du Web 2.0 (javascript, html, css, php,...) et la représentation cartographique de données, je vous invites à faire un passage par mon site perso. Vous y trouverez plusieurs projets de veille technologique sur ces sujets, dont un à même eu le privilège d'être 'Mashup of the day" sur programmableweb.com.

  • Mapified Kayak: une jolie couche de présentation pour le métamoteur de recherche de voyages Kayak, et la possibilité de rechercher plusieurs destinations et dates d'un coup (Google Maps + Kayak API).
  • Overflown Countries: pour savoir quels pays vous survolez lors de vos voyages (Google Maps + Geonames API).
  • Mapified Stock Indices: une présentation géolocalisée des variations d'indices boursiers asiatiques (Google Maps + Geonames + Dapper API).
  • Mapified Rss: pour géolocaliser n'importe quel flux RSS et mettre en surbrillance les pays (Google Maps + Geonames API).
  • GoogleMaps vs YahooMaps: les 2 cartes sur la même page pour comparer facilement les niveaux de zoom disponibles. Une fonction de synchronisation est fournie (Google Maps + Yahoo Maps API).


Bien que personnels, ces projets constituent également des démos pour présenter notre offre E-business et les compétences des ingénieurs d'Alcion dans ce domaine. Dans cette optique, si vous êtes vous-mêmes ingénieurs d'Alcion, n'hésitez pas à faire partager vos projets logiciels sur ce blog.

mercredi 5 décembre 2007

Slides de l'open bar GWT (Google Web Toolkit)

Disponibles au téléchargement ci-dessous (lien "une annexe").
dilbertFlashJS.gif

lundi 19 novembre 2007

OpenBar Alciontech le 29 novembre : le client riche en Java, c'est facile avec GWT et JavaFX

ajax.jpgCe mois-ci, une conférence pleine de bonnes nouvelles : on peut développer des écrans portables et sexy en Java, sans avoir besoin de connaître Javascript !

En introduction, un coup de projecteur sur JavaFX, sur le thème de "comment faire du flash, en java".

En plat principal, GWT, un framework qui a le potentiel de changer la donne. Il permet de réaliser des applications Ajax portables, en Java. Ses caractéristiques principales sont :

  • il est open-source ;
  • il n'impose pas d'apprendre javascript pour faire de l'ajax,
  • il absorbe les nuances de navigateurs,
  • il gère automatiquement des concepts de haut niveau comme la sérialisation, les appels RPC, et la traduction de code java->javascript pour exécution des traitements locaux au navigateur, ce qui est une petite prouesse.

Après 6 mois sur le terrain, il commence à être adopté par certains de nos clients.

Thierry a travaillé quelques semaines sur GWT. Il vous en expliquera les concepts, les principes de développement et vous fera une démo couvrant le design d'écrans, le remoting et l'exécution de code au sein du navigateur.


Que vient faire ici ce barbu frisé ? C'est Ajax le Grand, héros de la guerre de Troie... ;-)

vendredi 12 octobre 2007

API de Google et Yahoo! map

Dans un billet précédent de ce blog, nous avions vu qu'il était possible de construire des flux rss (dapper) et de géolocaliser leur contenu (yahoo!pipe). Nous avions pris comme exemple les variations des indices principaux des bourses asiatiques.
La présentation par défaut sur la page du pipe a le bon goût d'exister mais convenons que le rendu n'est pas percutant. Il faut en effet cliquer sur chaque marqueur pour avoir les informations.
L'idéal serait d'avoir des marqueurs représentatifs de la variation de l'indice, vert quand positif, rouge quand négatif, avec une taille proportionnelle à cette variation.
Pour arriver à ce résultat, il faut un peu programmer. Un API maps est fourni par Google et Yahoo! donc nous allons travailler avec les 2 pour comparer.
Le principe est relativement simple, dans chaque carte (YMap et GMap), pour chaque pays présent dans le flux RSS, on ajoute un marqueur (YMarker, GMarker) personnalisé (YImage ou GIcon). La hauteur du marqueur est ajustée par la formule Math.round(Math.abs(fChange) * 20) et donc d'avoir une hauteur de 20px pour une variation d'indice de 1%. Le fichier source est disponible en annexe (fonction fFillYahooMapWithGeo et fFillGoogleMapWithGeo).
Les résultats sont visibles ci-dessous, avec à gauche Google en haut et Yahoo en bas.

google.map.asian.stock.daily.change2.jpg yahoo.map.asian.stock.daily.change2.jpg

Sur le plan fonctionnel, un léger avantage à Yahoo! qui permet d'afficher un label par un simple passage de la souris sur le marqueur alors que Google nécessite de cliquer dessus.
Les métriques ne font pas apparaitre de différences significatives entre les 2 API:

  • Temps de chargement: environ 4s,
  • Nombre de requêtes: légèrement plus pour Yahoo (71 contre 54),
  • Octets téléchargés: environ 400kO,
  • Nombre de lignes de code propres aux API: une dizaine.

Les 2 API offrant un services de géolocalisation, nous pouvons donc essayer d'utiliser directement le flux RSS de Dapper (non géo-localisé) et confier la tâche de géolocalisation aux API. Yahoo le permet très simplement en remplacant un paramètre d'entrée du constructeur de YMarker mais les requêtes sont synchrones (fonction fFillYahooMapWithoutGeo dans le source). L'API Google est plus délicate à mettre en oeuvre car il faut utiliser un objet GClientGeocoder et utiliser une fonction de callback.
Dans les tests, il a été constaté un léger ralentissement (environ 1s) avec cette méthode à cause d'une plus forte utilisation du réseau (17 requêtes de plus).

Avis subjectif de l'auteur:

  • Aucune API ne se démarque de l'autre. Celle de Google est légèrement plus complexe mais compense par légèrement plus de fonctionnalités.
  • Notre application est bien exigeante en bande passante et temps d'UC puisqu'elle nécessite de mettre en forme le HTML chez Bloomberg, de transférer ce flux de Bloomberg à Dapper qui est alors retraité en RSS, de transférer de Dapper à Yahoo pour géolocaliser, puis enfin de Yahoo au client. Si Bloomberg (ou un autre) fournissait directement le flux rss (idéalement déja géolocalisé et gratuitement), on ne serait pas obligé de faire tout cela :)


PS: La démo utilise l'objet XMLhttpRequest qui n'autorise pas chez Firefox les requêtes hors du domaine courant, alors que si chez IE. Donc

  • si vous utilisez IE, mettez simplement "urlProxy":"" à la ligne 29 dans maps.htm,
  • si vous utilisez Firefox, installez un serveur local (localhost) avec la page php_proxy_simple.php fournie en annexe,

jeudi 20 septembre 2007

Gérer les browsers à l'heure des RIA

valid-css2.pngLes Rich Internet Applications présentent bien des avantages mais il faut leur reconnaitre un inconvénient majeur du point de vue de l'ingéniérie logicielle: l'obligation de gérer différents navigateurs.
Le marché des navigateurs est dominé par 2 acteurs: Microsoft Internet Explorer (avec environ 80% de PDM en légère décroissance) et Mozilla Firefox (avec environ 15% de PDM en légère croissance). Si IE6 domine encore (45% de PDM), IE7 prend petit à petit sa succession (35%). Du côté de firefox, la version 2 est devenue ultra-majoritaire. Le bilan est donc qu'il convient de veiller en ce moment à la compatibilité de son application avec 3 navigateurs dans le cas d'un développement destiné au grand public.
Il existe des technologies permettant de faire abstraction du navigateur comme les applets Java ou Flash mais cela oblige l'utilisateur à posséder une JVM ou des plugins spécifiques (dans la bonne version) ... et l'ingénieur les compétences.
valid-xhtml10.pngUne des grosse tendance de ces dernières années est l'utilisation d'AJAX, ce qui revient à utiliser le javascript, le DOM et les feuilles de styles. Si les choses se passent bien en terme de portabilité avec la syntaxe du javascript, les ennuis apparaissent lorsqu'on accède au DOM, chaque browser ne gérant pas les mêmes entités. Les spécifications du W3C vont vers une standardisation mais celle-ci est lente. On retrouve exactement le même phénomène avec les feuilles de styles (les specs sont ici).

Pour y avoir passé plus d'heures que je n'aurais voulu sur différents projets, il est fondamental d'éviter le champ de mines du cross-browser compliance si l'on veut respecter les délais d'un projet de RIA. Pour cela on s'appuiera au maximum sur les librairies et frameworks disponibles en veillant à régulièrement tester le rendu dans les navigateurs cibles et surtout pas uniquement à la fin des développements.
Notez bien que les librairies ne font pas tout. La RIA Alcionbooks est par exemple non complètement fonctionnelle sous IE dans sa V1.0 malgré l'utilisation de scriptaculous et de nombreuses heures passées dessus par Eric.

mercredi 12 septembre 2007

AJAX et web scraping

Vous avez sûrement déja constaté que la plupart des pages web agrègent des données provenant de différents sites. Cela peut se faire de bien des manières, de la simple balise html iframe jusqu'aux web services. Par ailleurs, certains sites comme wikipedia fournissent régulièrement aux publics les dumps de leur BD qu'il convient d'importer dans son propre SI aux prix de coûteuses manipulations.
Sans aller jusqu'à cette extrémité, dans une optique de data mining, il est parfois très intéressant de construire sa propre page web en agrégant le contenu partiel (statique ou dynamique) de plusieurs autres pages sans qu'un protocole autre que http soit disponible et donc pratiquer le web scraping. C'est ce que nous faisons avec notre Dashboard. qui synthétise des informations arrivant en format mediaWiki, encapsulées entre 2 balises <text> dans plusieurs pages XML, dans une page locale unique au format html.
Ce type d'architecture logicielle est dite RESTful.

La faisabilité technique repose sur l'objet XMLHttpRequest et c'est lui qui se cache derière le A de AJAX en permettant de lancer des requêtes asynchrones à un serveur http.
L'exemple le plus connu reste google maps où le contenu de la zone carte/image satellite évolue avec les actions de la souris dans la page.

Dans le Dashboard, les appels au serveur wikipedia ne sont fait qu'une seule fois au chargement de la page et le DOM de la page est modifié une fois la page affichée (où le tableau est alors vide). A ce titre nous faisons probablement du AJAX lite ;)

L'étape la plus délicate n'est pas la récupération cachée d'un flux de donnée http mais le parsing de ce flux qui ne se prête pas forcément bien à l'extraction de données. Une fois les infos repérées avec la méthode de l'objet String indexOf, substring permet leur extraction et innerHTML leur réinjection dans la page courante.

Cette méthode autorise par exemple la construction de cette vue synthétique de variation de cours boursiers à partir des pages boursorama.
Screenshot.Ajax.CoursBourse.png
PS: Ce billet passe sous silence d'éventuels copyrights qui peuvent exister sur les contenus ainsi récupérés.

mardi 10 juillet 2007

Microsoft rendra-t-il .NET portable "Everywhere" ?

300px-DotNet3.0.png.NET ne se déploie bien que sur Windows. Ceci n'est pas une insulte aux développeurs de Mono qui essayent de développer les moyens de faire tourner .NET sous linux, c'est un constat issu du terrain. Au moins pour la partie serveur.
Pour ce qui est de l'environnement client (celle qui permet d'exécuter une IHM, à l'instar d'une JVM sur poste utilisateur permettant d'exécuter une application swt ou Swing), il y a un intérêt évident à rendre la technologie présente sur tous les systèmes d'exploitation. Ce mouvement ne se fait pas sans ratés :

jeudi 22 février 2007

L'avenir du client riche

Un lien vers un comparatif des dernières technologies pour client riche: Ajax, XUL, Flex, Apollo, WPF.Ce n'est pas très long à lire.
Je vous copie-paste la conclusion de l'auteur de l'étude:

"D'un point de vue plus personnel, je pense que le futur des application internet riche se situe avec Flex et Ajax qui restera. Quand aux applications de bureau, je mettrais une pièce sur un petit duel WPF / Apollo."

mardi 16 janvier 2007

Les labs à suivre

fiole Une petite compilation des labs à suivre lors d'une veille technologique. N'hésitez pas à compléter la liste :)

Usenet ou le retour de l'ancêtre

UsenetUsenet, c'est l'ancêtre des forums web et c'est pas inutile de connaitre parce que cela regorge de groupes (et de fils de discussion) susceptibles d'intéresser les ingénieurs informaticiens que nous sommes. Avant c'était un peu technique pour entrer dans l'arène mais grâce à google (et oui encore lui!), plus d'excuse: tout se fait via le navigateur. Toute petite sélection de groupes à noter:


Pour info, Usenet est souvent la matière première des chercheurs en social cyberspaces (voir le projet Microsoft).

vendredi 22 décembre 2006

Dans le radar : la réponse de Java à RubyOnRails ?

RomaFramework est une initiative à évaluer. Qui a des retours ?
http://www.romaframework.org/

Roma Meta Framework is a Open Source initiative to make Java application development easy. The approach is totally DDD, let's think to the domain of your application and Roma will makes the rest: persistence (database), presentation (HTML + Ajax), logging, user management, sessions, etc.

The Roma project is composed of two parts:

* Wizards to generate code automatically * Runtime libraries that works as a glue code to integrate you application with the best Java technologies and products (Spring, JDO 2.0, Echo2, Log4J, etc.)

vendredi 10 novembre 2006

Rencontre avec Logiconsult

Logiconsult est une petite société de conseil spécialisée dans le décisionnel depuis 1989.
Datawarehouse.gifLe décisionnel, qu'est-ce exactement ? C'est l'art d'agréger les données du ou des systèmes d'information de l'entreprise, afin de fournir des outils de pilotage (pouvoir corréler par exemple les ventes dans une région avec les délais de fabrication dans telle usine et élaborer un plan d'action correctif). Les mots clés sont : datawarehouse (centralisation et historisation des données des différents SI), analyse muti-dimensionnelle (axes et indicateurs), et l'ordre SQL "group by"...
Alciongroup dispose de compétences dans ce domaine, qui concerne des projets assez différents des projets de développement et d'intégration. Aujourd'hui, nous voulons développer cet axe afin de compléter notre offre. Logiconsult nous a présenté deux axes de développement :

  • un logiciel d'aide à la conception de système décisionnel, permettant de tracer les champs tout au long du parcours des données et leur transformation ; réalisé en technologies Ajax, il est modifiable pour s'adapterà la logique du projet si nécessaire et sert, si on le souhaite, de base pour générer des schémas ou des scripts.
  • des briques logicielles Java/Ajax pour l'implémentation de tableaux de bord ; en particulier une interessante fonction de tableau croisé dynamique réalise tous les calculs sur le poste client, au cours de la navigation de l'utilisateur dans les données, après une unique requête sur la base de données qui se voit considérablement déchargée.

L'élaboration du partenariat est en cours.

A rapprocher d'un fil de discussion sur la possible relocalisation des données (et donc des traitements) dans les systèmes distribués à la faveur des évolutions des prix du stockage et de la bande passante sur une longue période, à partir de l'exemple du nouveau datacenter de Google à Portland, Oregon :

When we look at our current situation, we see that we have data 'here' and data 'there'. When we want to have more data, we need to go 'there' to bring the data 'here' for viewing. In the most extreme (and common) case, the data is only temporarily copied from 'there' to 'here' and once we are done with the data it is deleted from 'here'.

vendredi 30 juin 2006

La Française des Jeux accélère son e-business avec Alcion

fdjeux.pngDepuis le 5 juin, on peut enfin jouer aux 17 jeux de tirage, de grattage et de pronostics de la Française des Jeux sur le web (www.fdjeux.com), grâce à la mise en production d'une version totalement nouvelle du site de jeu, en remplacement d'une architecture basée sur un client applet java et un serveur C/C++. Ce sont désormais près d'un million de comptes joueurs qui sont ouverts 24h/24 sur une plate-forme à laquelle AlcionGroup a collaboré de près, tant sur le plan de l'architecture, que de la gestion de projet et de l'industrialisation.

  • Site JSP + jeux Flash/XML/webservices
  • Back-end java, framework propriétaire, Tomcat, Oracle
  • Plate-forme transactionnelle sécurisée full-https
  • Performances : 5000 sessions simultanées, temps de réponse moyen < 0.3s, sur 24 processeurs AIX
  • Système de porte-monnaie permettant le micro-paiement
  • équipe de 10 développeurs + 10 testeurs, sur 10 mois.

Aujourd'hui, la Française des jeux peut espérer convertir une part significative des 8 milliards d'euros de CA vers le online et ainsi jouer dans la cours des grands de l'e-business français, derrière voyages-sncf.com mais dans le peloton de tête des ténors de la VPC (notamment fnac.com). Avec un avantage majeur pour le online : la possibilité de limiter les mises des joueurs, qui sont parfaitement identifiés, dans le cadre de la politique de "jeu responsable". Limitation impossible dans le réseau des points de vente traditionnels. Enfin, deux scoops :

  • en 2007, on pourra également jouer depuis son mobile ; il s'agit d'une tendance lourde, comme on le voit par exemple au Japon ;
  • les systèmes hautement sécurisés rendent honnête. Inutile donc de me demander si j'ai un truc, une martingale ou une backdoor !

mercredi 21 juin 2006

Développer en AJAX avec Google

AJAX (Asynchronous javascript and XML) désigne un ensemble de technologies permettant la réalisation d'interfaces utilisateurs utilisables dans un simple navigateur, mais au rendu bien plus dynamique que le HTML. De plus en plus utilisé sur le web grand public (maps.google.com...), AJAX s'étend aujourd'hui aux applications intra/extranet, en mal d'ergonomie. Dès 2002/2003, Alcion a mené un grand forfait pour la réalisation d'une plate-forme de téléconférence couplée téléphone/web, qui reposait sur les principes AJAX.
desktopclone.jpg Depuis quelques semaines, le développement AJAX est entré dans l'age adulte grâce à la décision de Google de distribuer gratuitement le framework utilisé en interne le Google Web Toolkit (GWT). Une des qualités majeures de cette solution est qu'elle est J2EE et épargne l'essentiel du développement HTML/Javascript au réalisateur de l'application. Cela tombe bien, c'était le plus délicat et sujet aux bugs et aux incompatibilités entre navigateurs.
L'assemblage des widgets graphiques est déclaratif et n'est pas sans rappeler Swing, jusqu'aux mécanismes de listeners pour la gestion événementielle :

public class Hello implements EntryPoint {
  public void onModuleLoad() {
    Button b = new Button("Click me", new ClickListener() {
      public void onClick(Widget sender) {
        Window.alert("Hello, AJAX");
      }
    });
    RootPanel.get().add(b);
  }
}


http://code.google.com/webtoolkit/