Paga en 4 cuotas sin intereses de $52.25

Antes:$249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19d

02h

02m

29s

4

¿Qué es una aplicación isomórfica o universal? Conócelas aquí

21773Puntos

hace 8 años

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).

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?

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.

Sergio Daniel
Sergio Daniel
sergiodxa

21773Puntos

hace 8 años

Todas sus entradas
Escribe tu comentario
+ 2