Aplicaciones universales/isomórficas

Clase 56 de 58 • Curso Profesional de React con Redux 2016

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.

Diego José Molina Gonzalez

student•

Excelente explicación, se podría decir que las aplicaciones isomórficas son unas de las mayores ventajas de Node en comparación a Backend tradicionales como Php, RoR, etc.?

Sergio Daniel Xalambrí

student•

Así es, poder hacer eso es algo solo de Node.js, por esta razón Node.js es una muy buena opción como servidor de cara al usuario (Backend for frontend) mientras que otras tecnologías pueden ser buenas para APIs.

Diego José Molina Gonzalez

student•

Qué opinas de hacer un proyecto 100% en Node? me refiero a todo el backend. Qué ventajas o desventajas tiene del Backend tradicional con PHP, RoR, etc.?

Te agradecería mucho la explicación, ya que hasta ahora yo optaría por hacer todo el backend en Node, pero no tengo una “justificación” más que mi gusto por Javascript…

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;

Aplicaciones universales/isomórficas

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS