Les choses Internet Explorer ont bien fonctionné

C'est le navigateur que tout le monde aime détester, parfois à juste titre. Ce qui était jadis le navigateur le plus innovant est devenu l’épine dorsale du côté de chaque développeur front-end. Au milieu de la tourmente et des plaintes que les développeurs d'aujourd'hui lancent à Internet Explorer, on ne s'entend souvent pas sur la manière dont Microsoft a changé le visage du développement frontal, mais également du développement Web dans son ensemble..

La chute d'IE n'est pas une histoire peu commune. en fait, c'est un peu la même histoire que Netscape. La société derrière le navigateur leader devient de plus en plus complaisante, le navigateur stagne et un nouveau champion apparaît. C'est un cycle répétitif auquel Mozilla est de nouveau confronté dans une certaine mesure (mais c'est une autre histoire pour une autre fois).


L'influence d'IE4 sur le DOM

Avant les navigateurs de la version 4, JavaScript était principalement utilisé pour un traitement de données simple (validation de formulaire). En tant que tels, les pages Web étaient principalement statiques. Bien qu'une page puisse être générée dynamiquement par des applications côté serveur, la page ne peut pas interagir avec l'utilisateur. Cette limitation était due à l'inadéquation de DOM (Document Object Model) du navigateur, qui est l'interface de programmation d'application (API) utilisée par les développeurs JavaScript pour accéder aux éléments individuels de la page et les manipuler. Les DOM qui existaient avant les navigateurs de la version 4 sont souvent appelés DOM niveau 0. Les implémentations DOM niveau 0 permettent aux développeurs d'accéder à

, , et éléments, mais c'est à peu près tout.

"Microsoft remet Internet Explorer sur les rails."

Netscape Navigator 4

Ce n'est que lorsque Netscape a publié Navigator 4 (NS4) au milieu de 1997 que le DOM du navigateur a permis aux développeurs Web de modifier une page avec JavaScript. La technique de manipulation des éléments avec JavaScript et le DOM a été baptisée Dynamic HTML (DHTML). Le DHTML de NS4 a certes été un pas en avant, mais son DOM basé sur des couches, mal conçu et mal conçu, et une feuille de style en cascade limitée (CSS) offrent aux développeurs un accès limité aux tâches qu'ils peuvent accomplir..

Accéder aux éléments

Netscape n'a pas implémenté de modèle d'objet complet. Outre la fonctionnalité DOM niveau 0, les seuls éléments accessibles aux développeurs étaient des éléments à positionnement absolu., éléments, et éléments (les deux derniers éléments ont été positionnés de facto). Chacun de ces types d’éléments était représenté par un Couche objet dans le DOM de NS4. Netscape conçu Couche les objets doivent être très similaires aux objets frame (et donc window). Chaque Couche objet avait un document propriété, qui était essentiellement un autre document HTML. Comme des cadres, un Couche objet pourrait être imbriqué dans un autre Couche objet, rendant le code pour accéder à ces couches extrêmement prolixe comme ceci:

var myLayer1 = document.layers ["myLayerId"]. document.layers ["mySecondLayerId"]; // ou var myLayer2 = document.myLayerId.document.mySecondLayerId;

Ces deux lignes de code font la même chose: elles accèdent au Couche objet avec un identifiant de mySecondLayerId qui est imbriqué dans une couche avec un identifiant de myLayerId. Oui, les développeurs ont dû parcourir l'arborescence des couches pour accéder aux couches imbriquées..

Contenu dynamique

Le DOM de NS4 ne permettait pas la création, l’insertion, le déplacement et la suppression d’objets DOM, mais parce que chaque couche exposait document objet, un développeur peut modifier dynamiquement le contenu d'une couche à l'aide de la écrire(), charge(), et Fermer() méthodes. Bien que cela donne un peu plus de puissance au modèle de couche, les développeurs ne sont pas autorisés à mettre à jour dynamiquement une page. Nouveau contenu devrait être écrit ou chargé dans une couche, supprimant efficacement le contenu existant de la couche. Il va sans dire que la plupart des développeurs évitent la manipulation de contenu et se concentrent plutôt sur la modification du style d'un calque..

Changer de style

Le développement Web à l'aide du DOM de NS4 était douloureux et frustrant.

Mais le style dans le DOM de NS4 était une chose amusante. Bien que le navigateur prenne en charge CSS dans une certaine mesure, Couche les objets ne fournissaient pas d'API aux développeurs pour accéder directement à une couche style attribuer comme aujourd'hui style objet. Au lieu, Couche Les objets exposaient un ensemble très limité de propriétés qui modifiaient la position, la visibilité, le découpage et la couleur / l'image d'arrière-plan d'un calque, et la valeur que ces propriétés acceptaient était également assez limitée. Par exemple, les propriétés de positionnement et de découpage acceptaient uniquement les valeurs numériques; un développeur ne peut pas spécifier une unité (telle que px, em, pt, etc.). Voici un exemple de code:

var myLayer = document.myLayerId.document.mySubLayerId; myLayer.top = 10;

Inutile de dire que le développement Web utilisant le DOM de NS4 était douloureux et frustrant. Les capacités DHTML extrêmement limitées de NS4 découlent des limitations du moteur de rendu de NS4 (il ne pouvait pas rediffuser la page). Mais pourquoi passer autant de temps sur le DOM de Netscape, en particulier dans un article censé être consacré à IE? Si Netscape avait remporté la guerre des navigateurs, le DOM actuel serait une étape évolutive du DOM présenté par Netscape dans NS4. Alors que le DOM actuel est une norme proposée par le W3C (et que certaines idées de Netscape sont mises en œuvre dans le standard actuel), le DOM actuel est fortement influencé par le DOM de IE4.

Le DOM de IE4

Quelques mois seulement après la publication de Navigator 4 par Netscape, Microsoft a publié la quatrième version d’IE. Il inclut également le support de DHTML, mais L'implémentation de Microsoft était bien différente et supérieure à celle de NS4. IE4 bénéficie d'un meilleur support CSS et d'un modèle d'objet plus complet pour accéder aux éléments et au contenu de la page et les manipuler. L'effet du DOM d'IE4 était considérable; en fait, un développeur peut trouver de nombreuses similitudes entre le DOM d'IE4 et le DOM standard.

Accéder aux éléments

"Microsoft a changé le visage du développement frontal, mais aussi du développement Web dans son ensemble?"

Les concepteurs d'IE4 souhaitaient transformer le navigateur en une plate-forme pour les applications Web. Ils ont donc approché l'API d'IE4 comme un système d'exploitation, fournissant un modèle d'objet presque complet qui représentait chaque élément (et ses attributs) comme un objet accessible via un langage de script (IE4 prenant en charge JavaScript et VBScript)..

Dans le DOM d’IE4, le principal moyen d’accéder à un élément particulier de la page était la propriété tout[] collection, qui contenait tous les éléments du document. Les développeurs peuvent accéder aux éléments avec un index numérique ou en spécifiant les éléments d’un élément. identifiant ou prénom, comme ça:

var myElement1 = document.all ["myElementId"]; // ou var myElement2 = document.all.myElementId;

En utilisant ce code, les développeurs peuvent accéder à l’élément element avec un identifiant de myElementId peu importe où il existait dans la page. Cela contraste vivement avec le modèle de couche de Netscape dans lequel les développeurs ne pouvaient accéder aux couches que via la hiérarchie de la couche. La fonctionnalité de document.all ["elementId"] a évolué dans la norme document.getElementById () méthode. Mais ce n’était pas la seule façon pour un développeur d’accéder aux éléments; on pouvait marcher dans l’arbre DOM et toucher chaque élément avec le enfants [] collection et parentElement précurseurs de la propriété à la norme childNodes [] et parentNode Propriétés.

Outre le chargement d'éléments en tant qu'objets, le DOM de IE4 représentait les attributs d'un élément en tant que propriétés de l'objet élément. Par exemple, le identifiant, prénom, et style propriétés mappées directement sur un élément identifiant, prénom, et style attributs, respectivement. Cette conception est devenue la norme.

Contenu dynamique

Microsoft a inventé le innerHTML propriété.

Comme Netscape, Microsoft n’a pas fourni d’API à part entière permettant d’ajouter, de déplacer et de supprimer dynamiquement des nœuds avec JavaScript. Ils ont cependant inventé le innerHTML propriété pour obtenir ou définir le contenu d'un élément. Contrairement à Netscape Couche objets écrire() et charge() méthodes, les innerHTML la propriété n'était pas une solution tout-en-rien pour modifier le contenu d'un élément; un développeur pourrait utiliser innerHTML pour effacer complètement, remplacer ou ajouter du contenu à un élément. Par exemple, le code suivant récupère le contenu d'un élément et le modifie:

var el = document.all.myElementId, html = el.innerHTML; el.innerHTML = html + "Bonjour, innerHTML";

A ce jour, le innerHTML La propriété est la pierre angulaire de DHTML. C'est un moyen efficace d'ajouter de grandes quantités de contenu à un élément. Même s’il n’a jamais été officiellement inclus dans une norme DOM, tous les principaux navigateurs implémentent une innerHTML propriété.

Modification du style

Microsoft a inventé plusieurs outils et conceptions qui ont évolué pour devenir des éléments du DOM standard, mais le travail effectué avec l'API de style d'IE4 est devenu standard avec très peu de modifications. La clé pour changer le style d’un élément dans IE4 était la style propriété, la même propriété (et syntaxe) utilisée par les développeurs aujourd'hui.

DHTML a changé le développement Web pour toujours. Ce sont toutefois les DOM d'IE4 qui ont fait progresser la technologie (et le développement Web) en influençant principalement les spécifications DOM niveau 1 et 2 du W3C. IE4 a révolutionné le développement Web en 1997, et IE le ferait encore quelques années plus tard..


IE révolutionne Ajax

Ajax a ouvert les portes du développement Web.

Avant Ajax, qui s'appelait déjà Ajax, on l'appelait scripting à distance, et les développeurs tirant parti de la puissance du scriptage à distance utilisaient des cadres cachés et des iframes pour la communication client-serveur. Un cadre (i) masqué contenait généralement un formulaire rempli dynamiquement et soumis via JavaScript. La réponse du serveur serait un autre document HTML contenant du code JavaScript qui informait la page principale que les données étaient reçues et prêtes à être utilisées. C'était brut, mais cela a fonctionné.

Il y avait cependant une alternative: un joyau peu connu enfoui dans la bibliothèque MSXML 2.0 de Microsoft. IE5, publié en mars 1999, incluait MSXML 2.0 et les développeurs ont trouvé un composant appelé XMLHttp (le nom actuel de l'interface était IXMLHTTPRequest). Son nom est trompeur, car le XMLHttp object fonctionne plus comme un simple client HTTP qu'autre chose. Les développeurs pouvaient non seulement envoyer des requêtes avec l'objet, mais ils pouvaient également surveiller l'état de la requête et récupérer la réponse du serveur..

Naturellement, XMLHttp commencé à remplacer la technique de la trame cachée (i) pour la communication client-serveur. Quelques années plus tard, Mozilla a créé son propre objet, inspiré de celui de Microsoft. XMLHttp, et l'a appelé XMLHttpRequest. Apple a emboîté le pas avec leur XMLHttpRequest objet en 2004 et Opera implémenté l'objet en 2005.

Malgré son intérêt croissant, la popularité de XMLHttp/XMLHttpRequest (connu collectivement sous le nom de XHR) n’a explosé qu’en 2005, lorsque Jesse James Garrett a publié son article intitulé? Ajax: une nouvelle approche des applications Web.?

Ajax a ouvert les portes du développement Web, et JavaScript, XHR et DHTML sont au nombre des inventions de Microsoft. Alors, qu'est-ce-qu'il s'est passé? Ce qui a amené un navigateur qui a littéralement changé la façon dont les développeurs Web écrivent des applications Web pour devenir le fléau du Web moderne?


La chute d'Internet Explorer

En 2003, la part de marché totale d’Internet Explorer était d’environ 95%; Microsoft a officiellement remporté la guerre des navigateurs. En l'absence de réelle concurrence sur le Web, Microsoft est passé du navigateur à .NET. Cela est confirmé par les citations de nombreux employés de Microsoft, mais le plus éloquent est tiré d'un article de CNET intitulé "Ajax aidera-t-il Google à nettoyer"? Dans ce document, Charles Fitzgerald, directeur général des technologies de plate-forme de Microsoft, aurait déclaré:

?Il est un peu déprimant de constater que les développeurs commencent à peine à comprendre ce que nous avons livré à la fin du 20e siècle. [ed: DHTML et Ajax], mais XAML est dans une toute autre classe. Cet autre élément est très compliqué et très difficile à déboguer. Nous avons vu des piratages assez impressionnants, mais si vous regardez ce que XAML commence à résoudre, c'est une avancée majeure et majeure..?

Ainsi, en mai 2003, Microsoft annonçait que IE ne serait plus publié séparément de Windows (l'excellent IE5 pour Mac était également mis en conserve). Le navigateur serait toujours développé dans le cadre du système d'exploitation Windows en évolution, mais Microsoft ne publierait aucune version autonome d'IE. Ils misaient principalement sur ClickOnce, une technologie qui permet aux développeurs d’écrire des applications classiques (en utilisant .NET bien entendu) et de les distribuer via le Web..

Mais le Web a continué d'évoluer sur le chemin défini à l'origine par Microsoft avec IE4 et IE5 et Microsoft a commencé à perdre des parts de marché au profit de l'héritier de Netscape: Firefox. Les développeurs étaient en train d’écrire des applications Web qui vivaient dans le navigateur, pas dans des applications classiques via ClickOnce. Cela a obligé Microsoft à utiliser IE, à le dépoussiérer et à relancer la publication de versions autonomes..


Microsoft continue d'innover

IE9, comprend un support des normes bien meilleur à tous les niveaux.

Les deux versions suivantes, 7 et 8, étaient en grande partie évolutives. IE7 contenait une variété de corrections de bugs, le XMLHttpRequest identifiant (bien qu'il crée encore un XMLHttp objet de la bibliothèque MSXML) et améliorations de l'interface utilisateur et de la sécurité.

IE8 était plus ou moins identique, à l'exception du fait qu'il sandboxait chaque onglet, une fonctionnalité que Google a également implémentée dans Chrome (Microsoft l'a annoncé en premier). Il isole chaque onglet dans son propre processus, augmentant la sécurité et la stabilité. Le sandboxing est en train de devenir la norme dans les navigateurs actuels (Firefox n’en a toujours pas la capacité) et s’oriente également vers le domaine des add-ons et des plug-ins..

Microsoft remet Internet Explorer sur les rails.

La dernière version, IE9, offre une prise en charge des normes bien meilleure, mais elle innove également avec son nouveau moteur JavaScript compilant JIT (qui utilise un cœur de processeur séparé si disponible et peut accéder au GPU) et son moteur de rendu à accélération matérielle. Bien que les moteurs JavaScript compilant JIT ne soient pas nouveaux, la capacité d'IE9 à décharger la compilation sur un noyau séparé en parallèle du rendu de la page est un exploit qui stimulera les performances indispensables pour les applications Web. Ses capacités d’accélération matérielle se sont révélées utiles lors de ses débuts; à présent, Firefox et Chrome offrent une certaine accélération matérielle..

Il est indéniable qu'Internet Explorer a créé des problèmes pour les développeurs Web. La pause de cinq ans entre IE6 et IE7 a amené Microsoft à se placer loin derrière la concurrence, rendant le développement frontal moins qu'idéal. Mais Microsoft remet Internet Explorer sur les rails. Ils ont façonné le développement Web de ce qu’il est aujourd’hui; voici en espérant qu'ils le fassent à nouveau.

La prochaine version d'Internet Explorer, la version 9, devrait être officiellement publiée le 14 mars 2011..