Redação YTI&W-News
🚀 Introdução ao BlokJS – Zero-Build
O BlokJS é um framework de UI reativo que se destaca por não requerer configuração, bundler ou compilador. Isso significa que você pode começar a desenvolver aplicativos reativos rapidamente, sem a necessidade de configurar ou compilar nada. Além disso, o BlokJS é leve, com apenas 9 KB gzipped, e não depende de outras bibliotecas. Isso o torna uma escolha ideal para protótipos, MVPs, ferramentas internas e pequenos aplicativos.
📝 Filosofia do BlokJS
O BlokJS é construído em torno de algumas ideias principais:
Sem Etapa de Build
Um framework que precisa de um compilador antes de poder rodar já adicionou complexidade. O BlokJS é uma aplicação de JavaScript plano que é executado diretamente no navegador. Embora você possa usar um bundler para organizar seu código em arquivos se desejar, isso nunca é uma exigência.
Baterias Incluídas, Mas Não Pesadas
O BlokJS inclui estados reativos, componentes, rotas, armazenamento e rastreamento de operações assíncronas, tudo integrado em um único pacote de 9 KB. Isso significa que você não precisa montar cinco bibliotecas separadas para ter todas as funcionalidades que precisa.
Simplicidade em Vez de Complexidade
A superfície de API do BlokJS é pequena por design. Não há diretivas especiais, ciclo de vida, sintaxe específica do framework para aprender. Se você sabe JavaScript, você já sabe a maior parte do BlokJS.
Atualizações Diretas do DOM
Em vez de diferençar uma árvore virtual e patchar o DOM real, o BlokJS rastreia exatamente quais estados cada vinculação depende e atualiza apenas aquela vinculação quando o estado mudar. Isso evita o overhead de um ciclo de diferença/patch completo, tornando atualizações direcionadas rápidas e previsíveis.
🎉 Exemplo de Contador em 15 Linhas
Para demonstrar a simplicidade do BlokJS, vamos criar um exemplo básico de contador que atualiza automaticamente quando o usuário clica nos botões de incremento e decremento.
Instalação e Configuração
Para começar, você precisará incluir o BlokJS no seu arquivo HTML. Você pode fazê-lo diretamente do CDN:
<script src="https://cdn.jsdelivr.net/npm/@maleta/blokjs/dist/blokjs.min.js"></script>Código do Contador
Agora, vamos criar o nosso contador. Em um arquivo JavaScript, você pode adicionar o seguinte código:
<div id="app"></div>
<script>
blok.mount('#app', {
state: { count: 0 },
methods: {
inc() { this.count++ },
dec() { this.count-- },
},
view: ($) => ({
div: { children: [
{ h1: { text: $.count } },
{ button: { click: 'dec', text: '-' } },
{ button: { click: 'inc', text: '+' } },
] }
})
});
</script>Resultado
Com esses poucos códigos, você já tem um contador reativo funcionando sem a necessidade de configuração ou build. O BlokJS cuida de tudo para você.
Isso é apenas um exemplo básico, mas ele demonstra a potência do BlokJS em criar interfaces de usuário reativas de forma simples e eficiente.
🤔 Por que Objetos em vez de JSX ou Templates?
O BlokJS usa objetos em vez de JSX ou templates porque é mais simples e direto, permitindo que os desenvolvedores usem apenas JavaScript puro sem necessidade de aprender uma nova sintaxe.
Benefícios da Abordagem de Objetos
Ao usar objetos, o BlokJS oferece vários benefícios, incluindo:
* Simplicidade: Sem a necessidade de aprender uma nova sintaxe, os desenvolvedores podem se concentrar em escrever código JavaScript puro.
* Direto: A abordagem de objetos é mais direta e fácil de entender, eliminando a complexidade de JSX ou templates.
* Flexibilidade: Objetos podem ser facilmente manipulados e alterados, permitindo que os desenvolvedores criem interfaces de usuário personalizadas.
Exemplo de Objetos em Ação
Veja um exemplo de como objetos são usados no BlokJS:
{ div: { class: 'card', children: [
{ h1: { text: $.title } },
{ p: { text: $.description } }
] } }
Nesse exemplo, o objeto `div` tem uma classe `card` e dois filhos: `h1` e `p`. O conteúdo de `h1` e `p` é definido usando a sintaxe `$` para acessar a propriedade correspondente do estado.
Conclusão
O uso de objetos em vez de JSX ou templates é uma característica fundamental do BlokJS, permitindo que os desenvolvedores criem interfaces de usuário simples, diretas e flexíveis. Com a abordagem de objetos, os desenvolvedores podem se concentrar em escrever código JavaScript puro e criar interfaces de usuário personalizadas.
📦 Componentes – Não um Brinquedo
O BlokJS tem um sistema de componentes que inclui props, eventos, slots e hooks de ciclo de vida, tornando-o uma ferramenta poderosa para criar interfaces de usuário complexas.
Definindo Componentes
Para criar um componente, você pode usar a função `blok.component()`. Por exemplo:
blok.component('TodoItem', {
props: ['todo'],
methods: {
remove() { this.emit('remove', this.todo) }
},
view: ($) => ({
li: { children: [
{ input: { type: 'checkbox', model: $.todo.done } },
{ span: { text: $.todo.text } },
{ button: { click: 'remove', text: 'x' } },
] }
})
})
Usando Componentes
Para usar um componente, você pode simplesmente chamar seu nome e passar as props necessárias. Por exemplo:
{ TodoItem: { todo: $.todo, on_remove: 'handleRemove' } }
Props e Eventos
Os componentes podem ter props e eventos. As props são valores que são passados para o componente, enquanto os eventos são funções que são chamadas quando um evento ocorre. Por exemplo:
blok.component('TodoItem', {
props: ['todo'],
methods: {
remove() { this.emit('remove', this.todo) }
},
view: ($) => ({
li: { children: [
{ input: { type: 'checkbox', model: $.todo.done } },
{ span: { text: $.todo.text } },
{ button: { click: 'remove', text: 'x' } },
] }
})
})
Slots e Hooks de Ciclo de Vida
Os componentes também podem ter slots e hooks de ciclo de vida. Os slots são espaços vazios que podem ser preenchidos com conteúdo, enquanto os hooks de ciclo de vida são funções que são chamadas em diferentes momentos do ciclo de vida do componente. Por exemplo:
blok.component('TodoItem', {
props: ['todo'],
methods: {
remove() { this.emit('remove', this.todo) }
},
view: ($) => ({
li: { children: [
{ input: { type: 'checkbox', model: $.todo.done } },
{ span: { text: $.todo.text } },
{ button: { click: 'remove', text: 'x' } },
] }
}),
mounted() {
console.log('Componente montado!')
},
updated() {
console.log('Componente atualizado!')
}
})
Lojas – Estado Global com Rastreamento de Async Automático
O BlokJS fornece um sistema de lojas que permite gerenciar o estado global da aplicação e rastrear automaticamente operações assíncronas, tornando mais fácil lidar com carregamento e erros.
Definindo uma Loja
Para criar uma loja, você pode usar a função `blok.store()` e passar o nome da loja e um objeto com as propriedades e métodos da loja. Por exemplo:
blok.store('auth', {
state: { user: null },
computed: {
isLoggedIn() { return this.user !== null }
},
methods: {
async login(email, password) {
const res = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
})
this.user = await res.json()
},
logout() { this.user = null }
}
})
Rastreamento de Operações Assíncronas
O BlokJS rastreia automaticamente operações assíncronas em métodos que retornam Promises. Isso permite que você gerencie o carregamento e os erros de forma fácil e eficiente. Por exemplo:
// Loading spinner - aparece automaticamente enquanto login() executa
{ when: $.store.auth.loading.login, children: [
{ p: 'Signing in...' }
] }
// Erro de mensagem - aparece automaticamente se login() lançar um erro
{ when: $.store.auth.error.login, children: [
{ p: { class: 'error', text: $.store.auth.error.login } }
] }
Gerenciamento de Estado Global
O BlokJS permite que você gerencie o estado global da aplicação através das lojas. Isso inclui a definição de propriedades e métodos para cada loja, bem como a manipulação do estado da loja. Por exemplo:
// Acessando o estado da loja
{ when: $.store.auth.isLoggedIn, children: [
{ p: { text: $.store.auth.user.name } }
] }
Com o sistema de lojas do BlokJS, você pode gerenciar o estado global da aplicação de forma fácil e eficiente, tornando mais fácil lidar com carregamento e erros.
🚪 Roteamento – Construído
O BlokJS inclui um sistema de roteamento que permite criar rotas, parâmetros dinâmicos, guardas e modos de hash e história, tudo sem a necessidade de uma biblioteca de roteamento separada.
Definindo Rotas
Para definir rotas no BlokJS, você pode utilizar a propriedade `routes` no objeto `blok.mount`. Por exemplo:
blok.mount('#app', {
routes: [
{ path: '/', component: 'Home' },
{ path: '/product/:id', component: 'ProductDetail' },
{ path: '/admin', component: 'Admin', guard: 'requireAuth' },
{ path: '*', component: 'NotFound' },
],
// ...
})
Parâmetros Dinâmicos
O BlokJS suporta parâmetros dinâmicos em rotas. Você pode utilizar colchetes (`[]`) para indicar que um parâmetro é dinâmico. Por exemplo:
blok.mount('#app', {
routes: [
{ path: '/product/:id', component: 'ProductDetail' },
],
// ...
})
Guardas
Os guardas são funções que são chamadas antes de uma rota ser renderizada. Eles podem ser utilizados para verificar se o usuário tem permissão para acessar uma determinada rota. Por exemplo:
blok.mount('#app', {
routes: [
{ path: '/admin', component: 'Admin', guard: 'requireAuth' },
],
guards: {
requireAuth(to, from) {
if (!this.store.auth.isLoggedIn) return '/login'
return true
},
},
// ...
})
Modos de Hash e História
O BlokJS suporta modos de hash e história para o roteamento. Você pode configurar o modo de roteamento utilizando a propriedade `mode` no objeto `blok.mount`. Por exemplo:
blok.mount('#app', {
mode: 'history',
// ...
})
Acessando Rota Dados
Você pode acessar dados de rota utilizando a propriedade `this.route` em componentes. Por exemplo:
blok.component('ProductDetail', {
props: ['id'],
view: ($) => ({
div: { children: [
{ h1: { text: $.route.params.id } },
] }
})
})
Navegando Programaticamente
Você pode navegar programaticamente utilizando a propriedade `this.navigate` em componentes. Por exemplo:
blok.component('ProductDetail', {
view: ($) => ({
button: { click: 'navigate', text: 'Voltar' },
}),
methods: {
navigate() {
this.navigate('/product')
},
}
})
🔒 Segurança
O BlokJS é projetado com segurança em mente, com recursos como binding de texto seguro e validação de URLs para prevenir ataques de XSS e CSRF.
Binding de Texto Seguro
O BlokJS utiliza o atributo `textContent` para renderizar o conteúdo de texto, o que significa que qualquer HTML presente no texto será renderizado como texto literal, evitando assim ataques de XSS.
{ text: $.name }
Validação de URLs
O BlokJS também valida as URLs para prevenir ataques de CSRF. As URLs são validadas para evitar a inclusão de scripts JavaScript ou dados não autorizados.
{ a: { href: '/', link: true, text: 'Home' } }
Prevenção de Ataques de XSS e CSRF
O BlokJS é projetado para prevenir ataques de XSS e CSRF, garantindo que o conteúdo seja renderizado de forma segura e que as URLs sejam validadas para evitar ataques mal-intencionados.
// Loading spinner - aparece automaticamente enquanto login() é executado
{ when: $.store.auth.loading.login, children: [
{ p: 'Signing in...' }
] }
🤔 O que o BlokJS não é
O BlokJS não é uma substituição para frameworks como React, Angular ou Vue para dashboards empresariais complexos, mas é ideal para protótipos, ferramentas internas, aplicativos pequenos e médios e aprendizado.
Limitações do BlokJS
O BlokJS não tem suporte a renderização servidor-side (SSR) no momento, embora isso possa ser adicionado no futuro. Além disso, o BlokJS não utiliza um Virtual DOM, optando por atualizações diretas do DOM em vez disso.
Quando usar o BlokJS
O BlokJS é uma escolha ideal para:
* Protótipos e MVPs onde você precisa algo pronto rapidamente
* Ferramentas internas e painéis de administração
* Aplicativos pequenos e médios, como listas de tarefas, dashboards e formulários
* Aprendizado, pois a API do BlokJS é fácil de aprender e se lembrar
* Embutir UI reativa em qualquer página existente
🤖 LLM-Friendly por Design
O BlokJS é projetado para ser amigável com modelos de linguagem grandes (LLM), com uma documentação de referência condensada que pode ser facilmente consumida por esses modelos.
Documentação de Referência Condensada
A documentação de referência do BlokJS é uma versão condensada do conjunto de API completo, otimizada para consumo por LLMs. Ela é projetada para ser pequena o suficiente para ser incluída no contexto da janela do LLM, permitindo que os modelos de linguagem gerem código funcionante do BlokJS com precisão.
~2,900 tokens (medidos usando a API de contagem de tokens oficial da Anthropic)Integração com LLMs
A documentação de referência do BlokJS é incluída no pacote npm (llm-reference.md), tornando-a disponível ao lado do framework em si. Isso permite que os desenvolvedores incluam a documentação no prompt do LLM, permitindo que o modelo de linguagem gera código funcionante do BlokJS com precisão.
npm install @maleta/blokjsExemplo de Uso
Para incluir a documentação de referência do BlokJS no prompt do LLM, basta incluir o seguinte código em seu prompt:
blokjs llm-reference.mdIsso permitirá que o LLM consuma a documentação de referência e gera código funcionante do BlokJS com precisão.
🚀 Começando
O BlokJS pode ser iniciado facilmente usando um CDN, npm ou Vite, com recursos como registro automático de componentes e lojas e substituição de módulos quentes durante o desenvolvimento.
Usando um CDN
Para iniciar o BlokJS usando um CDN, você pode simplesmente incluir o script do CDN no seu arquivo HTML:
<script src="https://cdn.jsdelivr.net/npm/@maleta/blokjs/dist/blokjs.min.js"></script>Isso é tudo o que você precisa fazer para começar a usar o BlokJS.
Usando npm
Para iniciar o BlokJS usando npm, você pode instalar o pacote @maleta/blokjs usando o comando:
npm install @maleta/blokjsDepois de instalar o pacote, você pode criar um novo projeto usando o comando:
npx create blokjs my-appIsso criará um novo projeto com o BlokJS configurado e pronto para uso.
Usando Vite
Para iniciar o BlokJS usando Vite, você pode criar um novo projeto usando o comando:
npx vite create blokjs my-appIsso criará um novo projeto com o BlokJS configurado e pronto para uso.
Vite também oferece recursos como registro automático de componentes e lojas e substituição de módulos quentes durante o desenvolvimento.
Recursos adicionais
O BlokJS oferece recursos adicionais como:
- Registro automático de componentes e lojas
- Substituição de módulos quentes durante o desenvolvimento
Esses recursos podem ajudar a tornar o desenvolvimento com o BlokJS mais eficiente e produtivo.
Fonte de Referência: dev.to.
Curadoria e Adaptação: Redação Yassutaro Developers.
Redação YTI&W-News
Notícias do universo do Desenvolvimento Web, dicas e tutoriais para Webmasters.
- Domine Pull Requests e Contribua para Projetos de Código 2 de março de 2026
- Minifique seu código e otimize seu site 28 de fevereiro de 2026
- Crie Transições de Página Asíncronas em JavaScript Puro 28 de fevereiro de 2026
- Desenvolva Aplicações Seguras com Entidade Forte 27 de fevereiro de 2026
- Revolutionize AI Conversations with Kore Memory 27 de fevereiro de 2026
