Creación de un SDK para navegadores web: tres cosas que hemos aprendido
Los SDK para navegadores son una forma estupenda de llevar tu proyecto a la web y simplificar el acceso de los desarrolladores de aplicaciones a tus servicios.
De hecho, varias grandes empresas han creado una biblioteca en torno a sus API de esta manera.
Amazon, por ejemplo, permite a los desarrolladores integrar servicios de AWS en sus aplicaciones web mediante código JavaScript que se ejecuta en un navegador. Facebook, Stripe y Twilio están haciendo algo similar.
En Microblink, la mayoría de nuestros productos funcionan ahora en los 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 enfrentamos con este objetivo fue que todos nuestros productos requieren un procesamiento de imágenes muy intenso en el dispositivo, algo que los navegadores no podían gestionar… hasta hace poco.
Consejo n.º 1: WebAssembly es la mejor opción si tu código requiere un gran esfuerzo de cálculo
Antes, lo único que podían hacer los navegadores era mostrar páginas. Hoy en día, te permiten programar, editar vídeos y jugar a videojuegos directamente en ellos.
Gran parte de esta mejora en el rendimiento se debió a la adopción generalizada de WebAssembly, un nuevo estándar web que funciona junto con JavaScript para compilar código de bajo nivel, de modo que los navegadores puedan ejecutarlo más rápidamente. (1)
Gracias a su formato binario compacto, WebAssembly es ideal cuando se necesita crear experiencias similares a las nativas en la web. En nuestro caso, se trata de la extracción de datos en tiempo real con una gran cantidad de inteligencia artificial en segundo plano.
Como puedes ver, WebAssembly es rápido. La compleja lógica que se utiliza para detectar, reconocer y leer tarjetas de crédito a partir de la transmisión de vídeo de un usuario funciona con una fluidez increíble, a pesar de que la imagen de la cámara del portátil es de baja resolución.
Para nuestros usuarios finales, esto hace que registrarse o pagar algo por Internet sea tan fácil como escanear los datos, y toda la experiencia está a solo un clic de distancia.
Además de un mejor rendimiento, compilar el código a WebAssembly nos ofrece:
- Mayor seguridad: WebAssembly se ejecuta en un entorno seguro y aislado, y resulta mucho más difícil de someter a ingeniería inversa que JavaScript debido a su formato de código byte.
- 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 conjunto de instrucciones.
El código fuente de nuestros SDK está escrito en C++, pero también puedes compilar WebAssembly desde Rust, Go, AssemblyScript y muchos otros lenguajes.
A continuación te ofrecemos una visión general de cómo es el proceso. Verás que hemos elegido Chrome para ilustrar nuestro argumento, ya que es el navegador preferido 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 con los navegadores mejorando progresivamente tu SDK
El uso de nuevas API de los navegadores o tecnologías como WebAssembly suele provocar que algunas de tus funciones no funcionen correctamente en determinados navegadores, ya sea porque algo las bloquea o porque simplemente no son compatibles.
Por ejemplo, llamar a la API de WebRTC para procesar vídeo en tiempo real en Chrome no funcionará en ningún iPhone con iOS 14.2 o una versión anterior, ya que el WebView de Apple no lo admite.
Imagina que estás desarrollando un SDK de videoconferencia para la web. Ahora te enfrentas a un problema, ya que los usuarios de iPhone que no hayan actualizado su software en los últimos meses no podrán unirse a una reunión salvo que utilicen Safari.
Nos encontramos con el mismo problema con la compatibilidad con WebRTC y es posible que algunos de nuestros usuarios ni siquiera dispongan de una cámara web. La forma en que solucionamos este problema es la misma que se aplica ante cualquier callejón sin salida: dando un paso atrás y replanteándonos las prioridades.
La mejora progresiva en la práctica
En el desarrollo web, la mejora progresiva consiste en ofrecer primero las funciones esenciales a todos los usuarios, mientras que las funcionalidades más avanzadas solo están disponibles para los usuarios de los navegadores más modernos.
Sabemos que nuestra función principal no es el escaneo en sí, sino la extracción de datos que viene a continuación. Necesitamos obtener una imagen del documento, pero el usuario puede simplemente subir una desde la galería en lugar de activar la cámara web.
Esta funcionalidad básica es algo que ven todos nuestros usuarios. Una vez que hemos cubierto lo esencial, comprobamos si podemos acceder a la cámara para escanear el documento.
Te resultará útil trazar el recorrido del usuario desde el principio y determinar qué ocurre si una función no se carga. Así es como hemos diseñado nuestro flujo antes de desarrollar el SDK:
Detectar si un navegador es compatible con una función
Antes de establecer un nivel básico de experiencia de usuario, necesitamos saber qué funciones funcionarán y cuáles no en los distintos navegadores.
Para ello, puedes implementar tus propias pruebas o utilizar una biblioteca ya existente, como «wasm-feature-detect» de Google. Nosotros la utilizamos para cargar el paquete de WebAssembly adecuado para nuestros usuarios en tiempo de ejecución, desde el más compatible hasta el de mayor rendimiento. A continuación te mostramos un ejemplo de cómo comprobar si se admite SIMD, una de las características de WebAssembly.
<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 en distintos navegadores para cada una de tus funciones, diseña soluciones alternativas para los casos en los que no haya compatibilidad y, antes de que te des cuenta, estarás mejorando progresivamente tu SDK.
Consejo n.º 3: Evita el trabajo monótono gracias a la metaprogramación
Si tienes pensado crear varios SDK (o incluso aplicaciones web) que compartan funcionalidades similares, quizá te interese informarte sobre la metaprogramación.
La metaprogramación es una técnica en la que un programa informático trata a otros programas como si fueran sus datos. Permite automatizar tareas que requieren mucho tiempo y que a menudo resultan tediosas, mediante la creación de programas que, a su vez, escriben otros 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 con el fin de:
- Generar código repetitivo a partir de un único metarepositorio
- Añade una nueva función una sola vez y haz que funcione en todas partes
- Corregir un error en un solo lugar y modificar el comportamiento no deseado en todos los SDK
- Modificar claves de licencia de forma masiva, modificar las rutas de acceso a los archivos WebAssembly, etc.
Utilizamos dos técnicas diferentes de metaprogramación, en función del alcance de los cambios que hay que realizar: la metaprogramación con plantillas (TMP) y la manipulación del árbol de sintaxis abstracta (AST).
La metaprogramación con plantillas resulta muy útil cuando necesitas generar varios archivos JavaScript a partir de un único archivo genérico.
El uso de AST para manipular código resulta útil a la hora de modificar archivos de código fuente existentes sin alterar su estilo ni su estructura.
En una próxima entrada del blog analizaremos con más detalle cómo puedes poner en práctica estas dos técnicas.
Los navegadores, el lugar donde hay que estar
A medida que los navegadores sigan evolucionando, es inevitable que veamos un aumento de los SDK que permitirán ofrecer experiencias más sencillas y personalizadas en toda la web.
Esperamos que las conclusiones que hemos expuesto anteriormente te ayuden a crear uno propio, teniendo en cuenta el rendimiento, la accesibilidad y una ingeniería inteligente.
¿Te gusta trabajar en increíbles SDK para navegadores? Ven a trabajar con nosotros
