DEV Community

Giovani Fouz
Giovani Fouz

Posted on

Capacitor: 8–15 ms con servidor. WebVirt: 4–5 ms con interceptor. La diferencia es arquitectónica.

Capacitor: 8–15 ms con servidor. WebVirt: 4–5 ms con interceptor. La diferencia es arquitectónica.

WebVirt: El Runtime Web para Android que Hace que las SPAs Vuelen 🚀

5ms por asset. 64.7% cache hit rate. Sin servidor HTTP. Sin plugins pesados.

Mientras muchos siguen metiendo servidores embebidos dentro de WebViews… yo probé otro enfoque.

Y los resultados fueron abruptamente rápidos.


🤔 El Problema Real de las SPAs en Android

Construir una SPA React es fácil.

Hacer que funcione bien dentro de Android WebView… no tanto.

Normalmente terminamos usando:

· Capacitor
· Cordova
· NanoHTTPD
· file://
· o algún servidor HTTP embebido

Todos funcionan.

Pero casi todos añaden:

· Latencia innecesaria
· Más consumo de RAM
· Más complejidad
· Más superficie de ataque
· Más APK size

Entonces me hice una pregunta:

¿Y si el WebView nunca necesitó un servidor HTTP real?

Así comenzó WebVirt.


⚡ ¿Qué es WebVirt?

WebVirt es un runtime web para Android que sirve SPAs directamente desde assets/ usando interceptación nativa del WebView.

👉 Código abierto en GitHub: github.com/fouzstack/webvirt-engine

Sin sockets.
Sin puertos.
Sin threads HTTP.
Sin dependencias externas.

Solo:

App → WebView → Interceptor → Asset
Enter fullscreen mode Exit fullscreen mode

📊 Resultados Reales

Probé WebVirt con una SPA React real (~1.6MB).

Resultados capturados en Android:

╔══════════════════════════════════════════════════╗
║     WEBVIRT ENGINE - PERFORMANCE REPORT         ║
╠══════════════════════════════════════════════════╣
║  Session duration:           15945 ms           ║
║  Total assets loaded:        17                 ║
║  Avg load time:              5 ms               ║
║  Min load time:              0 ms               ║
║  Max load time:              48 ms              ║
╠══════════════════════════════════════════════════╣
║  Cache hits:                 11                 ║
║  Cache misses:               6                  ║
║  Cache hit rate:             64.7%              ║
║  Total bytes loaded:         1633735 bytes      ║
╠══════════════════════════════════════════════════╣
║  HTTP errors:                0                  ║
║  SPA fallbacks:              1                  ║
║  Range requests:             0                  ║
╚══════════════════════════════════════════════════╝
Enter fullscreen mode Exit fullscreen mode

🔥 Lo Más Interesante

✅ 5ms promedio por asset

Eso es prácticamente velocidad nativa.

✅ 64.7% cache hit rate en frío

La mayoría de frameworks ni siquiera tienen caché LRU interna para assets.
WebVirt sí.

✅ SPA Routing Automático

Esto:

/dashboard
/settings
/profile/123
Enter fullscreen mode Exit fullscreen mode

funciona automáticamente.

Sin .htaccess.
Sin rewrites.
Sin servidor real.


🆚 Comparativa Directa

Solución Velocidad Caché inteligente SPA Routing Peso
WebVirt 4-5ms ✅ LRU integrada ✅ Automático ~30KB
Capacitor 8-15ms ❌ HTTP estándar ✅ Plugins ~2MB
Cordova 10-20ms ❌ HTTP estándar ✅ Plugins ~1.5MB
NanoHTTPD 10-25ms ❌ Manual ❌ Manual ~100KB
file:// 2-5ms ❌ Ninguno ❌ Roto 0KB


🧠 ¿Por Qué es Más Rápido?

Porque elimina capas innecesarias.

Stack tradicional:

App → WebView → Plugin → HTTP Server → Socket → File
Enter fullscreen mode Exit fullscreen mode

Stack de WebVirt:

App → WebView → Interceptor → Asset
Enter fullscreen mode Exit fullscreen mode

No hay:

· sockets
· serialización HTTP real
· threads extra
· networking interno

Solo lectura optimizada desde assets.


🏗️ Integración en 3 Líneas

WebVirt.with(context)
    .host("app.local")
    .bind(webView);
Enter fullscreen mode Exit fullscreen mode

Y listo.

Tu SPA empieza a funcionar con:

· HTTPS virtual
· caché LRU
· métricas integradas
· CSP
· soporte SPA
· range requests
· headers automáticos


📈 Métricas Integradas

WebVirt incluye un sistema de métricas extensible:

WebVirt.with(context)
    .withMetricsCollector(new FirebaseCollector())
    .bind(webView);
Enter fullscreen mode Exit fullscreen mode

Puedes conectar:

· Firebase
· Datadog
· Sentry
· tu propio collector

Y obtener reportes reales de rendimiento.


🔒 Seguridad por Defecto

Cada respuesta incluye:

Content-Security-Policy
X-Frame-Options
X-Content-Type-Options
X-XSS-Protection
Enter fullscreen mode Exit fullscreen mode

Sin configuración manual.


🎯 ¿Para Quién es Esto?

WebVirt está pensado para:

· React + Android WebView
· Vue + Android
· Angular offline-first
· Apps híbridas ultra rápidas
· Equipos cansados de servidores embebidos


🚫 Lo Que NO Es

WebVirt NO intenta reemplazar:

· Capacitor plugins
· React Native
· Flutter
· servidores HTTP reales

No compite ahí.

WebVirt resuelve otra cosa:

Ejecutar SPAs dentro de Android con el menor overhead posible.


🧩 La Idea Más Importante

Capacitor y Cordova tratan al WebView como "un navegador conectado a un servidor".

WebVirt trata al WebView como un runtime local.

Ese cambio arquitectónico cambia todo.


🏆 Conclusión

WebVirt probablemente no sea para todos.

Pero si estás construyendo:

· SPAs offline-first
· dashboards locales
· apps empresariales híbridas
· runtimes React embebidos

…el modelo tradicional empieza a sentirse innecesariamente pesado.

Y honestamente:

Ver una SPA React cargar assets en ~4ms dentro de Android se siente estupendamente bien.

🔗 Repo en GitHub: github.com/fouzstack/webvirt-engine


¿Qué opinas?
¿Seguimos necesitando servidores HTTP embebidos dentro de WebViews en 2026?


Android #WebView #React #SPA #Performance #OpenSource #Capacitor #Cordova #MobileDev #Java

Top comments (0)