Pero no siempre usamos React y TypeScript. En el MVP inicial para Canva en 2013 fue efectivamente sin marco. Hubo esta constante prisa al principio para seguir construyendo nuevas características y cualquier cambio arquitectónico al producto tendría que hacerse junto con el desarrollo agresivo de características. La base de código original podría acomodar fácilmente a cinco o más ingenieros trabajando simultáneamente, productivamente. Pero estábamos creciendo muy rápidamente como empresa. Y solo para comparar, en 2013, solo teníamos 14 empleados. Pero para 2017, teníamos más de, bueno, casi 250 empleados.
Entonces, cuando comenzamos a pensar en esta refactorización en 2017, el objetivo principal era permitir que cientos de desarrolladores trabajaran productivamente en la base de código. Entonces, para 2017, cuando comenzamos a investigar, descubrimos que el panorama de JS había cambiado bastante dramáticamente en esos años, como, considera el hecho de que React se lanzó en 2013, y esa fue la misma época en que realmente, ya sabes, desarrollamos nuestro MVP inicial. Entonces puedes empezar a entender cómo había cambiado el panorama. Y entonces tuvimos que encontrar qué bibliotecas funcionaban con los patrones de diseño que habíamos desarrollado y perfeccionado internamente, y finalmente decidimos por TypeScript, MobX y React. React, por supuesto, porque no tenía opiniones, estaba basado en componentes y permitía desarrollo modular para empoderar a nuestros equipos. De manera similar, MobX nos permitió distribuir el estado a través de la base de código con una mejor gestión, más sobre eso en un momento. Y finalmente, TypeScript fue seleccionado por su sistema de tipos flexible, que solo ha demostrado ser cada vez más valioso con el tiempo. En Canva usamos un patrón MVP modificado, al que llamamos patrón de componente presentado en la tienda. Este patrón consta de cuatro partes principales, las tiendas que mantienen el estado y no tienen acceso a nada. Los presentadores operan en esas tiendas, componentes sin estado que no son conscientes de esas tiendas, y fábricas que hacen todo el cableado juntas. A diferencia de MVP, el presentador no manipula el componente directamente y no tiene acceso a nada, y el presentador solo cambia la tienda, lo que a su vez conduce a una nueva representación del componente. Los componentes de React son una capa de vista, son responsables de renderizar la interfaz de usuario en función de las propiedades de entrada y para desencadenar eventos. Las clases de tienda mantienen el estado y son utilizadas por presentadores o componentes. Los presentadores contienen la lógica para los componentes, mutan datos, desencadenan efectos secundarios como análisis, llamadas de servicio, ese tipo de cosas. Los presentadores nos permiten separar la interfaz de usuario de la lógica empresarial, y esto hace que sea mucho más fácil probar y segmentar todo cuando llegas a una empresa tan grande como la nuestra. Y finalmente, la función de fábrica simplemente une todo. Idealmente, las fábricas no tienen efectos secundarios ni otra lógica que el cableado, no deberían ser realmente una razón para probar estas fábricas, solo como unir todo. Entonces, MobX y React nos permitieron crear este patrón masivamente componible en todo el código Y esto realmente nos ha permitido escalar.
De todos modos, volviendo a lo que he estado haciendo en Canva, así que durante los últimos tres años he estado personalmente trabajando en el SDK de aplicaciones, un conjunto de API que permite a los desarrolladores construir experiencias únicas en el editor de Canva. Las aplicaciones son experiencias de usuario distintas. Aquí tenemos el editor de Canva, y en el lado izquierdo tenemos una aplicación de terceros, y todo personalizable por el desarrollador. La cosa es, sin embargo, con la gran libertad para diseñar aplicaciones, viene una gran responsabilidad de UX. Así que queríamos proporcionar a los desarrolladores una biblioteca de interfaz de usuario que hiciera que la construcción de sus aplicaciones fuera muy fácil, mientras cumplía con las estrictas restricciones de diseño de UX de Canva.
Comments