Por qué Google, Microsoft y Miro construyen sus apps web en Canvas en lugar de HTML
You might want to build your WebApp in Canvas instead of HTML
Canvas, el elemento de dibujo de HTML, permite a Google Docs, Sheets, Excel web, Canva y Miro ofrecer un rendimiento fluido incluso en equipos modestos. Este artículo, escrito por un desarrollador de Hivekit, explica las ventajas de Canvas sobre el DOM: velocidad, control total del renderizado, consistencia entre dispositivos y portabilidad. También advierte de sus desventajas, como la falta de accesibilidad y la necesidad de implementar interacciones desde cero. Incluye consejos prácticos para gestionar el renderizado, la resolución de pantalla y los eventos, y concluye que Canvas es ideal para interfaces que se comportan como escenas, no como documentos.
No elijas Canvas simplemente porque suene rápido; elígelo cuando tu interfaz deje de comportarse como un documento y empiece a comportarse como una escena.
- josephg
Por favor, no hagáis esto.
Los controles nativos tienen docenas o cientos de interacciones de UI sutiles. Considera un elemento de entrada de texto. En macOS hay atajos de texto: Cmd+A para seleccionar todo. Cmd+izquierda/derecha para ir a la palabra anterior o siguiente. Re Pág / Av Pág. Inicio / Fin. Corrector ortográfico. Un menú contextual con unas 10 opciones más, incluidos los servicios de texto del sistema operativo. Tocar un elemento de entrada de texto en iOS o Android mostrará el teclado nativo en pantalla, configurado en los ajustes del sistema. En cada versión importante del sistema operativo, la interfaz cambia de maneras sutiles.
Simplemente no puedes reimplementar esta funcionalidad en el navegador web. Las APIs del navegador no te permiten interceptar muchos de los atajos de teclado que necesitas. No tienes acceso a los servicios de texto de macOS ni a la interfaz del teclado nativo de iOS.
Algunas personas intentan reimplementar estas cosas en el navegador, pero siempre se siente horrible de usar. Casi nativo, pero con lag. Nada se ve del todo bien. No puedes seleccionar texto en la página correctamente. Las fuentes se renderizan ligeramente mal. Tengo memoria muscular de atajos de teclado que no funcionan. Lo odio.
- dinkelberg
Las herramientas de desarrollo del navegador se vuelven mucho más inútiles cuando dibujas todo en un canvas. Será triste cuando todo el mundo empiece a usar frameworks que dibujan en canvas. Posiblemente más triste que cuando llegó WebAssembly. Aunque uno podría escribir nuevas herramientas de desarrollo para esos frameworks.
También imagino que esto será un gran retroceso para la accesibilidad web.
- groomlake
Siempre tengo curiosidad por cómo Google, Microsoft y compañía construyen sus aplicaciones web, dado que necesitan funcionar bien en cualquier ordenador, desde una máquina de gama alta hasta una patata con cables.
En mi experiencia, las aplicaciones web de Microsoft (que ahora incluyen muchas de sus aplicaciones de escritorio) son bastante lentas. Incluso el sitio web de Copilot Chat. ¿Qué tan difícil puede ser hacer que un chat y un historial de sesión no sean lentos?
- efficax
Ni una palabra sobre accesibilidad aquí, por supuesto. Si eres ciego, eres ciego al canvas también sin mucho trabajo; es mucho más sencillo hacer accesible el DOM.
- lisperforlife
Yo llamo a esto el problema de la caja azul. Cuando trabajaba en SAP, solía haber un control llamado control de caja azul que incrustaba un navegador (shdocvw) en una aplicación C++/MFC. Casi todos los errores molestos de interfaz provenían de ese control. Ahora veo lo mismo en la otra dirección. Cada 5 años se nos ocurre la brillante idea de usar el navegador como motor de distribución para una interfaz renderizada por una caja. Esto históricamente nunca ha funcionado. Solo quiero recordar applets, controles ActiveX, Flash, Flex (también Flash), Silverlight, Flutter... y ahora esto. El problema son las herramientas de desarrollo, los lectores de pantalla, las extensiones del navegador y todas las demás pequeñas cosas que son difíciles de tener en cuenta.