mercredi 28 juillet 2010

The Web has never been as exciting!

(This is a quick translation of a post I wrote in French earlier today)

Firefox 4 Beta has just been released. It brings seed, a better UI tons on new things for extension developers (hmm, JetPack!) and Web developers.

In this post, I'll focus on the Web development part.

In my opinion, combining CSS3, new APIs (including WebGL) and HTML5 is enabling the Web as a development platform to make a huge leap forward. I have worked with the amazing Paul Rouget in order to have a video of his demos in order to share my excitement.

For those who have installed Firefox 4 Beta 2, a good PC with a decent discrete graphic card and have enabled Direct2D hardware acceleration, here are 3 spectacular demos:

  1. Video, CSS Transitions, @font-face and SVG filters
  2. Video, SVG Clip-path and CSS Transitions
  3. WebGL, video and Transforms

Paul Rouget during the demo movie

For those who are more in a hurry or want more details, please check the video and the article on Hacks.mozilla.org.

What you see on the screen is just a Web page, using standards that are being specified and implemented (HTML5, CSS3, SVG, WebGL, new APIs…). What I find fascinating is that by combining these technologies, one can do things that were deemed impossible even recently:

  • Native video with an Open and unencumbered coded (WebM)
  • Good fonts ( @font-face, WOFF)
  • Declarative Animations (using CSS3, and soon SVG/SMIL)
  • SVG Filters and Masks applied to HTML elements (Gaussian blur effect, a B&W filter on videos, a round-shaped video
  • 3D (the WebM video used at the end as a texture to a 3D rotating cube just floored me)
  • WebSockets, for a persistent bi-di communication between the server and the browser, used in this case to control remotely the presentation from an Android phone running a pre-Alpha version of Firefox for Android.
  • Drag & Drop, Indexed DB and local storage, the File API, Geolocation and device orientation and all the tech features I won't mention.

Of course, the Open Web still has to compete with proprietary approaches such as monopolistic AppStores or proprietary plug-ins. But it never has been has powerful and innovative as it is now, and that's what is making me excited!

Le Web n'a jamais été aussi excitant !

Je viens de bloguer sur la sortie de Firefox 4 Bêta 2. Plus de rapidité, une meilleure interface, et plein de nouveautés pour les développeurs d'extensions (JetPack) et les développeurs Web.

C'est sur le développement Web que je veux m'attarder dans ce billet.

A mon sens, la combinaison CSS 3, nouvelles APIs (dont WebGL) et HTML 5 est un bond immense en avant pour le Web en tant que plate-forme de développement. J'ai travaillé avec l'excellent Paul Rouget pour faire une vidéo de ses démos qui mettent cela en évidence.

Pour ceux qui ont Firefox 4 Beta 2, une machine avec une bonne carte graphique et les drivers "qui vont bien" et ont paramétré leur navigateur pour l'accélération matérielle Direct2D, voici 3 démos :

  1. Vidéo, CSS Transitions, @font-face, et filtres SVG
  2. Vidéo, SVG Clip-Path et CSS Transitions
  3. WebGL, vidéo, Transforms

Tournage de la vidéo avec Paul Rouget

Pour les autres et ceux qui veulent plus de détails techniques, notre vidéo est sur Hacks.mozilla.org.[1]

Regardez bien à l'écran : ce que vous voyez est une page Web, développée avec les standards en cours d'élaboration (HTML5, CSS3, SVG, WebGL, nouvelles APIs...). Ce que je trouve fascinant, c'est qu'en combinant ces technologies, on peut faire des choses qu'on croyait encore impossibles il y a peu :

  • vidéo native avec un codec libre et ouvert (WebM)
  • fontes de haute qualité variées ( @font-face, WOFF)
  • animations déclaratives (en CSS3)
  • filtres et masques SVG, pour modifier des éléments HTML (ici une vidéo floutée, ou en noir et blanc ou en forme de cercle)
  • 3D (le coup de la vidéo WebM utilisée comme texture d'un cube en 3D qui tourne dans une page Web, c'est quand même incroyable !).
  • WebSockets, pour une communication b-directionnelle persistante entre serveur et navigateur, ici utilisé pour télécommander le changement de page depuis un téléphone Android faisant tourner une pré-Alpha de Firefox mobile.
  • Drag & drop, Indexed DB et Local storage, File API, Geolocation, Device Orientation, et toutes les possibilités techniques que j'oublie de lister

Bien sûr, le Web ouvert doit toujours faire face à des approches propriétaires comme celle des AppStores monopolistiques ou encore les plug-ins propriétaires. Il doit donc être compétitif. Mais pour cela, il n'a jamais été aussi fort, et c'est ça qui est réjouissant !

Notes

[1] Et pour ceux qui ont un sens de l'humour en béton armé et qui préfèrent le français à l'anglais, une version déjantée, ratée, et non-officielle est disponible. Ca n'est pas un hasard si on la appelée "la version à laquelle vous avez échappé"... A vos risques et périls ! ;-)

Sortie de Firefox 4 Beta 2

Hier soir, Mozilla a publié Firefox 4 Beta 2, que vous pouvez dès maintenant télécharger. Faisons rapidement le tour du propriétaire...

Pour l'utilisateur

  • Les onglets au dessus de la barre d'adresse (pour Windows et Mac, c'est en cours pour Linux) ;
  • "Switch to Tab", c'est à dire que quand on commence à saisir l'URL d'une page déjà ouverte, la barre d'adresse propose de passer à la page ouverte plutôt que d'en ouvrir une nouvelle copie ;
  • Onglets applicatifs ("App Tabs"). D'un clic-droit sur un onglet, on peut indiquer qu'on veut l'avoir à portée de main à chaque instant dans cette fenêtre. L'onglet devient plus petit (de la taille de son icône) et vient se caler à gauche dans la barre d'onglets. Très pratique pour un Webmail ou une application comme RememberTheMilk !
  • Nouveau gestionnaire d'extensions.
  • Rapidité améliorée :
    • Au démarrage, via une amélioration de XPCOM
    • pour le défilement des pages complexes via Retained Layers, qui annonce une utilisation future du GPU pour ce genre de tâches.
    • à l'affichage des pages et pour l'exécution du JavaScript (optimisations du code à plusieurs niveaux)
  • Plus grande stabilité, avec la "Crash Protection", qui est arrivée avec Firefox 3.6.4, qui fait qu'en cas de crash d'un plug-in comme Silverlight, Flash ou QuickTime, Firefox reste stable.

Pour le développeur Web

  • Firefox est le premier navigateur à intégrer un Parser HTML 5. Ca permet de mélanger HTML 5 et SVG (Inline SVG), par exemple, avec un minimum de code, en plus des éléments canvas, video (avec le codec libre et ouvert WebM, bien sûr) ;
  • WebSockets, qui permet une connexion permanente entre serveur et navigateur et donc une communication dans les deux sens
  • Implémentation des Transitions sur les Transformations CSS 3.
  • Les extensions de type JetPack ne nécessitent pas le redémarrage de Firefox après qu'on les ait installées, ce qui devrait améliorer leur adoption. Par ailleurs, les extensions JetPack sont plus faciles à développer, comparées aux extensions en XUL ;
  • Indexed DB : une base de données locale pour les applications Web, pour soit les accélerer, soit leur permettre de fonctionner hors-ligne.
  • Web Console, un outil de deboguage de sites.

Des démos sont disponibles sur Hacks.mozilla.org.

Pour le futur

  • Synchronisation de plusieurs profils Firefox avec Firefox Sync, en toute confidentialité (chiffrement coté client, possibilité d'utiliser sa propre instance de serveur) ;
  • Un nouveau thème pour Linux
  • Plus de rapidité !
    • Lazy Frame Construction
    • Utilisation du processeur graphique
    • Plus d'entrées/sorties asynchrones
    • Améliorations du moteur JavaScript
  • Nouveau système de gestion de la vie privée

Et maintenant ?

Quelques articles

mardi 29 décembre 2009

Rétrospective 2009

C'est la fin de l'année, et donc l'occasion d'en faire le bilan. C'est ce que je vous propose sur le thème du Web, de ses standards et des navigateurs. J'ai divisé ce bilan en trois points : l'évolution du marché des navigateurs, la montée en puissance de HTML 5 et l'apparition du modèle App Store.

Renforcement de la concurrence au niveau des navigateurs

  • Google Chrome en version 1.0 pour Windows en décembre 2008
  • Parts de marché de Firefox en constante augmentation (saisonnalité : on a toujours un plateau pendant l'été avec une forte augmentation en octobre novembre). Firefox a maintenant 350 millions d'utilisateurs actifs.
  • Baisse d'Internet Explorer toutes versions confondues
  • Sortie d'Internet Explorer 8, qui provoque la baisse d'Internet Explorer 7.
  • IE 6 résiste encore trop et plombe les services Web qui pourraient être beaucoup plus innovants sans lui.
  • Augmentation de la fréquence de sortie des nouvelles versions chez Mozilla (20 mois entre Firefox 2.0 et 3.0, 12 mois entre 3.0 et 3.5, 7 mois entre 3.5 et 3.6)
  • Arrivée des extensions dans Chrome 4 Beta fin novembre
  • Sortie de Chrome pour Linux et Mac OS X en version finale fin novembre 2009.
  • Chrome dépasse Safari en parts de marché et se retrouve donc troisième derrière Firefox et Internet Explorer.

L'actualité de l'année, c'est la montée en puissance des navigateurs modernes, sous la pression des libres, Firefox et Chrome[1]. Microsoft mène toujours en terme de parts de marché toutes versions confondues, mais Firefox se retrouve dominant dans plusieurs pays, dont l'Allemagne.

HTML 5 : maturation et visibilité

Au niveau technique, HTML 5 et CSS3, ainsi que plusieurs APIs et spécifications associées ont bien avancé à la fois sur le papier et au niveau d'implémentations intéropérables dans les navigateurs modernes. En voici un petit résumé, forcément incomplet :

Ce qu'il faut retenir de cela, c'est que les applications Web sont en train de monter en puissance. De plus en plus de possibilités sont offertes aux développeurs Web, ce qui fait qu'ils ne sont plus obligés de se tourner vers les applications natives.

Pour ceux que ça intéresse, mon collègue Paul Rouget (@PaulRouget) a publié plusieurs démonstrations de ces nouvelles technologies sur le blog Mozilla Hacks (@MozHacks).

On notera que les navigateurs modernes tels que Safari, Chrome et Firefox disposent chacun d'un moteur JavaScript qui est beaucoup plus rapide, du fait de l'adoption de la compilation juste à temps[2]. Ceci, combiné à la montée en puissance de HTML 5, permet au Web ouvert de gagner en crédibilité en tant que concurrent des technologies propriétaires comme Adobe Flash et Microsoft Silverlight[3]

Succès des App Store

Alors qu'Internet arrive sur les mobiles et que ces derniers sont de plus en plus utilisés pour se connecter, un phénomène nouveau est arrivé : les App Store, ces magasins en ligne qui permettent de télécharger de nouvelles applications (gratuites ou pas) pour les téléphones mobiles haut de gamme. Apple revendique ainsi 2 milliards de téléchargements pour 100'000 applications disponibles et 50 millions d'iPhone en circulation à ce moment là.

l'App Store d'Apple est à l'opposé des principes du logiciel libre et du Web ouvert :

  1. L'installation des logiciels ne peut se faire que depuis l'App Store. Le développeur doit payer Apple pour pouvoir utiliser le kit de développement et n'a pas le droit de diffuser lui même son application et signe plusieurs contrats et NDA (contrats de confidentialité). Il est du coup impensable de diffuser le code source du logiciel, sachant que l'utilisateur ne pourra pas l'installer lui même sur son iPhone.
  2. Apple a le contrôle total de ce qui est autorisé ou pas sur l'App Store, et peut refuser une application sans avoir à se justifier.[4]

Le succès de l'App Store d'Apple auprès des utilisateurs le positionne en concurrence des applications Web, car celles-ci sont pour l'instant moins ergonomiques que les applications natives et elles ne peuvent pas accéder à certains composants du téléphone comme le GPS, l'appareil photo et l'accélérometre. HTML 5 prévoit un certain nombre de solutions pour accéder à ces périphériques, via par exemple l'API Geolocation.

D'un point de vue financier, l'App Store se différencie du Web par le fait qu'il offre un modèle de rémunération aux développeurs, autre que la publicité. Toutefois, il semblerait que la perspective de rémunération mise en avant par les App Stores soit grandement exagérée. Ainsi, une équipe française a récemment démontré qu'une application raisonnablement réussie se révélait très déficitaire (3000 à 4000 EUR d'investissement pour 660 EUR de recettes).

Conclusion

2009 a été une excellente année du point de vue des standards et des navigateurs. En effet, les deux ont fait d'immenses progrès aux dépens des navigateurs obsolètes tels qu'IE 6 et IE7, ainsi que les technologies propriétaires telles que Flash. Par contre, une technologie concurrente s'est établie entre temps, celle des App Store, sous l'impulsion d'Apple, qui est suivi par d'autres acteurs du mobile, dont Palm (Palm WebOS Applications) et Android (Marketplace), avec des règles semble-t-il moins strictes.

Notes

[1] Chrome n'est en fait pas libre, mais est basé sur une base de code — Chromium — qui l'est.

[2] Opera 10.5, sorti fin décembre 2009 en pré-Alpha, dispose d'un moteur JavaScript comparable appelé Carakan.

[3] Ces deux technologies ne font pas partie de l'Open Web. Leurs applications sont certes diffusées via le protocole HTTP et s'affichent dans le navigateur, mais elles nécessitent l'installation d'un plug-in propriétaire sans lequel on ne peut pas faire tourner ces applications.

[4] C'est la raison pour laquelle il n'est pas possible de disposer d'une version de Firefox pour l'iPhone. Apple refuse les applications qui dupliquent des fonctionnalités existantes dans le téléphone tel qu'il est livré par Apple.