Marko – linguagem declarativa baseada em HTML

 (markojs.com)
8 pontos por GN⁺ 2025-11-10 | 2 comentários | Compartilhar no WhatsApp
  • Uma linguagem declarativa que estende a sintaxe de HTML para criar interfaces web dinâmicas e reativas, oferecendo um ambiente de desenvolvimento familiar para quem já usa HTML
  • Renderização em streaming permite enviar conteúdo imediatamente a partir do servidor e exibir a tela antes mesmo do carregamento do bundle de JavaScript no cliente
  • Fine-grained bundling minimiza o envio de código desnecessário, melhorando desempenho e velocidade de carregamento
  • Compilação otimizada por ambiente (targeted compilation) gera saídas eficientes para navegador e servidor
  • Suporte integrado a TypeScript e recursos avançados de editor aumentam a produtividade de desenvolvimento e a qualidade do código

Visão geral do Marko

  • Marko é uma linguagem declarativa que reimagina o HTML, com o objetivo de criar interfaces de usuário dinâmicas e reativas
    • A maior parte do HTML válido pode ser usada no Marko sem alterações
    • A sintaxe de HTML é estendida para permitir escrever aplicações modernas de forma declarativa
  • Já é usado em produção em sites de grande tráfego como o eBay.com
  • Se você conhece HTML, CSS e JavaScript, pode começar a usar imediatamente sem uma curva de aprendizado significativa

Principais recursos

  • Renderização em streaming (Streaming) permite que o servidor envie imediatamente o conteúdo que estiver pronto
    • A tela inicial pode ser exibida antes mesmo de o bundle de JavaScript do cliente ser carregado
    • HTML, imagens e assets são carregados de forma assíncrona, proporcionando renderização rápida da primeira tela
  • Fine-Grained Bundling envia apenas o código necessário
    • Remove código não utilizado e evita hidratação desnecessária no nível de subtemplate
    • Projetado com a filosofia “Lean by default, Fast by design”
  • Suporte a compilação otimizada por ambiente (Targeted Compilation)
    • Gera saídas otimizadas para cada ambiente, considerando as diferenças entre navegador e servidor
    • Carregamento mais rápido, bundles menores e implementação em uma única linguagem unificada

Exemplos de código e sintaxe

  • Oferece uma sintaxe concisa que combina HTML e JavaScript 
    <let/count=0>  
<button onClick() { count++ }>  
  Clicked ${count} times  
</button>
  • O mesmo código também pode ser escrito com uma sintaxe mais enxuta 
    let/count=0  
button onClick() { count++ }  
  -- Clicked ${count} times
  • Fornece um conjunto expandido de tags como <for>, <if>, <await>, <const>, <define>
    • É possível misturar tags nativas de HTML com tags específicas do Marko

Desempenho e escalabilidade

  • Renderização inicial mais rápida (Faster First Paint) melhora a experiência do usuário
  • Escalável (Scalable): pode evoluir com flexibilidade de templates HTML simples até estruturas complexas de componentes
  • Runtime pequeno e compilador otimizado mantêm alto desempenho em diferentes condições de rede

Integração com TypeScript e ferramentas de desenvolvimento

  • Suporte nativo a TypeScript oferece inferência de tipos robusta
    • Mantém consistência de tipos entre templates e componentes
    • O editor oferece autocompletar, ir para definição, destaque de sintaxe, formatação e outros recursos
  • Detecta erros mais cedo e melhora a qualidade do código, oferecendo um ambiente de desenvolvimento estável

Conclusão

  • Marko é uma linguagem moderna de desenvolvimento web que combina sintaxe amigável ao HTML, renderização de alto desempenho, bundling refinado e integração com TypeScript
  • Funciona de forma eficiente tanto no servidor quanto no cliente, oferecendo escalabilidade e desempenho adequados para operar serviços de grande porte

Leituras relacionadas

2 comentários

 
shakespeares 2025-11-10

Por enquanto, ainda seria Svelte.
 
GN⁺ 2025-11-10
Comentários no Hacker News

  • Espero que, no futuro, o próprio HTML passe a suportar todos os verbos HTTP sem JavaScript (como PUT e DELETE), ofereça controles de entrada nativos como dropdown, multisseleção, data e hora, e permita enviar formulários sem recarregar a página inteira
    Quando ouvi o nome htmx pela primeira vez, foi isso que imaginei, mas na prática ele ficou mais no nível do intercooler
    Esse tipo de funcionalidade exige amplo suporte dos fabricantes de navegadores

    • Há um trabalho em andamento para integrar algumas ideias do htmx diretamente à especificação do HTML
      Dá para ver mais sobre isso no projeto Triptych

  • Tendo criado frameworks JavaScript por conta própria, acho que o Marko é subestimado
    As otimizações em tempo de compilação são muito impressionantes, e a documentação sobre fine-grained bundling também é excelente
    Ele inclusive teve bons resultados numa comparação de desempenho de quadros Kanban

    • A moda de RSC e SSR pareceu mais um pretexto para promoção de alguém ou para abrir uma empresa nova
      O React, ao se acoplar ao Next.js, traiu a essência da plataforma, e agora quase não há motivo para escolhê-lo
      A época em que React hidratado estaticamente rodava sobre CDN era muito melhor
    • Tenho usado bastante o SvelteKit em projetos novos, porque ele equilibra bem recursos, experiência de desenvolvimento e desempenho
      Ainda assim, fico com vontade de olhar o Marko também
      Seria bom ver esse tipo de análise profunda também no lado de frameworks desktop como Electron

  • Gosto do React simplesmente porque ele é “apenas JavaScript”
    Não gosto de sintaxes como <let> ou <for>

    • Na prática, JSX também não é JavaScript puro
      A gente só se acostumou tanto com ele que vale lembrar disso ao olhar para frameworks novos
    • Já existiam boas sintaxes de template antes, e continuam existindo hoje
      Formas como {% for user in users %} ou {#each users as user} são muito mais claras
      JSX também não é perfeito — a sintaxe {users.map(...)} continua sendo verbosa
    • Já usei o Marko no passado, e ele começou originalmente como um projeto interno do eBay, sendo aberto como open source por volta de 2015
    • Isso varia de pessoa para pessoa, mas há quem goste desse tipo de sintaxe baseada em templates
      Esse também é um dos motivos da popularidade de Vue e Svelte
      E, aliás, no Vue também dá para escrever só com JSX, se quiser
    • React já deixou de ser “só JS” há muito tempo
      A DSL foi inchando, e com o aumento de hooks como useFormStatus e useActionState, tudo ficou mais complexo
      Já a sintaxe do Marko é intuitiva, e funções parecem funções, variáveis parecem variáveis, então fica mais fácil de entender

  • Esse jeito de colocar JS dentro de HTML parece bem interessante
    Ryan Carniato participou desse projeto e depois acabou liderando o SolidJS, então fico curioso para saber por que ele voltou para um estilo de HTML-in-JS

    • Ryan já estava trabalhando no Solid antes mesmo de entrar no eBay/Marko
      Os dois projetos evoluíram trocando ideias entre si, e ainda hoje continuam em contato
    • A escolha por JSX foi simples
      Muitos desenvolvedores já estão acostumados com ele, e o suporte em editores e no TypeScript já é muito bom
    • “JS dentro de HTML” soa quase como uma piada, como se estivéssemos voltando à época do Netscape em 1995

  • Depois de mais de 20 anos, parece que o front-end deu a volta completa e acabou retornando ao paradigma da era JSP
    Na época isso era visto como cafona, mas no fim talvez fosse o caminho certo

    • A tecnologia é cíclica, mas sempre há pequenas melhorias a cada volta
      Algumas coisas desaparecem, mas a criatividade da geração seguinte acaba criando algo novo
    • Também lembro do JSF — ele conseguia restaurar estado no lado do servidor, e dava para criar rapidamente sites complexos baseados em formulários
      Só era preciso tomar cuidado com escalabilidade em grande escala
    • Acho difícil concordar com a expressão “paradigma certo”
      Dependendo da situação, outra abordagem pode ser mais adequada
    • Reduzir a escolha por SPA a “não gostávamos das tecnologias antigas” é simplificar demais
      Naquele momento, havia necessidade de apps móveis e de uma arquitetura centrada em APIs, e SPA atendia bem a essa demanda
      O que vemos agora não é um retorno ao JSP, mas uma busca por um ponto de equilíbrio entre os dois lados

  • O Marko já é uma tecnologia comprovada no eBay
    Uso há anos e nunca tive problemas
    Já Facebook, Instagram e Messenger, baseados em React, vivem tendo bugs de interface
    Quando se olha o resultado em serviços realmente grandes, a estabilidade do Marko se destaca

  • O Marko já apareceu várias vezes no HN
    Houve threads relacionadas também em janeiro de 2023, agosto de 2017 e fevereiro de 2015

    • Só agora percebi que era um projeto bem antigo

  • Parece uma sintaxe muito melhorada em relação ao JSX
    Gosto especialmente da sintaxe concisa no estilo Pug, e fico me perguntando por que ela está escondida tão fundo na documentação
    Documentação de Concise Syntax

    • Eu também fui olhar o Marko por causa dessa sintaxe concisa
      Mas não gostei dos erros de highlighting na documentação nem da forma de separar atributos
      Hoje em dia uso mais Svelte, mas continuo esperando uma sintaxe mais elegante
    • Pessoalmente, parece uma repetição dos erros do YAML
      Sintaxe baseada em espaço pode ser boa, mas notações como -- e a dificuldade de parsing deixam a desejar

  • A equipe do Marko chegou a criar e publicar um clone do Hacker News para apresentar o Marko 6
    Ver exemplo no GitHub

  • Como parece uma linguagem feita para demo, é até engraçado que o texto em gradiente de “HTML-based” e “building web apps” não apareça