Usando babel en el lado del servidor (en Node.js)

Clase 46 de 46 • Curso Definitivo de JavaScript 2016

Contenido del curso

Bienvenidos

1
¿Qué necesito para tomar el curso?
00:10 min

Materiales

2
Descarga el código del proyecto
00:10 min

Conceptos Básicos

Construyendo nuestro proyecto

Conclusiones

Sesiones en Vivo

Complementos del curso

Tomar examen

Comentarios

Alejandro Moreno

student•

Estoy leyendo la documentación de Babel y también dice que el "require hook" no es recomendado para producción. Así que tengo la duda ¿de que realmente es lo recomendado?

The require hook is primarily recommended for simple cases.

Guillermo Rodas

teacher•

Yo vi esta pregunta en el examen y si, esta mal. La forma recomendada siempre es ejecutar el codigo ya transpilado. Ahora bien, mi recomendación hoy en dia (Y bueno desde hace un tiempo), es no usar babel en el lado del servidor. Ya que muchos features de ES2015, ES2016, ES2017, etc son soportados por las nuevas versiones de Node. No tardan tanto en implementarlas como en el caso de los navegadores.

Javier Saura

student•

Este video me genera una duda,

¿que es mejor para producción hacer una transpilación de código y solo usar node-register para desarrollo o bien usar directamente el código ECMAScript 6 en Producción?

¿A nivel de rendimiento hay alguna consideración?

Entiendo que si se ejecuta con node-register implica que una recompilación en tiempo de ejecución, no?

Alejandro Roa

student•

Es mejor usar node-register. ECMAScript6 todavía no es totalmente compatible en la actualidad con algunos items, por lo tanto podría tener problemas en producción.

Edgardo T

student•

Considero que este video es importante para inciar con “babel” ya que muestra la configuración, deberia incluirse una guia escrita, como un tutorial rapido.

Jorge Díaz Hernández

student•

No entiendo por qué colocó el valor 200 dentro de app.get
¿alguien puede explicarme?

Sergio Daniel Xalambrí

student•

Es el código de status HTTP, indica que todo esta bien, te recomiendo leer como funcionan los código de status:

Jorge Díaz Hernández

student•

Ahora mismo lo leeré, gracias Sergio!

Esteban Ponce de León

student•

Excelente curso. Gran primera parte.

Al final me quedo con una duda. Para un proyecto comercial o aplicación que no necesariamente se busca subir a npm, cuál sería la finalidad del archivo package.json? Uso interno?

Sergio Daniel Xalambrí

student•

Tener el package.json en un proyecto te sirve para tener una lista de las dependencias que usas y sus versiones, si trabajas en equipo es esencial, ya que con este cuando otra persona se baje el código simplemente corre npm i y ya va a tener todas las dependencias que necesite. Igual trabajando solo te sirve si pasa algo y necesitas volver a bajar las dependencias.

También te sirve para poder configurar scripts que corras con npm run <script> y puedas acceder fácilmente a herramientas que instales con npm con Babel, Webpack, etc.

Esteban Ponce de León

student•

Después de esta primera parte traté de desarrollar un ejemplo distinto a platzigram. Ojalá me puedan ayudar con una duda sobre el direccionamiento de express, a partir de un formulario hecho en un template con yo-yo.

El formulario es básico. Solo toma un set de palabras clave

<form method="POST" action="/explore"> <textarea id='query' name='query' class="materialize-textarea status-box"></textarea> <label for="search">Explora palabras clave</label> <p class="right counter">50</p> <button class="btn waves-effect waves-light" type='submit' name='action'> Enviar </button> </form>

Este formulario es tomado en server.js

app.post(’/explore’, function(req, res) { var query = req.body.query; var result = queryResult(res, query); });

En este caso, queryResult es un archivo .js que es exportado al server.js. Este archivo cuenta con una función en específico y finaliza con esta línea:

res.render(‘index’, {title: ‘Explore’, content: data});

El formulario funciona, pero localhost siempre devuelve este error: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:5000/explore

Cómo podría solucionarlo?

Por otro lado, cómo puedo acceder a la data en res.render? ¿Solo es posible a través de jade (pug) o podría hacerlo con axios, superagent, etc?

Gracias.

Miguel Sosa

student•

En el examen hay una pregunta que dice así:

“La forma recomendada para utilizar Babel en el backend en un entorno de producción es”

Yo para responder a esta pregunta utilicé la respuesta que decía:

“Ejecutar require(‘babel-register’) antes de cualquier otro require” o algo por el estilo, que conste que contesté tres veces la misma pregunta, y las tres veces me dió como que la respuesta era equivocada.

Es posible que la pregunta esté mal formulada? O bien que haya un error en la respuesta correcta?

Yeison Daza

student•

Existía un error con esta pregunta, gracias por reportar, ya fue corregido 😃

Benjamin De la Cruz

student•

Tambien se puede ejecutar babel-node y los presets de esta forma: babel-node --presets es2015

CARLOS GUZMAN

student•

Qué pasó con el resto del curso que dictaba Julián, lo venía siguiendo a punto de terminar y de repente ya no está… como puedo continuar ?

CARLOS GUZMAN

student•

Ya lo vi disculpas, al parecer fue re categorizado y pasó al backend

Yeison Daza

student•

exacto, justo esta parte del curso merecía más protagonismo y decidimos moverla a un curso individual 😃

Juan Diego Silva Garcia

student•

Excelente curso!!

Victor Hugo Cortés Posada

student•

Require hook tampoco es recomendado utilizar en producción cuando son proyectos muy grandes según la documentación.

Not meant for production use The require hook is primarily recommended for simple cases.

Miguel Arturo Pujol Ochoa

student•

Me arroja lo siguiente: Mis amigos son: ${this.friends.join(', ')}

Qué pasa ??

Sergio Daniel Xalambrí

student•

Lo pusiste en un template string o un string normal? (usando ****)

Juan Diego Silva Garcia

student•

Me genera una duda, cuando Sacha dice: Si express exportara varias cosas solo podríamos exportar lo que es el router asi:
impor { router} from 'express'

Cuando dice cosas a qué es lo que hace referencia?

angel mendoza

student•

no soy muy versado en la terminología precisa pero son funciones en especifico, si es

import express from "express";

estas importando todo el contenido de express pero si es

import { export1 , export2 } from "express";

solo estaras importando de la paqueteria express las funciones export1 y export2. cualquier cosa revisa la documentacion aqui

Luis Felipe Cardona Florez

student•

Alguien me puede explicar bien que es el entorno de desarrollo y el entorno de produccion, no he podido entender bien que son ? muchas gracias.

Diego Forero

Team Platzi•

El entorno de desarrollo es tu entorno local, tu computador donde desarrollas la aplicación o sitio web.

El entorno de producción es el servidor donde haces el despliegue de tu aplicación o sitio web para que la gente lo pueda usar.

Usando babel en el lado del servidor (en Node.js)

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API

Obteniendo una respuesta del servidor con async/await

Agregando un botón para subir una nueva foto

Subiendo la foto a nuestro servidor web

Conclusiones

Cierre del curso

Es hora de construir el backend de Platzigram

Desafio 1: Hacer la página de un usuario

Desafio 2: Agregar un spinner mientras carga las imágenes del timeline

Desafio 3: Agregar un modal para mostrar una imagen en el perfil del usuario

Sesiones en Vivo

Stream 1: Resolviendo el primer desafío

Stream 2: Resolviendo el segundo desafío

Stream 3: Resolviendo el tercer reto

Stream 4: Resolviendo el cuarto reto

Stream Extra: Acceder a la webcam usando JavaScript

Complementos del curso

Unit testing en JavaScript con Mocha

Entendiendo los tiempos de ejecución en JavaScript

Usando babel en el lado del servidor (en Node.js)