¿Quieres omitir el "qué" y el "por qué"? ¡Salta directo al "cómo"!

El impacto de las imágenes en las redes sociales

Cualquier feed de red social es una ráfaga de contenido que puede ser difícil de digerir por completo. A medida que deslizas o te desplazas a través de los feeds, te encontrarás con contenido basado en texto y otros diferentes medios.

¡Y esto es por una buena razón! Al analizar el ejemplo anterior, ¿qué se destaca? No el retweet sobre Dust Particle de CodePen a la izquierda, sino el de AWS en el medio, la nariz de perro en la parte superior izquierda y Al Pacino en la parte superior derecha entre las otras publicaciones mediáticas grandes.

Las imágenes, los gifs y los videos son una buena forma de proporcionar contenido llamativo. Como beneficio adicional, por lo general ocupan mucho más espacio en el feed, por lo que es aún más probable que tengas la oportunidad de verlo.

Lo mínimo en GitHub

Al compartir tus proyectos de GitHub en las redes sociales, la opción predeterminada es bastante insulsa. Toma este tweet como ejemplo:

GitHub nos brinda una simple tarjeta de redes sociales que consta de nuestro avatar de GitHub, la ruta de nuestro proyecto y una breve descripción de la parte superior de la página.

Ahora, es genial que al menos muestren una tarjeta, y para ser justos, ¿Que más podrían mostrar?. Pero este tweet se saltará con bastante facilidad en los feeds de las personas entre las imágenes más grandes y llamativas.

Imágenes de red social en GitHub

Afortunadamente, GitHub nos provee una forma fácil de agregar una imagen a cada repositorio que puede ayudar a que el contenido que compartamos funcione de mejor manera.

Con un poco de creatividad, podemos subir una imagen que aprovechará el espacio en los feeds de las personas y conseguirá que tu trabajo reciba la atención que se merece.

Antes de entrar en detalle, debes saber que para cambiar la imagen del repositorio es necesario tener el acceso adecuado a la configuración del mismo. Si creaste el repositorio, lo más probable es que tengas este acceso.

Buscar o crear una imagen

Antes de cargar una imagen, necesitamos una imagen en primer lugar. Puedes escoger una de estas dos alternativas: buscar una imagen o crear una nueva.

Si escoges la alternativa simple, puedes buscar imágenes gratuitas para usar, son bastante fáciles de encontrar en la web. Uno de mis sitios favoritos es Unsplash, ya que normalmente encontrarás imágenes de alta calidad, pero hay un montón de otras que puedes encontrar con una simple búsqueda. Sin embargo, agregar fotos suele ser mejor para publicaciones de blog y publicaciones basadas en contenido.

La mejor alternativa es crear la tuya propia. Una ventaja de crear una imagen es que puedes personalizarla con un texto más grande para captar más atención en el feed.

Hay un montón de herramientas gratuitas disponibles que te permiten crear una imagen comenzando con una plantilla específica para redes sociales, por lo que no necesitas gastar dinero en Photoshop para lograrlo.

El único requisito para tu imagen es que su tamaño debe ser de al menos 640×320px. De ser posible, céntrate en obtener al menos 1280×640px para asegurarte de que la imagen se muestre en alta resolución en los feeds.

Agregar una imagen a tu repositorio de Github

Una vez que tenemos nuestra imagen, solo nos queda agregarla a nuestro repositorio, que posiblemente sea la parte más simple.

Primero, navega a la configuración (settings) de tu repositorio usando la pestaña de navegación en la parte superior de la página. Como recordatorio, debes poder modificar la configuración para cambiar la imagen.

A continuación, desplaza hacia abajo hasta la sección vista previa Social (Social preview), donde si actualmente no tienes ninguna imagen, encontrarás un gran rectángulo vacío con el botón Edit (Editar) en la esquina inferior izquierda.

Has clic en el botón Edit (Editar), selecciona Upload an image (Cargar una imagen), luego busca la imagen en tu ordenador y selecciona el archivo.

Una vez seleccionado, el archivo de imagen se cargará en GitHub y se establecerá como imagen social del repositorio.

Pre-visualizar tu nueva imagen

Cuando hayas terminado de cargar tu imagen, puedes dirigirte a tu plataforma social favorita y probarla. Por ejemplo, al publicar en Twitter, se mostrará una bonita y grande imagen en lugar de tu pequeño avatar de GitHub.

Como puedes ver, este tweet maximiza el espacio disponible y hace entender de qué se trata el proyecto.

Algunos consejos al crear imágenes

Texto grande y sencillo

Puede ser fácil quedarse atrapado sobre-diseñando un gráfico en exceso o no prestar suficiente atención al tamaño de la fuente. Asegúrate de usar letras grandes con una fuente que sea fácil de leer, de modo que cuando alguien se desplace sobre tu publicación, pueda entenderla y no simplemente omitirla.

Agregar un logo

¿Tienes un logo para tu proyecto? ¿O es un complemento para una herramienta específica? ¡Intenta agregar un logotipo para dar contexto de inmediato sobre el tema del proyecto!

Maximizar la resolución

A nadie le gusta mirar imágenes de mala calidad. Aprovecha todos esos valiosos píxeles y carga una imagen que se traduzca con alta calidad en cualquier feed. GitHub recomienda particularmente un tamaño de imagen de al menos 1280×640px.

¿Tienes otros trucos para maximizar el intercambio en las redes sociales?

¡Comparte tus consejos favoritos conmigo en Twitter !

• ? Sigueme en Twitter
• ? ️ Suscríbete a mi Youtube
• ✉️ Suscríbete a mi boletín

Traducido del artículo de Colby Fayock - How to Add a Social Media Image to Your Github Project Repository.

En palabras más simples, podemos usar marcadores de posición para inyectar variables en una cadena. Puedes ver un ejemplo de interpolación de cadena utilizando plantillas literales en el siguiente código:

const edad = 4.5;
const edadTierra = `Se estima que la Tierra tiene ${edad} mil millones de años.`;

console.log(edadTierra);

En primer lugar, puedes ver que estamos usando comillas invertidas `` para crear las plantillas literales. El formato ${marcador} nos permite insertar un valor dinámico en la cadena. Todo lo que hay dentro ${} es evaluado como JavaScript.

Por ejemplo, podríamos escribir Se estima que la Tierra tiene ${edad + 10} mil millones de años., y funcionaría como si hiciéramos const edad = 4.5 + 10;.

¿Cómo lo hacíamos antes?

Antes de contar con las plantillas literales, lo habríamos hecho de la siguiente manera:

const edadTierra = "Se estima que la Tierra tiene " + edad + " mil millones de años.";

Como puedes ver, se utilizan demasiadas comillas para una simple cadena. Imagina que tengamos que insertar múltiples variables. Puede transformarse rápidamente en una cadena compleja que no es muy legible. Por lo tanto, las plantillas literales hacen que las cadenas sean más limpias y legibles.

Sin embargo, este es solo un caso. Veamos más casos de uso para las plantillas literales.

Cadenas multilínea

Otro caso de utilidad para las plantillas literales son las cadenas multilínea. Antes usábamos \n para expresar nuevas líneas, como por ejemplo: console.log('línea 1\n' + 'línea 2').

Para dos líneas esto podría estar bien. Pero imagina que queremos cinco líneas. Una vez más, la cadena se vuelve innecesariamente compleja.

const edadTierra = `Se estima que la Tierra tiene ${edad} mil millones de años.

Los científicos han rastreado la Tierra en busca de las rocas más antiguas para precisar fechas radiométricamente.

En el noroeste de Canadá, descubrieron rocas de unos 4.030 millones de años.
`;

El fragmento anterior demuestra una vez más lo sencillo y limpio que se vuelve escribir cadenas multilínea con plantillas literales.

Como ejercicio, intenta convertir la cadena anterior usando concatenación y saltos de línea \n.

Expresiones

Con las plantillas literales también podemos usar expresiones dentro de las cadenas. ¿Qué significa eso?

Por ejemplo, podríamos usar expresiones matemáticas como la multiplicación de dos números. El fragmento a continuación ilustra esto:

const primerNumero = 10;
const segundoNumero = 39;
const resultado = `El resultado de multiplicar ${primerNumero} por ${segundoNumero} es ${primerNumero * segundoNumero}.`;

console.log(resultado);

Sin las plantillas literales tendríamos que hacer algo como esto:

const resultado = "El resultado de multiplicar " + primerNumero + " por " + segundoNumero + " es " + primerNumero * segundoNumero + ".";

Escribir una cadena como la anterior puede volverse rápidamente complejo y confuso. Como seguimos viendo, las plantillas literales facilitan y hacen más elegante incrustar expresiones en la cadena.

Operador ternario

Con la interpolación de cadenas incluso podemos usar un operador ternario dentro de una cadena. Esto nos permite verificar el valor de una variable y mostrar diferentes cosas dependiendo de ese valor.

Veamos el siguiente ejemplo:

const bebidas = 4.99;
const comida = 6.65;
const total = bebidas + comida;

const resultado = `El total de la factura es ${total}. ${total > 10 ? `Su pago con tarjeta será rechazado` : `Su pago con tarjeta será aceptado`}.`

console.log(resultado);

En el código anterior verificamos si el monto total es superior a diez dólares. Si el importe es superior a diez, avisamos al usuario que se rechazará el pago con tarjeta. De lo contrario, se acepta el pago con tarjeta.

Como puedes ver, la interpolación nos permite hacer cosas interesantes con las cadenas.

Conclusión

La adición plantillas literales en ES6 nos permite escribir cadenas mejores, más cortas y claras. También nos da la capacidad de inyectar variables y expresiones en cualquier cadena. Esencialmente, todo lo que escriba dentro de las llaves (${}) se evaluará como JavaScript.

Por lo tanto, podemos usar plantillas literales para:

• Escribir cadenas multilínea
• Incrustar expresiones
• Escribir cadenas con el operador ternario

Si te gusta lo que escribo, es probable que te encante lo que envío por correo electrónico. Considera suscribirte a mi boletín. Si no eres fanático de los boletines, siempre podemos mantener el contacto vía Twitter.

Traducido del artículo de Catalin Pit - JavaScript String Format – How to use String Interpolation in JS.

¿Por qué es esto necesario?

Imagina que queremos extraer datos de un arreglo. Anteriormente, ¿cómo se haría esto?

let introduccion = ["Hola", "Yo" , "soy", "Sarah"];
let saludo = introduccion[0];
let nombre = introduccion[3];

console.log(saludo); // "Hola"
console.log(nombre); // "Sarah"

Podemos ver que cuando queremos extraer datos de un arreglo, tenemos que hacer lo mismo una y otra vez.

La desestructuración de ES6 facilita la extracción de estos datos. ¿De qué forma? Primero, discutiremos sobre la desestructuración con arreglos. Luego pasaremos a la desestructuración de objetos.

Empecemos.

Desestructuración Básica de Arreglos

Si queremos extraer datos de un arreglo, es bastante sencillo usando la sintaxis de desestructuración.

Tomando como referencia el primer ejemplo. En lugar de pasar por ese proceso repetitivo, haríamos esto:

let introduccion = ["Hola", "Yo" , "soy", "Sarah"];;
let [saludo, pronombre] = introduccion;

console.log(saludo); // "Hola"
console.log(pronombre); // "Yo"

También podemos lo siguiente, y conseguir el mismo resultado:

let [saludo, pronombre] = ["Hola", "Yo" , "soy", "Sarah"];

console.log(saludo); // "Hola"
console.log(pronombre); // "Yo"

Declarando Variables antes de la Asignación

Las variables se pueden declarar antes de ser asignadas de esta manera:

let saludo, pronombre;
[saludo, pronombre] = ["Hola", "Yo" , "soy", "Sarah"];

console.log(saludo); // "Hola"
console.log(pronombre); // "Yo"

Observa que las variables se establecen de izquierda a derecha. Así que la primera variable obtiene el primer elemento del arreglo, la segunda variable obtiene el segundo elemento, y así sucesivamente.

Omitiendo elementos en un Arreglo

¿Qué pasa si queremos obtener el primer y último elemento de nuestro arreglo en lugar del primero y el segundo, y queremos asignar solo dos variables? Esto también se puede hacer. Fíjate en el siguiente ejemplo:

let [saludo,,,nombre] = ["Hola", "Yo" , "soy", "Sarah"];

console.log(saludo); // "Hola"
console.log(nombre); // "Sarah"

¿Qué acaba de suceder?

Pon atención al lado izquierdo de la asignación de variables del arreglo. Observa que en lugar de tener solo una coma, tenemos tres. El separador de coma se utiliza para omitir valores en un arreglo. Por lo que, si deseas omitir un elemento en un arreglo, usa comas.

Veamos otro ejemplo. Si queremos saltar el primer y tercer elemento de la lista. ¿Cómo lo haríamos?

let [,pronombre,,nombre] = ["Hola", "Yo" , "soy", "Sarah"];

console.log(pronombre); // "Yo"
console.log(nombre); // "Sarah"

Como ves, el separador de comas es el que hace la magia. Entonces, si queremos omitir todos los elementos, simplemente hacemos esto:

let [,,,,] = ["Hola", "Yo" , "soy", "Sarah"];

Asignando el resto de un arreglo

¿Qué sucede si queremos asignar parte del arreglo a variables y el resto de elementos de dicho arreglo a otra variable en particular? En ese caso, haríamos esto:

let [saludo, ...introduccion] = ["Hola", "Yo" , "soy", "Sarah"];

console.log(saludo); // "Hola"
console.log(introduccion); // ["Yo", "soy", "Sarah"]

Utilizando este patrón, puedes desempacar y asignar la parte restante de un arreglo a una variable.

Desestructuración con Funciones

También podemos extraer datos de un arreglo devuelto por una función. Digamos que tenemos una función que devuelve un arreglo como el del siguiente ejemplo:

function obtenerArreglo() {
    return ["Hola", "Yo" , "soy", "Sarah"];
} 

let [saludo, pronombre] = obtenerArreglo();

console.log(saludo); // "Hello"
console.log(pronombre); // "I"

Como puedes observar, obtenemos los mismos resultados.

Usando Valores Predeterminados

Los valores predeterminados se pueden asignar a las variables en caso de que el valor extraído del arreglo sea undefined:

let [saludo = "hey", nombre = "Sarah"] = ["Hola"];

console.log(greeting); // "Hola"
console.log(name); // "Sarah"

Por lo tanto, nombre se vuelve "Sarah" porque no está definido en el arreglo.

Intercambiando Valores mediante Desestructuración

Una cosa más. Podemos usar la desestructuración para intercambiar los valores de las variables:

let a = 3;
let b = 6;

[a, b] = [b, a];

console.log(a); // 6
console.log(b); // 3

A continuación, aprenderemos sobre la Desestructuración de Objetos.

Desestructuración de Objetos

Primero, veamos por qué es necesaria la desestructuración de objetos.

Digamos que queremos extraer datos de un objeto y asignarlos a nuevas variables. Antes de ES6, ¿cómo se haría esto?

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

let nombre = persona.nombre;
let pais = persona.pais;
let trabajo = persona.trabajo;

console.log(nombre); // "Sarah"
console.log(pais); // "Nigeria"
console.log(trabajo); // "Desarrollador"

Observa lo tedioso que es extraer todos los datos. Tenemos que hacer lo mismo repetidamente. Por suerte, la desestructuración de ES6 provee una solución. Saltemos directamente a ella.

Desestructuración Básica de Objetos

Repitamos el ejemplo anterior con ES6. En lugar de asignar valores uno por uno, podemos usar el objeto de la izquierda para extraer los datos:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

let {nombre, pais, trabajo} = persona;

console.log(nombre); // "Sarah"
console.log(pais); // "Nigeria"
console.log(trabajo); // "Desarrollador"

Obtendrás los mismos resultados. También es válido asignar variables a un objeto que no ha sido declarado:

let {nombre, pais, trabajo} = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

console.log(nombre); // "Sarah"
console.log(pais); // "Nigeria"
console.log(trabajo); // "Desarrollador"

Declarando Variables antes de ser asignadas

Las variables en los objetos se pueden declarar antes de asignarlas con desestructuración. Probemos eso:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
}; 

let nombre, pais, trabajo;

{nombre, pais, trabajo} = persona;

console.log(nombre); // Error : "Unexpected token ="

Espera, ¿qué acaba de pasar? Oh, nos olvidamos de agregar () antes de las llaves.

Los paréntesis  ( ) alrededor de la asignación es una sintaxis requerida cuando se usa la desestructuración literal de un objeto sin una declaración. Esto se debe a que {} en el lado izquierdo se considera un bloque y no un objeto literal. Aquí te muestro la forma correcta de hacerlo:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
}; 

let nombre, pais, trabajo;

({nombre, pais, trabajo} = persona);

console.log(nombre); // "Sarah"
console.log(trabajo); // "Desarrollador"

También es importante tener en cuenta que al usar esta sintaxis, los paréntesis () deben ir precedido de un punto y coma. De lo contrario, podría usarse para ejecutar una función de la línea anterior.

Observa como las variables del objeto en el lado izquierdo deben tener el mismo nombre que una clave de propiedad en el objeto persona. Si los nombres son diferentes, obtendremos undefined:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

let {nombre, amigos, trabajo} = persona;

console.log(nombre); // "Sarah"
console.log(amigos); // undefined

Pero si queremos usar un nuevo nombre de variable, bueno, también podemos hacerlo.

Usando un nuevo Nombre de Variable

Si queremos asignar valores de un objeto a una nueva variable en lugar de usar el nombre de la propiedad, podemos hacer esto:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

let {nombre: foo, trabajo: bar} = persona;

console.log(foo); // "Sarah"
console.log(bar); // "Desarrollador"

Entonces, los valores extraídos son pasados a las nuevas variables foo y bar.

Usando Valores Predeterminados

Los valores predeterminados también se pueden usar en la desestructuración de objetos, en el caso de que una variable del objeto que se quiere extraer datos esté undefined:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

let {nombre = "miNombre", amiga = "Annie"} = persona;

console.log(nombre); // "Sarah"
console.log(amiga); // "Annie"

Entonces, si el valor no es indefinido (undefined), la variable almacena el valor extraído del objeto como en el caso de nombre. De lo contrario, usará el valor predeterminado como lo hizo con amiga.

También podemos establecer valores predeterminados cuando asignamos valores a una nueva variable:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

let {name: foo = "miNombre", amiga: bar = "Annie"} = persona;

console.log(foo); // "Sarah"
console.log(bar); // "Annie"

Aquí nombre se extrajo de persona y se asignó a una variable diferente. amiga, por otro lado, estaba undefined en persona, por lo que a la nueva variable bar  se le asignó el valor predeterminado.

Nombre de Propiedad Calculado

El nombre de propiedad calculado es otra funcionalidad de objectos literales que también funciona al desestructurar. Puedes especificar el nombre de una propiedad a través de una expresión si la pones entre corchetes:

let prop = "nombre";

let {[prop] : foo} = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    trabajo: "Desarrollador"
};

console.log(foo); // "Sarah"

Combinando Arreglos con Objetos

Las arreglos también se pueden usar con objetos en la desestructuración de objetos:

let persona = {
    nombre: "Sarah", 
    pais: "Nigeria", 
    amigas: ["Annie", "Becky"],
};

let {nombre: foo, amigas: bar} = persona;

console.log(foo); // "Sarah"
console.log(bar); // ["Annie", "Becky"]

Anidamiento en la Desestructuración de Objetos

Los objetos también se pueden anidar al desestructurar:

let persona = {
    nombre: "Sarah",
    lugar: {
        pais: "Nigeria", 
        ciudad: "Lagos" 
    }, 
    amigas : ["Annie", "Becky"]
};

let {
  nombre: foo,
  lugar: { pais: bar, ciudad: x },
} = persona;

console.log(foo); // "Sarah"
console.log(bar); // "Nigeria"

Resto (...rest) en la Desestructuración de Objetos

La sintaxis de resto también se puede utilizar para recopilar claves de propiedad que aún no han sido asignadas durante la desestructuración. Dichas claves y sus valores se copian en un nuevo objeto:

let persona = {
  nombre: "Sarah",
  pais: "Nigeria",
  trabajo: "Desarrollador",
  amigas: ["Annie", "Becky"],
};

let { nombre, amigas, ...otras } = persona;

console.log(nombre); // "Sarah"
console.log(amigas); // ["Annie", "Becky"]
console.log(otras); // {pais: "Nigeria", trabajo: "Desarrollador"}

Aquí, las propiedades restantes cuyas claves no formaban parte de los nombres de variable enumerados se asignaron a la variable otras. La sintaxis de resto (rest) en el ejemplo es ...otras. Cuyo nombre otras se puede cambiar por cualquiera de tu preferencia.

Una última cosa – veamos cómo se puede usar la Desestructuración de Objetos en funciones.

Desestructuración de Objetos y Funciones

La Desestructuración de Objetos se puede utilizar para asignar parámetros a funciones:

function persona({ nombre: x, trabajo: y } = {}) {
  console.log(x);
}

persona({ nombre: "Michelle" }); // "Michelle"
persona(); // undefined
persona(amiga); // Error : amiga is not defined

Observa los {} en el lado derecho de los parámetros del objecto. Nos permite llamar a la función sin pasar ningún argumento. Por eso recibimos undefined. Si lo eliminamos, obtendremos un mensaje de error.

También podemos asignar valores predeterminados a los parámetros:

function person({ nombre: x = "Sarah", trabajo: y = "Desarrollador" } = {}) {
  console.log(x);
}

person({ nombre }); // "Sarah"

Como hemos podido ver, se pueden hacer un montón de cosas con la Desestructuración de Arreglos y Objectos.

Gracias por leer. :)

Traducido del artículo de Sarah Chima Atuonwu - How to Use Array and Object Destructuring in JavaScript.

En este artículo profundizaremos en la documentación oficial, desglosando los conceptos básicos, funciones y particularidades de Next.js. Cubriremos los siguientes temas:

• ¿Por qué usar Next.js?
• Creando nuestra primera aplicación con Next.js
• Páginas y Rutas
• Enlazando páginas
• CSS en Next.js
• Recursos estáticos
• SSG vs SSR
• Rutas API
• Palabras finales

¿Por qué usar Next.js?

Next.js ofrece la mejor de las experiencias para el desarrollador, con múltiples funcionalidades incorporadas que garantizan la creación de proyectos sólidos listos para producción, estas son algunas de las razones para su uso:

1. Facilidad para aprender y sin complejas configuraciones.
2. Optimizado para brindar mejoras de SEO y rendimiento.
3. Enrutamiento basado en páginas con soporte de rutas dinámicas.
4. Rutas API desplegadas en funciones Serverless.
5. Capacidad para generar sitios estáticos (SSG), usar server-side rendering (SSR) o una combinación de ambos según la necesidad de cada página.
6. Compatibilidad incorporada con CSS y SASS. Además de soporte para múltiples librerías de CSS en JS.

Creando nuestra primera aplicación con Next.js

Requisitos Previos

Antes que nada debes asegurarte de que tienes instalado Node.js en tu ordenador (v10.13 en adelante). Para ello, ejecutamos el siguiente comando desde el terminal:

node -v

Este comando te devolverá la versión de Node que tienes instalada actualmente.

Usando create-next-app

La manera fácil y recomendada de crear nuevas aplicaciones de Next.JS es usando create-next-app, este se encargará de hacer todas las configuraciones básicas necesarias para empezar nuestro proyecto de inmediato. Ejecuta en tu terminal:

npx create-next-app <nombre-de-aplicacion>

Aquí <nombre-de-aplicacion> es el nombre que tendrá la carpeta que alojará los archivos de nuestro proyecto, por lo que puedes darle el nombre de tu preferencia.

Luego de que se complete la instalación, podemos iniciar el servidor de desarrollo ejecutando los siguientes comandos:

cd <nombre-de-aplicacion>
npm run dev

Si visitas localhost:3000 podrás ver en vivo tu nueva aplicación de Next.js.

Manualmente

También puedes utilizar Next.js instalando manualmente los paquetes: next, react y react-dom:

npm install next react react-dom

Luego abrimos el archivo package.json y añadimos los siguientes scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

• dev inicia Next.js en modo desarrollo.
• start inicia Next.js en modo producción.
• build construye tu aplicación de Next.js para producción.

Páginas y Rutas

Una de las particularidades de Next.js es que esta construido alrededor del concepto de páginas.

Una página es un componente de React exportado desde la carpeta pages.

Las páginas están asociadas con una ruta basada en el nombre del archivo. Por ejemplo pages/perfil.js resultará en la ruta /perfil.

export default function Perfil() {
  return <div>¡Bienvenido a mi perfil!</div>;
}

Prueba el código anterior por tu cuenta y visita localhost:3000/perfil para ver los resultados.

Rutas Index

Los archivos con nombre index dirigen hacia la raíz del directorio que lo contiene.

• pages/index.js → /
• pages/blog/index.js → /blog

Rutas Anidadas

Supongamos que queremos acceder a la siguiente ruta: /blog/post/:id

Necesitaremos anidar las carpetas de la siguiente manera:

|- pages
  |- index.js
  |- blog
    |- post
      |- [id].js # id dinámico para cada post

Páginas con Rutas Dinámicas

También podemos utilizar rutas dinámicas si agregamos corchetes al nombre del archivo. Por ejemplo, si creamos un archivo llamado pages/post/[id].js podremos acceder a el en las rutas post/1, post/2, y así sucesivamente.

import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post: {id}</p>;
}

Como puedes observar, en el código anterior utilizamos el hook useRouter de Next.js para acceder al objeto router, dicho objeto contiene propiedades muy útiles, las partes dinámicas de cada ruta se almacenan en router.query.

Enlazando páginas

Para obtener una navegación fluida entre las páginas de nuestra aplicación, necesitamos importar el componente Link y usarlo de la siguiente manera:

import Link from "next/link";

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/perfil">
          <a>Mi perfil</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/post/hola-mundo">
          <a>Post</a>
        </Link>
      </li>
    </ul>
  );
}

En el ejemplo anterior podemos observar que hay múltiples enlaces, cada uno cuenta con un componente Link que recibe una propiedad href indicando la ruta a la que dirige. Link envuelve un elemento Anchor a que contiene el texto de nuestro enlace.

Enlazando Rutas Dinámicas

También puedes utilizar interpolación para crear la ruta, lo que resulta útil para los segmentos de ruta dinámicos. Por ejemplo, para mostrar una lista de posts que se han pasado al componente como propiedad:

import Link from "next/link";

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/post/${post.id}`}>
            <a>{post.titulo}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

O usando un objeto URL:

import Link from "next/link";

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: "/blog/post/[id]",
              query: { id: post.id },
            }}
          >
            <a>{post.titulo}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

CSS en Next.js

Existen muchas formas de darle estilo a tu aplicación en Next.js, puedes importar archivos de hojas de estilo directamente gracias a la compatibilidad con los Módulos de CSS. Para ello el archivo debe nombrarse de la siguiente manera: [nombre].module.css.

Los Módulos de CSS mantienen un ámbito local creando clases únicas automáticamente, por lo que te permite usar los mismos nombres de clases en diferentes archivos sin que tengas que preocuparte por colisiones.

Por ejemplo, para crear un componente botón reusable, primero creamos componentes/Boton.module.css con el siguiente contenido:

.peligro {
  color: white;
  background-color: red;
}

Y un archivo componentes/Boton.js donde importar y usar el módulo CSS antes creado.

import estilos from "./Boton.module.css";

export default function Boton() {
  return (
    <button type="button" className={estilos.peligro}>
      Borrar
    </button>
  );
}

Nota: La clase peligro es una propiedad del objeto estilos importado.

Así de fácil es usar los Módulos de CSS en Next.js, recuerda que también tenemos más opciones de estilo a nuestra disposición, tales como Sass, Less o CSS en JavaScript.

Recursos estáticos

La carpeta public es utilizada en Next.js para servir todos nuestros recursos estáticos (imágenes, iconos, robots, entre otros). Puedes importar archivos dentro de la carpeta public  usando (/) como URL base.

Por ejemplo, para acceder a una imagen guardada en public/hero.jpg escribimos un código como el siguiente:

export default function Home() {
  return (
    <div>
      <img src="/hero.jpg" />
    </div>
  );
}

Nota: No cambies el nombre de la carpeta public por ningún otro, es la única que puede servir recursos estáticos.

SSG vs SSR

Pre-renderizado

Next.js pre-renderiza cada página por defecto. Generando el HTML por adelantado en lugar de dejarle todo el trabajo al JavaScript del cliente. Esto se traduce en importantes mejoras de rendimiento y SEO.

Cada HTML generado se asocia con un mínimo de código de JavaScript requerido para esa página. Cuando una página es cargada por el navegador, su código JavaScript se ejecuta y hace la página plenamente interactiva. Este proceso es llamado hidratación.

Tipos de Pre-renderizado

Existen dos formas de pre-renderizado en Next.js: Static Site Generation y Server-side Rendering. La diferencia principal radica en cuando se genera el HTML para la página.

• SSG (Static Site Generation): El HTML se genera antes de cada petición, como al momento de crear la build.
• SSR (Server-side Rendering): El HTML se genera en el servidor durante cada petición.

Static Site Generation

Si nuestra página no requiere datos de una fuente externa, Next.js se encargará de generarla de forma estática al crear la build. Por ejemplo:

export default function Perfil() {
  return <div>Perfil</div>;
}

En cambio, si el contenido o rutas de la página dependen de una fuente externa, necesitaremos usar dos funciones especiales de Next.js: getStaticProps y getStaticPaths.

Ejemplo 1: Digamos que tu página necesita una lista de posts publicados en tu blog desde un CMS.

// TODO: Hacer fetch a los `posts` antes de que se pre-renderice la página
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.titulo}</li>
      ))}
    </ul>
  );
}

En el mismo archivo tenemos que exportar la función asíncrona getStaticProps, esta función es llamada al momento de crear la build y te permite pasar los datos recopilados a la página en forma de props.

export async function getStaticProps() {
  // Hacer fetch al endpoint que contiene los `posts`
  const res = await fetch("https://.../posts");
  const posts = await res.json();

  return { props: { posts } };
}

export default function Blog({ posts }) {
  // Renderizar posts...
}

Ejemplo 2: Queremos pre-renderizar posts individuales usando rutas dinámicas.

Empezamos creando un archivo con ruta dinámica llamado pages/posts/[id].js, este nos permitirá acceder a nuestros posts según su id, con enlaces como: /posts/1, /posts/2, etc.

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.titulo}</h1>
      <p>{post.contenido}</p>
    </div>
  );
}

Podemos indicar a Next.js las rutas dinámicas que queremos pre-renderizar usando la función getStaticPaths.

export async function getStaticPaths() {
  // Hacer fetch al endpoint que contiene los `posts`
  const res = await fetch("https://.../posts");
  const posts = await res.json();

  // Obtener rutas a pre-renderizar basado en el `id` de los posts
  const rutas = posts.map((post) => `/posts/${post.id}`);

  return { paths: rutas, fallback: false };
}

Nota: { fallback: false } hace que las rutas no incluidas devuelvan una página 404.

Finalmente, utilizamos getStaticProps para conseguir los datos del post según el id proporcionado en el objeto params.

export async function getStaticPaths() {
  // ...
}

export async function getStaticProps({ params }) {
  // params contiene el `id` del post.
  const res = await fetch(`https://.../posts/${params.id}`);
  const post = await res.json();

  // Pasar datos del post hacia la página en forma de props
  return { props: { post } };
}

export default function Post({ post }) {
  // Renderizar post...
}

Server-side Rendering

Muchas veces los datos de nuestra página deben ser constantemente actualizados o tal vez necesitemos interactuar con una API haciendo consultas variadas y complejas. Para casos como estos, Next.js nos permite usar Server-side Rendering (SSR) en nuestras aplicaciones de React.

Cuando una página utiliza Server-side rendering, el HTML de la misma se genera en el servidor durante cada petición. Para ello, necesitamos exportar la función asíncrona getServerSideProps, la cual recopila los datos y los pasa a la página.

// Esta función es llamada durante cada petición
export async function getServerSideProps() {
  // Recopilar datos desde una API externa
  const res = await fetch(`https://.../datos`);
  const datos = await res.json();

  // Pasar datos hacia la pagina en forma de props
  return { props: { datos } };
}

export default function Pagina({ datos }) {
  // Renderizar datos...
}

Como puedes observar, getServerSideProps y getStaticProp cuentan con una sintaxis y funcionamiento similar, pero se diferencian principalmente por el momento en que son ejecutadas.

Rutas API

Next.js provee una solución para construir APIs fácilmente en un entorno Serverless (Sin servidor), por lo que no tendremos que preocuparnos de pagar alojamiento de servidores para el back-end de nuestra aplicación.

Todos los archivos dentro de la carpeta pages/api serán tratados como endpoints de nuestra API en lugar de páginas.

Por ejemplo, si creamos un archivo pages/api/hola.js podremos acceder al mismo en la ruta: /api/hola y nos devolverá como respuesta un objeto json.

export default function manejador(req, res) {
  res.status(200).json({ texto: "Hola" });
}

Como puedes observar, para que este archivo funcione correctamente como API endpoint es necesario exportar una función manejador (handler) con los parámetros req y res.

Si queremos tener acceso a los diferentes métodos HTTP en nuestro manejador podemos usar req.method dentro del mismo, por ejemplo:

export default function manejador(req, res) {
  switch (req.method) {
    case "GET":
      // Nuestra lógica de código para el método GET...
      break;
    case "PATCH":
      // Nuestra lógica de código para el método PATCH...
      break;
    case "DELETE":
      // Nuestra lógica de código para el método DELETE...
      break;
    default:
      res.status(405).json({
        mensaje: `El método HTTP ${req.method} no esta disponible en esta ruta`,
      });
      break;
  }
}

Si ya estás familiarizado con Express.js probablemente encuentres muchas similitudes en cuanto a sintaxis.

Palabras finales

En este artículo pudimos explorar algunas de las funcionalidades principales de Next.js, mostrando una visión general de sus características, herramientas y ventajas tanto para el desarrollador como para el usuario final.

Espero que esta lectura haya sido de tu agrado y te animes a probar este framework por tu cuenta. Pienso más adelante crear contenido de Next.js tocando temas más específicos, tales como: middlewares, opciones de despliegues, enrutamiento internacionalizado (i18n), entres otros.

¿Tienes alguna duda o quieres mantenerte al día con mis publicaciones? Sígueme en Twitter.

En este artículo, vamos a crear una PWA desde cero con HTML, CSS y JavaScript. Estos son los temas que cubriremos:

• ¿Qué es una aplicación web progresiva?
• Marcado básico
• Estilizando
• Mostrar datos con JavaScript
• Manifiesto de Aplicación Web
• ¿Qué es un Service Worker?
• Caché de recursos
• Fetch de recursos
• Registrando el Service Worker
• Pensamientos finales
• Próximos pasos

Entonces, comencemos con una pregunta importante: ¿Qué diablos es una PWA?

¿Qué es una aplicación web progresiva?

Una Aplicación Web Progresiva (PWA por sus siglas en inglés) es una aplicación web que ofrece a los usuarios una experiencia similar a la de aplicaciones nativas mediante el uso de capacidades web modernas. Al final, es solo un sitio web común que se ejecuta en el navegador con algunas mejoras. Dándote la habilidad de:

• Instalarla en una pantalla de inicio móvil
• Acceder sin conexión
• Acceder a la cámara
• Recibir notificaciones push
• Sincronizar en segundo plano

Y mucho más.

Sin embargo, para poder transformar nuestra aplicación web tradicional en una PWA, tenemos que ajustarla un poco, agregando un archivo de manifiesto de aplicación web y un service worker.

No te preocupes por estos nuevos términos – los cubriremos más adelante.

Primero, tenemos que construir nuestra aplicación web tradicional. Así que comencemos con el marcado.

Marcado básico

El archivo HTML es relativamente simple. Envolvemos todo en la etiqueta main.

• En index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Dev'Coffee PWA</title>
  </head>
  <body>
    <main>
      <nav>
        <h1>Dev'Coffee</h1>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Blog</li>
        </ul>
      </nav>
      <div class="container"></div>
    </main>
    <script src="js/app.js"></script>
  </body>
</html>

Se crea una barra de navegación con la etiqueta nav. Luego, el div con la clase .container guardará las tarjetas que agregaremos más tarde con JavaScript.

Una vez terminado el marcado básico, procedemos a darle estilo con CSS.

Estilizando

Aquí, como de costumbre, comenzamos importando las fuentes que necesitamos. Luego hacemos algunos restablecimientos para evitar el comportamiento predeterminado.

• En css/style.css

@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #fdfdfd;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
}
main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul {
  list-style: none;
  display: flex;
}

li {
  margin-right: 1rem;
}
h1 {
  color: #e74c3c;
  margin-bottom: 0.5rem;
}

Ahora, limitamos el ancho máximo del elemento main a 900px para que se vea bien en una pantalla grande.

Para la barra de navegación, quiero que el logo esté a la izquierda y los enlaces a la derecha. Por lo que en la etiqueta nav, después de convertirla en un contenedor flexible, usamos justify-content: space-between; para alinearlos.

• En css/style.css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 1rem 0;
}
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 15rem auto;
  height: 15rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
}
.card--avatar {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}
.card--title {
  color: #222;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}
.card--link {
  text-decoration: none;
  background: #db4938;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
}

Tendremos varias tarjetas, por lo que el elemento container se mostrará como una cuadrícula. Con grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) podemos hacer que nuestras tarjetas sean responsivas, usando al menos 15rem de ancho si hay suficiente espacio (y 1fr si no).

Finalmente, para que estas luzcan mejor, duplicamos el efecto de sombra en la clase .card y usamos object-fit: cover en .card--avatar para evitar que la imagen se estire.

Con esto, nuestra aplicación web se ve mucho mejor – pero todavía no tenemos datos para mostrar.

Arreglemoslo en la siguiente sección.

Mostrar datos con JavaScript

Puedes descargar todos los recursos que usé para la creación de esta aplicación web aquí.

Observa que utilicé imágenes grandes que tardan algún tiempo en cargarse. Esto te mostrará de la mejor manera el poder de los service workers.

Como dije antes, la clase .container tendrá nuestras tarjetas. Por lo tanto, debemos seleccionarlo.

• En js/app.js

const container = document.querySelector(".container")
const coffees = [
  { name: "Perspiciatis", image: "images/coffee1.jpg" },
  { name: "Voluptatem", image: "images/coffee2.jpg" },
  { name: "Explicabo", image: "images/coffee3.jpg" },
  { name: "Rchitecto", image: "images/coffee4.jpg" },
  { name: " Beatae", image: "images/coffee5.jpg" },
  { name: " Vitae", image: "images/coffee6.jpg" },
  { name: "Inventore", image: "images/coffee7.jpg" },
  { name: "Veritatis", image: "images/coffee8.jpg" },
  { name: "Accusantium", image: "images/coffee9.jpg" },
]

Luego, creamos un arreglo de tarjetas con nombres e imágenes.

• En js/app.js

const showCoffees = () => {
  let output = ""
  coffees.forEach(
    ({ name, image }) =>
      (output += `
              <div class="card">
                <img class="card--avatar" src=${image} />
                <h1 class="card--title">${name}</h1>
                <a class="card--link" href="#">Taste</a>
              </div>
              `)
  )
  container.innerHTML = output
}

document.addEventListener("DOMContentLoaded", showCoffees)

El código anterior nos permite recorrer el arreglo y mostrar su contenido en el archivo HTML. Y para que todo funcione, esperamos hasta que el contenido del DOM (del inglés Document Object Model) termine de cargarse y así ejecutar el método showCoffees.

Hemos hecho mucho, pero por ahora solo tenemos una aplicación web tradicional. Así que cambiemos eso en la siguiente sección, presentando algunas funcionalidades de las PWAs.

Manifiesto de Aplicación Web

El manifiesto de aplicación web es un archivo JSON simple que informa al navegador sobre tu aplicación web. Indica cómo debe comportarse cuando se instala en el dispositivo móvil o escritorio del usuario. Si queremos que se muestre el mensaje Agregar a la Pantalla de Inicio, requeriremos el manifiesto de aplicación web.

Ahora que sabemos qué es un manifiesto web, creemos un nuevo archivo llamado manifest.json (tienes que nombrarlo así) en el directorio raíz. Luego agrega el siguiente bloque de código.

• En manifest.json

{
  "name": "Dev'Coffee",
  "short_name": "DevCoffee",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png", "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png","sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png", "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png", "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png", "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png", "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png", "sizes": "512x512"
    }
  ]
}

Al final, es solo un archivo JSON con algunas propiedades obligatorias y otras opcionales.

name (nombre): Cuando el navegador inicie la pantalla de bienvenida, será el nombre que se muestre en la pantalla.

short_name (nombre corto): Será el nombre que se muestre debajo del acceso directo de la aplicación en la pantalla de inicio.

start_url (url de inicio): Será la página que se muestre al usuario una vez abierta tu aplicación.

display: Le dice al navegador cómo mostrar la aplicación. Hay varios modos como minimal-ui, fullscreen, browser, etc. Aquí, utilizamos el modo standalone para ocultar todo lo relacionado con el navegador.

background_color (color de fondo): Cuando el navegador inicie la pantalla de bienvenida, será el fondo pantalla.

theme_color (color de tema): Será el color de fondo de la barra de estado cuando abramos la aplicación.

orientation (orientación): Le dice al navegador la orientación que debe tener al mostrar la aplicación.

icons (iconos): Cuando el navegador inicie la pantalla de bienvenida, será el icono que se muestre en la pantalla. Aquí utilicé todos los tamaños para tener compatibilidad con el icono preferido de cualquier dispositivo. Pero puedes usar uno o dos. Tú decides.

Ahora que tenemos un manifiesto de aplicación web, lo agregamos al archivo HTML.

• En index.html (etiqueta head)

<link rel="manifest" href="manifest.json" />
<!-- Soporte para iOS -->
<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
<link rel="apple-touch-icon" href="images/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="images/icons/icon-128x128.png" />
<link rel="apple-touch-icon" href="images/icons/icon-144x144.png" />
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png" />
<link rel="apple-touch-icon" href="images/icons/icon-192x192.png" />
<link rel="apple-touch-icon" href="images/icons/icon-384x384.png" />
<link rel="apple-touch-icon" href="images/icons/icon-512x512.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />

Como puedes ver, vinculamos nuestro archivo manifest.json a la etiqueta head. Y agregamos algunos otros enlaces que manejan el soporte de iOS para mostrar los íconos y colorear la barra de estado con nuestro color de tema.

Ahora podemos pasar a la parte final e introducir el service worker.

¿Qué es un Service Worker?

Ten en cuenta que las PWA se ejecutan solo en https porque el service workers puede acceder a la solicitud y manejarla. Por lo tanto, se requiere seguridad.

Un service worker es un script que tu navegador ejecuta en segundo plano en un hilo separado. Eso significa que se ejecuta en un lugar diferente y está completamente separado de tu página web. Esa es la razón por la que no puede manipular elementos en el DOM.

Sin embargo, es superpoderoso. El service worker puede interceptar y manejar solicitudes de red, administrar el caché para habilitar el soporte fuera de línea o enviar notificaciones push a tus usuarios.

Entonces, creemos nuestro primer service worker en la carpeta raíz nombrándolo serviceWorker.js (el nombre depende de ti). Pero tienes que ponerlo en la raíz para no limitar su alcance a una sola carpeta.

Caché de recursos

• En serviceWorker.js

const staticDevCoffee = "dev-coffee-site-v1"
const assets = [
  "/",
  "/index.html",
  "/css/style.css",
  "/js/app.js",
  "/images/coffee1.jpg",
  "/images/coffee2.jpg",
  "/images/coffee3.jpg",
  "/images/coffee4.jpg",
  "/images/coffee5.jpg",
  "/images/coffee6.jpg",
  "/images/coffee7.jpg",
  "/images/coffee8.jpg",
  "/images/coffee9.jpg",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      cache.addAll(assets)
    })
  )
})

Este código parece intimidante al principio, pero es solo JavaScript (así que no te preocupes).

Declaramos el nombre de nuestro caché staticDevCoffee y los recursos (assets) para almacenar en el mismo. Para realizar esta acción, necesitamos adjuntar un event listener a self.

self es el propio service worker. Nos permite escuchar los eventos del ciclo de vida y hacer algo a cambio.

El service worker tiene varios ciclos de vida y uno de ellos es el evento install. Se ejecuta cuando se instala el service worker. Se activa tan pronto se ejecuta y solo es llamado una vez por cada service worker.

Cuando se dispara el evento install, ejecutamos el callback que nos da acceso al objecto event.

Almacenar cosas en la caché del navegador puede tardar un tiempo en finalizar porque es asíncrono.

Entonces, para manejarlo necesitamos usar el método waitUntil(), el cual espera a que termine la acción.

Una vez que la API de caché este lista, podemos ejecutar el método open() y crear nuestra caché pasando su nombre como argumento a caches.open(staticDevCoffee).

Luego esta devuelve una promesa, que nos ayuda a almacenar nuestros recursos en la caché con cache.addAll(assets).

Con suerte, todavía estás conmigo.

Ahora, hemos almacenado con éxito nuestros recursos en el caché del navegador. Y la próxima vez que carguemos la página, el service worker manejará la solicitud y buscará el caché si estamos fuera de línea.

Por lo que toca recuperar nuestro caché.

Fetch de recursos

• En serviceWorker.js

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request)
    })
  )
})

Aquí usamos el evento fetch para recuperar nuestros datos. El callback nos da acceso a fetchEvent. Luego le adjuntamos respondWith() para evitar la respuesta predeterminada del navegador. En su lugar devuelve una promesa, ya que la acción de recuperación puede tardar un tiempo en completarse.

Y una vez listo el caché, aplicamos el método caches.match(fetchEvent.request). Este verificará si algo en el caché coincide con fetchEvent.request. Por cierto, fetchEvent.request es solo nuestro arreglo de recursos.

Luego, este devuelve una promesa. Y finalmente, podemos devolver el resultado si existe o el fetch inicial si no.

Ahora, nuestros recursos pueden ser almacenados en caché y recuperados por el service worker, lo que aumenta bastante el tiempo de carga de nuestras imágenes.

Y lo más importante, hace que nuestra aplicación esté disponible en modo fuera de línea.

Pero un service worker por si solo no puede hacer el trabajo. Necesitamos registrarlo en nuestro proyecto.

Registrando el Service Worker

• En js/app.js

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("/serviceWorker.js")
      .then(res => console.log("service worker registered"))
      .catch(err => console.log("service worker not registered", err))
  })
}

Aquí, comenzamos verificando si serviceWorker es compatible con el navegador actual (ya que todavía no es compatible con todos los navegadores).

Luego, escuchamos el evento de carga de la página para registrar nuestro service worker pasando el nombre de nuestro archivo serviceWorker.js a navigator.serviceWorker.register() como parámetro para registrar nuestro worker.

Con esta actualización, ahora hemos transformado nuestra aplicación web habitual en una PWA.

Pensamientos finales

A lo largo de este artículo, hemos visto lo increíbles que pueden ser las PWAs. Al agregar un archivo de manifiesto de aplicación web y un service worker, se obtiene una mejora importante de la experiencia de usuario en nuestra aplicación web tradicional. Esto se debe a que las PWAs son rápidas, seguras, confiables y –  lo más importante –  habilitan el modo fuera de línea.

Muchos frameworks ahora vienen con un archivo de service worker ya configurado para nosotros. Pero saber cómo implementarlo puramente con JavaScript puede ayudarte a comprender mejor las PWAs.

Y puedes ir aún más lejos con los service workers, almacenando en caché los recursos de forma dinámica, limitando el tamaño de dicha caché, y mucho más.

Gracias por leer este artículo.

Puedes ver un demo de lo que creamos aquí y el código fuente acá.

Lee más de mis artículos en mi blog.

Traducido del artículo de Ibrahima Ndaw - How to build a PWA from scratch with HTML, CSS, and JavaScript

Sin embargo, los tipos de datos (cadena, número, etc.) pueden diferir de un arreglo a otro. Esto significa que usar únicamente el método sort() no siempre es la solución adecuada.

En este post, aprenderás como ordenar un arreglo en JavaScript usando el método sort() con cadenas y números.

Arreglo de Cadenas

Comencemos con cadenas:

const equipos = ['Real Madrid', 'Manchester Utd', 'Bayern Munich', 'Juventus'];

Cuando usamos el método sort(), los elementos se ordenarán en orden ascendente (de la A a la Z) por defecto:

equipos.sort(); 

// ['Bayern Munich', 'Juventus', 'Manchester Utd', 'Real Madrid']

Si prefieres ordenar el arreglo en orden descendente, debes usar el método reverse() en su lugar:

equipos.reverse();

// ['Real Madrid', 'Manchester Utd', 'Juventus', 'Bayern Munich']

Arreglo de Números

Lamentablemente, ordenar números no es tan simple. Si aplicamos el método sort() directamente a un arreglo de números, veremos un resultado inesperado:

const numeros = [3, 23, 12];

numeros.sort(); // --> 12, 23, 3

Por qué el método sort() no funciona con números

En realidad está funcionando, pero este problema ocurre porque JavaScript ordena los números alfabéticamente. Déjame explicarte esto en detalle.

Pensemos en A=1, B=2 y C=3.

const miArreglo = ['C', 'BC', 'AB'];

miArreglo.sort(); // [AB, BC, C]

Por ejemplo, si tenemos tres cadenas como C (3), BC (23) y AB (12), JavaScript las ordenará como AB, BC y C en orden ascendente, lo que es alfabéticamente correcto.

Sin embargo, JavaScript ordenará los números (alfabéticamente nuevamente) como 12, 23 y 3, lo cual es incorrecto.

Solución: la función de comparación

Afortunadamente, podemos complementar el método sort() con una función de comparación básica que haga el truco:

function(a, b) {return a - b}

El método sort() puede ordenar valores negativos, cero y positivos en el orden correcto. Cuando compara dos valores, los envía a nuestra función de comparación y luego ordena los valores de acuerdo al resultado devuelto.

• Si el resultado es negativo, a se ordena antes que b.
• Si el resultado es positivo, b se ordena antes de a.
• Si el resultado es 0, nada cambia.

Todo lo que necesitamos es usar la función de comparación dentro del método sort():

const numeros = [3, 23, 12];

numeros.sort(function(a, b){return a - b}); // --> 3, 12, 23

Si queremos ordenar los números en orden descendente, esta vez necesitamos restar el segundo parámetro (b) del primero (a):

const numeros = [3, 23, 12];

numeros.sort(function(a, b){return b - a}); // --> 23, 12, 3

En conclusión

Como podemos ver, ordenar los elementos de un arreglo puede hacerse fácilmente en JavaScript con el método sort(), si sabemos usarlo correctamente. Espero que mi post pueda servirte de ayuda para entenderlo y usarlo de la mejor forma.

Si deseas obtener más información sobre Desarrollo Web, no dudes en visitar mi canal de Youtube .

¡Gracias por leer!

Traducido del artículo de Cem Eygi - JavaScript Array Sort – How to Use JS Sort Methods (With Code Examples)

Siendo esta la 238,947,234 vez y probablemente última vez que cambiaré mi nombre de usuario (el matrimonio es permanente, ¿verdad?), pensé que sería mejor escribir un post rápido sobre cómo se puede lograr esta transición de la manera más fluida posible. La siguiente es una guía rápida de algunas cosas a considerar después.

Donde hacer cambios

1. Cambia tu nombre de usuario haciendo clic en Change username en las opciones de tu cuenta de GitHub.
2. Si usas GitHub Pages, cambia el nombre de tu repositorio “nombredeusuario.github.io”.
3. Si usas otros servicios que apunten a tu dirección de repositorio "nombredeusuario.github.io", actualízalos.
4. Si usas Netlify, es posible que desees iniciar sesión y volver a conectar tus repositorios.
5. Inicia sesión en Travis CI y otras integraciones, encuéntralas en la pestaña (Settings -> Integrations) de tu repositorio. Esto actualizará tu nombre de usuario allí.
6. Actualiza tus archivos locales y enlaces de repositorio usando muy cuidadosamente comandos find y sed, empujando luego los cambios a GitHub.
7. Relanza cualquier sitio web que puedas tener con tu enlace de GitHub actualizado.
8. Corrige cualquier enlace en la web hacia tu perfil, tus repositorios, o Gists que hayas compartido.

Actualización de archivos locales

Aquí hay algunas sugerencias de cadenas para buscar y reemplazar tu nombre de usuario.

• github.com/nombredeusuario (Referencias a tu página de GitHub en READMEs o en la copia del sitio web)
• nombredeusuario.github.io (Enlaces a tu página de GitHub)
• git@github.nombredeusuario (URL ssh remotas de configuración de Git)
• travis-ci.com/nombredeusuario(Insignias de Travis en READMEs)
• shields.io/github/.../nombredeusuario(Insignias Shields en READMEs, incluyen contribuyentes, estrellas, etiquetas, y más)

Puedes identificar rápidamente dónde se encuentran las cadenas anteriores utilizando este comando para cada cadena:

grep -rnw -e 'foobar'

Esto buscará recursivamente (r) todos los archivos para cadenas que coincidan con todo (w) el patrón (e) proporcionado y antepondrá los resultados con los números de línea (n) para que puedas encontrarlos fácilmente.

Usando find y sed puedes hacer estos cambios mucho más rápido. Consulta este artículo sobre buscar y reemplazar .

¡Disfruta tu nuevo nombre! (Espero que este haga click contigo.)

Traducido del artículo de Victoria Drake - A quick guide to changing your GitHub username

Ahora, quiero desglosar el proceso para los nuevos programadores (y poetas - con suerte), para que también se sientan cómodos trabajando con Github. Explicaré diferentes formas de empujar contenido a esta plataforma.

Para los efectos de este artículo, asumiré que los lectores están familiarizados con el uso de la terminal (GitBash o de otro tipo).

Empujar a un nuevo repositorio con un archivo README (Léeme)

Solo hay algunos pasos esenciales para hacer esto:

• Has clic en el botón verde Code (Código) en la página del repositorio.

• Usa la opción Clone -> HTTPS, y copia el enlace proporcionado.

• Ejecuta git clone https://github.com/nombreDeUsuario/repositorio.git en la terminal. Aquí, nombrelDeUsuario y repositorio serán reemplazados por los valores proporcionados en el enlace copiado.
• Ejecuta git init en la terminal. Esto inicializará la carpeta/repositorio que tienes en tu computador local.
• Ejecuta git add . en la terminal. Esto hará un seguimiento de los cambios realizados en la carpeta de tu sistema desde el último commit. Si es la primera vez que haces commit a los contenidos de la carpeta, se añadirán todos.
• Ejecuta git commit -m "inserta Mensaje aquí". Esto preparará los cambios añadidos/rastreados en la carpeta de tu sistema para empujar a Github. Puedes reemplazar inserta el Mensaje aquí con cualquier mensaje de confirmación relevante de tu elección.
• Finalmente, ejecuta git push origin master para empujar tus archivos a Github. Ten en cuenta que la última palabra en el comando master, no es una entrada fija cuando se ejecuta git push, puede ser reemplazada por cualquier “nombre_de_rama” relevante.

Como empujar Código Existente a un nuevo repositorio de Github

"Programar es algo hermoso. ¡Cualquiera puede aprender a programar!"

Necesitas seguir los siguiente pasos:

• Copia el enlace HTTPS proporcionado al momento de crear el nuevo repositorio.

• Ejecuta git init en la terminal. Esto inicializará la carpeta/repositorio que tienes en tu computador local.
• Ejecuta git add . en la terminal. Esto hará un seguimiento de los cambios realizados en la carpeta de tu sistema desde el último commit. Como es esta la primera vez que haces commit a los contenidos de la carpeta, se añadirán todos.
• Ejecuta git commit -m "inserta Mensaje aquí". Esto preparará los cambios añadidos/rastreados en la carpeta de tu sistema para empujar a Github. Puedes reemplazar inserta el Mensaje aquí con cualquier mensaje de confirmación relevante de tu elección.
• Ejecuta git remote add origin https://github.com/nombreDeUsuario/repositorio.git en la terminal. Aquí, nombreDeUsuario y repositorio serán reemplazados por los valores proporcionados en el enlace copiado. Esto conectará la carpeta existente en tu sistema local al repositorio de Github recién creado.
• Ejecuta git remote -v. Esto hace algo de magia usando git pull y git push para garantizar que el contenido de tu nuevo repositorio de Github y la carpeta en tu sistema local sean los mismos.
• Finalmente, ejecuta git push origin master para empujar tus archivos a Github. Ten en cuenta que la última palabra en el comando master, no es una entrada fija cuando se ejecuta git push, puede ser reemplazada por cualquier “nombre_de_rama” relevante.

¡Eso es todo! Sinceramente, creo que cualquiera puede aprender a programar. Pasé el año pasado dando clases particulares a estudiantes de pre-grado en Nigeria sobre Desarrollo de Software.

¡Empieza hoy a programar!

Traducido del artículo de Usheninte Dangana - Pushing to Github - made simple enough for Poets

El encadenamiento opcional, representado por ?. en JavaScript, es una funcionalidad introducida en ES2020.

El encadenamiento opcional cambia la forma en que se accede a las propiedades desde objetos profundamente anidados. Solucionando el problema de tener que comprobar elementos nulos múltiples veces al acceder a una larga cadena de propiedades de objetos en JavaScript.

Estado Actual: Propuesta de ECMAScript en la etapa 4 del proceso. : https://github.com/tc39/proposal-optional-chaining

Casos de uso

1. Acceder potencialmente a propiedades null o undefined de un objeto.
2. Obtener resultados de una variable que puede no estar disponible todavía.
3. Obtener valores predeterminados.
4. Acceder a largas cadenas de propiedades.

Imagina que esperas que una API devuelva un objeto de este tipo:

obj = {
  prop1: {
    prop2: {
      algunaProp: "valor"
    }
  }
};

Pero es posible que no sepas si cada uno de estos campos está disponible de antemano. Algunos de ellos pueden no haber sido devueltos por la API o pueden haber regresado con valores nulos.

Aquí hay un ejemplo:

//esperado
obj = {
  id: 9216,
  hijo: [
    { id: 123, hijo: null },
    { id: 124, hijo: [{ id: 1233, hijo: null }] }
  ]
};

//actual
obj = {
  id: 9216,
  hijo: null
};

Esto sucede muy a menudo con funciones que llaman a una API. Es posible que hayas visto código en React que intenta protegerse contra estos problemas de la siguiente manera:

render = () => {
  const obj = {
    prop1: {
      prop2: {
        algunaProp: "valor",
      },
    },
  };

  return (
    <div>
      {obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.algunaProp && (
        <div>{obj.prop1.prop2.algunaProp}</div>
      )}
    </div>
  );
};

Para afrontar mejor este problema, muchas veces en el pasado hemos utilizado Lodash, específicamente el método _.get:

_.get(obj, prop1.prop2.algunaProp);

Esto genera undefined si alguna de esas propiedades es undefined. ¡El encadenamiento opcional es exactamente eso! Ahora en lugar de utilizar una librería externa, esta funcionalidad está disponible de forma nativa.

¿Cómo funciona el encadenamiento opcional?

?. se puede utilizar para encadenar propiedades que pueden ser null o undefined.

const propNecesitada = obj?.prop1?.prop2?.algunaProp;

Si cualquiera de esas propiedades encadenadas es null o undefined, JavaScript regresará undefined.

¿Qué pasa si queremos devolver algo más significativo? Prueba esto:

let arbolFamiliar = {
    nosotros: {
        hijo: {}
    }
}

// usando _.get
const nieto = _.get(arbolFamiliar, 'nosotros.hijo.suHijo', 'No se encontraron hijos' );

// usando encadenamiento opcional y null coalescing 
const nullCoalescing = arbolFamiliar?.nosotros?.hijo?.suHijo ?? 'No se encontraron hijos'

console.log(nullCoalescing) // No se encontraron hijos

También funciona para objetos que pueden ser null o undefined:

let usuario;
console.log(usuario?.id) // undefined

Cómo obtener esta funcionalidad tan reciente

1. Pruébalo en la consola de tu navegador: Esta es una adición reciente y los navegadores antiguos pueden necesitar polyfills. Puedes probarlo en Chrome o Firefox desde la consola del navegador. Si no funciona, intenta activar las funciones experimentales de JavaScript visitando chrome://flags/ y habilitando "JavaScript Experimental".
2. Pruébalo en una aplicación de Node usando Babel:

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

En resumen

Utiliza el encadenamiento opcional ?. para comprobar objetos o propiedades en cadenas largas que pueden ser null o undefined. La sintaxis es la siguiente:

let usuario = {};
console.log(usuario?.id?.nombre)

¿Interesado en más tutoriales y JSBytes de mi parte? Suscríbete a mi boletín de noticias o sígueme en Twitter.

Traducido del artículo de Shruti Kapoor - JavaScript Optional Chaining `?.` Explained - How it Works and When to Use it

Mantenerse al día con los nuevos desarrollos del lenguaje es realmente importante. Puede ayudarte a conseguir un trabajo mejor remunerado, mantenerte actualizado con las ultimas tendencias, mejorar la calidad de tu código, y sobresalir en tu trabajo actual.

Y sin lugar a dudas necesitas conocer las funcionalides más recientes si estás tratando de aprender una librería de JavaScript como React o un framework como Angular o Vue.

Recientemente, el lenguaje de JavaScript ha recibido muchas adiciones útiles, como encadenamiento opcional, promesas, async/await, desestructuración, y más.

Hoy veremos algunos de estos conceptos, los cuales todo desarrollador de JavaScript debería conocer.

¡Empecemos!

Let y const en JavaScript

Antes de ES6, JavaScript usaba la palabra clave var la cual solo cuenta con un ámbito global o funcional. El ámbito de bloque no existía.

Con la adición de let y const JavaScript incorporó este último.

Como usar let en JavaScript

Cuando declaramos una variable usando la palabra clave let, podemos asignar más tarde un nuevo valor a dicha variable, pero no podemos re-declararla con el mismo nombre.

// Código ES5
var valor = 10;
console.log(valor); // 10

var valor = "hola";
console.log(valor); // hola

var valor = 30;
console.log(valor); // 30

Como puedes ver arriba, hemos vuelto a declarar la variable valor usando la palabra clave var repetidas veces.

Antes de ES6, pudimos volver a declarar una variable que ya había sido declarada antes si esta no se usaba de manera significativa y en cambio causaba confusión.

Pero, ¿y si ya tuviéramos una variable declarada con el mismo nombre en otro lugar y la volvemos a declarar sin darnos cuenta? Entonces podríamos sobrescribir el valor de la variable, causando algunos problemas difíciles de depurar.

Usando la palabra clave let, si intentas volver a declarar la variable con el mismo nombre obtendrás un error – lo cual es bueno.

// Código ES6
let valor = 10;
console.log(valor); // 10

let valor = "hola"; // Uncaught SyntaxError: Identifier 'valor' has already been declared

Pero, el siguiente código es válido:

// Código ES6
let valor = 10;
console.log(valor); // 10

valor = "hola";
console.log(valor); // hola

No obtenemos un error en el código anterior porque estamos re-asignando un nuevo valor a la variable valor. Pero no estamos re-declarando valor de nuevo.

Ahora, observa el siguiente código:

// Código ES5
var esValido = true;
if(esValido) {
  var numero = 10;
  console.log('dentro:', numero); // dentro: 10
}
console.log('fuera:', numero); // fuera: 10

Como puedes ver en este código, cuando declaramos una variable con la palabra clave var, esta se encuentra disponible dentro y fuera del bloque if.

Ahora, observa el siguiente código:

// ES6 Code
let esValido = true;
if(esValido) {
  let numero = 10;
  console.log('dentro:', numero); // dentro: 10
}

console.log('fuera:', numero); // Uncaught ReferenceError: numero is not defined

Como puedes ver, al declarar la variable numero usando la palabra clave let esta solo es accesible dentro del bloque if. No está disponible fuera del bloque, por lo que obtuvimos un error de referencia cuando intentamos acceder a ella fuera del bloque if.

Pero si hay una variable numero fuera del bloque if, funcionará como se muestra a continuación:

// Código ES6
let esValido = true;
let numero = 20;

if(esValido) {
  let numero = 10;
  console.log('dentro:', numero); // dentro: 10
}

console.log('fuera:', numero); // fuera: 20

En este caso tenemos dos variables numero con un ámbito distinto. Por lo que fuera del bloque if, el valor numero será 20.

Observa el siguiente código:

// Código ES5
for(var i = 0; i < 10; i++){
 console.log(i);
}
console.log('fuera:', i); // 10

Al usar la palabra clave var, i está disponible incluso fuera del bucle for.

// Código ES6
for(let i = 0; i < 10; i++){
 console.log(i);
}

console.log('fuera:', i); // Uncaught ReferenceError: i is not defined

En cambio al usar let, esta no está disponible fuera del bucle.

Entonces como pudiste ver en los ejemplos de código anteriores, usar let hace la variable accesible solo dentro de ese bloque y no desde fuera del mismo.

También podemos crear un bloque con un par de llaves como esta:

let i = 10;
{
 let i = 20;
 console.log('dentro:', i); // dentro: 20
 i = 30;
 console.log('i de nuevo:', i); // i de nuevo: 30
}

console.log('fuera:', i); // fuera: 10

Si recuerdas, comenté que no podemos re-declarar una variable basada en let en el mismo bloque, pero podemos re-declararla en otro bloque. Como puedes ver en el código anterior, re-declaramos i y asignamos un nuevo valor de 20 dentro del bloque. Una vez declarada, ese valor de la variable estará disponible solo en ese bloque.

Fuera del bloque, cuando imprimimos esa variable, obtuvimos 10 en lugar de 30 que fue el valor previamente asignado, ya que fuera del bloque la variable interior i no existe.

Si no tenemos la variable i declarada afuera, obtendremos un error como puedes ver en el siguiente código:

{
 let i = 20;
 console.log('dentro:', i); // dentro: 20
 i = 30;
 console.log('i de nuevo:', i); // i de nuevo: 30
}

console.log('fuera:', i); // Uncaught ReferenceError: i is not defined

Como usar const en JavaScript

La palabra clave const funciona exactamente igual que la palabra clave let en cuanto a su ámbito de bloque. Así que veamos cómo se diferencian entre sí.

Cuando declaramos una variable como const, esta se considera una variable constante cuyo valor nunca cambiará.

En el caso de let, podemos asignar mas adelante un nuevo valor a esa variable de esta manera:

let numero = 10;
numero = 20;

console.log(numero); // 20

Pero no podemos hacer eso en el caso de const:

const numero = 10;
numero = 20; // Uncaught TypeError: Assignment to constant variable.

Ni siquiera podemos re-declarar una variable const.

const numero = 20;
console.log(numero); // 20

const numero = 10; // Uncaught SyntaxError: Identifier 'numero' has already been declared

Ahora, observa el siguiente código:

const arr = [1, 2, 3, 4];

arr.push(5);

console.log(arr); // [1, 2, 3, 4, 5]

Hemos dicho que la variable const es una constante cuyo valor nunca cambiará – pero acabamos de hacer un cambio en un arreglo definido como constante. Entonces, ¿qué sentido tiene eso?

Nota: En JavaScript los arreglos son de tipo referencia y no de tipo primitivo.

Así que lo que realmente se almacena en arr no es el arreglo real, sino una referencia (dirección) de la ubicación en la memoria donde se encuentra almacenado el arreglo real.

Entonces haciendo arr.push(5); no estamos cambiando la referencia a la que apunta arr, pero estamos cambiando los valores almacenados en ella.

Con objetos tenemos el mismo caso:

const obj = {
 nombre: 'David',
 edad: 30
};

obj.edad = 40;

console.log(obj); // { nombre: 'David', edad: 40 }

Aquí tampoco estamos cambiando la referencia donde apunta obj, sino los valores almacenados en ella.

De tal manera que el código anterior funcionará, pero el siguiente no.

const obj = { nombre: 'David', edad: 30 };
const obj1 = { nombre: 'Mike', edad: 40 };
obj = obj1; // Uncaught TypeError: Assignment to constant variable.

El código anterior no funciona porque estamos intentando cambiar la referencia a la que apunta la variable const.

Así que el punto clave a recordar cuando usamos const es que, si declaramos la variable como constante, no podemos re-definirla. Tampoco podemos re-asignar esa variable, pero podemos cambiar los valores almacenados en la misma si esta es de tipo referencia.

Por lo tanto, el siguiente código no es válido porque le estamos reasignando un nuevo valor.

const arr = [1, 2, 3, 4];
arr = [10, 20, 30]; // Uncaught TypeError: Assignment to constant variable.

Pero ten en cuenta que podemos cambiar los valores dentro del arreglo, como vimos anteriormente.

El siguiente código para re-definir una variable const también es inválido.

const nombre = "David";
const nombre = "Raj"; // Uncaught SyntaxError: Identifier 'nombre' has already been declared

Resumen de let y const

• Las palabras claves let y const añaden ámbito de bloque en JavaScript.
• Cuando declaramos una variable como let, no podemos re-definir o re-declarar otra variable let con el mismo nombre en el mismo ámbito (funcional o de bloque). Pero podemos re-asignar un valor a ella.
• Cuando declaramos una variable como const, no podemos re-definir o re-declarar otra variable const con el mismo nombre en el mismo ámbito (funcional o de bloque). Pero podemos cambiar los valores almacenados en dicha variable, si esta es de tipo referencia, como un arreglo u objeto.

Muy bien, pasemos al siguiente gran tema: promesas.

Promesas en JavaScript

Las promesas son una de las partes más importantes, aunque confusas y difíciles de entender de JavaScript. Y la mayoría de los desarrolladores nuevos, así como los experimentados, luchan por comprenderlas.

Las promesas se añadieron en ES6 de forma nativa.

Entonces, ¿qué es una promesa? Una promesa representa una operación asincrónica que se completará en el futuro.

Anteriormente, antes de ES6, no había forma de esperar por algo que realizara alguna operación.

Por ejemplo, cuando queríamos hacer una llamada a la API, no había forma de esperar hasta que los resultados llegaran.

Para eso, solíamos usar bibliotecas externas como Jquery o Ajax que tenían su propia implementación de promesas. Pero el navegador no contaba nativamente con dichas funciones.

Pero ahora, usando Promesas en ES6, podemos hacer una llamada a la API por nuestra cuenta y esperar hasta que esté lista para realizar alguna operación.

Como crear una Promesa

Para crear una promesa, necesitamos usar la función constructora Promise de la siguiente forma:

const promesa = new Promise(function(resolver, rechazar) {
 
});

El constructor Promise toma una función como argumento y dicha función recibe internamente resolver y rechazar como parámetros.

Los parámetros resolver y rechazar son en realidad funciones que podemos llamar dependiendo del resultado de la operación asincrónica.

Una promesa Promise pasa por tres estados:

• Pendiente
• Cumplido
• Rechazado

Cuando creamos una promesa, la misma está en estado pendiente. Al llamar a la función resolver, entra en estado cumplido y si llamamos rechazar, pasará al estado rechazado.

Para simular una operación asíncrona o de larga duración, usaremos la función setTimeout.

const promesa = new Promise(function(resolver, rechazar) {
 setTimeout(function() {
  const suma = 4 + 5;
  resolver(suma);
 }, 2000);
});

Aquí creamos una promesa que se resolverá con la suma de 4 y 5 después de que finalice un tiempo de espera de 2000 ms (2 segundos).

Para obtener el resultado de la ejecución exitosa de la promesa, necesitamos registrar un callback usando .then de la siguiente manera:

const promesa = new Promise(function(resolver, rechazar) {
 setTimeout(function() {
  const suma = 4 + 5;
  resolver(suma);
 }, 2000);
});

promesa.then(function(resultado) {
 console.log(resultado); // 9
});

Entonces, cada vez que llamemos resolver, la promesa devolverá el valor transmitido a la función, el cual podemos recopilar usando el manejador .then.

Si la operación no tiene éxito, llamamos a la función rechazar así:

const promesa = new Promise(function(resolver, rechazar) {
 setTimeout(function() {
  const suma = 4 + 5 + 'a';
  if(isNaN(suma)) {
    rechazar('Error al calcular la suma.');
  } else {
    resolver(suma);
  }
 }, 2000);
});

promesa.then(function(resultado) {
 console.log(resultado);
});

Aquí, si la suma no es un número, llamamos a la función rechazar con el mensaje de error. De lo contrario, llamamos a la función resolver.

Si ejecutas el código anterior, verás el siguiente resultado:

Como puedes ver, obtenemos un mensaje de error sin captar junto al mensaje que especificamos, porque llamar a la función rechazar arroja un error. Pero no hemos agregado un manejador de errores para captar dicho error.

Para captar el error, necesitamos registrar otro callback usando .catch de esta forma:

promesa.then(function(resultado) {
 console.log(resultado);
}).catch(function(error) {
 console.log(error);
});

Verás la siguiente salida:

Como puedes ver, hemos agregado el manejador .catch, por lo que no obtenemos ningún error sin captar, solo estamos registrando el error en la consola.

Esto también evita que tu aplicación se detenga abruptamente.

Por lo tanto, se recomienda siempre agregar el manejador .catch a cada promesa para que la aplicación no deje de ejecutarse debido a un error.

Encadenamiento de promesas

Podemos agregar multiples manejadores .then a una sola promesa de la siguiente manera:

promesa.then(function(resultado) {
 console.log('Primer manejador .then');
 return resultado;
}).then(function(resultado) {
 console.log('Segundo manejador .then');
 console.log(resultado);
}).catch(function(error) {
 console.log(error);
});

Cuando tenemos agregados múltiples manejadores .then, el valor devuelto por el anterior es traspasado automáticamente al siguiente.

Como puedes ver, al sumar 4 + 5 se resuelve una promesa, y obtenemos el resultado de la suma en el primer manejador .then. Allí imprimimos un mensaje en la consola y devolvemos el resultado al siguiente .then.

Dentro del siguiente manejador .then, agregamos una declaración de consola e imprimimos el resultado que obtuvimos del manejador .then anterior.

Este patrón de agregar múltiples manejadores .then de forma consecutiva se conoce como encadenamiento de promesas.

Cómo retrasar la ejecución de una promesa en JavaScript

Muchas veces no queremos crear una promesa de inmediato, sino que queremos crear una después de que se complete alguna operación.

Para lograr esto, podemos envolver la promesa en una función y devolver esa promesa desde dicha función de esta manera:

function crearPromesa() {
 return new Promise(function(resolver, rechazar) {
  setTimeout(function() {
   const suma = 4 + 5;
   if(isNaN(suma)) {
     rechazar('Error al calcular la suma.');
   } else {
    resolver(suma);
   }
  }, 2000);
 });
}

De esta manera, podemos usar los parámetros de la función dentro de la promesa, haciendo que la función sea verdaderamente dinámica.

function crearPromesa() {
 return new Promise(function(resolver, rechazar) {
  setTimeout(function() {
   const suma = 4 + 5;
   if(isNaN(suma)) {
     rechazar('Error al calcular la suma.');
   } else {
    resolver(suma);
   }
  }, 2000);
 });
}

crearPromesa(1,8)
 .then(function(resultado) {
  console.log(resultado); // 9
});

// OR

crearPromesa(10,24)
 .then(function(resultado) {
  console.log(resultado); // 34
});

Nota: Cuando creamos una promesa, se resolverá o rechazará, pero no ambas al mismo tiempo. Por lo tanto, no podemos agregar dos llamadas a la función resolver o rechazar en la misma promesa.

Además, podemos pasar solo un valor a la función resolver o rechazar.

Si deseas pasar varios valores a una función resolver, puedes utilizar un objeto como en el siguiente ejemplo:

const promesa = new Promise(function(resolver, rechazar) {
 setTimeout(function() {
  const suma = 4 + 5;
  resolver({
   a: 4,
   b: 5,
   suma
  });
 }, 2000);
});

promesa.then(function(resultado) {
 console.log(resultado);
}).catch(function(error) {
 console.log(error);
});

Cómo usar las funciones de flecha en JavaScript

En todos los ejemplos de código pasados, al crear promesas utilizamos la sintaxis regular de función en ES5. Pero en su lugar, es común usar la sintaxis de función de flecha de la siguiente manera.

const promesa = new Promise((resolver, rechazar) => {
 setTimeout(() => {
  const suma = 4 + 5 + 'a';
  if(isNaN(suma)) {
    rechazar('Error al calcular la suma.');
  } else {
    resolver(suma);
  }
 }, 2000);
});

promesa.then((resultado) => {
 console.log(resultado);
});

Puedes utilizar la sintaxis de función en ES5 o ES6 dependiendo de tus preferencias y necesidades.

Sintaxis para Import y Export en ES6

Antes de que ES6 entrara en juego, utilizabamos múltiples etiquetas script en un solo archivo HTML para importar diferentes archivos JavaScript de esta manera:

<script type="text/javascript" src="inicio.js"></script>
<script type="text/javascript" src="perfil.js"></script>
<script type="text/javascript" src="usuario.js"></script>

Entonces, si existiese una variable con el mismo nombre en diferentes archivos JavaScript, se crearía un conflicto de nombres y el valor que esperabas no sería el valor real que obtuviste.

ES6 ha solucionado este problema con el concepto de módulos.

Cada archivo JavaScript que escribimos en ES6 se conoce como módulo. Las variables y funciones que declaramos en cada archivo no están disponibles para otros archivos hasta que las exportamos específicamente desde ese archivo y las importamos a otro.

Por lo tanto, las funciones y variables definidas en el archivo son privadas para cada uno, y no se pueden acceder desde fuera hasta que las exportemos.

Hay dos tipos de exportaciones:

• Exportaciones Nombradas: Pueden haber múltiples exportaciones con nombre en un solo archivo
• Exportaciones por Defecto: Solo puede haber una exportación por defecto en un solo archivo

Exportaciones Nombradas en JavaScript

Para exportar un solo valor como una exportación nombrada, lo exportamos así:

export const temp = "Este es un texto ficticio";

Si tenemos varias cosas para exportar, podemos escribir una declaración de exportación en una línea separada en lugar de delante de la declaración de variable. Especificamos las cosas a exportar entre llaves.

const temp1 = "Este es un texto ficticio1";
const temp2 = "Este es un texto ficticio2";

export { temp1, temp2 };

Ten en cuenta que la sintaxis de exportación no es una sintaxis literal de objeto. Por lo que, en ES6, para exportar algo no podemos usar pares clave-valor como el siguiente:

 // Esta es una sintaxis de exportación no válida en ES6

export { clave1: valor1, clave2: valor2 }

Para importar las cosas que exportamos como una exportación nombrada, usamos la siguiente sintaxis:

import { temp1, temp2 } from './nombreDelArchivo';

Ten en cuenta que al importar algo desde un archivo, no es necesario agregar la extensión .js al nombre del mismo, ya que se considera de forma predeterminada.

// importar desde el archivo funciones.js desde el directorio actual 
import { temp1, temp2 } from './funciones';

// importar desde el archivo funciones.js desde el padre del directorio actual
import { temp1 } from '../funciones';

Aquí hay una demostración en Code Sandbox: https://codesandbox.io/s/hardcore-pond-q4cjx

Una cosa a tener en cuenta es que el nombre utilizado durante la exportación debe coincidir con el nombre que utilizamos durante la importación.

Por lo que, si estás exportando así:

// constantes.js
export const PI = 3.14159;

Luego, al importar, debes usar el mismo nombre que usaste al exportar:

import { PI } from './constantes';

No puedes usar ningún otro nombre como este:

import { ValorPI } from './constantes'; // Esto arrojará un error

Pero si ya tienes la variable con el mismo nombre que la variable exportada, puedes usar la siguiente sintaxis para renombrar la variable mientras realizas la importación:

import { PI as ValorPI } from './constantes';

Aquí hemos cambiado el nombre de PI a ValorPI y por lo tanto ya no podemos usar el nombre PI como variable. En su lugar, tenemos que usar la variable ValorPI para obtener el valor exportado de PI.

También podemos utilizar la sintaxis de cambio de nombre a la hora de exportar:

// constantes.js
const PI = 3.14159; 

export { PI as ValorPI };

Luego, al importar, tenemos que usar ValorPI así:

import { ValorPI } from './constantes';

Para exportar algo como una exportación nombrada, primero debemos declararlo.

export 'hola'; // Esto arrojará un error
export const saludos = 'hola'; // Esto funcionará
export { nombre: 'David' }; // Esto arrojará un error
export const objeto = { nombre: 'David' }; // Esto funcionará

El orden en el que importamos las múltiples exportaciones nombradas no es importante.

Fíjate en el siguiente archivo validations.js:

// utils/validations.js

const esEmailValido = function(email) {
  if (/^[^@ ]+@[^@ ]+\.[^@ \.]{2,}$/.test(email)) {
    return "el email es válido";
  } else {
    return "el email es inválido";
  }
};

const esTelefonoValido = function(telefono) {
  if (/^[\\(]\d{3}[\\)]\s\d{3}-\d{4}$/.test(telefono)) {
    return "el número de teléfono es válido";
  } else {
    return "el número de teléfono es inválido";
  }
};

function estaVacia(valor) { 
  if (/^\s*$/.test(valor)) {
    return "la cadena está vacía o contiene solo espacios";
  } else {
    return "la cadena no está vacía y no contiene espacios";
  } 
}

export { esEmailValido, esTelefonoValido, estaVacia };

Y en index.js usamos estas funciones como se muestra a continuación:

// index.js
import { estaVacia, esEmailValido } from "./utils/validations";

console.log("estaVacia:", estaVacia("abcd")); // estaVacia: la cadena no está vacía y no contiene espacios

console.log("esEmailValido:", esEmailValido("abc@11gmail.com")); // esEmailValido: el email es válido

console.log("esEmailValido:", esEmailValido("ab@c@11gmail.com")); // esEmailValido: el email es inválido

Aquí hay una demostración en Code Sandbox: https://codesandbox.io/s/youthful-flower-xesus

Como puedes ver, pudimos importar solo los elementos exportados requeridos y en cualquier orden, por lo que no es necesario verificar en qué orden fueron exportados en otro archivo. Esa es la belleza de las exportaciones nombradas.

Exportaciones por Defecto en JavaScript

Como dije anteriormente, puede haber como máximo una exportación por defecto en un solo archivo.

Sin embargo, puedes combinar varias exportaciones nombradas y una exportación por defecto en un solo archivo.

Para declarar una exportación por defecto, agregamos la palabra clave default  delante de la palabra clave export de la siguiente manera:

//constantes.js
const nombre = 'David'; 
export default nombre;

Para importar la exportación por defecto, no agregamos llaves como hicimos en la exportación nombrada, en cambio lo hacemos así:

import nombre from './constantes';

Si tenemos varias exportaciones nombradas y una exportación por defecto como esta:

// constantes.js
export const PI = 3.14159; 
export const EDAD = 30;

const NOMBRE = "David";
export default NOMBRE;

Luego, para importar todo en una sola línea, necesitamos usar la variable exportada por defecto antes del corchete.

// NOMBRE es una exportación por defecto y PI y Edad son exportaciones nombradas

import NOMBRE, { PI, EDAD } from './constantes';

Una especialidad de la exportación por defecto es que podemos cambiar el nombre de la variable exportada durante la importación:

// constantes.js
const EDAD = 30;
export default EDAD;

Y en otro archivo, podemos usar otro nombre al importar

import miEdad from ‘./constantes’; 

console.log(miEdad); // 30

Aquí, hemos cambiado el nombre de la variable exportada por defecto de EDAD a miEdad.

Esto funciona porque solo puede haber una exportación por defecto, por lo que puedes nombrarla como desees.

Otra cosa a tener en cuenta sobre la exportación por defecto es que la palabra clave export default no puede ir antes de la declaración de una variable como esta:

// constantes.js
export default const EDAD = 30; // Este es un error y no funcionará

Así que tenemos que usar la palabra clave export default en una línea separada de esta forma:

// constantes.js 

const EDAD = 30; 
export default EDAD;

Sin embargo, podemos exportar por defecto sin declarar la variable de esta manera:

//constantes.js
export default {
 nombre: "Billy",
 edad: 40
};

Y en otro archivo usarlo así:

import usuario from './constantes';
console.log(usuario.nombre); // Billy 
console.log(usuario.edad); // 40

Existe otra forma de importar todas las variables exportadas en un archivo usando la siguiente sintaxis:

import * as constantes from './constantes';

Aquí, estamos importando todas las exportaciones nombradas y por defecto que tenemos en constantes.js y estas se almacenaran en la variable constantes. Así que, constantes se convertirá en un objecto.

// constantes.js
export const USERNAME = "David";
export default {
 nombre: "Billy",
 edad: 40
};

Y en otro archivo, lo usamos de la siguiente manera:

// prueba.js

import * as constantes from './constantes';

console.log(constantes.USERNAME); // David
console.log(constantes.default); // { nombre: "Billy", edad: 40 }
console.log(constantes.default.edad); // 40

Aquí hay una demostración en Code Sandbox: https://codesandbox.io/s/green-hill-dj43b

Si no deseas exportar en líneas separadas las exportaciones por defecto y nombradas, puedes combinarlas como se muestra a continuación:

// constantes.js
const PI = 3.14159; const EDAD = 30;
const USERNAME = "David";
const USUARIO = {
 nombre: "Billy",
 edad: 40 
};

export { PI, EDAD, USERNAME, USUARIO as default };

Aquí, estamos exportando USUARIO como exportación por defecto y las otras como exportaciones nombradas.

En otro archivo, puedes usarlo así:

import USUARIO, { PI, EDAD, USERNAME } from "./constantes";

Aquí hay una demostración en Code Sandbox: https://codesandbox.io/s/eloquent-northcutt-7btp1

En resumen:

1. En ES6, los datos declarados en un archivo no son accesibles a otro archivo hasta que se exportan desde ese archivo y se importan a otro archivo.
2. Si tenemos una sola cosa para exportar en un archivo como una declaración de clase, usamos la exportación por defecto, de lo contrario usamos la exportación nombrada. También podemos combinar exportaciones por defecto y nombradas en un solo archivo.

Parámetros Predeterminados en JavaScript

ES6 ha agregado una característica bastante útil para proporcionar parámetros predeterminados al definir funciones.

Supongamos que tenemos una aplicación, donde una vez que el usuario inicia sesión en el sistema, les mostramos un mensaje de bienvenida como este:

function mostrarMensaje(primerNombre) {
  return "Bienvenido de nuevo, " + primerNombre;
}
console.log(mostrarMensaje('John')); // Bienvenido de nuevo, John

Pero, ¿qué pasa si no tenemos el nombre de usuario en nuestra base de datos, ya que era un campo opcional al momento de registrarse? Entonces podemos mostrar un mensaje al usuario como: Bienvenido Invitado después de iniciar sesión.

Así que, primero debemos verificar si se proporciona el primerNombre y luego mostrar el mensaje correspondiente. Antes de ES6, habríamos tenido que escribir un código como este:

function mostrarMensaje(primerNombre) {
  if(primerNombre) {
    return "Bienvenido de nuevo, " + primerNombre;
  } else {
    return "Bienvenido de nuevo, Invitado";
  }
}

console.log(mostrarMensaje('John')); // Bienvenido de nuevo, John 
console.log(mostrarMensaje()); // Bienvenido de nuevo, Invitado

Pero ahora en ES6 usando los parámetros de función predeterminados, podemos escribir el código anterior como se muestra a continuación:

function mostrarMensaje(primerNombre = 'Invitado') {
   return "Bienvenido de nuevo, " + primerNombre;
}

console.log(mostrarMensaje('John')); // Bienvenido de nuevo, John 
console.log(mostrarMensaje()); // Bienvenido de nuevo, Invitado

Podemos asignar cualquier valor como predeterminado al parámetro de la función.

function mostrar(a = 10, b = 20, c = b) { 
 console.log(a, b, c);
}

mostrar(); // 10 20 20
mostrar(40); // 40 20 20
mostrar(1, 70); // 1 70 70
mostrar(1, 30, 70); // 1 30 70

Como puedes ver, hemos asignado valores únicos a los parámetros de la función a y b, pero para c estamos asignando el valor de b. Entonces, cualquier valor que hayamos proporcionado para b se asignará a c también si no se proporciona un valor específico para c al llamar a la función.

En el código anterior, no hemos proporcionado todos los argumentos a la función. Entonces, las llamadas a las funciones anteriores serán las mismas que las siguientes:

mostrar(); // es igual que mostrar(undefined, undefined, undefined)
mostrar(40); // es igual que mostrar(40, undefined, undefined)
mostrar(1, 70); // es igual que mostrar(1, 70, undefined)

De tal manera que, si el argumento pasado es undefined, el valor predeterminado se usará para el parámetro correspondiente.

También podemos asignar valores complejos o calculados como valor predeterminado.

const usuarioPredeterminado = {
  nombre: 'Jane',
  ubicacion: 'NY',
  trabajo: 'Desarrolladora de Software'
};

const mostrar = (usuario = usuarioPredeterminado, edad = 60 / 2 ) => { 
 console.log(usuario, edad);
};
mostrar();

/* resultado:

{
  nombre: 'Jane',
  ubicacion: 'NY',
  trabajo: 'Software Developer'
} 30 

*/

Ahora, da un vistazo al siguiente código en ES5:

// Código ES5
function obtenerUsuarios(pagina, resultados, genero, nacionalidad) {
  var parametros = "";
  if(pagina === 0 || pagina) {
   parametros += `page=${pagina}&`; 
  }
  if(resultados) {
   parametros += `results=${resultados}&`;
  }
  if(genero) {
   parametros += `gender=${genero}&`;
  }
  if(nacionalidad) {
   parametros += `nationality=${nacionalidad}`;
  }

  fetch('https://randomuser.me/api/?' + parametros) 
   .then(function(respuesta) {
     return respuesta.json(); 
   })
   .then(function(resultado) { 
    console.log(resultado);
   }) 
   .catch(function(error) {
     console.log('error', error); 
   }); 
}

obtenerUsuarios(0, 10, 'male', 'us');

En este código, estamos haciendo una llamada API al usuario aleatorio (Random user) pasando varios parámetros opcionales en la función obtenerUsuarios.

Entonces, antes de realizar la llamada API, hemos agregado varias condiciones if para verificar si el parámetro se agrega o no, y en base a eso, construimos una cadena de consulta de la siguiente manera: https://randomuser.me/api/?page=0&results=10&gender=male&nationality=us.

Pero en lugar de agregar tantas condiciones if, podemos usar los parámetros predeterminados mientras definimos los parámetros de la función como se muestra a continuación:

function obtenerUsuarios(pagina = 0, resultados = 10, genero = 'male', nacionalidad = 'us') {
 fetch(`https://randomuser.me/api/?page=${pagina}&results=${resultados}&gender=${genero}&nationality=${nacionalidad}`)
 .then(function(respuesta) { 
  return respuesta.json();
 }) 
 .then(function(resultado) {
   console.log(resultado); 
 })
 .catch(function(error) { 
  console.log('error', error);
  }); 
}

obtenerUsuarios();

Como puedes ver, hemos simplificado mucho el código. Entonces, cuando no proporcionamos ningún argumento a la función obtenerUsuarios, esta tomará valores predeterminados. También podemos proporcionar nuestros propios valores de esta forma:

obtenerUsuarios(1, 20, 'female', 'gb');

Lo cual sobrescribirá los parámetros predeterminados de la función.

null no es igual a undefined

Pero debes tener en cuenta algo importante: null y undefined son dos cosas diferentes al definir parámetros predeterminados.

Observa el siguiente código:

function mostrar(nombre = 'David', edad = 35, ubicacion = 'NY'){
 console.log(nombre, edad, ubicacion); 
}

mostrar('David', 35); // David 35 NY
mostrar('David', 35, undefined); // David 35 NY

Como no hemos proporcionado el tercer valor para el parámetro de ubicación en la primera llamada a mostrar, este será undefined por defecto, por lo dicho valor undefined se utilizará en ambas llamadas de función. Sin embargo, las siguientes llamadas a funciones no son iguales.

display('David', 35, undefined); // David 35 NY
display('David', 35, null); // David 35 null

Cuando pasamos null como argumento, estamos diciendo específicamente que asignemos un valor null (nulo) al parámetro de ubicacion lo cual es diferente que undefined (indefinido). Por lo tanto, no tomará el valor predeterminado de NY.

Array.prototype.includes

ES7 ha agregado una nueva función que verifica si un elemento está presente en el arreglo o no y devuelve un valor booleano true o false.

// Código ES5

const numeros = ["uno", "dos", "tres", "cuatro"];

console.log(numeros.indexOf("uno") > -1); // true 
console.log(numeros.indexOf("cinco") > -1); // false

El mismo código usando el método Array includes puede escribirse como se muestra a continuación:

// Código ES7

const numeros = ["uno", "dos", "tres", "cuatro"];

console.log(numeros.includes("uno")); // true 
console.log(numeros.includes("cinco")); // false

Por lo tanto, el uso del método Array includes hace que el código sea corto y fácil de entender.

El método includes también es útil cuando se comparan diferentes valores.

Observa el siguiente código:

const dia = "lunes";

if(dia === "lunes" || dia === "martes" || dia === "miercoles") {
  // hacer algo
}

El código anterior se puede simplificar usando el método includes como se muestra a continuación:

const dia = "lunes";

if(["lunes", "martes", "miercoles"].includes(dia)) {
  // hacer algo
}

Así que, el método includes es bastante útil cuando se buscan valores en un arreglo.

Puntos finales

Hay muchos cambios que se han incorporado a JavaScript a partir de ES6. Y todos los desarrolladores de JavaScript, Angular, React o Vue deberían estar al tanto de ellos.

Conocerlos te convierte en un mejor desarrollador e incluso puede ayudarte a conseguir un trabajo mejor remunerado. Y si solo estás aprendiendo librerías como React y frameworks como Angular y Vue, seguramente querrás estar familiarizado con estas nuevas funcionalidades.

Aprende más sobre las funcionalidades de JavaScript moderno

Puedes aprender todo sobre las últimas funcionalidades agregadas en JavaScript en mi libro Mastering Modern JavaScript. Es la única guía que necesitas para aprender conceptos modernos de JavaScript.

Suscríbete a mi boletín semanal para unirte a más de 1000 suscriptores y obtener consejos, trucos y artículos increíbles directamente en tu bandeja de entrada.

Traducido del artículo de Yogesh Chavan - Modern JavaScript – Imports, Exports, Let, Const, and Promises in ES6+