Skip to content

Render Svelte as an MPA#824

Open
magopian wants to merge 6 commits into
mainfrom
svelte-mpa
Open

Render Svelte as an MPA#824
magopian wants to merge 6 commits into
mainfrom
svelte-mpa

Conversation

@magopian
Copy link
Copy Markdown
Collaborator

D'après ce que j'en comprends des explications de @OtterWays et @NicolasBuquet, la navigation idiomatique dans Android nécessite que la WebView appelle shouldOverrideUrlLoading à chaque navigation.

Or shouldOverrideUrlLoading n'est appelé par la WebView que lors d'une navigation "réelle" : un vrai chargement d'une URL.

Il est possible de se passer de "hash-based routing" dans les frameworks javascript modernes, mais ça ne résout pas le soucis de l'appel de shouldOverrideUrlLoading : dans tous les cas, les frameworks javascript modernes proposent par défaut une navigation par pushState, qui remplace une "navigation réelle" (par chargement de page depuis le serveur).

Contrairement à ce que je pensais initialement, passer par un "vrai serveur javascript" (plutôt que de servir les fichiers de manière statique) ne règle pas le soucis, vu que dans ce cas aussi il y a une navigation par pushState par défaut.

Cette navigation par pushState a plusieurs avantages :

  • pas de navigation "réelle" : tous les changements d'url (hash-based ou non), les clics sur les liens etc... sont interceptés, et vont charger de manière dynamique la page/les composants
  • cette navigation dynamique est plus fluide, paraît "native", évite les flashs de rendu et l'effet "reload"
  • on peut alors utiliser les outils fournis par le framework javascript pour la navigation (par exemple goto en svelte, les composants <Link> en React etc...)
  • il y a un state partagé entre les différentes pages/composants

C'est la manière moderne de faire des sites en javascript, qu'on appelle communément "SPA" pour Single Page Application, en opposition aux "MPA" (Multiple Page Applications) qui chargent chaque page depuis le serveur.

Par contre, vu que ce n'est pas une navigation réelle (que ce soit basé sur des URLs avec fragments "hash-based" comme par exemple /#/settings/, ou sur des URLs complètes comme par exemple /settings/), il n'y aura pas d'appel de shouldOverrideUrlLoading.

Il est possible de configurer Svelte pour qu'il fasse un prerender de chaque page et composant, et le forcer à faire un chargement complet de chaque page, en n'utilisant pas la navigation par pushState (en n'interceptant pas la navigation).
Dans ce cas il y a une navigation réelle, qui devrait appeler shouldOverrideUrlLoading.

Voici les inconvénients :

  • on perd l'impression de "native" : chargement de chaque page "à l'ancienne", cf vidéos ci-dessous
  • pas de partage de state : chaque page qui se charge reprend de 0 => perte de performance
  • impossibilité d'utiliser l'outil de navigation idiomatique de svelte : goto => nécessité d'utiliser un precommit qui vérifie ça, sinon ce sera la navigation par pushState qui sera utilisée => pas d'appel de shouldOverrideUrlLoading, et pas moyen de le découvrir avant de le réaliser en prod
  • plus grande complexité : tous les appels à window.* dans le code javascript (comme pour accéder au localStorage doivent être protégé par un if (browser), sinon il n'est pas possible de builder l'application.

Navigation à l'ancienne, MPA, navigation réelle :

MPA_Enregistrement.de.l.ecran.2026-04-21.a.15.37.54.mov

Navigation moderne, SPA, fluide/native :

SPA_Enregistrement.de.l.ecran.2026-04-21.a.15.36.24.mov

@magopian magopian marked this pull request as ready for review April 30, 2026 12:33
@magopian magopian requested review from cdesquilbet-dila and zebuline and removed request for cdesquilbet-dila April 30, 2026 12:33
@magopian
Copy link
Copy Markdown
Collaborator Author

J'ai passé la PR en revue, mais pour ma part, je suis contre un tel changement => aucune valeur ajoutée, grande complexité, perte de fonctionnalité.

Est-ce nécessaire de faire la revue ? Je ne le pense pas.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants