aguarde...

1 de novembro de 2019

ūüĒ• Svelte Crash Course (em 10 fotos!)

ūüĒ• Svelte Crash Course (em 10 fotos!)

Sempre quis dar uma olhada no Svelte (tamb√©m conhecido como “a pr√≥xima grande novidade no web dev”), mas nunca teve tempo para isso? ‚Źį

ūüĒ• Eu tenho um curso intensivo de 10 minutos para voc√™! ūüĎá

(Alerta de spoiler: Svelte √© t√£o intuitivo e f√°cil de usar que voc√™ pode sentir que j√° o conhece! ūü•≥)

1 – Como o Svelte funciona

  • Compilador: n√£o envia uma “biblioteca” Svelte para os usu√°rios, mas JS simples e otimizado em tempo de constru√ß√£o
  • Componentes: o aplicativo √© composto de elementos de interface do usu√°rio compos√≠veis
  • Reativo: a intera√ß√£o evento / usu√°rio desencadeia altera√ß√Ķes na cadeia de estado, atualizando automaticamente os componentes em todo o aplicativo
Svelte Crash Course (em 10 fotos!)

2 РA interface do usuário é uma árvore de componentes

Um componente define como seu aplicativo deve interpretar alguns valores abstratos de “estado”, para que possa transform√°-los em elementos DOM no navegador e, finalmente, pixels na tela.

Svelte Crash Course (em 10 fotos!)

3 – A anatomia de um componente esbelto

Cada .sveltearquivo cont√©m um √ļnico componente, composto por 3 partes:

  • <script> √© l√≥gica de componente em JS
  • <style> √© um estilo CSS, com escopo definido e aplicado apenas ao componente atual
  • Modelo avan√ßado, baseado em HTML, mas pode usar componentes personalizados e l√≥gica embutida (como JSX)
Svelte Crash Course (em 10 fotos!)

4 – O modelo esbelto

O modelo Svelte nos permite usar nossos pr√≥prios componentes personalizados, al√©m dos elementos HTML. A .svelteextens√£o do arquivo √© opcional se n√£o houver ambiguidade, mas a primeira letra de um componente personalizado DEVE estar em mai√ļsculas.

Podemos usar express√Ķes JS dentro de chaves { }.

Svelte Crash Course (em 10 fotos!)

5 – Configura√ß√£o de “adere√ßos”

Uma maneira comum de “controlar” como um componente filho se comporta √© passar dados para ele como acess√≥rios (propriedades).

Para aceitar um suporte, exponha uma vari√°vel com export. √Č importante usar letporque constn√£o √© reatribu√≠vel.

Definir um suporte é como fazer HTML comum.

Svelte Crash Course (em 10 fotos!)

6 – Atualizando estados componentes

As a√ß√Ķes do usu√°rio acionam eventos. on:nos permite ouvir eventos e acionar fun√ß√Ķes para atualizar estados. As altera√ß√Ķes de estado atualizar√£o automaticamente a interface do usu√°rio.

Os dados geralmente fluem de um pai para um filho, mas podemos bind:simplificar a l√≥gica de atualiza√ß√£o de estado, permitindo o fluxo de dados bidirecional.

Svelte Crash Course (em 10 fotos!)

7 – $:Declara√ß√Ķes Reativas

“Declara√ß√Ķes reativas” s√£o aquelas marcadas por $:.

Svelte analisa de quais vari√°veis ‚Äč‚Äčelas dependem. Quando qualquer uma dessas depend√™ncias mudar, as instru√ß√Ķes reativas correspondentes ser√£o executadas novamente. Muito √ļtil para declarar estados derivados ou acionar “efeitos colaterais”.

Svelte Crash Course (em 10 fotos!)

8 – Estado Reativo “Armazenamento”

Uma “loja” reativa facilita o compartilhamento de estados entre v√°rios componentes. Pode existir em um arquivo JS separado. Para criar uma loja, apenas envolva writableum valor.

Em um componente, prefixamos os nomes de lojas com a $para us√°-los ou atualiz√°-los diretamente. Magia do compilador!

Svelte Crash Course (em 10 fotos!)

9 РRenderização condicional e listas

Podemos renderizar condicionalmente elementos com o modelo do Svelte via {#if}e opcionalmente {:else}.

Para renderizar tudo em uma lista, n√≥s temos {#each}.

Lembre-se de fechar sempre um bloco com {/if}ou {/each}!

(Deveria ter usado <ol>no exemplo, mas eu queria mostrar como o acesso ao √≠ndice funciona.)

Svelte Crash Course (em 10 fotos!)

10 РAssíncrono elegante / Aguardar

√Č super f√°cil fazer coisas ass√≠ncronas, como solicita√ß√Ķes de API, com o Svelte.

Podemos simplesmente {#await}prometer resolver, exibindo um espa√ßo reservado para “carregamento” antes que o resultado esteja pronto.

Observe que aguardamos a promessa na se√ß√£o de modelos, portanto, nenhuma awaitpalavra-chave √© exibida <script>.

B√ĒNUS – Transi√ß√Ķes animadas

Svelte vem com transi√ß√Ķes animadas organizadas. Tente atribuir uma transition:flypropriedade a seus componentes ! Tamb√©m existem outros tipos, como fade, slide, etc. Voc√™ tamb√©m pode usar in: out:para definir separadamente intro / outros.

Anexados ao suporte de transi√ß√£o est√£o os par√Ęmetros.

ūüĎÜ Isso √© tudo, pessoal!

√Č isso a√≠ – tudo o que voc√™ precisa para come√ßar a usar o Svelte! ūüėĀ

Abordamos muito este curso intensivo, desde os conceitos mais fundamentais at√© os t√≥picos que podem at√© ser considerados intermedi√°rios ou avan√ßados em outras estruturas (por exemplo, solicita√ß√Ķes de API e transi√ß√Ķes animadas).

Agora √© sua vez de brincar com o Svelte e criar algo legal. O Svelte REPL √© um √≥timo lugar para come√ßar!

Diverta-se! ūü•≥

Posted in Blog
Write a comment