Incorporando Stylus y Pug

Clase 11 de 17 • Curso Básico de Vue.js 2016

Clase anteriorSiguiente clase

Jose Andres Gonzalez Guevara

student•

Nunca me ha gustado Pug

Miguel Sosa

student•

Tampoco, no me parece para nada intuitivo

Jaime Diaz

student•

me sumo al comentario, intenté incluso por las buenas, instalando las dependencias como indica la secuencia pero al transformar la sintaxis en los convertidores online y llevarlo al fichero App.vue trube problemas en la terminal #1 de mi entorno local, sacando un error: captura del error

Sé que en estas practicas tipo Pug y Stylus dependen mucho de la indentación del código, esta característica podría variar dependiendo del entorno IDE y sumado con algo en la curva de aprendizaje tengo la sensación que entorpecen un poco el flujo de trabajo normal.

En lo personal me siento bastante cómodo tanto en la maquetación tradicional (tags HTML5 puros) y del lado del CSS3 (reglas comunes con llaves de apertura y cierre, y de más).
Saludos.

Antonio Flores

student•

Pienso que si el curso era de vue js, no deberiamos estar usando pug y stylus, yo vine aqui a aprender vue y no me interesa mucho de momento entrarle a pug y stylus, no le aporta nada. y deberia de haberse enfocado en vue js solo.

Aarón Anibal Ramirez Herrera

student•

yo tambien pienso lo mismo, algunos solo queremos el contenido de vue

Mateo Santiago Zapata Maldonado

student•

Pienso Exactamente lo mismo.

Emir Cedeño

student•

No me gusta Pug, pero conocer y asimilar su funcionamiento es nuestra obligación para ser buenos desarrolladores.

Ricardo Celis

teacher•

Si, puedes aprenderlo o podrías seguir sin utilizar pug, tú decides =)

KEVIN BRAYAN LUNA FIGUEROA

student•

Si hay que recordar que siempre es bueno saber cosas nuevas.

Jesús Ignacio García Fernández

student•

Enlaces

- stylus Preprocesador de css.
- css to stylus Conversor de css a stylus
- pugjs Preprocesador de html
- html 2 jade/ Conversor a pug

comando para instalar stylus y pug

npm install --save-dev pug pug-loader stylus stylus-loader

Usuario anónimo

user•

Diría que la forma de escribir componentes en Vue, también tiene un enfoque mas orientado a a Web Componentes, que básicamente tiene 4 conceptos HTML Templates, HTML imports, Shadow DOM y Custom Elements. Y dentro de cada archivo .vue se abstraen estos conceptos. Además esta forma de desarrollar se puede ver también en AngularJS 2, ReactJS y claramente cada uno lo adopta como lo ve.

Algo que pienso, es que más adelante este tipo de desarrollo se vuelva un poco más estandarizado, bajo Web Componentes y que se puedan mezclar varios frameworks y conectados por medio de interfaces bien definidas.

Mateo Santiago Zapata Maldonado

student•

Hola Compañero, espero que estes bien.

Pienso personalmente, que la idea de la estandarizacion es evitar utilizar framework, framework-less, utilizar librerias que nos ayuden a ser un poco mas productivos ya que las API nativa de los webcomponents son un poco confusas, pero no utilizar complejos algoritmos que hagan esforzar el navegador para implementar componentes.

Un Abrazo!

Alfonzo Diez

student•

Prefiero Sass que Stylus y no usar pug, pero todo es cuestión de gustos, que buen curso.

René Rodriguez Clavijo

student•

Creo que podría ser mejor que solo se vea con html y css, no porque los pre procesadores sean malos, sino que se van sumando conceptos que si antes no estabas muy familiarizado podrían confundir más que ayudar. (Al menos cuando estaba empezando en el mundo de desarrollo web me pasó a mi)

Luis Carlos Carrillo Tovar

student•

El ponerle Pug y Style solo complica mas el aprendizaje, es mejor ir por lo basico usar solo HTML y CSS

Angel Cabrera

student•

Al contrario, estas herramientas están hechas para que el proceso sea más rápido a la hora de realizar cosas que no tienen que ver con el curso como lo es escribir CSS o HTML.

Jorge Enríquez

student•

Totalmente de acuerdo.

Erick Polanco

student•

No había tenido oportunidad de trabajar con pug y stylus, se ve bastante interesante, lo único que hay que tener mucho cuidado con la indentación para evitar cualquier inconveniente

WILMER ARLEY CAMPAÑA DIAZ

student•

Compa si no escribes esto mando a pug a la ver

Esleyder Ordoñez

student•

si es bueno aprender, de igual manera, estamos aprendiendo, se vale conocer cosas nuevas.

Carolina Araya

student•

No me gusta que estoy aprendiendo Vue y tengo que preocuparme de escribir diferente el codigo… Es un poco incomodo.

Aarón Anibal Ramirez Herrera

student•

si que lo es, por que por una parte vue es algo nuevo por algo lo estamos aprendiendo y ahora escribir html diferente o el css, no es que crea que es innecesario o que no sirve si no que creo que deberia ser un pequeño curso aparte

Alexander Valencia

student•

#NoMorePug

Jose Carlos Aguilar Villalva

student•

deberia de haberse enfocado en vue js solo.

Elías Carrillo Acosta

company_admin•

Si te falla es porque el procesador de html a PUG no identa bien los espacios y te los pone así:

#app
img(src='./assets/logo.png')

Y sólo hay que darle un tab a todo el resto del código, es molesto tener que lidiar con esto U_U

#app
     img(src='./assets/logo.png')

Mario Sanchez Urbina

student•

¡Muchas gracias!

Juan Carlos Nahuat Mex

student•

Fue bueno revisar la caja de comentarios! Apenas vi ese error regrese a tu publicacion y lo corregi. Gracias

Christian David Sánchez

student•

I don't like pug :/

Juanma Cano

student•

Pienso que no venía al cuento introducir un preprocesador de html y otro de css en este curso.

Luis Enrique Hernandez Navarro

student•

Sacha me gusta que uses tecnologías nuevas nuevas como Pug, pero estaría mejor que uses al inicio html y css y luego pasemos a Pug, en lo general uso Haml + Ruby y ahi si siento una mejora al desarrollar, pero con Pug + Vue se me hace lo mismo y pero para muchos le agregas complejidad innecesaria desde el inicio

Jorge Enríquez

student•

Totalmente de acuerdo. Creo que primero se debería aprender lo más "basico" para poder centrarse en Vue y después ya se añadirán librerías... de esta forma no estás centrado en aprender Vue, tienes que estarlo en Vue, Pug, Stylus...

Raul Palacios

student•

No se me hace mala idea mostrar Stylus y Pug. Al fin del dia es algo nuevo que “podemos” o no aprender.
En lo particular me recuerda mucho a trabajar con haml en Rails 😄

Esleyder Ordoñez

student•

Si, opino lo mismo, uno nunca sabe en que momento va a necesatirar algo de conocimiento extra. Para un desarrollador es importa conocer de todo un poco.

Bryan Estiven Silva Mercado

student•

totalmente de acuerdo

Jesus Eduardo Murrieta Rosas

student•

En lo personal no me gusta ver pug, es como tratar de copiar la sintaxis de python, algo que no va con javascript a mi me gusta los ; {} etc, nada de identacion se pierde el feeling de javascript.

Ricardo Magaña

student•

Siempre es importante conocer sobre temas como Pug o Stylus (aunque no nos gusten) en esta industria necesitamos por lo menos haber tenido un encuentro con este tipo de cosas

Jesús Miguel Quinto Teran

student•

En realidad parecen bastante útiles, solo hay que cambiar el switch del clasico HTML/CSS

Ricardo Magaña

student•

Los aportes son de las cosas mas geniales de las clases

Incorporando Stylus y Pug

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?