Create an account or log in

Keep learning for free! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
3 Hrs
18 Min
0 Seg

¿Qué es Vue.js? Frameworks, librerías y componentes

3/37
Resources

What is View and how does it relate to frameworks and progressivity?

Vue.js is a very popular framework for developing web interfaces. However, to better understand its essence, we must first differentiate between libraries and frameworks. JavaScript libraries are specific tools for specialized functions, such as date handling or DOM manipulation. A framework, on the other hand, is more robust: it is a set of tools that not only provides functionality, but also dictates how a project should be structured and developed, as is the case with Vue.

Another crucial feature of Vue is its "progressivity", which means that it can be extended as the needs of the project grow. This "progressivity" resembles the layers of an onion that can be added or used individually. Let's discover how these features make Vue a powerful and efficient tool.

How can you better understand progressivity in Vue?

Progressivity within Vue means that you can start with a simple configuration and then add features as needed. This flexibility is key to adapting an application as its complexity grows, thus keeping the project modular and scalable.

Keep the following in mind:

  • Vue layers: Vue operates through layers that can work independently or together. This allows you to manage and expand project properties without compromising the basic structure.

  • Declarative Rendering: This is the core of reactive work in Vue. It connects backend information with the visible frontend presentation, ensuring that any data changes are instantly reflected to the user.

As your application grows in complexity, you will add more layers, such as state management, advanced routing or internationalization. This will allow you to have rich and functional applications without sacrificing performance.

What is component management in Vue?

In Vue, components are crucial building blocks that encapsulate both the logic and presentation of specific parts of an application. These encapsulated sections combine HTML, CSS and JavaScript, and can vary in size and complexity.

  • Modularity: You can think of components as Lego pieces, where each component, whether a header, main or sidebar, can be reused in different parts of the application.

  • Reusability and maintainability: Components allow for effective code cleanup and organization, making it easy to maintain and scale the application. The ability to reuse components demonstrates efficiency in design, reducing errors and improving maintenance.

These are just some of the aspects that make Vue a favorable tool for many developers. The way it handles components highlights its flexibility and adaptability, providing a natural and organized way to develop dynamic applications.

Why is Vue highly valued for its performance?

Vue is revered for its speed and lightness, characteristics that appeal to both individuals and large corporations, especially in contexts where Internet access is limited, such as in certain regions of China.

  • Resource optimization: Vue is designed to be efficient and operate quickly. Thanks to the vision of Evan You, its creator, the framework remains light and fast, ensuring an optimal user experience even on low-speed networks.

  • Global usage: Companies such as Baidu and Alibaba in China opt for Vue precisely for these reasons. It allows them to reach users with limited connectivity, optimizing their online experience.

All of these elements contribute to the perception of "magic" behind Vue, a perception that, as Arthur C. Clarke suggests, is simply a science that we haven't fully broken down.

Take advantage of the many benefits Vue provides and explore its progressive and modular capabilities. Continued education and practice will allow you to discover the true potential of Vue to transform the way we design and develop web applications.

Contributions 25

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

Librerías: Son una serie de herramientas provistas para que puedan ser usadas y facilitar el desarrollo
.
Frameworks: Estos no solo te proveen las herramientas para trabajar, sino que también te dicen cómo trabajarlas.


Vue es un Framework 👀☝️
.
Vue es **un framework progresivo, ya que te permite agregar capas, a medida que tu aplicación vaya creciendo puedes agregar más y más capas que necesites.
.
Declarative Rendering: Es con la que Vue trabaja todo, se encarga de conectar la información con la presentación. La información son todos los datos de tu aplicación, la presentación es la encargada de mostrar la información al usuario.
.
Components: Separan y encapsulan partes de la aplicación, son como pequeños legos que puedes usar para armar poco a poco la página

Dejo un gráfico de como puede funcionar el sistema de capas en nuestras aplicaciones

Para potenciar tu aprendizaje en esta clase, puedes buscar por tu cuenta los siguientes temas y fortalecer asi tus habilidades investigativas.

Que es VUE.JS?
Libreria vs Framework
Por que se dice que Vue es un Framework?
Vue es progresivo? Que son las capas?
Que es Declarative Rendering?
Que son los componentes en Vue.js?

Con estas consultas, podras empezar a consolidar tus conceptos sobre Vue.js.

Nunca pares de aprender!

Complemento:

VueJS, no sólo es un Framework enfocado para agilizar los procesos, sino desde su core posee una arquitectura llamada MVVM o (Modelo Vista Vista-Modelo). Éste es un estilo de arquitectura donde tal cual permite el modelar la información a nuestra conveniencia, pero sobre todo, permitiendo el XD (Developer Experience) sea escalable y selectible para con sus elementos.

Donde encontramos:

  • Model. Sería la capa donde la información se encuentra realmente, así como MVC, aquí encontramos las reglas del juego.
  • View-Model. En esta capa, nos encontramos en la “reactividad”, jugando con estados o states. También en ella, podemos encontrar expuesta los comportamientos de los datos.
  • View, la capa donde se muestra modularmente la información, su estructura.

Por último, es importante denotar que como tal VueJS NO nace con una esencia “china” y siento que es despectivo su enfoque porque Evan You trabajaba dentro de Meteor llamado Angular después, y notaba las deficiencias de su antiguo proyecto VueJS: The Documentary
Les dejo el enlace de las caracterízticas de Vue 3 por el equipo de Vue Mastery 💚

Vue es un framework JavaScript que surge en 2014 desarrollado por Evan You y que nos permite construir las interfaces de usuario. Se dice que es un framework progresivo porque, a diferencia de otros frameworks (como Angular), que están más orientados a usarlos para construir proyectos desde 0, se puede añadir en cualquier proyecto y a cualquier etapa del desarrollo sin ninguna complicación y pudiendo aprovechar todas las funcionalidades de las que nos provee Vue.

Empezar a trabajar con Vue es muy rápido, ya que para usarlo para páginas sencillas basta con importar el script en nuestra página HTML. Pero también podemos llegar a construir aplicaciones más grandes, para lo que nos vendría bien usar vue-cli a la hora de generar la estructura del proyecto, separar la aplicación por componentes y usar algunas librerías como vuex, vue-router o axios para poder hacer uso de funcionalidades que no trae Vue.

Lo que lei, es que Evan You trabajaba en google en el desarrollo de angular, y que luego se retiro y desarrollo Vue, y le quito muchas de las cosas complejas que tiene angular, y por esto la sintaxis es mucho más simple. Podría ser un Angular mejorado y que ahora cuenta con el aporte de una gran comunidad.

Y el mejor apoyo de un desarrollador que esta aprendiendo Vue.js es la propia documentación, una de las mejores guía para nosotros.
https://v3.vuejs.org/guide/introduction.html

Les recomiendo ver el documental de Vue.js.

Vue.js: The Documentary

El meme de Shrek para explicar el concepto de progresivo es lo mejor de la clase 😂

ESPERO APRENDER MUCHO

Librería vs Framework

Librería: Herramienta para un utilidad específica. P.E:

  • MomentJS (fechas)
  • JQuery (manipular DOM)
  • React (componentes UI)

Framework: Conjunto de herramientas que trabajan en un proyecto. P.E:

  • Angular
  • Laravel
  • Vue

Con estas definiciones podemos decir que Vue es un Framework, gracias a todo su ecosistema que permite desarrollar todo un proyecto con Vue.

También se considera progresivo, pues con Vue puedes agregar con muchas capas independientes o en conjunto. Además permite agregar más capas como el proyecto lo requiera.

Podríamos decir que una librería es una herramienta (P.E. un martillo o un desarmador) y un framework es una caja de herramientas.

Libreria vs framework

Libreria: Es una serie de funcionalidades cuyo objetivo es resolver necesidades especificas, estan empaquetadas y ademas son reutilizables. Algunos ejemplos son JQuery y React.

Framework: Es una conjunto de herramietas que te da una estructura para un proyecto completo, desde el comienzo hasta el final, trayendo consigo funcionalidades independientes de cosas externas. Ejemplos como Vue y Angular que son frameworks para el frontend y Laravel para el backend.

¿Qué es Vue?

Vue es un marco Javascript progresivo de código abierto que se usa para crear interfaces de usuarios y aplicaciones SPA (Single Page Application). Fue creado por Evan You, y su idea es tener un marco que proporcione alto desacoplamiento para permitir el desarrollo progresivo de aplicaciones. Vue posee un sistema de componentes reactivos, por lo que es fácil la comunicación a través de componentes.

Vue lo puedes usar de diversas formas, lo que le agrega un punto a su favor. Si quieres incluirlo en tu proyecto puedes optar por las siguientes opciones

  • Descargar el achivo fuente de Vue, y agregarlo en tu HTML utilizando la etiqueta <script>
  • Utilizar CDN, puedes buscar en su página el CDN y agregarlo a tu HTML, y usarlo como libreria.
  • Usando un gestor de paquetes de node, ya sea NPM o Yarn.
  • Usar Vue-cli, donde puedes crear diversos tipos de poryectos de Vue, agregar ciertas configuraciones, dependencias, etc. Es uno de los metodos mas usados porque te crea un ambiente de trabajo ya configurado y siguiendo los mejores estandares de estructura y desarrollo.

Me toco ver esta clase como 3 veces, no entendi muy bien, pero creo q ya le entendi jejej xD

WOW

Que excelente explicación.
Precisa, muy fluida y bastante colorida (en un sentido descriptivo de los elementos a explicar).

Por si les interesa, hay un documental de Vue de 30 minutos que salió en 2020: https://www.youtube.com/watch?v=OrxmtDw4pVI&vl=en

¿Qué es Vue.js? Frameworks, librerías y componentes

Librería Framework
Herramienta para una utilidad específica. Conjunto de herramientas que trabajan en un proyecto.

Ejemplos de librerías:

Ejemplos de frameworks:

Vue tiene 2 capas principales que usa en todos sus proyectos:

  1. Declarative rendering | Conectar la información con la presentación.
  2. Componentes | Encapsular presentación y lógica (HTML, CSS, JS)

La magia es solo ciencia que no entendemos aún. - Arthur C. Clarke

Sabes que es un buen curso cuando al hacer la analogía de la cebolla colocan la referencia Shrek ❤️

Basicamente Vue es un Ogro ❤️

Un articulo para leer: La fascinante historia detrás del nacimiento de Vue.js
https://javascript.plainenglish.io/the-fascinating-story-behind-the-birth-of-vue-js-a-documentary-97d353688c2

Veamos qué se viene!!!

Yo entiendo mejor si usas a Shrek de ejemplo 😁

👌

Vue es un framework porque contiene un monton de librerias, plugins, utilidades.