VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas

Clase 2 de 53 • Curso Profesional de Vue.js 2

Clase anteriorSiguiente clase

Resumen

Recomendación:

Si aún no tienes conocimientos básicos, te invitamos a ver el curso Básico de VueJS aquí

Acerca de VueJS:

Tiene complejidad inherente y complejidad instrumental.
La complejidad inherente es la que se hereda del proyecto y no se puede modificar.
La complejidad instrumental es la que nosotros podemos controlar. Es el precio que pagamos para resolver la complejidad inherente (herramientas).
-** VueJS** puede ser definido como el Framework Web Progresivo porque nos permite progresivamente ir escalando nuestra aplicación a medida que lo vamos necesitando.

Características del Framework:

Está orientado a la vista.
Es reactivo. Se puede enlazar el código con la vista. Se puede actualizar desde cualquiera de los dos y se sincroniza todo en un círculo virtuoso.
Está basado en Core, es una librería pequeña, resuelve algo específico y concreto. Sin embargo es escalable y extendible.

José Rodríguez

student•

Un artículo muy interesante para profundizar sobre los tipos de complejidad: http://raulavila.com/2015/05/complejidad-esencial-accidental/

Nacho Anaya

teacher•

Excelente, gracias por el aporte!

Mario Ruano Fernández

student•

Gracias por este aporte!

Jhonatan C Hurtado

student•

Guía de Vue.js en español
https://es-vuejs.github.io/vuejs.org/v2/guide/

KEVIN BRAYAN LUNA FIGUEROA

student•

gracias por el aporte!!

Cristian Camilo Guevara López

student•

Es bantante interesante todo lo que se puede lograr. Gracias

Fernando Andres Muñoz Suazo

student•

Complejidad Inherente vs. Instrumental . Inherente: la que heredamos del proyecto y no podemos modificar. Instrumental: la que podemos controlar, es el precio que pagamos para resolver la complejidad inherente. . Estas complejidades tiene que ser parejas, por lo cual tienen que crecer o decrecer a la par. . A Vue lo podemos definir como el framework web progresivo. . Características más importantes de Vue:

Está orientado a la vista: Se encarga solamente de la parte visual.
Es reactivo: puedo tener enlazo con el código, donde se pueden actualizar mutuamente desde cualquier de las dos direcciones.
Está basado en un core: esto significa que es una librería pequeña, resuelve algo especifico y concreto, pero es escalable, al core se le pueden más cosas para aumentar la complejidad. Las características principales de este core son: rendering declarativo y el sistema de componentes. . Las flechas rojas simbolizan el core de Vue, lo que hace por si solo. Las flechas verdes son las cosas que podemos ir agregando a medida la vayamos necesitando. . El renderizado declarativo está ligado al concepto de reactividad, implica tener un estado centralizado desde donde podemos compartir información hacia la vista de manera dinámica, es decir que cada vez que este estado mute se va a ver reflejado en la vista y viceversa. . El sistema de componentes propone que podemos construir nuestra aplicación mediante pequeños módulos HTML. Cada módulo maneja su propio estado y su propia semántica, podemos establecer como se van a llamar los componentes. . En los archivos .vue podemos meter toda la lógica de nuestros componentes, lo cual permite no solo tener una modularización a nivel lógico sino que a nivel físico. Podemos tener componentes con HTML cada uno en su propio archivo, esto genera un código fácil de mantener y cada componente tiene todo lo que necesita para existir, su HTML, CSS y JS.

Jhonatan Ferney Ospina

student•

El mejor profe de platzi!

Maria Tohabanda Duchi

student•

Wow! :)

Carlos Eduardo Gomez García

teacher•

Me encanta Vue, en el curso básico nos quedamos hasta el Vue Router, sin duda el hecho de poder dividir la aplicación en componentes es una de las cosas que más me gustan, además, siempre puedes descargar y usar componentes de terceros, pues por la forma en cómo trabaja Vue, esto es posible:D

Joel Andres Bonilla Tellez

student•

Dónde puedo descargar componentes de tercero bruh? alguna páginilla? :D

Juan Pablo Jimenez

student•

2.-Introducción a VueJS

Complejidad: Inherente vs Instrumental

Está pensado para manejar diferentes tipos de complejidades como lo pueden ser:

Inherente: es la que heredamos del proyecto y que no podemos modificar, es decir, si quiero hacer un app para escuchar música esa es la complejidad.
Instrumental: es la que podemos controlar, se puede definir como el precio que pagamos para resolver la complejidad inherente, es decir, si tenemos que hacer una app muy grande vamos a usar herramientas para hacer esa aplicación. Cuánto nos toma configurar webpack, aprender babel, preprocesadores, etc. Mientras más cosas necesitemos más complejidad instrumental vamos a tener.

Estas complejidades si bien no son lo mismo tienen que ser parejas, crecer o decrecer a la par. Más requerimientos, más herramientas.

El framework progresivo

Se le conoce así porque nos permite progresivamente escalar nuestra app a medida que lo necesitemos.

Características más importantes:

Está orientado a la vista.
Es reactivo (actualizo info de ambos lados y mantenerla sincronizada).
Está basado en un core (implica que es una librería pequeña a la cual le podemos agregar cosas si necesitamos más complejidad).
- Rendering declarativo: Poder tener un estado centralizado donde podemos compartir info a la vista de manera dinámica. Cada que el estado mute sus propiedades se refrescan automáticamente los cambios en la vista y viceversa. Declaramos lo que hacemos pero no nos hacemos cargo del como.
- Sistema de componentes: Construir la app a partir de pequeños módulos de HTML, es decir, pequeños elementos que podemos reusar si es necesario. Es un árbol. Podemos darle semántica a nuestro código dándole nombre a estos componentes de manera que podamos identificar más fácil que es. Modularización no solo a nivel lógico, si no también físico.

Alejandro Antonio Olaria Robertis

student•

Excelente dato de los niveles de complejidad a la hora de comenzar un proyecto. muchisimas gracias!

Jose Colmenares

student•

###Dos conceptos fundamentales de VueJS

1. Renderizado Declarativo

Está muy relacionado con el concepto de reactividad. El framework considera 2 entes, el primero un Estado Centralizado (VueModel) que puede compartir información hacía el segundo ente, que es la Vista que es el ente con el cual interactúa el usuario directamente. El renderizado declarativo implica que desde ambos entes se puede actualiza el codigo.

Un cambio del estado renderiza nueva información en la vista,. Y a su vez, una interacción del usuario en la vista, cambia el estado. Esto nos permite que haya sincronización entre el código y el HTML.

Con VueJS declaramos lo que vamos a hacer y lo que queremos mostrar, pero el que determina como va se hará esto es VueJS a través de su framework.

2. Sistema de Componetes

Este sistema propone que podemos construir nuestra aplicación a partir de pequeños módulos HTML (componentes). El sistemas de componente es un arbol (similar al DOM). Siempre vamos construyendo a partir de un componente principal el cual tiene hijos o subcomponentes.

Gracias a VueJS podemos generar componentes modulares que tienen toda la lógica (JS), semántica(HTML) y estilos(CSS) en su propio archivo, lo cual genera un código muy facil de mantener y además son componente que tienen todos lo que necesitan para existir y pueden ser fácilmente reutilizados en otro proyecto.

Una característca adicional es que podemos darle semántica a nuestros componentes, es vez de tener un <div> podemos tener un <user-detail>, lo cual nos genera un codigo más facil de leer para los humanos pero con igual rendimiento para los navegadores

Miguel Angel Goda Molina

student•

excelente profesor emocionado para iniciar

Miguel Angel Landa Lopez

student•

este profe si es cabrón

Jaime Diaz

student•

Hola saludos a todos, como dice el profesor es muy indispensable realizar el curso básico de Vue.js, mi recomendación es ver la totalidad de vídeos y llevar a cabo el ejemplo en sus entornos locales para así poder jugar un poco con la UI , métodos, maquetado y render de datos en la vista, saludos.