7:[["$","script","structured-data",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Comment coder avec Svelte, premier pas\",\"datePublished\":\"2021-06-15T00:00:00.000Z\"}"}}],null,[" ",""],["$","section",null,{"className":"mx-auto py-8 sm:py-16 lg:py-20","children":["$","article",null,{"children":[["$","header",null,{"className":"","children":[["$","p",null,{"className":"mx-auto max-w-5xl px-4 sm:px-6","children":[["$","time",null,{"dateTime":"2021-06-15T00:00:00.000Z","children":"June 15, 2021"}],"$undefined","$undefined"]}],["$","h1",null,{"className":"leading-tighter font-heading mx-auto mb-8 max-w-5xl px-4 text-4xl font-bold tracking-tighter sm:px-6 md:text-5xl","children":"Comment coder avec Svelte, premier pas"}],["$","div",null,{"className":"flex flex-row sm:px-6 prose-md container prose-stone mx-auto mt-8 max-w-5xl px-6 prose-headings:font-bold prose-headings:tracking-tighter prose-a:text-primary-600 prose-image:rounded-md prose-image:shadow-lg dark:prose-invert dark:prose-headings:text-slate-300 dark:prose-a:text-primary-400 ","children":["$","p",null,{"className":"flex-grow dark:text-slate-400 text-lg","children":"$undefined"}]}],["$","div",null,{"className":"mx-auto max-w-5xl px-4 sm:px-6","children":["$","div",null,{"className":"border-t dark:border-slate-700"}]}]]}],["$","div",null,{"className":"prose prose-lg prose-headings:font-heading prose-headings:leading-tighter container prose-stone mx-auto mt-8 max-w-5xl px-6 prose-headings:font-bold prose-headings:text-xl prose-headings:tracking-tighter prose-a:text-primary-600 prose-image:rounded-md prose-image:shadow-lg dark:prose-invert dark:prose-headings:text-slate-300 dark:prose-a:text-primary-400 ","children":["","",[["$","div",null,{"children":[["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$14"}}]]}],["$","div",null,{"children":[["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$15"}}]]}],["$","div",null,{"children":[["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$16"}}]]}],["$","div",null,{"children":[["$","div",null,{"dangerouslySetInnerHTML":{"__html":"

Evenements & Bindings

Autre particularité, pour gérer les clicks & co, on définit des event listeners sur les elements html avec des “on”: on:click, on:mousemove. On peut modifier ces events listeners avec par ex. |once ou |self (ne trigger qu'une seule fois, ne trigger que sur soi). On peut définir des event listeners pour connecter deux éléments, avec un émetteur et un récepteur. Ca me rappelle la joie de coder en ActionScript / Flash, au bon vieux temps des jeux sur Facebook !

On utilise le même genre de notation pour dire qu'un élément HTML (comme un input par exemple) va impacter une variable, ce qui nous permet de faire une liaison à double sens entre l'affichage et l'état :\n<input bind:value={name}>\n(Je crois que Vue a une notation un peu similaire)

\n"}}]]}],["$","div",null,{"children":[["$","div",null,{"dangerouslySetInnerHTML":{"__html":"

En conclusion

Pour être complet il y aurait évidemment tout un tas d'autre choses à mentionner comme les stores (au sens anglais, pas français !) ou les transitions ou le context (qui pour le coup ressemble un peu à celui de React).\nPour moi il y a deux questions qui se posent. Est-ce que j'ai envie de continuer à apprendre ce framework ? Et est-ce que j'ai envie de m'en servir sur le plus long terme.\nEt pour moi, c'est l'originalité de Svelte, avec l'impact de la phase de compilation, qui me donne envie de l'apprendre, de comprendre comment il marche.\nJe ne sais par contre pas comment mes équipes, si je leur mettais du Svelte entre les mains, réagiraient.

\n"}}]]}]]]}]]}]}],false,["$","section",null,{"id":"latestPosts","className":"bg-primary-50 dark:bg-slate-800 full-width py-20","children":["$","div",null,{"className":"mx-auto max-w-5xl px-4 sm:px-6 py-16 lg:py-24","children":[["$","div",null,{"className":"flex flex-col lg:justify-between lg:flex-row mb-8","children":[["$","div",null,{"className":"md:max-w-sm","children":[["$","h2",null,{"className":"text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2","children":"Derniers articles"}],["$","$L13",null,{"className":"text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0","href":"/fr/blog/","children":"Voir tous"}]]}],""]}],["$","div",null,{"className":"grid gap-6 row-gap-5 md:grid-cols-2 xl:grid-cols-4 -mb-6","children":[["$","article",null,{"className":"mb-6 transition","children":["$","$L13",null,{"href":"/fr/blog/angular-vs-vuejs-vs-react-vs-svelte-les-statistiques","className":"hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200 relative bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6","children":[["$","$L17",null,{"ratio":1.7777777777777777,"children":["$","$L18",null,{"src":"https://cdn.kodaps.dev/images/blog/8a5d8814-5f08-4172-8164-5bc8b9e81544.jpg","className":"md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 hover:scale-110 transition duration-500 cursor-pointer","width":400,"height":224,"sizes":"(max-width: 900px) 400px, 900px","alt":"React, Svelte, Vue, Angular, Solid : que disent les chiffres en 2023 ?","loading":"lazy","decoding":"async"}]}],["$","h3",null,{"className":"mb-2 text-lg font-bold leading-tight sm:text-xl font-heading","children":"React, Svelte, Vue, Angular, Solid : que disent les chiffres en 2023 ?"}],["$","p",null,{"className":"text-muted dark:text-slate-400 text-lg","children":"$undefined"}]]}]}],["$","article",null,{"className":"mb-6 transition","children":["$","$L13",null,{"href":"/fr/blog/svelte-premiers-pas","className":"hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200 relative bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6","children":[["$","$L17",null,{"ratio":1.7777777777777777,"children":["$","$L18",null,{"src":"https://cdn.kodaps.dev/images/blog/29e0b6c9-46c8-4604-9823-aba3e4eacad3.jpg","className":"md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 hover:scale-110 transition duration-500 cursor-pointer","width":400,"height":224,"sizes":"(max-width: 900px) 400px, 900px","alt":"Premier pas avec Svelte","loading":"lazy","decoding":"async"}]}],["$","h3",null,{"className":"mb-2 text-lg font-bold leading-tight sm:text-xl font-heading","children":"Premier pas avec Svelte"}],["$","p",null,{"className":"text-muted dark:text-slate-400 text-lg","children":"$undefined"}]]}]}],["$","article",null,{"className":"mb-6 transition","children":["$","$L13",null,{"href":"/fr/blog/runes-probleme-magique-de-svelte","className":"hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200 relative bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6","children":[["$","$L17",null,{"ratio":1.7777777777777777,"children":["$","$L18",null,{"src":"https://cdn.kodaps.dev/images/blog/01c06cfb-f1d0-4cef-8932-38db12883e21.jpg","className":"md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 hover:scale-110 transition duration-500 cursor-pointer","width":400,"height":224,"sizes":"(max-width: 900px) 400px, 900px","alt":"Runes: La Réponse Au Problème magique de Svelte","loading":"lazy","decoding":"async"}]}],["$","h3",null,{"className":"mb-2 text-lg font-bold leading-tight sm:text-xl font-heading","children":"Runes: La Réponse Au Problème magique de Svelte"}],["$","p",null,{"className":"text-muted dark:text-slate-400 text-lg","children":"$undefined"}]]}]}],["$","article",null,{"className":"mb-6 transition","children":["$","$L13",null,{"href":"/fr/blog/qwik-le-futur-des-frameworks-javascript","className":"hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200 relative bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6","children":[["$","$L17",null,{"ratio":1.7777777777777777,"children":["$","$L18",null,{"src":"https://cdn.kodaps.dev/images/blog/03e79547-b337-4a79-8ef5-6e2ef76fa442.jpg","className":"md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 hover:scale-110 transition duration-500 cursor-pointer","width":400,"height":224,"sizes":"(max-width: 900px) 400px, 900px","alt":"Qwik : l'avenir des frameworks ?","loading":"lazy","decoding":"async"}]}],["$","h3",null,{"className":"mb-2 text-lg font-bold leading-tight sm:text-xl font-heading","children":"Qwik : l'avenir des frameworks ?"}],["$","p",null,{"className":"text-muted dark:text-slate-400 text-lg","children":"$undefined"}]]}]}]]}]]}]}]]

Les composants