L'histoire des développeurs Web liée au développement du navigateur

Les développeurs Web sont les créateurs de pages Web comme celle-ci. Considérez comment nous collaborons ici : vous, côté lecture, et moi, devenant un meilleur écrivain avec le soutien d'un éditeur de HackerNoon.

Vous voyez les développeurs ? Probablement pas, car ils ont fait du bon travail. Nous sommes susceptibles de les trouver en train de lire sur l' avenir du développement Web .

Ce que j'offre avec cet article, en revanche, est une occasion de faire une pause et de réfléchir à l'émergence des développeurs Web, à la façon dont cela est lié à l'histoire des navigateurs et à la façon dont leur collaboration a relancé la chronologie du développement des navigateurs.

Un nouveau genre d'ingénieur, pour le web

Au début du Web, de nombreux ingénieurs en logiciel n'accordaient pas beaucoup d'attention au développement Web en termes de pages Web. Pourquoi le feraient-ils, n'est-ce pas ? Si vous étiez ingénieur, seriez-vous impressionné par le premier passager venant de la locomotive ou par la locomotive elle-même ?

Jason Kottke , de Home of Fine HyperText Products , l'a bien écrit :

Utiliser NCSA Mosaic pour surfer sur le World Wide Web pour la toute première fois dans le laboratoire de physique du sous-sol à l'université était aussi proche d'une expérience religieuse que je n'en ai jamais eu. Ce fut un coup de foudre qui a complètement changé ma vie.

Mais cette première impression a également permis aux hackers (et aux peintres) d'aborder le sujet sous l'aspect de l'interface utilisateur. Par conséquent, l'invention et l'innovation du navigateur Mosaic marquent le début des opportunités avec le développement Web :

Au début de 1993, le Centre national des applications de calcul intensif (NCSA) de l'Université de l'Illinois a publié une première version de son navigateur Mosaic. Ce logiciel fonctionnait dans l'environnement X Window System, populaire dans la communauté des chercheurs, et offrait une interaction conviviale basée sur des fenêtres. Peu de temps après, le NCSA a également publié des versions pour les environnements PC et Macintosh. L'existence de navigateurs fiables et conviviaux sur ces ordinateurs populaires a eu un impact immédiat sur la diffusion du WWW.

Remarquez comment le navigateur, en tant qu'outil, a commencé à avoir beaucoup de sens car l'infrastructure derrière a montré le potentiel :

Le 30 avril 1993, le CERN a rendu le code source de WorldWideWeb disponible sans redevance, ce qui en fait un logiciel libre. À la fin de 1993, il y avait plus de 500 serveurs Web connus et le WWW représentait 1 % du trafic Internet, ce qui semblait beaucoup à l'époque (le reste était l'accès à distance, le courrier électronique et le transfert de fichiers).

Ce fut une expérience surréaliste à cause de cette interface conviviale qui a montré le potentiel d'accéder aux connaissances de partout. Peut-être pas différent de ce que j'ai ressenti lorsque j'ai utilisé ChatGPT comme une interface conviviale qui a montré le potentiel d'accéder aux connaissances de partout. Envisagez de lire l'histoire de Mosaic et l'invention du Web dans l'article suivant :

View-source : apprenez en copiant des exemples

Mais les pages Web étaient assez simples. À l'époque, nous, étudiants en informatique, trouvions les gens intelligents par la simplicité de leurs pages, comme celle-ci de Dennis Ritchie des Bell Labs .

Comme j'étais là en tant qu'utilisateur curieux - n'assistant pas aux cours d'informatique et jouant avec le Web - je suis également tombé sur une option de menu, intégrée au navigateur , qui nous permettait de visualiser la source des pages Web. Et au fait, presque du jour au lendemain, ce navigateur Mosaic s'appelait Netscape.

Jim Nielsen a réfléchi dans The Spirit of View-Source et a identifié comment le navigateur Netscape avait permis une opportunité d'apprentissage - instantanément - pour chaque page sur le Web.

Dans son article, il a cité une observation de Clive Thompson dans le livre Coders

Chaque page Web que vous avez visitée contenait le code vous montrant comment elle a été créée. Tout Internet est devenu une bibliothèque de guides pratiques sur la programmation.

Maintenant, essayez d'imaginer "le Web" comme la chose la plus en vogue et imaginez combien d'entre nous vérifions la source des pages pour copier les idées des autres et essayer d'apprendre éventuellement. C'étaient les "jours de la source de vue" où nous pouvions voir la magie.

Bien que nous ayons toujours le « afficher la source de la page » dans le menu des navigateurs modernes, si vous affichez la source d'une page Web, vous verrez probablement quelque chose qui semble mystérieux :

JavaScript : contrôle et interaction

Un autre point d'inflexion, bien perçu, est survenu lorsque Netscape a (encore) activé JavaScript - le langage de programmation - qui permettait aux développeurs Web de créer des scripts pour contrôler certains aspects des pages Web et d'avoir le contrôle sur l'interaction.

Brendan Eic h, l'inventeur de JavaScript et l'actuel PDG de Brave Software Le navigateur qui se soucie de votre vie privée , nous a donné une diapositive qui résume le voyage du héros de JavaScript au pays du Web. Ses remarques nous aident à voir que JavaScript n'a pas toujours été considéré comme élégant, mais qu'il a été largement utilisé en fin de compte - et a continué à s'améliorer.

La capture d'écran suivante montre une boîte d'alerte invoquée à partir de l'interface du navigateur Netscape 2. Les développeurs Web utilisaient JavaScript pour lancer des alertes visuelles (pour déboguer leur code) et faire des choses impossibles telles que contrôler des formulaires Web, valider la valeur d'un formulaire de saisie et d'autres cas d'utilisation.

Inutile de dire qu'un utilisateur curieux pourrait en apprendre davantage sur JavaScript sur une page via la "vue source". La page HTML était l'enveloppe qui transmettait une grande partie de la présentation et de la structure logique des sites à travers ses éléments HTML, ses hyperliens, ses images, son style et son code JavaScript.

HTML dynamique : personnalisations et animation de la mise en page

Et une autre opportunité a été activée grâce à une nouvelle balise HTML nommée <layer> . À l'époque, vers 1997, Netscape a lancé la version préliminaire de Netscape Communicator avec de nouvelles API pour les développeurs. Selon un communiqué de presse, « Dynamic HTML est une étape importante pour HTML, offrant aux concepteurs plus de flexibilité et de contrôle sur la mise en page des pages Web, tout en offrant aux utilisateurs un plus grand degré d'interactivité. ”

Plus tard, la balise <layer /> est devenue <div />. L'innovation technique à l'époque concernait la possibilité de positionner un morceau visuel de HTML, un élément, au-dessus d'un autre, comme le montre l'illustration 3D suivante tirée de l'une des premières notes techniques DHTML .

Pour l'instant, vous ne pourrez pas vivre la démonstration suivante de 1997 mais essayez d'imaginer ce train (qui n'était qu'une image) se déplaçant comme s'il venait vers vous.

L'astuce consistait à utiliser JavaScript pour basculer la visibilité des images de différentes tailles créant l'illusion d'une animation. La page a également lancé le son d'une locomotive en utilisant d'autres méthodes.

À ce moment-là, la guerre des navigateurs était à son apogée, les développeurs qui avaient commencé à écrire des pages pour Netscape, comme moi, ont commencé à produire des pages pour Internet Explorer, contrairement à moi. Ces différences - et les compétences requises - ont contribué à inciter les développeurs à être embauchés en tant que développeurs Web. L'ampleur et la complexité du mouvement DHTML sont en corrélation avec le contenu écrit par ce livre populaire de plus de 1000 pages .

Normes Web

L'un des principaux résultats de la guerre des navigateurs est que Netscape a publié son code source en open source. C'est là que le nom Mozilla apparaît, comme documenté dans Project Code Rush . Ce processus était stratégique, complexe et risqué. C'était une décision audacieuse, comme l'a reconnu le PDG de l'époque, Jim Barksdale :

“Eh bien, j'espère certainement que l'énorme quantité de nouvelles personnes qu'aucune entreprise ne peut se permettre de travailler sur un produit - contribuant maintenant au Netscape Navigator Communicator - fera une différence significative dans l'amélioration du produit. Comment cela fonctionne contre n'importe quel concurrent, reste à voir. Jim Barksdale @ Code Rush 2013

Outre la fondation open source, une stratégie clé de Mozilla a attiré l'attention des développeurs Web - sa prise en charge des normes Web. Pour aider à cela, Netscape a réuni une nouvelle équipe d'évangélistes de la technologie. Parmi eux, Eric Meyer , le gourou CSS qui a atteint le statut de célébrité parmi les développeurs. Leur cause résonnait avec les besoins des développeurs Web - mettre fin aux différences de propriété et avoir un terrain d'entente pour implémenter des pages fonctionnant avec tous les navigateurs. Eric a célébré notre combat :

« Alors voici Bob Clary, Marcio Galli, Katsuhiko Momoi, Chris Nalls, Tristan Nitot, Arun Ranganathan, Doron Rosenberg et Susie Wyshak. Nous avons mené le bon combat et créé de nombreux documents de qualité, notamment des informations sur la refonte de DevEdge lui-même. "

Gardez à l'esprit que ce qui précède est un petit morceau d'une photo plus grande. Une autre partie de cela était les efforts de documentation de Mozilla, qui s'est développé plus tard sous le nom de Mozilla Developer Network.

Les applications monopage et la méthode AJAX

Alors que les développeurs s'aidaient à réparer les pages Web de manière conforme aux normes, ils poussaient également les pages à leurs limites. C'était l'époque où des cas d'utilisation comme Gmail sont apparus et des initiatives comme les services Web nous ont permis d'envisager l'idée d' applications monopage - et si une page Web pouvait fonctionner comme des applications logicielles ? Les articles suivants montrent ce que les évangélistes écrivaient à l'époque :

• Accès aux services Web dans Netscape 7.1/Mozilla 1.4 à l'aide du proxy WSDL (06 juin 2003)
• Widget de table des matières pliable basé sur les normes (CTOCWidget) (20 mai 2003)
• Navigation interne : étendre la navigation Web au paradigme de la navigation (16 mai 2003)

Malgré ces efforts, un point d'inflexion est également venu du vieil ouest. En 2005, Jesse James Garrett de San Francisco, a écrit un article fondateur intitulé « Ajax : une nouvelle approche des applications Web », Jesse était un concepteur d'expérience utilisateur qui a eu un impact sur le développement Web dans le monde entier. AJAX est devenu un terme populaire utilisé par les développeurs pour exprimer l'intention d'ajouter de l'interactivité et de créer le comportement des applications Web.

Si vous deviez embaucher quelqu'un pour créer une application d'une seule page, vous deviez embaucher un développeur Web qui connaissait AJAX :

Le meilleur ami du développeur - Outils complémentaires pour développeurs et inspection de page

Le projet Mozilla a continué la saga, maintenant avec Firefox. Firefox a repris les marchandises de Mozilla et a atteint un niveau de préparation en termes de performances, de sécurité et de prise en charge des normes. Mais le tournant a été qu'il a gagné la confiance des développeurs, non justifiée par la part de marché, mais grâce aux outils intégrés qui les ont aidés à tester et à dépanner les pages.

Les chefs de produit des organisations ont reconnu que garantir la compatibilité avec Firefox (Standards) était le moyen le plus rapide de fournir des pages à Internet Explorer.

Firefox en tant qu'outil d'aide à la création de pages - utilisé par les développeurs Web - était un phénomène mondial, mieux compris si vous regardez une présentation de 2008 des contributeurs de Mozilla Clauber et Mario intitulée Firefox - Developer's Best Friend.

Sur une diapositive clé, ils ont déclaré l'importance d'utiliser Firefox comme cadre de développement en raison de sa prise en charge standard du Web et de ses modules complémentaires de développement pour le débogage de JavaScript, etc.

Le reste appartient à l'histoire - bibliothèques JS et frameworks

Maintenant, suis-je fou de parler de ce qui va suivre ?

Certainement pas. Si vous êtes développeur Web, vous ressentez peut-être la chaleur et la complexité de ce que vous savez qui s'est passé. Terminons ici cette fête avec : Les navigateurs ont évolué, les pages ont évolué, les développeurs aussi. Et dire que tous les joueurs contribuent de manière égale dans un rythme rapide - trop rapide - au point que je préfère regarder le passé et célébrer.

Quelques notes sont importantes. La première est que je n'ai pas mentionné les aspects côté serveur. Il serait difficile d'intégrer cette réflexion à la structure, bien que je reconnaisse que les développeurs Web se sont ramifiés en front-end, back-end ou fullstack.

Une autre est que le moment indiqué comme "Firefox comme meilleur ami du développeur" est venu en phase avec la montée des bibliothèques livrées avec les pages Web. Un bon exemple est la bibliothèque jQuery . Par conséquent, l'époque "jQuery + Firefox en tant que meilleurs amis du développeur" était vraiment un phénomène où le code des pages commençait à devenir complexe et exigeait plus de rôle d'ingénierie - plus de bogues du côté client des pages.

Cette observation ouvrirait la porte à l'émergence de bibliothèques comme React et, entre autres sujets, le monde complexe tel qu'indiqué par The Great Gaslighting of the JavaScript Era.

L'image principale de cet article a été générée parle générateur d'images AI de HackerNoon via l'invite "premier navigateur Internet".