Jetpack Compose for Web é uma nova estrutura de UI para desenvolvimento web

A JetBrains está trazendo o Jetpack Compose, a estrutura de design declarativo do Google para Android, para a web. Está disponível como uma prévia hoje.

Nos últimos anos, houve um grande impulso para o desenvolvimento de programas multiplataforma. Frameworks como React e Flutter foram criados para permitir que os desenvolvedores compartilhem uma única base de código no Android, iOS, desktop e até mesmo na web. Até a JetBrains, empresa por trás de alguns dos IDEs mais populares e da linguagem de programação Kotlin, tem trabalhado no desenvolvimento multiplataforma. Primeiro com Kotlin Multiplatform, mas mais recentemente com Jetpack Compose.

Há algum tempo, a JetBrains portou o Jetpack Compose, a estrutura de design declarativo do Google para Android, para a área de trabalho. Isso permitiu o desenvolvimento de desktop multiplataforma baseado na JVM do Java. Usando o Jetpack Compose, você pode criar um aplicativo para Android, macOS, Windows e até Linux, tudo a partir de uma base de código. Mas, além do iOS, falta uma grande plataforma no Compose: a web.

Isso está prestes a mudar, no entanto. JetBrains tem lançado o que eles chamam de prévia da tecnologia do Jetpack Compose para Web.

Agora, Technology Preview é basicamente um nome sofisticado para pré-alfa. O Compose for Web está longe de estar pronto para ser usado na produção. Não há tutoriais, há muito pouca documentação e as APIs estão longe de estar completas. Dito isso, vamos ver o que o Compose for Web oferece até agora.

Na versão atual, há duas maneiras de desenvolver no Compose for Web: usando a API DOM ou usando os widgets existentes do Compose, como Column ou Text.

Se você usar a API DOM, terá nomes de API que representam os diferentes elementos HTML, como p, a, e assim por diante. A grande diferença entre o Compose e o Kotlin JS clássico, porém, é que você pode usar um design declarativo baseado em estado. Esta opção parece uma espécie de ponte entre o desenvolvimento web clássico e o desenvolvimento de UI declarativa completo. Além de criar um layout, o Compose for Web também permite criar folhas de estilo dinâmicas e baseadas em estado.

A segunda opção é o que parecerá mais familiar para os desenvolvedores do Android e do Compose. Existem componentes predefinidos, como Coluna, Linha e Controle deslizante, que você pode usar para construir uma IU da web. No momento, eles não estão muito completos e os estilos e opções não estão totalmente implementados. Mas pelo menos nos dá uma ideia do que a JetBrains tem reservado para o Compose for Web.

No geral, no momento, não há muito o que fazer no Compose for Web. Ainda está em seu muito primeiros dias. Mas pode significar muito para o futuro. Pessoalmente, como desenvolvedor Android, tive problemas para entrar em estruturas de layout baseadas em navegador. HTML e CSS básicos podem ser desajeitados, e as sintaxes React e Flutter ainda são baseadas no design HTML.

Uma linguagem de design multiplataforma completa que não seja baseada nos princípios de web design é muito interessante. Embora o Jetpack Compose ainda tenha um longo caminho a percorrer, o que a JetBrains planejou pode significar muito para o futuro do design de UI.

Se você quiser saber mais sobre o Compose para Web, confira o anúncio da JetBrains. Se você estiver interessado em experimentar a implementação atual, vá para o repositório GitHub.