Les applications Web ne font que s’améliorer

Slack est une application web. Trello est une application web. Google Docs. Gmail. Même Twitter.

Le Web a commencé comme une collection de documents hyperliés. Le battage médiatique «Web 2.0» au milieu des années 2000 portait sur la façon dont le Web devenait interactif. Au début, nous ne faisions que commenter et incriminer des documents hypertexte, mais avant longtemps, des gens comme moi pouvaient faire presque tout leur travail dans ce qu’on appelle maintenant les «applications web». Certaines de ces applications ajoutaient de la collaboration ou d’autres tâches d’applications de bureau traditionnelles, comme la création d’e-mails ou de documents. D’autres sont plus hyperliés – document dans la nature – pense à Slack et Twitter, ou à la nature multi-utilisateurs de Trello.

Mais il y a une règle proche de l’or sur les applications web: l’application native est probablement meilleure.

Les applications natives – des applications conçues spécifiquement pour une plate-forme comme iOS, Android ou Windows – ont un tas d’avantages inhérents par rapport aux applications Web. Peu importe la quantité de JavaScript que vous appliquez sur un document HTML, il est difficile de faire correspondre les performances, la qualité et la persistance d’une application native. Les applications Web peuvent être plus rapides à créer, plus simples à distribuer et plus faciles à parcourir, mais cela ne constitue pas un avantage suffisant pour vaincre les applications natives dans une grande variété de cas.

Mais la plate-forme Web continue d’évoluer, et il existe quelques technologies Web à venir qui pourraient donner aux applications Web une meilleure chance de rivaliser avec leurs homologues natifs.

Parlons de quelques-uns d’entre eux.

Progressive Web Apps

Microsoft a fait sensation en février avec son soutien à Progressive Web Apps sur Windows. Mais saviez-vous que iOS a tranquillement ajouté le support des PWA à Safari dans la mise à jour 11.3? Cela signifie que vous pouvez désormais créer une application Web progressive et l’envoyer à Android, iOS, Chrome OS et Windows.

Alors, qu’est-ce qu’une application Web progressive?

Eh bien, pour les débutants, c’est juste un site web avec un fichier « manifeste » spécial qui définit le nom de l’application, l’icône de l’écran d’accueil et si l’application doit afficher l’interface utilisateur du navigateur ou simplement prendre le plein écran . Les utilisateurs peuvent ajouter n’importe quel site Web avec un fichier manifeste à leur écran d’accueil ou leur menu Démarrer et le lancer comme une application mobile ou de bureau ordinaire.

Mais au lieu de simplement charger un site Web à partir d’Internet, une application Web progressive est généralement mise en cache sur votre appareil afin qu’il dispose d’une sorte de fonctionnalité hors ligne. Cela peut aller de l’enregistrement du JavaScript et du CSS, pour que le site se charge plus rapidement, jusqu’à enregistrer tout ce que l’utilisateur fait localement comme une application traditionnelle.

Progressive Web Apps, surtout, peut également prendre en charge les notifications push et d’autres travaux en arrière-plan grâce à une nouvelle technologie Web appelée « service workers ». Les techniciens peuvent aider à mettre en cache le nouveau contenu et synchroniser les modifications locales vers un serveur distant. à jour comme un site web typique, tout en restant aussi réactif qu’une application native.

À l’heure actuelle, le meilleur exemple d’application Web progressive est le client Twitter Lite. C’est rapide, minimal, et a même une bascule afin que vous puissiez minimiser l’utilisation des données. Certains magasins et publications en ligne ont également profité des performances fulgurantes des PVA. En fait, j’ai joué un minimum de 2048 clones PWA sur mon iPhone pour la dernière semaine. Il fonctionne hors ligne et se souvient de mon score élevé entre les sessions. Parfois, il sauve même l’état du jeu afin que je puisse reprendre une longue course, mais ce n’est pas parfait.

Le support d’Apple pour les standards Progressive Web App est dispersé et loin d’être complet. En fait, Apple semble avoir une vision différente de celle de Google pour ce dont un PWA devrait vraiment être capable. Nous verrons comment cette vision évolue au fur et à mesure que les PVA deviennent plus omniprésentes et puissantes sur les plateformes des concurrents d’Apple.

WebAssembly

Comment les applications Web peuvent-elles devenir plus puissantes? Le genre de travail que vous pouvez faire sur une page Web a considérablement évolué au cours de la dernière décennie. À mesure que nos ordinateurs deviennent plus rapides et que les navigateurs optimisent les performances JavaScript, nous sommes passés de la lecture de courriers électroniques à l’écriture de documents texte en passant par la conception graphique et la création de musique.

Mais les applications natives ont l’avantage de compiler du code proche du métal. Si vous écrivez votre application en Java pour Android ou Swift pour iOS, vous pouvez facilement surpasser la quasi-totalité des applications JavaScript en termes de performances. Si vous écrivez des parties de votre application en utilisant C ou C ++, comme beaucoup de développeurs de jeux, par exemple, vous pouvez souvent aller encore plus vite.

La vitesse du code sous-jacent d’une application ne définit pas seulement la réactivité d’une application, mais les limites de ce qu’elle peut faire. L’édition vidéo, les graphiques animés, la modélisation 3D, les jeux, l’apprentissage automatique, la création musicale et même les filtres Snapchat utilisent tous énormément de puissance processeur et souvent de GPU. JavaScript ne peut tout simplement pas rivaliser dans le haut de gamme.

C’est là que WebAssembly intervient. C’est un format binaire pour le web. Bien, contrairement à JavaScript, qui est traduit « Just In Time » en code machine que votre CPU peut comprendre, le code WebAssembly est pré-compilé avant d’être envoyé sur Internet, puis entièrement compilé par votre navigateur web quand il est téléchargé . Cela signifie que le navigateur a moins de travail à analyser et qu’il peut fonctionner à des vitesses quasi-natives avec des performances constantes. WebAssembly est conçu pour interopérer avec JavaScript, de sorte qu’une application web typique peut avoir la majorité de sa logique écrite en JavaScript, puis les parties sensibles à la vitesse comme les algorithmes de traitement d’image ou, par exemple, un jeu vidéo complet.

Ce qui est bien dans WebAssembly, c’est que vous n’avez pas besoin d’apprendre un tout nouveau langage de programmation pour l’utiliser. Le code haute performance déjà écrit en C et C ++ peut être compilé en WebAssembly. Par exemple, Unity et Unreal Engine ont été portés sur WebAssembly. Cela signifie que vous pouvez jouer à des jeux dans la fenêtre de votre navigateur sans vous soucier de l’installation d’un plug-in spécial.

Contrairement à de nombreuses propositions de technologie Web qui restent bloquées pendant des années dans les comités de normalisation, ou qui ne bénéficient que d’un soutien irrégulier de divers navigateurs, WebAssembly a été adopté par Google, Mozilla, Apple et Microsoft. vous ne comptez pas Internet Explorer.

Associer WebAssembly à Progressive Web Apps transforme un ancien site Web ennuyeux en un concurrent potentiel pour une place sur votre écran d’accueil à côté de «vraies» applications construites avec des technologies natives, sans sacrifier les avantages d’être un site Web ennuyeux.

Houdini

Pour être honnête, je n’entends pas souvent les gens dire «Oui, mais les applications natives ont l’air meilleures que les sites Web», mais cela ressemble à quelque chose que quelqu’un dirait si j’allais au bon type de fête.

Je veux dire, bien sûr, vous pouvez télécharger un PWA qui persiste hors ligne, vous donne des notifications push quand elles sont justifiées, et fonctionne aussi bien qu’une application native grâce à WebAssembly. Mais ne va-t-il pas toujours ressembler et se sentir comme un site web?

Oui, il sera. Peu importe le travail que vous faites pour imiter l’esthétique et les animations d’iOS ou d’Android, vos mains sont liées par les limitations de base du HTML et du CSS.

Donc, en parlant de propositions de technologie web qui languissent depuis des années coincées dans les comités de normalisation … permettez-moi de vous présenter Houdini.

Houdini fait référence à un ensemble de nouvelles fonctionnalités qui permettent aux développeurs de parler plus directement au moteur de rendu CSS d’un navigateur. Au lieu de simplement définir un ensemble de règles de style et de laisser le navigateur gérer, un concepteur travaillant avec Houdini pourrait créer des mises en page, des styles et des animations incroyablement personnalisés.

Pour vous aider à comprendre pourquoi cela pourrait être une chose puissante, utilisez le framework de développement d’applications Flutter de Google comme exemple. Flutter peut simuler l’aspect et la convivialité d’une application iOS ou Android native, avec une précision supposée parfaite pour les pixels, jusqu’aux vitesses de défilement correctes. Flutter n’est pas pour faire un site Web, cependant, c’est pour faire des applications iOS, Android et Fuchsia.

Mais sous le capot, Fuchsia fait tout cela mise en page, style et animation pixel-parfait avec la bibliothèque graphique Skia, qui est le même moteur qui alimente le rendu du navigateur Chrome. Lorsque vous créez un site Web, vous définissez le contenu en HTML et le style en CSS, mais c’est un moteur de rendu comme Skia qui peint les pixels réels. Vous avez dit, « faites-moi une boîte rouge », mais Skia est en charge de exactement comment.

Houdini est conçu pour vous donner accès au moteur de rendu du navigateur. Mais au lieu d’écrire du code personnalisé pour Skia et de l’envoyer en tant qu’application native avec Flutter, vous pouvez écrire CSS et JavaScript, et parler au moteur de rendu de chaque navigateur.

C’est une grande responsabilité, mais cette responsabilité vous donne beaucoup de pouvoir. Heureusement, le code Houdini coexistera parfaitement avec la mise en page et le style CSS traditionnels. C’est juste une option supplémentaire quand vous avez besoin de quelque chose à regarder et à sentir d’une manière très spécifique.

Il est difficile de dire si les propositions de Houdini avanceront assez profondément dans les internes du navigateur pour imiter tout ce que Flutter fait avec Skia. Mais il est intéressant que les fournisseurs de navigateurs veuillent progresser dans cette direction.

Malheureusement, en ce moment, la plupart des spécifications Houdini sont encore dans les airs, et Chrome est le seul navigateur avec lequel vous pouvez tester beaucoup de ces idées. Mais si les applications web ont l’air d’être « natives », Houdini pourrait être le chemin qu’ils prennent pour y arriver.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *