Construir un SDK para navegadores web: 3 cosas que hemos aprendido
Los SDK para navegadores son una forma estupenda de llevar tu proyecto a la web y simplificar la forma en que los desarrolladores de aplicaciones acceden a tus servicios.
De hecho, varias grandes empresas han creado una biblioteca en torno a sus API de esta forma.
Amazon, por ejemplo, permite a los desarrolladores integrar servicios AWS en sus aplicaciones web mediante código JavaScript que se ejecuta en un navegador. Facebook, Stripe y Twilio están haciendo cosas similares.
En Microblink, la mayoría de nuestros productos funcionan ahora en navegadores. Queríamos que los desarrolladores pudieran crear experiencias sencillas pero potentes directamente en el front-end de sus aplicaciones web, y queríamos que nuestros usuarios finales disfrutaran de esas experiencias sin tener que salir nunca de su pestaña.
El mayor problema al que nos enfrentábamos con este objetivo era: todos nuestros productos requieren un intenso procesamiento de imágenes en el dispositivo, algo que los navegadores no podían manejar… hasta hace poco.
Consejo nº 1: WebAssembly es el camino a seguir si tu código es de cálculo intensivo
Antes, lo único que podían hacer los navegadores era mostrar páginas. Hoy, te permiten codificar, editar vídeos y jugar dentro de ellos.
Gran parte de este aumento del rendimiento se produjo con la adopción generalizada de WebAssembly, un nuevo estándar web que se ejecuta junto a JavaScript para compilar código de bajo nivel de modo que los navegadores puedan ejecutarlo más rápidamente. (1)
Debido a su formato binario compacto, WebAssembly es ideal cuando necesitas crear experiencias similares a las nativas en la web. En nuestro caso, se trata de extracción de datos en tiempo real con una gran cantidad de inteligencia artificial bajo el capó.
Como puedes ver, WebAssembly es rápido. La compleja lógica utilizada para detectar, reconocer y leer tarjetas de crédito del flujo de vídeo de un usuario funciona a la perfección, a pesar de la baja resolución de la cámara de un portátil.
Para nuestros usuarios finales, esto hace que registrarse o pagar algo online sea tan fácil como escanear los datos, con toda la experiencia a sólo un enlace de distancia.
Aparte de mejorar el rendimiento, compilar tu código a WebAssembly nos aporta:
- Mayor seguridad: WebAssembly se ejecuta en un entorno seguro y aislado, y es mucho más difícil de aplicar ingeniería inversa que JavaScript debido a su formato de código de bytes.
- Accesibilidad e interoperabilidad: WebAssembly se ha convertido recientemente en el estándar oficial del Consorcio World Wide Web (W3C) (al igual que HTML y CSS).
- Portabilidad: WebAssembly también puede ejecutarse fuera del navegador, en diversos sistemas operativos y arquitecturas de conjuntos de instrucciones.
El código fuente de nuestros SDK está escrito en C++, pero puedes compilar WebAssembly desde Rust, Go, AssemblyScript y muchos otros lenguajes. otros lenguajestambién.
Aquí tienes una visión general de cómo es el proceso. Verás que hemos elegido Chrome para ilustrar nuestro punto de vista, ya que es el navegador elegido por aproximadamente dos tercios de los usuarios de Internet de todo el mundo. (2)
Aun así, tenemos que pensar en el tercio restante. Y eso significa desarrollar teniendo en cuenta la compatibilidad entre navegadores.
Consejo nº 2: Resuelve los problemas de compatibilidad de los navegadores mejorando progresivamente tu SDK
Trabajar con nuevas API de navegador o tecnologías como WebAssembly a menudo hará que algunas de tus funciones fracasen en determinados navegadores, ya sea porque están bloqueadas por algo o porque no son compatibles en absoluto.
Por ejemplo, llamar a la API WebRTC para procesar vídeo en tiempo real en Chrome no funcionará en ningún iPhone con iOS 14.2 o anterior porque WebView de Apple no lo admite.
Supón que estás creando un SDK de videoconferencia para la web. Ahora tienes un problema entre manos porque los usuarios de iPhone que no hayan actualizado su software en unos meses no podrán unirse a una reunión en nada que no sea Safari.
Nos enfrentamos al mismo problema con la compatibilidad con WebRTC y, para empezar, puede que algunos de nuestros usuarios no tengan webcam. La forma en que resolvimos este problema es la misma que se utiliza ante cualquier callejón sin salida: dando un paso atrás y volviendo a establecer prioridades.
La mejora progresiva en la práctica
En el desarrollo web, la mejora progresiva significa que primero ofreces las funciones esenciales a todo el mundo, mientras que la funcionalidad más avanzada sólo está disponible para los usuarios de los navegadores más modernos.
Sabemos que nuestra función principal no es el escaneado en sí, sino la extracción de datos que le sigue. Necesitamos obtener una imagen del documento, pero un usuario puede simplemente subir una desde la galería en lugar de lanzar la webcam.
Esta funcionalidad básica es algo que ven todos nuestros usuarios. Una vez cubierto lo esencial, comprobamos si podemos acceder a la cámara para escanear realmente el documento.
Te ayudará si trazas el recorrido del usuario desde el principio y determinas qué ocurre si una función no se carga y cuándo. Así es como hemos diseñado nuestro flujo antes de construir el SDK:
Detectar si un navegador admite una función
Antes de establecer un nivel básico de experiencia de usuario, tenemos que saber qué funciones podrán ejecutarse en todos los navegadores y cuáles no.
Para ello, puedes implementar tus propias pruebas o utilizar una biblioteca existente como wasm-feature-detect de Google. Nosotros la utilizamos para cargar un paquete WebAssembly adecuado a nuestros usuarios en tiempo de ejecución, desde el más compatible hasta el de mayor rendimiento. Aquí tienes un ejemplo de cómo comprobar si SIMD, una de las características de WebAssembly, es compatible.
<script type="module">
import { simd } from "https://unpkg.com/wasm-feature-detect?module";
simd().then(simdSupported => {
if (simdSupported) {
/* SIMD is supported */
} else {
/* SIMD isn't supported */
}
});
</script>Realiza una prueba entre navegadores para cada una de tus funciones, crea una lógica de solución para la falta de compatibilidad y, antes de que te des cuenta, estarás mejorando progresivamente tu SDK.
Consejo nº 3: Evita el trabajo aburrido con la metaprogramación
Si planeas crear varios SDK (o incluso aplicaciones web) que compartan una funcionalidad similar, quizá te interese la metaprogramación.
La metaprogramación es una técnica en la que un programa informático trata a otros programas como sus datos. Te permite automatizar un trabajo laborioso y a menudo tedioso escribiendo programas que a su vez escriben programas.
Por ejemplo, nuestros SDK para navegadores tienen una arquitectura similar, pero resuelven problemas totalmente distintos. La metaprogramación nos ayuda a transformar los archivos JavaScript existentes e incluso a generar otros nuevos para cada SDK:
- Generar código boilerplate a partir de un único metarepositorio
- Añade una nueva función una vez y haz que funcione en todas partes
- Corrige un error en un lugar y cambia el comportamiento no deseado en todos los SDKs
- Cambia las claves de licencia en bloque, modifica las rutas a los archivos WebAssembly, etc.
Utilizamos dos técnicas de metaprogramación diferentes, según el alcance de los cambios que haya que realizar: la metaprogramación de plantillas (TMP) y la manipulación del árbol sintáctico abstracto (AST).
La metaprogramación de plantillas resulta útil cuando necesitas generar varios archivos JavaScript a partir de un único archivo genérico.
Utilizar AST para manipular el código es útil para modificar archivos de código fuente existentes respetando su estilo y estructura de código.
Veremos más detenidamente cómo puedes aplicar estas dos técnicas en una futura entrada del blog.
Navegadores, el lugar donde estar
A medida que los navegadores sigan evolucionando, veremos un aumento de los SDK que potenciarán experiencias más sencillas y personalizadas en toda la web.
Esperemos que los hallazgos que hemos expuesto te ayuden a construir el tuyo propio, teniendo en cuenta el rendimiento, la accesibilidad y la ingeniería inteligente.
¿Te gusta trabajar en increíbles SKD en navegador? Ven a trabajar con nosotros
