OB$

OPEN SOURCE REACTIVE MICRO-FRAMEWORK

Ver Casos Práticos Baixar Framework
linhas (obs.min.js)
dependências
atualização reativa 
<input data-model="cliente" />
<strong data-bind="cliente"></strong>

<li repetir="lead em leads">
  {{ name }} - {{ value }}
</li>

ob$.cliente = "Pangeia Labs";
ob$.leads = [{ name: "Loja X", value: "R$ 1200" }];

Capacidades técnicas do OB$

Bindings completos

`data-bind`, `data-html`, `data-img`, `data-style`, `data-class`.

Diretivas de fluxo

`mostrar`, `esconder` e `repetir` para montar UI dinâmica.

Inputs sincronizados

`data-model` conecta o input ao estado sem boilerplate extra.

Callbacks observáveis

Por variável e global para telemetria e lógica de negócio.

Sem build step

Script puro, carregamento direto e ciclo de iteração curto.

Responsividade ativa

Estado reage a viewport para comportamento, não só layout.

Demos práticas (uso real)

Todos os blocos abaixo são funcionais e alimentados por `ob$` em tempo real.

1) Pipeline comercial (CRM leve)

Cadastre leads, acompanhe MRR e converta para fechado.

Abertos: Fechados: MRR:
  • {{ name }} · {{ valueLabel }}

2) Simulador de plano SaaS

Monte proposta comercial com preço calculado na hora.

Total mensal estimado

3) Quadro de execução diária

Controle tarefas de sprint e mova para concluído com um clique.

Pendentes: Concluídas:
  • {{ title }}

Concluídas

  • {{ title }}

4) Telemetria de estado

Log de mutações capturado via callback global.

Viewport:

5) Feed operacional com scroll infinito

Desça até o final para carregar mais cards automaticamente (5 por lote).

{{ title }}

{{ body }}

{{ tag }}
Observando fim da lista...

Download

Framework, versão minificada e manual completo para onboarding técnico.

OB$ Full

Arquivo completo para estudo e contribuição open source.

Baixar obs.js