Aplicaciones universales/isomórficas

Ya sea usando aprendiendo React.js, o JavaScript en general, seguramente hayas escuchado el término Aplicaciones universales o Aplicaciones isomórficas y si estás aprendiendo JS probablemente te preguntes que signifca.

Una aplicación universal es aquella que comparte todo (o casi todo) su código entre el cliente y el servidor. Por poner un ejemplo si tenemos una función como esta:

function sayHello() {
	console.log('hello world');
}

Ese código es universal ya que podemos usarlo tanto en un navegador (cliente) como en Node.js (servidor), entonces en vez de escribir esta función, que puede ser muy simple o muy compleja, dos veces, podemos entonces compartirla entre ambos entornos de ejecución.

Ahora pongamos un ejemplo un poco más complejo y usando React.js

import React from 'react';
import { Match, Miss } from 'react-router';

import Home from './Home';

import Header from '../components/Header';


function Pages() {
	return (
		<main role="application">
			<Header />
			<Match
				pattern="/"
				exactly
				component={Home}
			/>
			{/* Otras rutas de nuestra aplicación */}
			<Miss
				component={Error404}
			/>
		</main>
	);
}


export default Pages;

Este componente (que es el que una versión simplificada del usado en el curso) es 100% universal ya que no hay absolutamente ningún código ahí que solo funcione en un navegador o en un sevidor, eso hace posible ejecutar este código en ambos entornos (como vemos en el curso al usarlo para hacer server render).

Cosas que no pueden ser universales

Hay muchas cosas que se pueden hacer en JS que no son universales. En lo navegadores por ejemplo existe el DOM (document, window), Geolocation, XMLHttpRequest, Fetch, notificaciones, WebWorkers, ServiceWorkers, etc.

De la misma forma el servidor posee cosas como http, fs, net, etc. que no son universales ya que un navegador no puede iniciar un servidor HTTP o TCP o interactuar con el sistema de archivos directamente.

Cosas que sí pueden ser universales

De la misma forma muchas cosas se pueden hacer universales, como sistema de templates (que generen strings con HTML) son un ejemplo, hay otras cosas que si bien se manejan diferentes se puede detectar el entorno para saber si es un servidor o un navegador y ejecutar código acorde.

React por ejemplo es universal, pero al moment de renderizarlo tenemos react-dom y react-dom/server, la librería isomorphich-fetch internamente detecta si se ejecuta en un servidor o un navegador (y si este soporte Fetch) para saber si tiene que exportar una función que haga la petición y como hacerlo internamente (por http.request o por XMLHttpRequest).

¿Para que sirve hacer código universal?

Historicamente el frontend se hace con JS y el backend con otro lenguajes y frameworks (como Python y Django o RoR, gracias a Node.js fue posible empezar a compartir código entre servidor y cliente.

Esto hizo que mucho código que historicamente se duplicaba (como el manejo de rutas) ahora es posible escribirlo una vez y usarlos en dos lugares. Lo que se traduce es menores tiempos de desarrollo, debido a que ahora mucho código es compartido y no es necesario reescribir nada.