Librairie Front Preact ou Svelte ?

[Grafikart]

Je suis un peu partagé sur ce point et je voudrais recueillir certains avis sur le sujet. Pour la partie front vous l'avez vu au travers des différents live je compte utiliser le principe des Custom Element afin d'avoir des éléments réutilisable et compatible. La pluspart de ces Custom Element ont une logique assez simple qu'il est possible d'écrire en JavaScript pur. Cependant certains composants sont un peu plus complexes (je pense au composant commentaire, qui doit gérer l'affichage imbriqué des commentaires et gérer aussi le traitement du formulaire) et je ne pense pas qu'il soit judicieux de se passer de l'utilisation d'un framework pour ce besoin là.

Maintenant la question se pose sur le choix du framework sachant que :

• Le framework doit être léger en perf et en poid cas il ne sera utilisé que par petite touches.
• Le framework doit s'intégrer au code actuel avec un minimum d'effort en terme d'outils.
• Le framework doit disposer d'une documentation convenable.

Par rapport à ces critères j'ai 2 candidats potentiel (mais je suis ouvert aux propositions)

Svelte

Svelte a un poid léger et une approche assez simple avec des fonctions d'animations qui peuvent être utile pour certains besoins. Cependant la syntaxe est un peu étrange et son approche de la réactivité peut parfois amener à devoir écire des choses étranges pour qu'il capture bien les changements.

arr.push('lol') // Ne délenche rien
arr = arr // déclenche les changements

Aussi je trouve que le code peut rapidement être fouilli car il n'est pas forcément possible de morceler un composant sans créer des sous composants (donc un fichier séparé).

Preact

Preact est une version "light" de react et utilise la syntaxe JSX beaucoup plus familière. Cela donne parfois un code plus verbeux et le VDom ne facilité pas la création d'animations de base (il faut rapidement créer des composants en plus pour gérer ça). L'autre inconvénient est que le vdom rajoute une étape supplémentaire au niveau du navigateur ce qui peut avoir un impact négatif sur les performances (le traitement de l'arbre occupe de la mémoire et l'algo de diffing peut couter au CPU).
Mais l'avantage est qu'il permet de créer des fonctions pour certaines parties du code

function monIcon () {  return <svg ....> }

Je pense personnellement aussi que la syntaxe sera plus familière aux personnes qui souhaite intervenir sur le code. L'autre avantage est que l'on peut imaginer changer de framework plus facilement tant que le nouveau framework support le JSX.

Ma position

Pour le moment mon coeur balance. D'un point de vue utilisateur j'aurais tendance à partir sur Svelte, mais d'un point de vu dev j'aurais tendance à partir sur preact :(

[hanako-eo]

Salut Grafikart, je pense que tu devrais utiliser Preact sur ton projet car le vdom devrait pouvoir donner de meilleure performance, mais cela étant dit c'est vrai que pour les animations Preact ne se prêtent pas au jeu, donc je te dirai de créer ton propre React comme dans ta vidéo vu que tu veux faire ton site au propre ;)

[vincjo]

Je pense que Svelte est le plus adapté. Simple à prendre en main, performant, super tutos, code lisible, 0Kb.

<script>
	async function getComments() {
		const response = await fetch(`api`)
		return  await response.json()
	}
	const promise = getComments()
</script>

{#await promise}
	<div class="loader"></div>
{:then comments}
	{#each comments as comment}
		<svelte:self comments={comment.comments}/>
	{/each}
{/await}

AlpineJS est peut-être une piste aussi
https://bestofjs.org/projects/alpinejs

[hanako-eo]

@vincji OUI mais Preact et mieux avec la gestion des éléments HTML avec le vdom, c'est vrais que Svelte à énormément d'avantage moi même je l'utilise avec certains de mes projets, MAIS Svelte utilise trop le dom mais si en ressentis le site et fluide il y aura des perte pour l'utilisateur, et en plus si un jour svelte rajouter les fonctionnalités du siècle mais qu'il arrêt d'utiliser leur .svelte le site va devoir être refait de 0, alors que pour Preact ils peuvent ajouter la fonctionnalité du siècle le site sera bien plus facile à maintenir.