Transcript
00:00:00Primeiro tivemos o JSX, depois o TSX, mas estamos presos a eles há anos.
00:00:04Não dá para melhorar? Bem, talvez com o TSRX.
00:00:08É meio parecido, mas é diferente.
00:00:10Não temos uma função, temos um componente, temos strings para o nosso texto,
00:00:14há uma estrutura "if" normal aqui e também não há nenhuma instrução "return".
00:00:17Então o que é isso, por que existe e você deveria usar? Vamos descobrir.
00:00:21[Música]
00:00:26Agora, talvez alguns de vocês já tenham visto um código assim antes,
00:00:29e isso é porque ele foi trazido pelo criador do Ripple.
00:00:31Este é um novo framework front-end que o Rich cobriu neste canal há seis meses,
00:00:35então se inscreva para ficar por dentro dessas novidades.
00:00:38O que eles fizeram foi extrair a sintaxe usada no Ripple
00:00:41e a fizeram funcionar com React, Preact, Solid, Vue e Ripple, é claro,
00:00:45e muita gente ficou bem empolgada com isso.
00:00:47O TSRX se descreve como uma forma de escrever componentes de UI que continuam legíveis e colocalizados,
00:00:52onde estrutura, estilo e fluxo de controle vivem juntos,
00:00:55e o resultado permanece totalmente retrocompatível com o TypeScript.
00:00:58Mas, a menos que você já tenha usado o Ripple, provavelmente ainda está um pouco confuso com o que isso significa,
00:01:01então vamos analisar os seus recursos.
00:01:03Para começar, você o utiliza com arquivos .tsrx, o que significa que precisamos de uma etapa de compilação,
00:01:07mas isso é super fácil de configurar com um plugin do Vite,
00:01:10e também há outras opções para outros frameworks e runtimes.
00:01:13Quanto aos componentes em si, em vez de escrever "function" aqui, escrevemos "component",
00:01:17e isso é basicamente apenas uma palavra-chave para o próprio compilador,
00:01:20mas também deixa claro que isso vai conter alguma lógica de renderização.
00:01:24Eu consideraria isso uma pequena melhoria na qualidade de vida.
00:01:27Uma coisa a se notar, porém, é que não temos nenhuma instrução "return" aqui,
00:01:30e isso ocorre porque o TSRX usa JSX baseado em declarações,
00:01:33então você não precisa retornar uma árvore de componentes,
00:01:35você apenas escreve a sua marcação onde deseja que ela seja renderizada.
00:01:37Isso significa que podemos simplesmente colocar outra tag de parágrafo acima deste card no topo do componente,
00:01:42e ela será renderizada exatamente onde foi escrita.
00:01:44Você ainda pode usar um "return" em um componente, mas ele deve ser vazio,
00:01:47e é usado apenas para retornos antecipados, ignorando a UI e a lógica seguintes.
00:01:51Tem me ajudado a pensar nos componentes TSRX como algo bem linear,
00:01:54onde a ordem em que escrevemos o código é a ordem de renderização,
00:01:57lendo simplesmente de cima para baixo,
00:01:59mas também vejo que isso pode tornar mais difícil identificar rapidamente o que um componente está renderizando,
00:02:03enquanto em algo como o React, nós pularíamos direto para o "return".
00:02:06Outro benefício do JSX baseado em declarações é que podemos usar muito mais o JavaScript normal.
00:02:10Por exemplo, a renderização condicional é super simples.
00:02:13É apenas uma instrução "if", com "else if" e "else" se você precisar deles.
00:02:17Nas condições, nós simplesmente colocamos o nosso JSX como uma declaração.
00:02:20Essa mesma estrutura no React costuma se transformar em ternários aninhados,
00:02:23porque no JSX, cada ramificação precisa ser uma expressão,
00:02:26então acho que a versão do TSRX às vezes pode ser mais fácil de ler,
00:02:29especialmente quando temos uma instrução mais complexa,
00:02:31mas, da mesma forma, também vejo que isso pode adicionar mais verbosidade,
00:02:35principalmente quando você precisa apenas de uma condição simples.
00:02:37É a mesma história para as instruções "switch" também.
00:02:39Você pode usar um "switch" normal do JavaScript com os seus casos
00:02:41e o JSX que você deseja renderizar para cada um.
00:02:44Isso é um pouco mais simples do que a forma como você lidaria com isso no React,
00:02:47onde você precisaria de uma função para usar o mesmo padrão,
00:02:49então o TSRX é um pouco mais limpo aqui,
00:02:51mas uma área que eu pessoalmente gosto menos no TSRX é na renderização de listas.
00:02:55Aqui nós abandonamos o ".map" e, em vez disso, usamos um loop "for...of",
00:02:58e o TSRX na verdade estendeu esse loop para que possamos obter o índice
00:03:01bem como uma identidade estável com a "key".
00:03:03Então, quando você quiser pular um item, pode simplesmente usar "continue",
00:03:06o que, novamente, é um pouco mais próximo do fluxo do JavaScript puro,
00:03:08mas, como eu disse, no meu caso, já me acostumei muito a usar ".map", ".filter" e assim por diante,
00:03:12então provavelmente vou continuar com isso,
00:03:14e também vale notar que você não pode usar nenhum outro tipo de loop
00:03:17como "for", "for...in", "while" e "do...while".
00:03:19Isso só funciona com o loop "for...of".
00:03:21Agora, continuando a tendência de usar JavaScript normal,
00:03:23a forma como fazemos limites de erro no TSRX é com um bloco "try-catch" simples.
00:03:27Nada de mirabolante e bem autoexplicativo.
00:03:30Também podemos usar o mesmo bloco "try-catch" se precisarmos de limites assíncronos,
00:03:33só precisamos adicionar um bloco "pending"
00:03:35e escrever o seu componente de carregamento ali dentro.
00:03:38O compilador na verdade cuida de pegar esse código
00:03:40e resolvê-lo para o framework que você estiver usando,
00:03:42então no React, Preact e Solid, isso na verdade usa "lazy",
00:03:45e no Ripple, usa o equivalente do Ripple.
00:03:47Falando de React especificamente, porém,
00:03:48os recursos que analisamos até agora
00:03:50parecem nos permitir quebrar uma das principais regras do React,
00:03:53a regra dos hooks.
00:03:54Agora podemos colocá-los após condições, retornos antecipados,
00:03:57e até mesmo dentro de loops.
00:03:58Todos eles funcionarão normalmente.
00:04:00Isso nos permite organizar melhor o nosso código onde ele é realmente necessário,
00:04:03e a saída final nem sequer quebra as regras.
00:04:06O compilador apenas eleva silenciosamente cada hook para o topo da função gerada,
00:04:09para que o React ainda os veja em uma ordem estável,
00:04:11mas você pode escrevê-los onde eles realmente pertencem.
00:04:14Para mim, como alguém que usa React há anos,
00:04:16esse é um dos pontos em que tenho dificuldade para me acostumar,
00:04:18e também é um recurso onde estamos fazendo o compilador
00:04:20fazer muito mais mágica nos bastidores,
00:04:22especificamente em torno de um framework,
00:04:24e acho que se eu estivesse depurando isso,
00:04:26poderia ficar um pouco perdido sobre onde está cada parte do código.
00:04:28A seguir, porém, temos o escopo léxico,
00:04:30onde cada elemento aninhado cria o seu próprio escopo,
00:04:32então podemos declarar uma constante "label" em três blocos "div" diferentes aqui,
00:04:36e elas não entram em conflito.
00:04:37Há até uma no topo da função aqui que nada está lendo,
00:04:40e, novamente, ela não gera conflitos.
00:04:41A mesma coisa vale para cada instrução "if", "for", "switch" ou "try".
00:04:44Cada uma tem os seus próprios escopos,
00:04:46então as variáveis que declaramos, as funções que executamos
00:04:48e os valores que derivamos não vazam para os outros escopos.
00:04:51Este é mais um daqueles recursos focados em colocalizar o nosso código,
00:04:54e, novamente, faz com que os nossos componentes sejam lidos de forma linear, de cima para baixo.
00:04:57Mudando um pouco de assunto do JavaScript, vamos falar sobre estilização.
00:05:00No TSRX, nós temos estilos escopados,
00:05:02então você pode simplesmente colocar um bloco "style" no seu componente,
00:05:04e o CSS que escrevemos ali fica restrito apenas àquele componente,
00:05:08com um hash exclusivo sendo anexado ao nome da classe quando compilado.
00:05:11Então este componente "card" tem uma classe "card",
00:05:13e repare que este outro aqui também está tentando usar essa classe "card",
00:05:16mas não recebe nenhuma das estilizações do card,
00:05:17porque ele não tem um bloco "style" próprio.
00:05:19Ele não herda o estilo do componente pai,
00:05:21porque não possui aquele hash exclusivo.
00:05:22Se você quiser compartilhar estilos entre componentes, porém,
00:05:24o TSRX tem uma palavra-chave "style",
00:05:26onde o componente pai passa o nome do estilo com essa palavra-chave
00:05:29para um componente que aceita "className" como prop,
00:05:31e isso garante que aquele hash exclusivo gerado vá junto com ele.
00:05:35Então repare que agora ele tem o mesmo estilo do pai.
00:05:37Você também pode, tecnicamente, usar um seletor global nos seus estilos
00:05:40para escapar do escopo e aplicar esses estilos globalmente,
00:05:42mas acho que isso vai ficar um pouco bagunçado
00:05:44and você vai perder o controle de onde vêm os seus estilos.
00:05:46Pessoalmente, sou fã do Tailwind do início ao fim,
00:05:48então provavelmente não usarei muito esse recurso
00:05:50e vou continuar com o Tailwind,
00:05:51mas ainda assim é bem legal.
00:05:53A seguir, um recurso para quem esteve prestando atenção.
00:05:56Nos blocos de código que mostrei,
00:05:57houve uma pequena diferença na forma como o texto é tratado nessas instruções.
00:06:01O texto puro dentro de um elemento precisa estar entre aspas duplas.
00:06:04Não podemos simplesmente escrevê-lo diretamente como fazemos no JSX.
00:06:07Você ainda pode usar valores dinâmicos,
00:06:08e em uma linha como esta,
00:06:10que está entre duas strings com aspas duplas,
00:06:12o TSRX simplesmente vai concatenar isso em uma única string ao compilar.
00:06:16Outra opção que você tem é simplesmente usar uma template literal.
00:06:19Dá o mesmo resultado.
00:06:20Para mim, esse tem sido um dos pequenos incômodos ao usar o TSRX
00:06:23porque tenho muita memória muscular de não usar aspas para textos.
00:06:26Outro recurso baseado em texto, porém,
00:06:27é que o TSRX pode lidar com strings que contêm marcações HTML reais,
00:06:31e você tem duas maneiras de renderizar isso.
00:06:33A primeira é simplesmente usando a palavra-chave "text",
00:06:35que vai renderizar o texto escapado,
00:06:38para que você possa ver a string HTML literal,
00:06:40e também fica seguro contra cross-site scripting (XSS).
00:06:42Isso é útil quando você quer garantir que algo será uma string,
00:06:45e a origem dessa string é um pouco ambígua,
00:06:48então você não sabe necessariamente o tipo dela ao escrever o código.
00:06:51A segunda opção é para se você quiser renderizar a string como HTML,
00:06:54podemos simplesmente usar a palavra-chave "html",
00:06:56e isso a interpreta como HTML real,
00:06:58mas esse recurso só funciona no Ripple, com o Vue suportando um subconjunto mais limitado dele.
00:07:02Outro recurso não relacionado ao React,
00:07:03mas que pode ser interessante para quem usa Ripple,
00:07:06Vue ou Solid é a desestruturação preguiçosa (lazy destructuring).
00:07:08Se você desestruturar as suas props normalmente nesses frameworks,
00:07:10você captura uma cópia instantânea de cada valor no momento da chamada,
00:07:12e isso quebra a reatividade baseada em acesso.
00:07:14No TSRX, você pode simplesmente adicionar um e comercial (&) antes das props,
00:07:18e embora pareça uma desestruturação comum,
00:07:20cada associação é compilada de volta para uma busca de propriedade onde for usada.
00:07:23Assim, o runtime vê cada acesso individualmente,
00:07:25as atualizações de sinais ainda acionam novas renderizações,
00:07:28o que significa que você mantém a ergonomia da desestruturação,
00:07:30e o framework mantém a sua reatividade.
00:07:32O último recurso que vou mostrar é uma melhoria simples e prática na qualidade de vida.
00:07:35Você já teve uma prop onde o valor passado para ela tinha o mesmo nome da prop,
00:07:40geralmente em algo como uma função "onChange"?
00:07:42Pois bem, com o TSRX você pode escrever isso de forma abreviada,
00:07:45semelhante ao que fazemos com objetos JavaScript.
00:07:47É limpo e simples.
00:07:49No geral, o TSRX parece tentar trazer o fluxo normal do JavaScript de volta para o JSX
00:07:53e também adicionar algumas melhorias de qualidade de vida,
00:07:55e eu gosto de muitos dos seus elementos.
00:07:57Sinceramente, acho que o principal problema dele é ser muito de nicho e ter chegado tarde demais,
00:08:01agora que temos a IA escrevendo a maior parte do nosso código,
00:08:03e o código que a IA é boa em escrever parece ser JSX e React.
00:08:07Dito isso, eu testei alguns exemplos no Claude usando TSRX,
00:08:10e ele conseguiu escrever bem, baseando-se apenas no LLM.txt do site,
00:08:14mas acho que ainda vou continuar usando o React normal.
00:08:17O outro ponto negativo é que parece, especialmente para o React,
00:08:19que isso está adicionando ainda mais mágica de compilação por cima,
00:08:21e também está quebrando fluxos que passei anos aprendendo,
00:08:24então pessoalmente não é para mim, mas isso não significa que seja ruim.
00:08:27Acho que as pessoas que vêm do Svelte podem gostar bastante disso,
00:08:30e se você já usou o Ripple, provavelmente já adora isso.
00:08:33Então me conte nos comentários aqui embaixo se você gosta,
00:08:35aproveite para se inscrever e, como sempre, nos vemos no próximo vídeo.
00:08:40[Música]
Community Posts
No posts yet. Be the first to write about this video!
Write about this video