Lanzamiento de Uppy 1.0: solución moderna de subida de archivos

Artur Paikin

Desarrollador front-end y diseñador de interfaces · Londres, Reino Unido · Mostrar bio

Hoy, tras tres años de desarrollo, lanzamos la versión 1.0 de Uppy, nuestro gestor de subidas de archivos para navegadores web.

Un poco de historia

Hace tres años, Transloadit estaba listo para reemplazar su plugin de subida y procesamiento de archivos para navegadores, basado en jQuery, por algo más moderno. Publicaron una oferta de trabajo EN (English) en busca de personas que lo construyeran:

En general, buscamos productos pulidos, bien probados y elaborados con esmero, que sean un placer de usar y con los que dé gusto trabajar. Así que para este puesto no solo importa que sepas JavaScript, sino también cómo hacer que las cosas se vean espectaculares y funcionen bien para los usuarios finales.

A tu disposición tendrás tiempo, concentración y al equipo principal, listo para darte feedback, orientación y cualquier otra cosa que necesites.

Poco después vi un retuit de esta vacante en mi cronología y decidí postularme. Así, en pocas palabras, fue como me involucré con Uppy en las primeras etapas del proyecto.

Al principio, la idea era construir un gestor de subidas propietario que funcionara exclusivamente con el servicio comercial de Transloadit, pero cambiamos de opinión rápidamente. Sentíamos que nuestra versión de un gestor de subidas podía tener un impacto real si la poníamos al alcance de más gente. Así que, igual que Transloadit ya había hecho antes con el protocolo tus⁠, decidimos convertir Uppy en una solución de código abierto, libre para que cualquiera la use y la modifique. El soporte para Transloadit pasó a ser un plugin opcional.

Tres años, 16.000 stargazers⁠, apariciones en Smashing Magazine⁠, JavaScript Daily⁠, Product Hunt⁠ y SurviveJS⁠, y una comunidad próspera después: ¡no podríamos estar más felices de lanzar por fin Uppy 1.0!

¿Por qué crear Uppy en primer lugar?

De vez en cuando nos preguntan por qué haría falta algo más allá de <input type="file">. ¿Por qué meter JS en esto? La verdad es que, en muchos casos, <input type="file"> es suficiente.

A veces, sin embargo, quizá quieras añadir una zona de arrastrar y soltar con vistas previas de archivos o un informe del progreso de subida que funcione bien en todos los navegadores. El soporte para webcam puede ser útil. Además, seleccionar archivos directamente desde tu Instagram y tu Dropbox, sin pasar primero por tu teléfono móvil, puede ahorrar mucho ancho de banda y batería (las subidas con Uppy y Companion ocurren de servidor a servidor). En todos esos casos, necesitarás algo más que una simple etiqueta <input type="file">.

Mira el lanzamiento de Uppy v1.0 en Product Hunt⁠.

Luego está el tema de los archivos grandes, donde poder reanudar es esencial. Hoy en día resulta básicamente inaceptable tener que reiniciar tu subida desde cero solo porque tu WiFi tuvo un tropiezo. Por eso Uppy usa el protocolo tus, el protocolo abierto para la subida reanudable de archivos.

Todo esto mejora significativamente la experiencia de usuario, hasta el punto de que más archivos llegan realmente a tu plataforma y menos usuarios se hartan y cierran la pestaña. Estas cosas se vuelven importantes cuando la subida es un aspecto central de tu sitio web o aplicación. Uppy también se puede desplegar con nada más que una etiqueta JS, usando un <form> existente como respaldo (¡para soportar IE6! 😄) y tu servidor Apache/Nginx.

Formar un equipo para crear Uppy

Al principio, el equipo de Uppy estaba formado por mí⁠ y Harry⁠. Como me mudé a Nueva York por un tiempo, con la mayor parte del equipo en Europa, nos acostumbramos a tener llamadas muy tempranas (o muy tardías) con diferencias horarias considerables.

Yo trabajaba sobre todo en el frontend y construía lo que hoy se conoce como el Dashboard⁠, el plugin de Uppy más completo y más utilizado. Harry se encargó de la primera versión de lo que entonces se llamaba Uppy Server (ahora Companion), responsable de seleccionar archivos desde Google Drive, Instagram, URL remotas, etc.

En 2016, el equipo de Transloadit tuvo un encuentro en Ámsterdam, donde acabé estando presente⁠ de una forma de lo más inusual (en el centro):

Más adelante ese año, Ife⁠ también se unió al equipo de Uppy y asumió todo el trabajo de Companion.

Construir correctamente todas las funciones previstas de Uppy llevó mucho tiempo. Así que, dos años después de conseguir el proyecto en Transloadit, yo mismo estaba escribiendo una oferta de trabajo EN (English), ya que Uppy empezaba a tomar proporciones serias. Fue entonces cuando Renée⁠ se unió al equipo (anécdota curiosa: nos conocimos colaborando en GitHub en las librerías Choo y Yo-Yo) para ayudarnos con los componentes de React para Uppy, la integración con Redux, el plugin Golden Retriever y muchas más funciones geniales.

Por aquel entonces, Alex⁠ también se sumó para asesorarnos en el diseño de la interfaz, completando el equipo de Uppy tal y como sigue hoy.

En el verano de 2017, el equipo de Transloadit tuvo otra reunión. Esta vez en Berlín, donde trabajamos en el plugin Golden Retriever⁠, que ayuda a recuperar archivos después de que el navegador se cierre inesperadamente. También jugamos a Mario Kart (¡perdí, a pesar de toda la práctica!) y nos disfrazamos de personajes del juego:

Lee más sobre Golden Retriever y aquel encuentro del equipo⁠. Golden Retriever tuvo buena prensa en Reddit y Hacker News porque va mucho más allá para hacer que las cosas sean absurdamente fiables. En el video de demostración, nos ves hacerle kill -9 a nuestro navegador, reiniciar, y la subida continúa justo donde se quedó. ¡Toda una primicia!

Reto aceptado: solo 30 días para el despegue

Llevábamos bastante tiempo posponiendo la versión 1.0. Siempre hay una función más que te gustaría añadir u otro error que quieres corregir antes de dar algo por listo para una versión 1.0. La verdad es que Uppy ya lleva un tiempo usándose en producción⁠ y, aunque iteramos y cambiamos cosas con frecuencia, la API se había estabilizado en gran medida.

Así que, hace cosa de un mes, decidimos dar el paso y anunciamos un Mes de Uppy⁠ dentro de Transloadit. Esto significó que todos los miembros del equipo, incluidos los que no trabajan principalmente en Uppy (el equipo principal del protocolo tus, nuestros equipos de SDK, así como nuestros ingenieros de infraestructura y de API, diseñadores, redactores de contenido y los propios fundadores), arrimaron el hombro e hicieron su parte para asegurar el despegue en treinta días. También le pedimos a Evgenia⁠ que se uniera a nosotros durante el mes para echar una mano con el trabajo de frontend. Cada semana teníamos una llamada en la que revisábamos el tablero del proyecto Uppy 1.0 y hablábamos de nuestro progreso:

Estos son algunos de los aspectos destacados de lo que hemos conseguido entregar durante un mes dedicado a todo lo relacionado con Uppy:

• Un nuevo diseño para el sitio web de Uppy.
• Soporte de localización y paquetes de idioma⁠ para ruso, alemán, neerlandés y francés (con más en camino desde la comunidad). Kevin⁠ y yo escribimos un script que recorre todos los plugins de Uppy en el repositorio y genera un único en_US canónico que puede servir de base para otras traducciones. El script incluso comprueba las cadenas que faltan en todas las traducciones, para que sepas cuáles actualizar.
• Arrastrar y soltar en el Dashboard⁠, al ser una parte importante de Uppy, se ha mejorado significativamente con soporte para pegar archivos y enlaces tanto desde el navegador como desde el dispositivo. ¡Así que ahora puedes, por ejemplo, arrastrar un enlace o una imagen desde otra pestaña hasta Uppy!
• Soporte básico para React Native (Beta)⁠: Uppy funciona en un entorno de React Native, tenemos un ejemplo con subidas reanudables mediante el protocolo tus y soporte para el componente de Expo @uppy/react-native para seleccionar imágenes, videos, documentos y archivos desde URL remotas con la ayuda de Companion.
• Lavado de cara en el diseño⁠: la interfaz del Dashboard ha mejorado notablemente en los últimos días: se han añadido nuevos iconos, además de pulir la tipografía, organizar mejor los colores, ampliar las áreas en las que se puede hacer clic y más.
• Se han detectado muchos problemas de accesibilidad.
• Robodog ahora admite un Dashboard en línea⁠.
• Se ha reorganizado la estructura de la documentación⁠.
• Ahora se pueden cancelar correctamente las Assemblies de Transloadit⁠.
• El progreso de subida se informa con mayor precisión con la subida XHR y Companion⁠.
• El progreso de subida ha mejorado en general⁠.
• Se han refactorizado los scripts de npm⁠: ¡sí, eso es importante!
• Y lo más loco de todo: nuestro equipo de contenido ha estado imparable y ha publicado un post cada día⁠ durante los últimos treinta días para mantenerte al tanto de nuestro progreso diario.

Nota: Robodog está en desuso. Para nuevas integraciones, usa el plugin de Transloadit⁠ de Uppy (interfaz del Dashboard o una interfaz personalizada).

¿Qué funciones llegaron a 1.0? ¿Y cuáles no (todavía)?

Lista de funciones de Uppy 1.0:

• Interfaz de usuario elegante
• Ligero y con pocas dependencias
• Un núcleo pequeño con arquitectura modular: todo es un plugin
• Usa JavaScript moderno, con versiones ES5 transpiladas disponibles en lib y versiones minificadas para uso directo por los navegadores en dist
• Se puede usar como bundle directamente desde una CDN, o como módulo para importar
• Subidas de archivos reanudables mediante el estándar abierto tus
• Subidas directas a S3
• Soporte para webcam
• Selección de archivos desde Dropbox, Google Drive e Instagram, dejando que los servidores hagan el trabajo pesado mediante Companion
• Robusto: reintentos para absolutamente todo
• Creado pensando en la accesibilidad (todavía no es perfecto, pero mejoramos constantemente)
• Recuperación de archivos (tras un cierre inesperado del navegador o una navegación accidental) mediante Golden Retriever
• Soporte de idiomas: cambia de idioma fácilmente o aporta tus propios textos
• Compatible con React (React Native en beta)
• Funciona de maravilla en móviles
• Funciona de maravilla con Transloadit y también sin él

También dejamos dos funciones «atrás»:

Ofrecer atajos azucarados para usuarios novatos (ajustes preestablecidos)

Sentíamos que Uppy es lo bastante sencillo de usar y que los ajustes preestablecidos podrían acabar restándole claridad. Robodog sí ofrece integraciones con menos «código repetitivo», pero esto se hizo como envoltorio en lugar de como ajuste preestablecido.

Interfaz personalizable con un tema por defecto atractivo

En lugar de optar por { theme: 'dark' }, solo ofrecemos personalización mediante CSS. Por ejemplo, es factible utilizar la media query prefers-color-scheme para eso.

Por último, nuestra función de «seleccionar archivos desde fuentes remotas» no está tan completa como quizá nos habría gustado, ya que actualmente no incluye soporte para Google Photos, Box o Facebook. Esperamos que sean cosas en las que la comunidad pueda ayudar.

¿Qué sigue para Uppy?

¿Significa esto que Uppy es perfecto? ¡No!

Todavía hay bastantes issues⁠ y elementos en nuestro backlog, y ya estamos planificando Uppy 1.1⁠. También queremos quizá lanzar un plugin para WordPress, añadir recorte de imágenes y mucho más, pero hoy lanzamos 1.0 porque contiene prácticamente todas las funciones que nos propusimos implementar. Todas estas funciones están documentadas y no esperamos que sus API cambien. Si, en algún momento, necesitan cambiar, tendremos que gestionarlo con cuidado. Por ejemplo, publicando una versión 2.0 y haciendo todo el ruido que eso conlleva.

Uppy ya tiene un uso serio por parte de una comunidad seriamente grande y de varias empresas serias. Así que, con 1.0, ahora también te estamos diciendo: oye, nos tomamos esto en serio y no vamos a cambiarte las cosas por debajo de tu aplicación, así sin más. Además, si todavía no tienes a Uppy impulsando tus subidas de archivos, ¡ahora es el mejor momento para probarlo!

Esperamos que tus usuarios disfruten de Uppy 1.0 tanto como nosotros hemos disfrutado diseñándolo y construyéndolo. Ver tu apoyo y tus contribuciones mientras lo hacíamos marcó toda la diferencia. ¡Muchísimas gracias! Y si pudieras dejar un comentario en ProductHunt⁠, Hacker News⁠ o Reddit⁠ y darnos tu opinión más brutal, ¡significaría muchísimo para nosotros!

💡 Este post apareció primero en el blog de Uppy⁠.