Una aplicación universal o isomórfica 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:
functionsayHello() {
console.log('hello world');
}
Ya sea usando o aprendiendo React.js, o JavaScript en general, seguramente hayas escuchado sobre Aplicaciones universales o Aplicaciones isomórficas y si estás aprendiendo JS probablemente no estás aún muy claro o clara sobre ellas.
El código que te mostramos en un principio 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';
functionPages() {
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 servidor, eso hace posible ejecutar este código en ambos entornos (como vemos en el curso al usarlo para hacer server render).
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.
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).
Históricamente 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 históricamente 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.
