Modularizando nuestro proyecto

Clase 18 de 46 • Curso Definitivo de JavaScript 2016

Ema -

student•

El tipo te hace hacer todo un archivo con todo el template y luego de la nada se le ocurre hacer un template.js "y ahora vamos a sacar toda la logica" oseaa.a... !! Y PUG PARA QUE? SI ESTAMOS AGREGANDO HTML duro y puro!!

Jose Andres Gonzalez Guevara

student•

Ademas Pug tambien realiza el manejo de templates con includes

Oscar Barajas Tavares

Team Platzi•

A mi tambien me causo conflicto, esperaba trabajar yo-yo con pug.js casi lo esperaba con ansias y al ahora de la hora… copia y pega bloques directos a yo-yo… no se si esto sea la mejor practica.

Claudio Baiardi

student•

Por qué estamos usando tantas librerías? Hay cosas que se pueden hacer con simple js, como por ejemplo el vaciado del #main-container. No le veo por qué instalar toda una librería solo para hacer eso. Y otra cosa, cuando entré a hacer el curso, creí que iba a aprender a usar javascript, no node.js. El curso está muy bueno, solo que no es lo que esperaba...

Alejandro Irimia Mesa

student•

Échale un vistazo,si no lo has hecho aún, al curso de Javascript y jQuery de Sacha.

Ahí explican desde cero JS y jQuery y sólo al final meten node.js.

https://platzi.com/cursos/javascript-jquery/

Wilfredo Bardales

student•

complicas el codigo …
cambias de pestañas en cada momento y confunde demaciado

lo hice tal cual y no me aparece nada en el singup

jonathan diaz Diaz Diaz

student•

para que user pug si luego se va utilizar yo y se coloca todo el codigo es en html

Jose Andres Gonzalez Guevara

student•

De acuerdo, ademas el includes de Jade permite el uso de los templates

Alberto Moncada

student•

El archivo .pug sirve como un “marco” el cual entiende el servidor y en este caso como estamos en un proyecto de “single page application” este archivo nos es de inmensa necesidad ya que ahí es donde especificamos al servidor node.js en que sección “section” de nuestro archivo “html” queremos que se valla actualizando desde el área del Servidor. Cuando digo html me refiero al .pug ya que para determinar esa tarea del “marco” nuestro servidor no entiende si se lo decimos en HTML. Por tanto, nuestro archivo html original, nos sirvió de referencia para que una vez estemos contentos con el diseño web final de nuestra página, la vamos a traducir a .pug todos aquellos section que siempre van a estar presentes al usuario de nuestra “single page application” y además dejamos ahí señalado por medio del uso del ID nuestra sección “section” que queremos ir modificar desde el área del servidor.

Entonces, esa “ventana” que dejamos abierta y que nuestro servidor entiende gracias a .pug, la estamos rellenado con template’s y con la ayuda de YO-YO esos template’s, podemos escribir en formato html y el (yoyo) nos hace el favor de traducirlo a template.

Erick Neftalí Sarmiento Cortes

student•

Me aparece el footer hasta arriba en mi pagina de inicio, no encuentro el porque?

Jenner Císar Montero

student•

Tengo el mismo problema, no me aparece el link hacia signup en el homepage.

Esteban José Pagano

student•

Veo mucha gente quejandose que Sacha usa muchas librerías.
Es un curso completo, si quieren algo sin tantas librerías podrían ver angular o react o vuejs.
Yo hice el de angular 2 y ahora con este curso entendí mucho mas lo visto en el otro.
Lo que hace sacha es un curso muy completo y me parece que la idea es ver muchas posibilidades de hacer lo mismo.
igualmente falta bastante y me parece que hay cosas que hace ahora que luego las va a cambiar en un proyecto mucho mas cerrado que este punto que es solo para demostrar la tecnología.

Victor Hugo Cortés Posada

student•

En windows 10 de 64bits, al principio estaba utilizando el script de la siguiente forma:

"scripts": {
	"build": "gulp",
	"start": "start gulp watch && node server.js" 
}

Pero me di cuenta que de esta forma no me estaba generando toda la carpeta public nuevamente sino solo el archivo app.js y esto me causaba problemas cuando agregaba media nuevo a la pagina.

Para solucionar me decidí a utilizar concurrently que me facilita ejecutar múltiples comandos simultáneamente.
Para instalar concurrently ejecute en la consola:

npm install concurrently --save

En mi package.json quite el build dejando el script de la siguiente forma:

"scripts": {
    "start": "concurrently \"gulp\" \"gulp watch\" \"node server.js\""
  }

Luis Mosquera

student•

Estoy siguiendo los pasos pero, lamentablemente no puedo visualizar toda la pagina, cuando la ejecuto solo me aparece el footer. alguien me puede ayudar porque me sucede esto?

YSRAEL ROJAS ROJAS

student•

a mi me paso lo mismo… asegúrate que al momento de requerir el empty te quede asi:

var empty = require('empty-element')```

Sebastian Mar

student•

Nuestro compañero Ysrael quizo decir:

var empty = require('empty-element')

Erick Neftalí Sarmiento Cortes

student•

Ademas solo aparece el signup y cada que le doy un click se me duplica mi pagina, me pueden dar una idea de que puede estar pasando?

Daniel Pino

student•

Porque antes de ejecutar el .appendChild() se debe ejecutar empty() para limpiar el contenedor y ahí si agregar el contenido nuevo

Ignacio Briones

student•

agregaste la libreria empty ?

sino en la terminal pones lo siguiente, npm i --save empty-element
luego verificas en el pacjage.jason, que aparezca en las dependencias

“empty-element”: “^1.0.0” (la versión que corresponda)

luego en el index.js

defines la variable
var empty = require(‘empty-element’)

y por último en el main.appendChild(el);

la vacias con el empty
empty(main).appendChild(el);

eso debería funcionar,

Saludos 😃

Stefany Zapata Naranjo

student•

Que suele suceder cuando me aparece ester error:

node:2596) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.  
Error: watch /home/stephany/Documentos/tefa/Proyectos/photoawesome/package.json ENOSPC

Erving Cordova

student•

Usa sudo ... 'sudo npm start'

Erving Cordova

student•

Usa sudo ... 'sudo npm start'

Fredy Bustos

student•

por que en signup index.js donde usamos page, hacemos el require de esta forma require('./homepage');
require('./signup');

Sergio Daniel Xalambrí

student•

Porque no estamos exportando nada en homepage y singup, entonces cuando hacemos el require no tenemos ningún valor que asignar a una variable o constante, pero funciona ya que todas las rutas que definimos sí se crean al hacer el require.

Giancarlo Vera

student•

El require('./homepage') y require('./signup') no lo hacemos en signup/index.js sino en src/index.js, con el fin de llamar los js ubicados en esas carpetas, esto se hace cuando se ejecuta page()

Aitor Ibañez

student•

usando babel no se debería de usar:

import page from 'page'

para que sea todo ECMAScript 2015?

Sacha Lifszyc

teacher•

podríamos haberlos utilizado también, sí

Sergio Peña

student•

Kaixo
Para poder usar import hay que instalar el modulo babel-preset-es2015

npm i -D babel-preset-es2015

luego en el archivo gulpfile.js la función rebundle quedaria de la siguiente manera:

function rebundle() {  
    bundle  
      .transform(babel, {presets: ['es2015']})  
      .bundle()  
      .pipe(source('index.js'))  
      .pipe(rename('app.js'))  
      .pipe(gulp.dest('public'));  
  }

Daniel Hernández

student•

cual es la diferencia entre:

import page from 'page';

var page = require('page');

Jose Lehi Arteaga

student•

el primero esta hecho usando la nueva version de ecmascript, el otro es con la sintaxis del anterior. es lo mismo realmente pero depende la version que uses.

Noel Gonzalez

student•

Cuando se hace el

require('./homepage');

Qué se está requiriendo? La carpeta completa?

Porque no me esta mostrando el templates, ni el link de la homepage.. Solo el footer

mgl Brv

student•

Está llamando al index.js que está en esa ruta.

Carlos Raez

student•

pues a mi haciendolo asi no me llama los index de cada ruta… no entiendo pq

Alberto Moncada

student•

Quiero Compartir mi experiencia en esta clase, puedo estar equivocado.

OJO parece que node.js guarda en ram o en algún lado los datos .js aun y cuando estos se modifiquen y te muestra el mismo archivo sin modificar. - No estoy seguro pero esto lo hace cuando existe algún error de sintaxis creo. Prueben cambiando los datos del innerHTML probando si cambia la información ya que inner es mas fácil que appendChile, así podrán ver si algo anda mal.

También creo que esto de no mostrar los cambios nuevos, tiene algo que ver con los archivos “app.js” que creamos en la carpera Public. Para tratar de solucionar esta como “memoria guardada” decidí alterar el scripts “start” de npm y le agregue el GULP para obligar a crear la carpeta public cada vez que inicio el server. Quedando “gulp | gulp watch | node server.js” ya que anteriormente en la clase solo le dábamos “gulp watch y node server.js” y este comando no vuelve a reescribir la carpeta “public”.

Agradecería si alguien me dice la forma de visualizar los errores de .js en node ya que en la Consola chrome de windows no los da me refleja algunos pero no tienen nada que ver con el problema ya que me señala errores de las librerías. y esa es la Mayor perdida de tiempo…

Si no te funciona el script index.js de la carpeta crs o de cualquier otra “homepage” esto no indica necesariamente que el error se encuentre en ese script. Esto fue un dolor de cabeza por cuanto me esforzaba en buscar las soluciones por partes hasta que funcionara, pero al parecer node primero lee todos los scripts y si uno de ellos tiene un error pues no funcionan TODOS!!!
ERRORES de la Clase a Corregir:

1.- Invocar correctamente la libreria empty: " const empty = require(“empty-element”); " en la carpeta “signup” si quieren en ves de const pueden utilizar var.

Nota: Recuerden agregar en el index.js de la carpeta src la invocación de page “page();” Pero en las demás carpetas index.js no se lo agreguen.

Ignacio Briones

student•

Crear módulos es una buena práctica dentro de la programación, que todos profesional del área debería saber, ya que hay que entender que el día de mañana puede venir otro programador y tener que entender el código y la idea es que se le haga lo mas fácil posible, es por esto que encontré súper necesaria esta explicación, Grande Sacha!.

Carlos Raez

student•

Ayuda por favor!!!

si en el index.js pongo

var page = require(‘page’);

require(’./homepage’);
require(’./signup’);

page();

se me queda grabado lo ultimo que puse antes de este ejercicio

page(’/’, function (ctx,next) {
var main = document.getElementById(‘main-container’);
main.innerHTML = ‘<a href=“signup”>signup</a>’;
})

Esto es lo que se me queda pero no las nuevas rutas…

page();

No me llama a los index.js de cada ruta no me fuciona!!!

Carlos Raez

student•

Solucionado ya esta !! gracias

Cesar Anzules

student•

hola disculpa como solucionaste tu problema? a mi también me pasa algo similar

DASAC

student•

Consulta presiono dos veces el link de signup me parece varias pantallas

alguien me puede decir por se duplica por favor ...

Alejandro Mizael Gálvez Alcaraz

student•

te falta agregar el EMPTY, es para borrar lo que antes estaba en el main container, osea el codigo de ese link "signup" lo elimina y agrega lo demas, y asi ya no te permite segir concatenando con el APPEND que llamamos en esa funcion.

empty(main).appendChild(el);   empty(main).appendChild(template);

uno de esos dos dependiendo el avance en el que llevas el curso.

Cesar Anzules

student•

En el achico principal de de src no me cogen los require ose ejemplo:
var page =require(‘page’);
require(’./carpeta’) <-------- este require no lo reconoce
page();
Alguien me podría ayudar porfa?

Diego Forero

Team Platzi•

Te marca algún error en la consola? porque dices que no lo reconoce.

Cesar Anzules

student•

ya pude solucionar mi problema pero ahora cuando quiero tener dos require uno funciona y el otro no

var page =require('page');
require('./acciones');
require('./sidenav'); //<-- siempre el se segundo es que no funciona
page();

Miguel Angel Monje Allende

student•

var empty = require('empty-element');```

esta bien escrito y aun asi no me muestra el link del signup

Diego Forero

Team Platzi•

Revisa si tienes un error en la consola.

node:2596) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.  
Error: watch /home/stephany/Documentos/tefa/Proyectos/photoawesome/package.json ENOSPC

function rebundle() {  
    bundle  
      .transform(babel, {presets: ['es2015']})  
      .bundle()  
      .pipe(source('index.js'))  
      .pipe(rename('app.js'))  
      .pipe(gulp.dest('public'));  
  }

Modularizando nuestro proyecto

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)