Cuando los chicos de AntD publicaron la versión 5 le eché un vistazo y decidí esperar un poco a que estuviera algo más madura y cuando llegó el momento de migrar, llegaron los problemas, pues AntD elimina los estilos less.

Nosotros nos apoyamos en craco para hacer una adaptación de loaders de less en el proyecto de React, pero claro, esto ya no era posible en la versión AntD5. A continuación quiero detallar el proceso que seguimos en su momento para migrar la versión de AntD4 a AntD5 y no perder los estilos customizados por el camino.

Existe una guía de migración de AntD 4 a AntD 5, donde detallan los cambios entre la versión 4 y 5 de la librería y los pasos a seguir.

Lo primero, bastante obvio, es actualizar el paquete de AntD a su versión 5.

Una vez migrado, vamos a ver que hacemos con less. En nuestro caso, como ya utilizamos un loader de craco de less para babel, no tenemos que hacer nada especial que no aparezca en la guía. Tenemos que añadir el paquete @ant-design/compatible que lo haremos con el comando

yarn add @ant-design/compatible

Desde la versión 5 de AntD, ya no se utiliza less sino unos estilos que se denominan css-in-js, por lo a través de una paquete de compatibilidad tenemos que habilitar los estilos de less. Esto no es 100% necesario, depende de cada proyecto. En nuestro archivo de configuración de craco tenemos que crear lo que han llamado theme y tokens. Viene muy bien explicado en la documentación de forma gráfica donde tenemos los seed que son las semillas del template (si queremos temas claros, oscuros, etc) y de ahí descienden los mapas y tokens que generarán el estilo visual final. Para que todo funcione incluiremos el siguiente código en nuestro inicio, da igual si es craco o cualquier otro sistema de adaptación.

const { convertLegacyToken } = require('@ant-design/compatible/lib');
const { theme } = require('antd/lib');

const { defaultAlgorithm, defaultSeed } = theme;

const seed = {
	...defaultSeed,
	colorPrimary: '#EB4034', //Adaptación de less del color primario
	colorBgContainer: '#FAFEFE' //Adaptación de less del fondo del contenedor
};

const mapToken = defaultAlgorithm(seed);
const v4Token = convertLegacyToken(mapToken);

...

loader: 'less-loader',
options: {
	lessLoaderOptions: {
		lessOptions: {
			modifyVars: v4Token /* {
				'@primary-color': '#EB4034',
				'@layout-body-background': '#FAFEFE',
				'@select-item-selected': 'white'
			} */,
			javascriptEnabled: true
		}
	}
}

En nuestro caso la adaptación era muy sencilla, en lugar de enviar a less las variables sobrescritas, hay que pasar el token generado con esas mismas variables sobrescritas.

El siguiente paso se trata de modificar los archivos less. En nuestro caso teníamos como primera linea del archivo App.less en el raíz de la carpeta src la siguiente línea que es necesaria comentar:

//@import '~antd/dist/antd.less';

Si no quitamos esta linea estamos forzando a traer el less si está en el node_modules, pues en nuestro caso es un monorepo donde hemos empezado a migrar primero un proyecto pequeño y puede existir (en la versión 5 de AntD no debería existir y daría error).

Bien, ya lo tenemos listo pero el theme nos aparece en azul. Hasta aquí fue todo sencillo ya que el siguiente paso no es como tal de la migración sino de leer la nueva documentación de AntD5. La sobrescritura de variables en esta nueva versión se hace a través de un ConfigProvider. En nuestro proyecto ya utilizabamos dicho ConfigProvider para forzar el locale a español.

En nuestro proyecto, el ConfigProvider engloba al Router que es el React-Router de la aplicación de la siguiente manera:

<ConfigProvider
	locale={es_ES}
	theme={{
		algorithm: theme.defaultAlgorithm,
		token: { colorPrimary: '#EB4034', colorBgLayout: '#FAFEFE' }
	}
}>
	</Routes>
</ConfigProvider>

Espero que os haya servido de ayuda.

Firebase se podría decir que es un framework de trabajo de Google que nos ayuda con esto y con muchas cosas más. Aunque tiene soporte para web, está más orientada al desarrollo móvil iOS y android, para que los desarrolladores no tengan que preocuparse de desarrollar y mantener un servidor con su backend, además de ofrecer herramientas para la interconexión entre la app y el backend.

Firebase dispone de diferentes funcionalidades, entre las que se encuentran:

• Base de datos en tiempo real: una base de datos gestionada por Google basada en JSON que nos permite, mediante eventos, tener funcionalidades en tiempo real. También nos permite llevar una gestión automática de los datos en el caso de que la aplicación se encuentre sin conexión, sincronizando todos los cambios una vez haya recuperado dicha conectividad.
• Sistema de autentificación de usuarios tanto por email/contraseña como por otros sistemas como facebook, twitter, google, github, etc.
• Cloud Messaging para el envío de notificaciones push a los dispositivos de una forma sencilla.
• Un sistema de almacenamiento y sincronización de ficheros con el dispositivo.
• Un sistema de hosting estático, ideal para realizar páginas estáticas o utilizarlo a modo de CDN de la app.
• Sistema de reporting de errores.
• Laboratorio de pruebas, para realizar pruebas en los dispositivos.
• Funciones lambda basadas en NodeJS para realizar mediante eventos ciertas operaciones.
• Conexión con AdMob para la monetización de la aplicación.
• Configuración remota de la aplicación, pudiendo cambiar dinámicamente funcionalidades de la misma.

Lo más llamativo de Firebase es el Free Tier que ofrece, puesto que un proyecto para arrancar es gratuito, pudiendo dar el salto al pago cuando la aplicación haya crecido lo suficiente. Como opciones de pago disponemos de una tarifa plana de 25$ al mes que nos ofrece lo necesario para funcionar en proyectos de mediana envergadura. También disponemos de un «pago por uso» que nos permite pagar por aquellos recursos que utilicemos y que nos permitirá, de una forma escalonada, ir aumentando los costes poco a poco, según va creciendo nuestra aplicación.