Aprender a Aprender: Cómo Desarrollar Web de la Manera Correcta con Vue Si Eres un Principiante

Rate this content
Bookmark

No es común que las personas que intentan ingresar al desarrollo web literalmente aprendan a partir de HTML/CSS o flujos de trabajo de "crear xyz" donde de repente aparecen 25 archivos después de ejecutar un comando y no hay forma de comprender lo que acaba de suceder. El aprendizaje debe ser diseñado y adaptado a la forma de aprender de cada uno, de lo contrario todos somos perros fingiendo ser ovejas en un establo de caballos (literalmente no es absurdo en absoluto). Exploraremos cómo pasé de pensar que las marquesinas eran geniales (aún lo son, créeme) a ser una persona que puede construir aplicaciones web con personas que tienen experiencia en desarrollo web igual a mi edad. Compartiré mis aprendizajes, descubrimientos, lecciones, cómo hacerlo y especialmente qué aprender y, lo más importante, por dónde empezar (la pregunta más común de los principiantes) y por qué es importante tener un mentor.

Hablaremos sobre (en ningún orden específico)

- Cómo y por qué (de verdad, por qué) comenzar a aprender;

- Elegir la velocidad y el mentor adecuados;

- Elegir el framework adecuado (bueno, esto va a llamar la atención) y por qué esto importa y por qué debería ser Vue;

- Desafíos y lecciones aprendidas (Roma, construida, un día ordenada...);

- Lo que debes saber antes de decidir ahora, basado en las experiencias anteriores, si quieres adentrarte en este asunto web tan confuso.

This talk has been presented at Vue.js Live 2024, check out the latest edition of this JavaScript Conference.

Ashwin Vinay Phadke
Ashwin Vinay Phadke
8 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Conocer JavaScript es esencial para comenzar con Vue. Comprender los fundamentos de Vue y construir sobre conceptos individuales te ayudará a desarrollar aplicaciones más complejas. No caigas en la trampa de construir algo demasiado grande como proyecto inicial. Enfócate en los fundamentos y no te dejes influenciar por los estándares de la industria o trucos publicados en línea. Encuentra un mentor que guíe tu viaje con Vue.

1. Getting Started with Vue

Short description:

Soy Ashwin, un principiante en Vue que ha aprendido de mi equipo y quiero compartir mi conocimiento con los demás. Conocer JavaScript es esencial para comenzar con Vue. Comprender los fundamentos de Vue y construir sobre conceptos individuales te ayudará a desarrollar aplicaciones más complejas. No caigas en la trampa de construir algo demasiado grande como proyecto inicial. Enfócate en los fundamentos y no te dejes influir por los estándares de la industria o trucos publicados en línea. Encuentra un mentor que guíe tu viaje en Vue.

Hola a todos. Soy Ashwin, y estoy muy emocionado de ser parte de esta conferencia. Algo que no me habría imaginado hace un par de años, porque incluso ahora, como en este momento, todavía soy, o era, un principiante en Vue. Y esto se debe en parte - la razón por la que estoy aquí es realmente gracias a mi equipo que me ayudó a entender el mundo de Vue, me ayudó a entender todo el mundo de los frameworks de JavaScript y que me ayudó a desarrollar mis habilidades y mejorarlas para poder estar aquí y contarles a otras personas que están en el mismo nivel que yo, o tal vez que están comenzando, cómo pueden comenzar a desarrollar sus propias aplicaciones en Vue o simplemente conocer el framework de Vue en general. Entonces, la primera pregunta que siempre me viene a la mente es, ¿necesitas saber suficiente JS para conocer los frameworks que se construyeron en JS? Esto es definitivamente cierto. Necesitas saber algo de JS, obviamente, para comenzar con Vue, tener familiaridad con lo que el lenguaje trata, cómo funciona el lenguaje y qué matices específicos tiene el lenguaje realmente te ayudará a comenzar con Vue. Supongo que esto es probablemente obvio, pero tener un conocimiento práctico de JS realmente te ayudará a desarrollar aplicaciones usando Vue. Seguido de eso, supongo que la primera sugerencia es obviamente aprender los fundamentos. Esto es realmente fundamental para entender cualquier framework, cualquier lenguaje o cualquier cosa que literalmente harás en toda tu carrera, porque imagina saltar directamente a las aplicaciones y no saber qué hace un aspecto en particular, como digamos watch effect o props, si no sabes qué hacen bajo el capó, probablemente te acostumbrarás a usarlos, entenderlos, lo que necesitas hacer, pero entender realmente estos conceptos particulares, lo básico del framework, te ayudará a construir aplicaciones más complejas y tener una mayor conciencia en general de qué usar cuándo, como ya he dicho, que hay múltiples formas de hacer cosas simples, y realmente depende de tu experiencia y, en general, de tu experiencia con el framework lo que te ayudará a determinar qué tipo de camino tomar mientras desarrollas una aplicación en particular. Entonces, ¿qué hace que un buen proyecto de inicio o cómo puedes comenzar es simplemente ir y buscar, o tal vez no buscar exactamente, pero simplemente ir y comenzar a encontrar problemas simples para conceptos de Vue, como directivas de Vue, o cómo funciona el renderizado en Vue, o cómo pasar props, o cómo emitir cosas, o cómo, digamos, cómo usar watch versus, digamos, watch effect, cuál es la diferencia entre eso, y realmente construir iterativamente sobre conceptos individuales te ayudará a comprender cómo se unen estos conceptos individuales y te ayudarán a crear una hermosa aplicación que deseas o que quieres construir, y en general, te dará una comprensión básica si, digamos, al tomar una decisión sobre si usar uno u otro, realmente tendrás una buena comprensión de qué diferencia hace un enfoque con respecto al otro enfoque. Así que eso, y por supuesto, la consideración de la parte de beneficio, que básicamente es que aprendas tus habilidades y entiendas las cosas. La parte más importante que quiero compartir hoy es no caer en la trampa de construir algo grande como proyecto inicial porque creo que la mayoría de las personas no entienden qué tan complejos o realmente, realmente, realmente complejos pueden ser estos conceptos básicos o todo el framework, si lo estás viendo desde arriba y solo intentas interactuar con él, y si no sabes nada bajo el capó o si no sabes cómo se comporta el framework o qué está sucediendo, pronto será un punto de frustración para ti, y pronto estarás pensando en abandonar el framework o el proyecto por completo solo porque no pudiste hacer funcionar un botón reactivo o un menú desplegable reactivo. Entonces, no hay absolutamente ningún sustituto en lo que discutí antes. Es simplemente volver atrás y tener un problema o un concepto para que cuando estés construyendo una aplicación, te venga naturalmente qué tipo de conceptos se requieren y qué tipo de conceptos se deben usar. Podría ser, como dije, tan pequeño como probar en el playground de SFC si podrías usar props, cómo usar slots, qué cosas puedes pasar a los slots, qué cosas puedes pasar a los props, cómo funcionan los componentes asíncronos. Y nuevamente, repitiendo espacialmente toda la idea de conceptos a problemas te ayudará a obtener conocimiento constante y continuo sobre lo que puedes hacer con estas cosas en particular. Y tal vez puedas explorar algunos trucos nuevos o diferentes que se publicaron en línea y te encuentres con ellos y luego realmente entiendas qué son estos trucos o qué son estos componentes en particular. Así que habrá mucha presión a tu alrededor y escucharás cosas como, hey, Angular o React es el estándar de la industria. Todos lo están usando. ¿Por qué estás aprendiendo algo nuevo y todo eso? Quiero decir, realmente, como dije en toda esta charla. Fundamentos, eso es lo que necesitas saber. Los frameworks se construyen sobre conceptos realmente, realmente básicos. Entonces, no se trata del framework, se trata de los fundamentos. Y una vez que conoces un framework en particular, probablemente puedas transferir tus habilidades. Si comprendes eso realmente bien, puedes transferir tus habilidades a otros frameworks también. Y nuevamente, no te dejes llevar por la presión de cambiar de frameworks solo porque es genial, solo porque todos los demás lo están usando, o simplemente porque encuentras, encuentras que un concepto en particular es realmente fácil, un framework versus el otro, que puede ser la parte más crucial de tu aplicación, y luego te enganchas a él. Pero cambiar constantemente de frameworks mientras estás en la fase de aprendizaje realmente no te ayudará a largo plazo. Y los estándares de la industria son algo que probablemente se establecen durante toda la duración. Te acostumbras a ellos. Y, por supuesto, no te dejes engañar por los trucos que se publican en línea sobre, hey, cómo puedes hacer una cosa en particular de 10 formas diferentes. Y también puedes participar en cosas como administración de código, y todas estas cosas. Y aprendes cometiendo más errores y, en general, trabajando en cosas. Así que espero que esto haya sido una comprensión bastante rápida de cómo comenzar con VUE, y espero que lo hayas disfrutado. Y si tienes alguna pregunta, simplemente puedes conectarte conmigo. Y lo que sugeriría, básicamente, es conseguir un buen mentor, conseguir a alguien que realmente pueda entender en qué etapa te encuentras y que te guíe en tu viaje en VUE. Supongo que eso es probablemente todo. Y espero que hayas disfrutado la presentación y que tengas un buen día.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!