More Related Content Similar to Desarrollo Web Moderno con Svelte 2024.pdf (20) 4. Desarrollo web actual
● Abrir URL
● Cargar librería/framework
○ Cargar Virtual DOM
○ Interpretar JS
● Renderizar Página usando la
librería
10. Svelte / Estructura
Arquitectura basada en
Componentes
● Modular
● Encapsulada
● Reusable
<script>
let name = “World”;
</script>
<style>
h1 {
color: purple;
}
</style>
<h1>Hello {name}</h1>
12. Svelte / Templates
{#if time < 10}
<h1>Hello {name}</h1>
{:else}
<h1>Bye!</h1>
{/if}
<ul>
{#each users as user}
<li>{user.name}</li>
{/each}
</ul>
Sintaxis Declarativa!
13. Svelte / Eventos
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Count: {count}
</button>
Reactividad por
asignación
14. Svelte / Componentes
<script>
import BlogPost from ‘./BlogPost.svelte’
const postTitle = ‘Svelte Rocks’;
</script>
<BlogPost title={postTitle}/>
<script>
export let title = ‘default’;
</script>
<h1>{title}</h1>
App.svelte BlogPost.svelte
19. Quien lo usa
● Apple Music
● Decathlon Mobile App
● NY Times micro-frontends
● Avast Dashboard
● 1Password
● ODLabs
