Introducción a VueJS

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.

El mejor profe de platzi!

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

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.

###Dos conceptos fundamentales de VueJS

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.

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

excelente profesor emocionado para iniciar

este profe si es cabrón

🤯

vue ❤️

Excelente introducción de los conceptos core de vue.js, la declaración de reactividad ha estado muy clara

Un concepto fundamental de esta clase y que no había escuchado antes, es:
la complejidad instrumental y inherente deben ser parejas

acabo de terminar el básico así que vengo con todas las ganas… vamos con todo!!!

Vaya, al fín un profesor que ha llamado mi atención por su forma de explicar y generar contexto en cada concepto abordado en clase.
Y eso que también me dedico a la docencia.

Una excelente explicación para entender que de acuerdo a la complejidad inherente debemos utilizar herramientas con una complejidad instrumental acorde.

Orientado a la vista, y es reactivo,
Reactivo significa que se mantiene actualizado en ambos puntos, en el código y en la vista

Un componente es un pedazo de codigo Html con su propia funcionalidad dependiendo de la complegidad pueden ser reutilizado y facilita la contruccion de un projecto

Vue es un framework relativamente nuevo, donde se diferencia de los demas en la simplidad de hacer proyecto sencillos, la cual tambien permite ser progresivo adaptandose a los tipos de complegidad que el proyecto requiera

Un estado declarativo es cuando una vista se actualiza segun el codigo escrito y tambien dependiendo como el usuario interatua con la vista

El mejor profe de platzi!

Me encanta !!! y solo es la introducción, la verdad se entiende muy bien aun mas que en el básico. 😄

Asumo que el curso está basado en Vue 2.x, esperemos no sea difícil de operar en 3.x

Muy buena introducción de Vue.js de parte del profesor me encanto la explicación de la complejidad inherente y instrumental.
Una de las cosas que mas destacaría de Vue es su nucleo y la capacidad que tenemos para ir agregando capas dependiendo de la complejidad de la aplicación.

Las complejidades deben de ir de la mano, de modo que si la complejidad inherente es alta debemos utilizar herramientas de la misma medido (Instrumentos) para poder suplir esta complejidad.

😮 Muy interesante los niveles de complejidad.

Excelente explicación de lo que es Vuejs!!

Excelente!!! Emocionado

Literal muy buena expliacion.

Que bien explica, felicidades!!!

que bien gracias por tus explicaciones

Buena Intro!!!

Damned, yo en la ruta de Vue.js no vi el curso básico y me metí directo a este, bueno ni modo vamos a probar a ver que tal me va

La razón por la que me llama más la atención de vue con respecto a react y angular es la escalabilidad, yo hago muchos proyectos pequeños como landing page y no me veo haciendolas con Angular

Lo que diferencia a vue de otros framework es que este se puede ver como un framework progresivo lo que significa que se va ajustando a la complejidad del proyecto.

Ver las herramientas que ofrece vue como capaz ayuda a tener una vision mas clara del alcance de este grandioso framework.

Vengo del curso de vue basico el cual es muy bueno y recomendado, espero aprender mucho con este curso profesional.

Me agrada mucho la explicación de la complejidad inherente vs instrumental. Una forma de balancear tus decisiones tecnológicas con el requerimiento el problema que tratas de resolver.

Complejidades inherentes -> no podemos modificar
Complejidad instrumental -> Precio para resolver complejidad inherente

El framework progresivo, por que va a ser una herramienta sencilla de utilizar, pero de acuerdo y conforme a como valla creciendo el proyecto se pueden agregar mas cosas sin hacerlo mas complejo

Vue.js a pesar de ser relativamente nuevo cuenta con un gran apoyo por parte de la comunidad por ser tan versátil y tener un gran rendimiento.

Fue creado como un proyecto personal pero creció exponencialmente hasta convertirse en un framework que además cuenta con todo un ecosistema para complementar el desarrollo de todo tipo de aplicaciones.

Complejidad

Inherente

La complejidad inherente es la que tiene el proyecto como tal y que no podemos modificar, por ejemplo, si queremos hacer una aplicación para escuchar música, esa es la complejidad inherente. Es lo que la aplicación tiene que hacer como tal.

Instrumental

Es la complejidad que podemos controlar, se podría decir que es el precio que pagamos para resolver la complejidad inherente. En otras palabras, la complejidad instrumental es la complejidad del uso de ciertas herramientas que vamos a necesitar para resolver la complejidad inherente.

Estas complejidades a pesar de que no son lo mismo, tiene que crecer o decrecer a la par. Porque si tenemos, por ejemplo, una complejidad inherente muy baja, como la de crear una landing page, y una complejidad instrumental muy alta, como usar Angular, vamos a tener muchas herramientas y vamos a necesitar mucho tiempo para configurarlas y usarlas para algo mucho más simple que podíamos haber resuelto con una complejidad instrumental más baja. Lo mismo aplica en el caso contrario de tener una complejidad inherente alta y una complejidad instrumental alta, va a haber una disparidad y será muy difícil el desarrollo.

Framework Progresivo

Se le conoce como framework progresivo a Vue porque nos permite escalar progresivamente el proyecto a medida que se necesite. Puedes comenzar con un proyecto sencillo e ir haciéndolo más complejo con Vue gracias a su ecosistema.

Características

• 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.

Ecosistema de Vue

Renderizado declarativo

Implica tener un estado centralizado donde podemos compartir información a la vista de forma dinámica, cada vez que la información del estado cambié también se actualizará en la vista, y a su vez cada que en la vista ocurra un cambio por medio de la interacción del usuario estos cambios van a ir al estado y actualizarlo y esto causará que la vista se recompile con los nuevos datos del estado, creando así un circulo virtuoso de reactividad y sincronización.

Sistema de componentes

Propone que podemos construir la aplicación a partir de pequeños módulos de HTML que actuarán como componentes

Los archivos con extensión vue se pueden generar gracias a las herramientas que provee Vue, estos archivos contienen toda la lógica, HTML y estilos del componente.

Cada componente tiene su propio archivo y esto hace que sea fácil de entender y mantener.

👌