Base theme: un side-project no tan side
Un diseño para Tiendanube consiste en aproximadamente 25 carpetas, 160 documentos y unas 15.500 lineas de código. Si esto lo multiplicamos por 10 diseños, se vuelve una cantidad inmensa de código que mantener, modificar e iterar.
Día a día trabajamos en este código, y descubrimos que si queríamos ganar agilidad y velocidad a la hora de implementar nuevos features o realizar iteraciones, necesitábamos disponer de las siguientes características en nuestros diseños:
- Todo el código tenía que responder a una misma lógica, estructura y sintaxis. Independientemente del diseño particular, del autor y del tiempo en que se desarrolle.
- Todos los diseños deberían partir de una misma base.
- Todos los diseños deberían tener y disponer de los mismos componentes, de forma que la modificación de un componente es igual en todos.
- La documentación pública del código debería ser la misma y aplicar para todos los diseños.
Para disponer de esto necesitábamos generar una base como punto de partida para aplicarla a todos nuestros diseños. A mediados del 2019 comenzamos a pensar en este desarrollo como un side-project, ya que no entendíamos con claridad cuál iba a ser su impacto.
Queríamos resolver muchos problemas y disponíamos de poco tiempo para ofrecer una solución excelente. ¡Por algo había que empezar!
Paramos la pelota y armamos una estructura de elementos que definen ¿qué es un Diseño o Theme para nosotros?, cómo se compone y qué proporciona.
Teníamos la base de código que siempre utilizábamos pero que casi nunca se modificaba, que contenía el framework que nos daría la flexibilidad para hacer “cualquier cosa”, jQuery como biblioteca de JavaScript, componentes como un slider, Instagram, modal, y algunos más que no necesitaríamos cambiar a futuro: buscador, carrito ajax, calculador de envíos, cuotas, etc.
Por otro lado, teníamos un conjunto de archivos HTML, JS, CSS, SCSS, IMGs, SVGs propios de cada diseño, que sí iban a cambiar, pero con determinadas reglas para poder tener una coherencia. Los llamamos “Styles”.
A estos archivos se les aplica una capa de configuraciones, que nosotros llamamos “las settings” y nuestros clientes las conocen como “Personalización del diseño”. Desde ellas, pueden configurar su diseño, pueden subir sus imágenes, banners, sliders, textos, mostrar u ocultar componentes en todo el flujo de compra. Como resultado de “las settings” que personalizan los “Styles” nuestros clientes pueden lograr una gran cantidad de layouts diferentes dentro del mismo diseño.
BASE theme
El desafío era grande, ¡la motivación también!
Decidimos crear un esqueleto funcional que nos dé la posibilidad de desarrollar nuevos diseños de una forma mucho más ágil, rápida y eficaz. Así nace la idea del Base theme.
Imaginamos todos los componentes que podríamos llegar a necesitar, tanto los que teníamos en los diseños que ya teníamos como aquellos que nos gustaría tener. Listamos muchas ideas y priorizamos para tener un objetivo concreto lo más chico posible. Descartamos lo que no veníamos esencial y desde el minuto 1 tomamos decisiones moviéndonos muy rápido.
Definimos utilizar Bootstrap 4 pero únicamente su grilla y los “Helpers & Utilities” (de esta forma nos ahorramos cargar el 89% del código que no necesitábamos), realizamos una selección de plugins para utilizar y planificamos todo el desarrollo. Un slider super flexible como iDangerous Swiper, Fancybox para las imágenes de los productos y jQuery para diferentes comportamientos.
También determinamos la estructura de archivos, carpetas y componentes.
Definimos día por día las tareas de cada uno de los integrantes del equipo. Y luego de dos semanas teníamos lo que desde ese momento llamamos el “80/20 de los diseños”: Un entregable funcional y completo. Con mucho por testear y ajustar.
Generamos componentes con suficiente flexibilidad para que se puedan adaptar a diferentes diseños sin que pierdan eficiencia en su usabilidad. Trabajamos con TWIG, aplicando: snipplets, includes y embeds. Acá podes leer sus diferencias.
Nos tomó 2 semanas más para completarlo. Se aplicó un diseño muy sencillo, para testear la estructura y los flujos, y luego lo publicamos en un repositorio público en Github para que nuestros Partners puedan utilizarlo como punto de partida de sus diseños a medida.
Que caracteriza al Base theme:
- Máxima componentización (a través de TWIG)
- Framework y plugins populares con documentación pública
- Performance hasta 90 (google pagespeed)
- Mobile first
- Código super comentado y ordenado
Qué sea público en serio
La documentación de los diseños de Tiendanube hasta ese momento no tenia consistencia. Cada tutorial o feature estaba desarrollado sobre el diseño para el que había sido pensado, por lo que si se necesitaba aplicar a otro diseño, los pasos, las carpeta y en muchos casos los códigos eran diferentes.
Disponer de una base de la cual partirían todos nuestros diseños hacia más fácil documentar cada una de las iteraciones que realizaríamos. Actualizamos toda la documentación pública que se encuentra en docs.tiendanube.com y docs.nuvemshop.com.br
Con un nuevo diseño y una nueva estructura , subimos más de 70 artículos en 2 idiomas.
Separamos el contenido pensando en las diferentes instancias en las que un diseñador o front-end developer pueda necesitar de nuestra ayuda:
- Empezá para los que necesiten entender el lenguaje y la lógica de nuestro código.
- Construí para aprender y entender cada parte de nuestro Base theme
- Potenciá con una serie de tutoriales y artículos para incorporar diferentes funcionalidades a los diseños.
Cada articulo explica una parte el código de nuestro Base theme, logrando un consistencia total.
Permitimos que nuestros Partners tengan un lugar donde despejar dudas y disponer de ayuda valiosa a la hora de realizar sus diseños a medida.
Nuevamente gracias al equipo, que sin todos y cada uno de ellos, no podriamos haber hecho todo esto! Federico Iglesias, Bruno Navello y Valmir Alfonso.
