Frontend, no te dejes seducir por el futuro

Nos dejamos seducir por el futuro sin tener en cuenta que existe gente en el pasado. A todos nos gusta utilizar el último Framework, con el último lenguaje de moda. Los que nos encontramos en este sector queremos aprender y crecer profesionalmente continuamente. Pero esas ilusiones no deben llevar a decisiones irracionales. En la actualidad tenemos herramientas bien testeadas que van como anillo al dedo con los navegadores de todos los colores y épocas. Los brochazos de modernidad deben ser pinceladas milimétricas. Fáciles de aprender por ti y el equipo, compatible con la tecnología que conoces y sencillo de retirar en caso de desastre.

Te pongo en situación real. Un cliente, jefe o jefecillo de turno, te encarga que realices una página web. Supongamos que es para un cliente que quiere venden cajas de vinos. Tendrá algunos elementos dinámicos, como una sencilla calculadora para obtener el precio total dependiendo de las cajas, y una pasarela de pago. ¿Limitaciones? Salvo la fecha de entrega, ninguna. Todo un sueño. Vale, te frotas las manos y con toda tu ilusión empiezas a explorar las tecnologías que hay en el mercado. Necesitarás un Framework de HTML. ¡Vaya! Bootstrap 4 esta recién sacado del horno. Y ahora consigues algunos PDFs con las novedades de ES6 y CSS3. Ya que estamos, montamos un Backend con un API Rest que podamos consumir para mejorar la experiencia. Y para el Frontend… ¿VueJS? Te pones a trabajar.

Después de un mes de duro trabajo, toca enseñar el trabajo. El cliente se sienta en la sala de reuniones, le damos la dirección donde esta subida la web, abre su portátil, introduce carácter a carácter el dominio… y la web se desmonta. Y no solo eso, la calculadora no funciona, algunas páginas están en blanco y la tipografía no se carga. ¿Qué ha pasado? Si lo has probando con todos los navegadores y dispositivos móviles del mercado. De reojo puedes ver que usa un Safari 10 (cuando ha sido escrito este artículo, Safari se encontraba en su versión 11).

Tus errores

Has asumido que el mundo utiliza la última versión de navegador. Existe un sector muy grande que o no quiere o no puede actualizar su sistema operativo. Por ejemplo, portátiles con 5 o más años de Apple ya no reciben actualizaciones (no voy a decir en este artículo lo que pienso al respecto). O equipos con recursos limitados no pueden escapar de Windows XP. O al actualizar sus navegadores dejan de funcionar. Y muchas más razones técnicas. Por supuesto también hay mucha gente que no lo hace por desconocimiento o pereza. Ello implica que tu vida sea menos divertida:

• No existe CSS para cargar tipografías externas, o el formato aún no es compatible.
• No existe CSS Grid, por lo que tus complejos diseños simplemente se ven como una larga columna.
• No existe CSS Flex. Bootstrap 4 ya no te sirve para nada. Aunque si te hubiera venido bien Bootstrap 3.
• No existe ES6, por lo que olvídate de let, arrows, for of…
• No has tenido en cuenta el SEO. Aunque fallara el Javascript, debería seguir mostrándose el contenido. No es buena idea hidratar el HTML con Javascript sin una buena justificación.

Experiencia adquirida

De los fallos se aprende. Un primer paso hubiera sido empezar con una arquitectura TWA (Tradicional Web Application), donde el HTML es generado en el servidor. Si vas a utilizar SPA (Single Page Application), donde se obtiene la información en un API y después se renderiza con Javascript todo el HTML, debe ser por una buena justificación. Ya que a priori necesitaremos más esfuerzo de ambos lados, habrá que trabajar muy bien el Backend y el Frontend, y nos afectará negativamente al SEO. A no ser que utilices una arquitectura SSR (Server-Side Render), un híbrido donde el renderizado se reparte.

Cuidado con usar características modernas de CSS sin antes consultar su compatibilidad. Por mucho que utilices SASS o LESS seguirá sin funcionar. Averigua cuales serán los usuarios finales, y que navegadores utilizan. Te sorprenderá saber la cantidad de empresas que siguen con Internet Explorer o versiones viejas de Safari.

Con Javascript es más sencillo. Los precompiladores realizan el trabajo sucio. Transforma tu ES6 a una versión compatible con casi cualquier versión. Puedes ayudarte de Babel, o dar un salto de productividad con Typescript o Coffescript. Pero aún así cuidado con las APIs que no son compatibles (localstorage, audio, geolocalización…).

En conclusión, nunca hagas experimentos en la guerra. Y si lo haces, que sea para encontrar una solución magnífica. Caso que suele ser resultado de muy malas decisiones en el pasado.