Cómo se hizo Manaby: Un vistazo técnico

Tabla de Contenidos

• La base: Electron
• La interfaz: React 19 + TypeScript
• Gestión de estado: Zustand
• Base de datos: Better SQLite3 + Drizzle ORM
• Sistema de build: Electron Forge + Webpack
• Bloqueo de anuncios: Ghostery
• La arquitectura
• Sistema de Split View
• Gestor de contraseñas
• Temas
• Qué viene después

---

Construir un navegador desde cero suena a locura. Y un poco lo es. Pero con las herramientas adecuadas, se hace posible. Aquí está todo lo que impulsa a Manaby bajo el capó.

La base: Electron

Manaby está construido sobre Electron, la misma tecnología detrás de VS Code, Slack y Discord. Electron me permite usar tecnologías web (HTML, CSS, JavaScript) mientras tengo acceso completo a APIs nativas.

¿Por qué Electron? Porque está probado en batalla. Chromium maneja el renderizado web—no necesito reinventar esa rueda. Lo que necesitaba era control sobre el chrome del navegador: las pestañas, la barra de herramientas, las vistas divididas. Electron me da eso.

Versión: Electron 39 con Chromium 134.

La interfaz: React 19 + TypeScript

Toda la interfaz está construida con React 19. Cada barra de pestañas, cada botón, cada panel es un componente de React. TypeScript mantiene todo con tipos seguros, lo cual importa cuando manejas estado complejo.

¿Por qué React y no algo más ligero? Porque lo conozco bien, y el ecosistema es maduro. Cuando necesito un hook o un patrón, no tengo que inventarlo—ya está resuelto.

Gestión de estado: Zustand

Para el estado global, elegí Zustand sobre Redux o MobX. Es simple, rápido y no requiere boilerplate.

// Ejemplo: Store del SearchBar
const useSearchBarStore = create<SearchBarState>((set) => ({
  mode: 'search',
  query: '',
  setQuery: (query) => set({ query }),
  setMode: (mode) => set({ mode }),
}));

Cada funcionalidad tiene su propio store: pestañas, descargas, contraseñas, configuración. Están aislados, lo que hace el debugging directo.

Base de datos: Better SQLite3 + Drizzle ORM

Todos los datos locales (contraseñas, historial, estado de sesión) se almacenan en SQLite mediante better-sqlite3. Para la capa ORM, uso Drizzle—tiene tipos seguros y genera SQL eficiente.

¿Por qué SQLite? Es embebido, rápido y no necesita un servidor. Perfecto para una app de escritorio. El archivo de base de datos vive localmente, tus datos nunca salen de tu máquina.

Sistema de build: Electron Forge + Webpack

Electron Forge maneja el empaquetado y distribución. Crea archivos DMG para macOS, instaladores NSIS para Windows, y AppImage/DEB/RPM para Linux.

El código se empaqueta con Webpack. El proceso principal y el proceso renderer tienen configuraciones separadas. El hot reload funciona en desarrollo, lo que hace la iteración rápida.

Bloqueo de anuncios: Ghostery

En lugar de construir mi propio bloqueador de anuncios, integré la librería adblocker-electron de Ghostery. Es el mismo motor que impulsa la extensión de navegador Ghostery.

Bloquea:

• Anuncios
• Rastreadores
• Scripts de fingerprinting

Puedes poner sitios en lista blanca cuando quieras apoyarlos.

La arquitectura

Manaby sigue el modelo multi-proceso de Electron:

Proceso Principal

• Gestión de ventanas
• Manejo de sesiones
• Hub de comunicación IPC
• Acceso a APIs nativas (sistema de archivos, portapapeles, etc.)

Proceso Renderer

• Interfaz React
• Renderizado de contenido de pestañas
• Estado local (Zustand)
• Interacciones de usuario

Scripts Preload

• Puente entre main y renderer
• Exponen APIs seguras vía context bridge
• Manejan llamadas IPC

┌─────────────────────────────────────────┐
│           Proceso Principal             │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐  │
│  │ Windows │ │Sesiones │ │   IPC   │  │
│  └─────────┘ └─────────┘ └─────────┘  │
└───────────────────┬─────────────────────┘
                    │
        ┌───────────┼───────────┐
        │           │           │
        ▼           ▼           ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ Renderer 1│ │ Renderer 2│ │ Renderer N│
│(Pestaña)  │ │(Pestaña)  │ │(Pestaña)  │
└───────────┘ └───────────┘ └───────────┘

Sistema de Split View

Una de las funcionalidades más complejas. El gestor de vistas divididas rastrea:

• Hasta 4 grupos por ventana
• Orientación (vertical/horizontal)
• Ratios entre grupos
• Estado de foco por grupo
• Drag-and-drop de pestañas entre grupos

La lógica vive en split-view-manager.ts—unas 500 líneas de gestión de estado cuidadosamente orquestada.

Gestor de contraseñas

Las contraseñas se encriptan con una contraseña maestra antes de almacenarse. El sistema de autocompletado inyecta credenciales en formularios de login usando un script preload.

Usuario introduce contraseña
        ↓
Encriptar con clave maestra
        ↓
Almacenar en SQLite
        ↓
Al detectar página de login
        ↓
Desencriptar y autocompletar

Temas

Hay nueve temas disponibles, implementados como propiedades CSS personalizadas:

• Dark (por defecto)
• Light
• Nord
• Dracula
• Tokyo Night
• Catppuccin
• Monokai
• Ayu
• Solarized

Cambiar de tema actualiza las variables en tiempo real. No se necesita recargar la página.

Qué viene después

La arquitectura es sólida, pero siempre hay más por construir:

• Soporte de extensiones (compatibilidad con extensiones de Chrome)
• Mejor agrupación de pestañas
• Optimizaciones de rendimiento
• Versión móvil (algún día)

Si quieres ver el código en acción, descarga Manaby y pruébalo. La mejor manera de entender cómo funciona es usándolo.