Fiz meu blog com Svelte

Eu escrevo conteúdo para a internet a alguns anos, desde 2012 (segundo o post mais antigo que eu encontrei):

Nem sempre postei sobre os mesmos assuntos, mas sempre sobre tecnologia, e desde que comecei nunca tive tempo para criar um blog meu do zero, sempre criei blogger, ferramentas web, wordpress e outros, talvez se tivesse feito isso eu seria famoso hoje (mentira).

Finalmente fiz e esse aqui é o resultado, porém tem um pequeno detalhe, eu optei por um framework que nunca tinha usado, o Svelte ao invés do meu velho e batido Reactjs.
O principal motivo para isso foi bem simples: eu queria aprender algo novo, porém no meio do caminho a curiosidade virou uma forma de prazer, eu me senti super confortável escrevendo componentes, utilizando props e as variáveis de estado da forma que o Svelte disponibiliza.

O código completo do projeto você pode acessar no repositorio clicando aqui, é totalmente open source e super personalizável, fique a vontade para usar também.
Para gerenciar o conteúdo eu utilizei o Strapi (nada de mais por aqui), e o deploy foi na Digital Ocean.

Aqui vou contar algumas diferenças que achei super legais entre React X Svelte:

Componentes

Os componentes no Svelte são um pouco diferentes de como estamos acostumados no React, mas é um diferente muito bom.
No React estamos acostumados com algo como:

export default function Button(){
  return <button>Clique aqui</button>
}

No Svelte temos o mesmo resultado fazendo:

<script>
</script>

<button>Clique aqui</button>

O Svelte aposta principalmente na ideia de que você não precisa aprender uma nova sintaxe de linguagem para criar componentes frontend, então temos a tag script envolvendo tudo que for javascript e fora dela o HTML5 quase padrão, com uma pequena particularidade, uma forma de "parse" muito similar ao utilizado em templates engine(na parte das props temos um exemplo), também é possível utilizar a tag style para utilizar CSS nesse componente.
Outro detalhe é que não precisamos exportar nada de forma explícita, isso já é feito por padrão pelo Svelte.

Props

As props foram uma coisa que eu achei super legal aqui no Svelte, enquanto no React precisamos declarar um objeto com as keys que desejamos receber, no Svelte declaramos variáveis com o prefixo export:

React:

function Button({title}){
  return <button>{title}</button>
}

Svelte:

<script>
    export let title
</script>

<button>{title}</button>

O Svelte utiliza a palavra export para indicar que essa variável fique acessível para outros componentes utilizá-la.

Estado e reatividade

O estado e reatividade no Svelte é algo muito simples e intuitivo, vamos a um comparativo novamente:

import {useState} from "React"

function Counter(){
const [counter, setCounter] = useState(1)

return (
    <div>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter +1)}>+</button>
    </div>
    )
}

Agora o mesmo componente no Svelte:

<script>
 export let counter = 1
</script>

<p>{counter}</p>
<button on:click={() => counter ++}>+</button>

É exatamente isso, no Svelte as re-assimilações são totalmente reativas por padrão, então basta atualizar o valor da variável e será disparado um re-render!

Também podemos tornar outros estados reativos, mesmo não estando dentro do escopo do componente, exemplo:

<script>
 export let title;

	// Atualizar o titulo do site toda vez que a prop "title" mudar
 $: document.title = title;

 $: {
  console.log(`Uma forma similar ao useEffect do react`);
  console.log(`Titulo atual ${title}`);
 }
</script>

Props e eventos

Para passarmos eventos no Svelte funciona um pouco diferente também, no React podemos passar "funções" e chamá-las dentro do componente, no Svelte usamos eventos para isso:

function Button({onClick}) {
 return <button onClick={onClick}>Clique</button>
}

// Utilizando

function onClick(){}

<Button onClick={onClick} />

Svelte:

<script>
 import { createEventDispatcher } from 'svelte';

 const dispatch = createEventDispatcher();
    
 const onClick = () => dispatch('onClick')
</script>

<button on:click={onClick}>Clique</button>

// Utilizando

function onClick(){}

<Button onClick={onClick} />

Vou dividir esse post em duas partes, essa foi a primeira, comentem caso queira a continuidade com mais comparativos e relatos de como foi essa experiência!