Xenodevs_: septiembre 2022

viernes, 23 de septiembre de 2022

Jugando con Threejs

Three.js es una biblioteca liviana escrita en JavaScript para crear y mostrar gráficos animados por computadora en 3D en un navegador Web y puede ser utilizada en conjunción con el elemento canvas deHTML5, SVG o WebGL. El código fuente está alojado en un repositorio en GitHub.

En el siguiente vídeo se puede ver una pequeña demostración de las cosas tan interesantes que podemos hacer con esta potente librería.

Simplemente creé una superficie con una textura de madera sobre la que se apoya una caja “una especie de muro” al que podemos ir cambiando la textura seleccionando estas de unas pequeñas esferas que se muestran en la Interfaz y . Gracias al uso de OrbitControls podemos rotar y desplazarnos en los 3 ejes.

Este sencillo ejemplo lo único que pretende es poner de manifiesto la potencia y la versatilidad de ThreeJs que nos permite introducir gráficos 3D en un navegador e interactuar con ellos.

Dejo el código en mi github a continuación

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">

	<title>Room </title>
	</head>
	<body>
	<div id="materials">
	<input id="1" type="image" src="./assets/concreto.png" width="100px" height="100px" name="Concreto">
	<input id="2" type="image" src="./assets/madera.png" width="100px" height="100px">
	<input id="3" type="image" src="./assets/metal.png" width="100px" height="100px">
	<input id="4" type="image" src="./assets/cristal.png" width="100px" height="100px">
	<span><p class="green">Author: Juan José Miguel López \| 2020 \| Simulador de texturas para visualización Arquitectónica</p></span>
	</div>

	<!--Librerías JS-->

	<script src="js/three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script src="js/dat.gui.min.js"></script>
	<script src="js/scripts.js"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	//EXP-SLK_V.0.0.1 - mezclando orbit controls + dat Gui
	//___________________VARIABLES_____________________________________

	var scene, renderer, camera;
	var cube;
	var controls;
	let mat;



	function init(){
	renderer = new THREE.WebGLRenderer();
	renderer.setClearColor(0x3a3a3a, 1.0); //establece el color ambiente y la opacidad
	renderer.physicallyCorrectLights = true;
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.shadowMap.enabled = true;
	renderer.toneMapping = THREE.ReinhardToneMapping;
	renderer.setPixelRatio( window.devicePixelRatio );
	var width = window.innerWidth;
	var height = window.innerHeight;
	renderer.setSize(width, height);
	document.body.appendChild(renderer.domElement);


	scene = new THREE.Scene();



	//__________________CARGA DE TEXTURAS________________________
	var texturaMadera = THREE.ImageUtils.loadTexture('./assets/suelo.png',{},function(){ renderer.render(scene, camera);});texturaMadera.needsUpdate = true;

	var material4 = new THREE.MeshPhongMaterial(
	{
	color: 0x90abed,
	map: texturaMadera,
	transparent: true,

	opacity:1});


	//______________________PLANO________________________________________
	var plano = new THREE.PlaneGeometry(40, 40);
	var materialplano = new THREE.MeshLambertMaterial({color: 0xcccccc});

	suelo = new THREE.Mesh (plano, material4);
	suelo.receiveShadow = true;
	suelo.rotation.x = -1.3;
	suelo.position.y = 0;
	suelo.position.z = 0;
	scene.add(suelo);
	//________________________CUBO_________________________________________
	cube = new THREE.BoxGeometry(25, 1, 8);
	var materialcubo = new THREE.MeshLambertMaterial({color: 0x90abed,});
	caja = new THREE.Mesh(cube, materialcubo);
	caja.castshadow = true;
	caja.rotation.x = -1.3;
	caja.position.x = 1;
	caja.position.y = 4;
	caja.position.z = 0;

	caja.castShadow = true;
	scene.add(caja);



	//_______________________CAMARAS____________________________________
	camera = new THREE.PerspectiveCamera (45, width/height, 1,1000);
	camera.position.y = 16;
	camera.position.z =30;
	//camera.lookAt(new THREE.Vector3(0,0,0));
	camera.lookAt(scene.position);
	//______________________CONTROLES ORBITALES________________________
	controls = new THREE.OrbitControls (camera, renderer.domElement);

	//_____________________________LUCES________________________________

	const ambient = new THREE.AmbientLight(0xffffff, 0.3);
	scene.add(ambient);

	var sol = new THREE.DirectionalLight(0xffffff,4,100,2);
	sol.position.set(50,10,20);
	sol.castShadow = true;
	scene.add(sol);

	}

	function animate(){
	requestAnimationFrame( animate );
	//renderer.render(backgroundScene, backgroundCamera); <--SOLO PARA IMAGEN DE FONDO
	renderer.render(scene, camera);
	window.addEventListener('resize', reajustarDimensiones, false);
	}

	//_____________________________FUNCIONES_____________________________________________

	function reajustarDimensiones(){
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	function queMaterial(){

	document.getElementById("1").addEventListener("click", function(){
	//console.log(this.id);
	scene.remove(caja);
	var texturaApli1 = THREE.ImageUtils.loadTexture('./assets/cemento.jpg',{},function(){ renderer.render(scene, camera);});texturaApli1.needsUpdate = true;
	var materialApli1 = new THREE.MeshPhongMaterial(
	{
	color: 0x90abed,
	map: texturaApli1,
	transparent: true,
	opacity:1});
	var cubo = new THREE.BoxGeometry(25, 1, 8);
	caja = new THREE.Mesh(cubo, materialApli1);
	caja.castshadow = true;
	caja.rotation.x = -1.3;
	caja.position.x = 1;
	caja.position.y = 4;
	caja.position.z = 0;
	caja.castShadow = true;
	scene.remove(caja);
	scene.add(caja);


	});
	document.getElementById("2").addEventListener("click", function(){
	//console.log(this.id);
	scene.remove(caja);
	var texturaApli2 = THREE.ImageUtils.loadTexture('./assets/abeto.jpg',{},function(){ renderer.render(scene, camera);});texturaApli2.needsUpdate = true;
	var materialApli2 = new THREE.MeshPhongMaterial(
	{
	color: 0x90abed,
	map: texturaApli2,
	transparent: true,
	opacity:1});
	var cubo = new THREE.BoxGeometry(25, 1, 8);
	caja = new THREE.Mesh(cubo, materialApli2);
	caja.castshadow = true;
	caja.rotation.x = -1.3;
	caja.position.x = 1;
	caja.position.y = 4;
	caja.position.z = 0;
	caja.castShadow = true;
	scene.remove(caja);
	scene.add(caja);

	});
	document.getElementById("3").addEventListener("click", function(){
	//console.log(this.id);
	scene.remove(caja);
	var texturaApli3 = THREE.ImageUtils.loadTexture('./assets/metal.jpg',{},function(){ renderer.render(scene, camera);});texturaApli3.needsUpdate = true;
	var materialApli3 = new THREE.MeshPhongMaterial(
	{
	color: 0x90abed,
	map: texturaApli3,
	transparent: true,
	opacity:1});
	var cubo = new THREE.BoxGeometry(25, 1, 8);
	caja = new THREE.Mesh(cubo, materialApli3);
	caja.castshadow = true;
	caja.rotation.x = -1.3;
	caja.position.x = 1;
	caja.position.y = 4;
	caja.position.z = 0;
	caja.castShadow = true;
	scene.remove(caja);
	scene.add(caja);


	});
	document.getElementById("4").addEventListener("click", function(){
	//console.log(this.id);
	scene.remove(caja);
	var materialApli4 = new THREE.MeshPhongMaterial(
	{
	color: 0x90abed,
	transparent: true,
	opacity:0.5});
	var cubo = new THREE.BoxGeometry(25, 1, 8);
	caja = new THREE.Mesh(cubo, materialApli4);
	caja.castshadow = true;
	caja.rotation.x = -1.3;
	caja.position.x = 1;
	caja.position.y = 4;
	caja.position.z = 0;
	caja.castShadow = true;
	scene.add(caja);

	});

	}

	//_______________________________INICIALIZACIONES____________________________________
	queMaterial();
	init();
	animate();

view raw scripts.js hosted with ❤ by GitHub

domingo, 18 de septiembre de 2022

JavaScript 7 [ Break & Continue - Desestructuración ]

· La sentencia break "salta" de un bucle.

· La sentencia continue "salta" una iteración del bucle.

Imaginemos que tenemos un array de nombre números.

const numeros = [1,2,3,4,5,6,7,8,9];

//Podemos recorrer el arreglo con un bucle for

for(let i=0; i<numeros.length; i++)
{
console.log(i);
}

Si vamos a la consola veremos la salida siguiente:

Pero lo que estamos viendo no son los valores del array numeros, estamos viendo el increment de la variable i

Si lo que queremos ver realmente son los valores que contiene el arreglo deberemos hacer o siguiente:

const numeros = [1,2,3,4,5,6,7,8,9];

//Podemos recorrer el arreglo con un bucle for

for(let i=0; i<numeros.length; i++)
{
//console.log(i);
console.log(numeros[i]);
}

Y en la consola veremos:

La diferencia estriba en que con la instrucción console.log(numeros[i]), estamos acediendo a cada posición del array usando el increment de i.

Imaginemos ahora que lo que queremos es que en la iteraciín de nuestro bucle, cuando lleguemos al número 5, nos salgamos del bucle, podríamos usar la palabra reservada break del siguiente modo:

//Ahora queremos que cuando i = 5 te salgas del for

for (let i=0; i<numeros.length; i++){
if (i===5){
break; //Al llegar a 5 se sale del bucle for. imprime solo 5 numeros
}
console.log(numeros[i]);
}

Ahora en la consola veremos como las iterciones se detienen al llegar al 5

Continue.

Veamos ahora qué ocurre cuando usamos la palabra reservada continue.

const numeros = [1,2,3,4,5,6,7,8,9];

//QUE PÁSA CUANDO USAMOS CONTINUE
for (let i=0; i<numeros.length; i++){
if (i===5){
continue; //al llegar a 5 continua NO IMPRIME EL 6, EL RESTO SI, NO IMPRIME EL 6 PORQUE
//POR QUE NO ROMPE EL BUCLE COMO BREAK, SINO QUE OMITE LA ITERACIÓN EN LA QUE SE ENCUENTRA.
}
console.log(numeros[i]);
}

La teoría nos dice que continue, salta una iteración en una posición determinada, por tanto en la salida en consola veremos todos los numerous menos el 6 ya que es en la cosición 5 donde le indicamos se salte una iteración:

Desestructuración.

La desestructuración es una nueva característica del estandar ES6. Se trata de una nueva forma de asignar valores a arreglos y a objetos. Esta es un tipo de sintáxis muy utilizada en el trabajo con Frameworks como Angular, React o Vue. Se trata de asignar lo que viene en un objeto de un modo muy ágil.

Imaginemos que queremos guarder los valores de un array, en distintas variables.

Sin la desestructuración tendríamos que hacerlo de la siguiente manera:

let numeros =[1, 2, 3];

let uno = numeros[0],
dos = numeros[1],
tres = numeros[2];

console.log(uno, dos, tres);

En consola veremos:

Sin embargo mediante la desestructuración podemos hacerlo del siguiente modo:

let numeros =[1, 2, 3];

//AHORA CON DESTRUCTURACIÓN PODEMOS HACER:
const[uno, dos, tres] = numeros; //Simplemente creo un array con la variables y lo igualo a mi array de datos
console.log(uno, dos, tres);

Esto mismo lo podemos hacer tambien con objetos. Es importante tener presente que para que la desestructuración funcione en objetos, la variable que creamos para gurdar la propiedad del objeto debe llamarse igual qu e esa propiedad. El orden puede variar y la asignación se hace en function del nombre, pore so deben tener el mismo nombre

//ESTO LO PODEMOS HACER CON OBJETOS, ES DECIR YO TENGO UN OBJETO Y NECESITO GUARDAR CADA UNA DE LAS
//PROPIEDADES DEL OBJETO EN VARIABLES INDEPENDIENTES:
let persona ={
nombre:"Juan",
apellido: "Lopez",
edad: 40
}
//IMPORTANTE -PARA QUE LA DESTRUCTURACIÓN FUNCIONES EN OBJETOS, LA VARIABLE QUE CREO PARA GUARDAR LA PROPIEDAD DE MI OBJETO
//DEBEN LLAMARSE IGUAL. EL ORDEN DE LAS VARIABLES PUEDE VARIAR Y LA ASIGNACIÓN SE HACE EN FUNCIÓN DLE NOMBRE POR ESO DEBEN
//LLAMARSE IGUAL.
let {nombre, apellido, edad } = persona;
console.log(nombre, apellido, edad);

en consola tendremos:

jueves, 15 de septiembre de 2022

¿Qué es Vuejs? Ventajas e inconvenientes de usar Vue.

Los frameworks de desarrollo JavaScript más prometedores no se limitan a React y Angular. Vue es igualmente exigente y popular entre los desarrolladores de front-end. Vue se convierte en una prioridad cuando se quiere desarrollar aplicaciones más ligeras, flexibles y de alto rendimiento y sus herramientas lo ofrecen todo. Los desarrolladores que lo han utilizado tendrán diferentes razones para utilizar Vue para sus necesidades de desarrollo. El siguiente post hace hincapié en lo que es Vue.js y lo beneficioso que es para tu próximo proyecto de desarrollo web. Esto te ayudará a diseñar desde aplicaciones de una sola página hasta aplicaciones multifuncionales de alto rendimiento.

VueJS es un framework progresivo de JavaScript creado para crear aplicaciones dinámicas/de una sola página. Todas las aplicaciones desarrolladas se supone que son frontales. JavaScript es un lenguaje de programación utilizado en todo tipo de proyectos de desarrollo web. También puede interesarte saber que JavaScript comprende una plétora de componentes web.

Generalmente, los desarrolladores de frontend que actualmente construyen sitios y aplicaciones web tienden a trabajar con frameworks de Javascript. Y por supuesto, comprende algunas de las mejores bibliotecas oficiales. Además, es fácil integrar estas bibliotecas oficiales de Vue con otras bibliotecas también. Esto acelera el proceso de desarrollo de aplicaciones móviles o todo el proceso de desarrollo. Por eso Vue.js está muy de moda, especialmente en lo que se refiere al desarrollo. Vue, el framework más progresivo que existe, fue creado por Evan You. Él quería crear un nuevo marco para la construcción de una interfaz de usuario con componentes reutilizables, biblioteca central, consola de javascript, bibliotecas de apoyo, renderizado del lado del servidor, arquitectura basada en componentes, y muchos otros atributos especiales. Básicamente, quería combinar lo mejor de todos, especialmente de los marcos Angular JS y React JS.

Antes de construir Vue.js, Evan solía trabajar en proyectos de Angular para Google. Así que eventualmente, tuvo la idea de desarrollar un framework que sirviera de todas las maneras y así fue como se creó Vue. La sintaxis de las plantillas de Angular fue escogida mientras que de React se mantuvo la característica de enlace bidireccional y el enfoque de componentes mientras se desarrollaba Vue.

Los testimonios de los usuarios dicen que las empresas expertas en desarrollo de Vue están capacitadas para hacer el mejor uso del framework Javascript de código abierto y crear aplicaciones que se distinguen de la competencia. Vue también se utiliza en proyectos a gran escala. ¿Por qué? La respuesta es muy sencilla, utiliza directivas (atributos HTML que permiten a los desarrolladores ampliar el HTML) y diferentes grupos de componentes utilizados principalmente para controlar, gestionar y renderizar las interfaces de usuario.

2. Hay ciertas ventajas de usar Vue.js

2.1 Simplicidad

Vue.js consiste en componentes de un solo archivo. Ahora bien, ¿de qué se componen estos componentes? Incluye todo tipo de códigos como HTML, CSS y JavaScript, todo en un solo archivo. Puede interesarte bastante saber que el aspecto fundamental del desarrollo de Vue es llevar a cabo los mejores resultados posibles. Y todo esto debe hacerse con el menor esfuerzo, simplemente utilizando un par de líneas de código.

2.2 Fácil de aprender

La idea general es permitir a los desarrolladores realizar las mínimas líneas de código y conseguir resultados inigualables. La mayoría de los desarrolladores de software están de acuerdo con el hecho de que no es necesario ser un profesional para entender la tecnología.

Todo lo que necesitas es tener un conocimiento básico de - HTML, CSS y JavaScript. Incluso los editores de código más populares como atom y sublime text soportan Vue, lo que facilita el uso de este framework.

2.3 Integración sencilla

Puede que te interese saber que los desarrolladores de hoy en día pueden integrar fácilmente Vue.js en otros frameworks. Por ejemplo, pueden integrar fácilmente Vue con React o Angular y personalizar el proyecto según sus respectivos requisitos.

Como hay tanta facilidad en la integración, la popularidad de Vue.js parece estar creciendo a un ritmo fanático. Ahora, dado que el backend se puede construir en Javascript, los desarrolladores se encuentran utilizando dicha tecnología de gama alta y las bibliotecas de componentes de Vue para experimentar con varias aplicaciones javascript de una sola página. Además de Javascript, el manejo de bloques HTML ya no es un dolor debido a la arquitectura MVVM.

2.4 Fácil de usar

Según varios expertos, Vue pronunciado como Vue.js no posee una curva de aprendizaje empinada. Y esto resulta ser beneficioso para numerosos programadores nuevos/aficionados. Los desarrolladores de Vue js sólo deben estar bien familiarizados con los fundamentos de HTML, CSS y JavaScript, lo que no es el caso cuando se trata de Angular o React. Además, con Vue.JS se pueden construir fantásticas interfaces de usuario, lo que también es un factor de clasificación hoy en día.

2.5 Personalizable y de adopción progresiva

Ningún usuario preferiría explorar un framework que no le permitiera una personalización adecuada. Y esa es la razón por la que Vue.js se destaca del resto. Todas las funciones son fácilmente accesibles. La parte divertida aquí es que los desarrolladores pueden nombrar la función para que puedan recordarla fácilmente. Junto con esto, Vue también está diseñado para ser muy adaptable a las necesidades del proyecto.

2.6 Rendimiento y renderización del DOM virtual

Otros componentes interesantes de Vue son el rendimiento y el renderizado virtual del DOM. Ahora bien, cuando se realiza un renderizado declarativo, es muy probable que se encuentre con un DOM o un Modelo de Objetos de Documento. Este modelo, en particular, representa las páginas HTML con todos los estilos, el contenido de la página, y elementos similares del sistema como objetos que se almacenan como una estructura de árbol, y durante la carga de la página, son generados por el navegador.

Cuando el usuario interactúa con la página, los objetos tienden a cambiar su propio estado y el navegador se encarga de actualizar los cambios de información y renderizarlos en la pantalla. El único problema de esto es que actualizar todo el DOM puede ser un proceso engorroso.

Así que para mejorar el proceso, Vue.js hace uso del DOM virtual, una copia del DOM original del sitio web se crea de manera que una cantidad adecuada de cambios se puede hacer sin renderizar todo el DOM y esto minimiza el número de manipulaciones del DOM necesarias para ser manejadas por Vue. Esto hace que el desarrollo de aplicaciones móviles sea rápido y también mejora el rendimiento general de las aplicaciones existentes. Todo esto se traduce en un mejor rendimiento, una mayor velocidad y operaciones de DOM más rápidas. Tal vez esa sea la razón por la que los desarrolladores prefieren Vue como marco ideal. En este sentido, Vue.js ha conseguido situarse entre los mejores, dando guerra a Angular, React y Vanilla.js. Es un serio contendiente porque las nuevas versiones, actualizaciones y mejoras pueden predecir una trayectoria aún mejor.

Sin embargo, hay que tener en cuenta que en situaciones reales, el núcleo del rendimiento se basa en la optimización del código y la calidad general.

2.7 Vinculación bidireccional

Otro componente interesante de vue es la ventaja de la vinculación bidireccional o manipulación del DOM. Vue heredó esta característica de Angular. Básicamente describe la conexión entre las actualizaciones de los datos del modelo y la vista (UI), con componentes vinculados que contienen datos que puedes actualizar cada cierto tiempo.

Con la ayuda de la vinculación de datos de dos vías, puedes actualizar los componentes relacionados y hacer un seguimiento de las actualizaciones de datos, todo esto se vuelve más fácil en Vue.

Los datos vinculados reciben actualizaciones reactivas en Vue al igual que los objetos DOM. Esta característica hace que el framework sea ideal para aplicaciones con actualizaciones en tiempo real. En cuanto al desarrollo, esta naturaleza reactiva puede hacer que la actualización de los datos sea más ágil y sencilla.

2.8 Legibilidad y componentes de un solo archivo

Por último, pero no menos importante, Vue utiliza diferentes componentes para construir tus páginas web. Al fin y al cabo, cada pieza de tu aplicación es un componente diferente que representa un elemento encapsulado de la propia interfaz. Estos componentes pueden ser escritos en JavaScript, CSS y HTML

Utilizado sobre todo en CBA (Arquitectura Basada en Componentes), la división del código de la aplicación es un enfoque que resulta ser un contendiente clave de React y Angular.

Una arquitectura con rasgos como esta también supone un par de beneficios

Componentes reutilizables - los componentes encapsulados pueden ser comúnmente referidos como trozos de código que los desarrolladores pueden reutilizar como plantillas para elementos similares.

Grandes pruebas unitarias - el proceso de pruebas se configura como una actividad de control de calidad que comprueba cómo se comportan las partes más pequeñas en la aplicación por sí solas. El enfoque basado en componentes simplifica enormemente este proceso.

Lectura de código - Cada componente se almacena en archivos separados (siendo cada componente un único archivo), lo que facilita enormemente la lectura y el mantenimiento del código.

3. Contras de Vue.js

3.1 Limitación del lenguaje

No muchos de ustedes saben que VueJS fue inicialmente desarrollado por los desarrolladores en China y es inmensamente popular allí. Por lo tanto, para cualquier conversación en el foro, las descripciones de los plugins, o cualquier otro tipo de manuales de instrucción, se desarrollan en el idioma chino, lo que significa que usted necesita para obtener traducciones para ellos para seguir adelante en el trabajo. Esto puede suponer a veces una barrera lingüística.

3.2 No hay un enfoque racionalizado

Como sabemos que VueJS es una comunidad financiada y mantenida por los desarrolladores, por lo tanto carece de una financiación significativa o no está fuertemente apoyada por empresas de gran tamaño. La tecnología no es lo suficientemente fiable o bien soportada como para ofrecer las soluciones rápidas a los errores que esperan las grandes empresas, mientras que por otro lado podría ser proporcionada por el soporte de React o Angular.

Además, para todas las herramientas que se están construyendo, VueJS todavía tiene un largo camino por recorrer en comparación con el gran número de herramientas personalizadas que ofrecen React y Angular.

3.3 Falta de usuarios experimentados

Dado que VueJS no lleva tanto tiempo en el mercado como sus competidores, ha tardado en abrirse paso y ver una aceptación generalizada por parte de los programadores. Pues bien, si vemos el mercado, hay algún tipo de preocupación y falta de desarrolladores inexpertos en VueJS lo que hace que sea menos preferible para los desarrolladores utilizar sus servicios.

4. Consejos a tener en cuenta para convertirse en una mejor versión de Vue Developer

Ya que hemos terminado con los aspectos técnicos. Sin embargo, esto no es todo, cuando se profundiza un poco más, se encuentran varios términos interesantes como los datos de renderización declarativa, la plantilla de cadena, adjuntar oyentes de eventos, las capas de vista, la gestión del estado, y así sucesivamente durante la creación de aplicaciones de una sola página.

Es posible que hayas empezado a usar Vue por curiosidad sin intención de volver atrás. A continuación encontrarás algunos consejos que podrían ayudarte a convertirte en un mejor desarrollador de Vue.

Muchos profesionales se encuentran con múltiples rutas a resolver en el mismo componente Vue. Bueno, el problema es que Vue reutiliza los mismos componentes y no crea otros nuevos. Así que no importa que nada cambie. Todo lo que tienes que hacer es añadir una propiedad :key en tu elemento <router-view> - que probablemente esté en tu archivo App.vue. Pronto podrás reconocer la diferencia en la página.

Otro consejo a tener en cuenta es validar tus props. De hecho, esto también aparece como una regla de estilo de "Prioridad A: Esencial" en la guía de estilo oficial de VueJS. Aparte de esto, digamos que tienes un compañero de trabajo que está trabajando en el mismo proyecto. ¿Cómo lo va a saber? Así que es aconsejable dejar las cosas claras desde el principio.

La última, si realmente quieres sobresalir como desarrollador de Vue sólo trata de conocer las diferentes opciones de componentes y no sólo eso, también aprende cuándo usarlos, y lo más importante, por qué usarlos.

5. Conclusión

Por último, al final de esto, tenemos una idea más clara de cómo funciona Vue js. Si lo entendemos en términos simples, podemos decir que Vue.js es un pequeño framework (de naturaleza ligera) que tiene un enorme potencial. Vue.js ofrece comodidad a las personas para entender la simplicidad del marco. Algunas de las otras ventajas del framework incluyen su velocidad, simplicidad y el apoyo tanto de las bibliotecas como de la comunidad. Ahora que estamos analizando una serie de aplicaciones Vue.js de varios sitios web, podría ayudarte a entender mejor la tecnología. Hay muchas empresas en el mercado que le ayudarán a incorporar Vue.js en su propia pila tecnológica, le ayudarán a construir interfaces web utilizando Vue y necesitarán una comprensión más profunda de la tecnología.