Desarrollo con Vue JS – Todo lo que necesitas saber

Hola, en esta oportunidad te venimos a hablar sobre el Desarrollo con Vue JS, y todo lo que necesitas saber para convertirte en un experto Vue JS y todo su ecosistema.

Seguro al empezar escuchaste o leíste algunos términos como: aplicaciones de una sola página o SPA, componentes asíncronos, representación en el lado del servidor, y muchos otros términos más, como las herramientas Vue CLI, Vuex, WebPack, etc.

A veces empezar con una tecnología de desarrollo conlleva ir aprendiendo poco a poco sobre ello, no es necesario aprender todo de golpe, pero sí tener una hoja de ruta para saber por dónde empezar y donde terminar.

A continuación te mostramos un mapa con un bosquejo genérico de lo que debes seguir para llegar a dominar Vue.js y su ecosistema.

0. JavaScript y el desarrollo web básico

Si a usted le alcanzan un libro en inglés y para poder leerlo, primero tiene que aprender dicho idioma, ¿verdad?.

Del mismo modo, Vue.js es un marco de trabajo (Framework) basado en JavaScript, por lo tanto es necesario que usted tenga una base sobre este lenguaje de programación para poder entender como funciona Vue, del mismo modo tener conocimiento de desarrollo utilizando HTML5 y algo de CSS3.

Desarrollo con Vue Js - Todo lo que necesitas saber para ser un experto en Vue. Share on X

1. Conceptos esenciales de Vue JS

Si vas a empezar con el Framework, te recomendamos seguir la siguiente hoja de ruta: aprender el núcleo que incluye Componentes, Directivas, Vue Router y Vuex.

Con las bases en los componentes usted estará preparado para afrontar las demás áreas del desarrollo de aplicaciones web modernas con Vue JS.

1.1. Características básicas de Vue

En su forma más básica, Vue sincroniza una página web con JavaScript. Las características clave para lograr esto son datos reactivos, y las características como las directivas y las interpolaciones. Estas son las cosas que usted debe aprender primero.

Para construir su primera aplicación Vue, también necesitará saber cómo instalar Vue en una página web y comprender el ciclo de vida de una instancia de Vue.

1.2. Componentes en Vue

Son elementos de interfaz de usuario reutilizables, aislados. Tendrá que entender cómo declarar componentes, y la forma de comunicarse entre ellos a través de las propiedades (props) y  eventos.

También es importante aprender cómo construir sus componentes, ya que esto es fundamental para construir aplicaciones robustas y escalables con Vue.

1.3. SPA (Single Page Application), aplicación de una sóla página

Las aplicaciones de una sola página (SPA), permiten que una sola página Web pueda actuar como un sitio web tradicional de varias páginas sin la ineficiencia de la recarga y la reconstrucción de la página cada vez que el usuario navega.

Una vez que haya creado sus “páginas” como componentes Vue, puede asignar cada uno a una trayectoria única con Vue-router, una herramienta mantenidas por el equipo de Vue.

1.4. Estados

Como las aplicaciones crecen, con muchos componentes a través de muchas páginas de un SPA, la gestión de estado global se vuelve complicado y los componentes estarán atestadas de utilería y detectores de eventos.

Un modelo especial llamado “Flujo” mantiene sus datos en un almacén central predecible y estable. La biblioteca Vuex, también mantenido por el equipo de Vue, le ayuda a implementar Flux en una aplicación Vue.js.

2. Mundo Real de Vue

Todo el conocimiento alcanzado en la primera parte, se puede utilizar para construir aplicaciones Vue con alto rendimiento y eficiente.

2.1. Project Scaffolding (Andamios de proyectos)

Una vez que realice la construcción de aplicaciones con frecuencia, encontrará que hay configuraciones y herramientas de desarrollo que ayudan al desarrollo del proyecto.

El equipo Vue mantiene una herramienta llamada Vue CLI que le permite girar en un entorno de desarrollo Vue.js robusta en cuestión de minutos.

2.2. Full Stack / Aplicaciones autenticadas

Las aplicaciones reales son normalmente interfaces de usuario basadas en datos. Los datos a menudo se obtienen de una API segura hecha con Node, Laravel, Rails, Django o alguna otra infraestructura de servidor.

Tal vez los datos serán proporcionados por una API REST convencional o GraphQL, o tal vez serán los datos en tiempo real a través de sockets web.

También debe familiarizarse con los patrones de diseño comúnmente utilizados para integrar Vue en una configuración de pila completa, así como las diversas consideraciones para mantener los datos del usuario en una aplicación segura Vue.

2.3. Pruebas / Testing

Si se quiere producir aplicaciones Vue que son a la vez fáciles de mantener y estables en producción, realmente necesita proporcionar las pruebas necesarias para ello.

En aplicaciones Vue, la unidad de pruebas asegura que sus componentes proporcionan siempre la misma salida para una entrada dada.

El equipo de Vue mantiene una herramienta llamada Vue-test-utils que le permite crear y ejecutar pruebas en componentes aislados Vue.

2.4. Optimización

Al implementar su aplicación a un servidor remoto y los usuarios acceden a él a través de conexiones lentas, no tendrá la velocidad y la eficiencia que ha experimentado durante las pruebas en el desarrollo.

Para optimizar una aplicación Vue, podemos emplear una variedad de técnicas que incluyen la representación del lado del servidor (server-side-rendiring). Aquí es donde se ejecuta una aplicación de Vue en el servidor y la salida es capturada en la página HTML que se entrega a un usuario.

Otras técnicas para la optimización incluyen el uso de componentes asincrónicos y hacer funciones.

	Conozca ¿qué es Vue?, qué tipo de aplicaciones puede construir con el, como funciona, Directivas, Componentes Vue, Vue-router y SPA, Vue CLI y mucho más. Sigue nuestro Mini curso en YouTube. Sigue nuestro curso Premiun con nuestra OFERTA.

3. Herramientas Claves

Todo lo que hemos visto hasta ahora es desde el núcleo Vue.js, o de herramientas en el ecosistema. Pero Vue no existe en forma aislada; es sólo una capa en la pila frontend.

Desarrolladores de alto nivel Vue tendrán que estar familiarizados no sólo con Vue, sino también con las herramientas claves que serán parte de cada proyecto basado en el Framework.

3.1. JavaScript moderno y Babel

Se pueden construir de manera efectiva con ES5, el estándar de JavaScript que casi todos los navegadores existentes apoya.

Para una experiencia de desarrollo Vue.js mejorado, y para aprovechar las nuevas capacidades del navegador, usted puede construir sus aplicaciones usando las características de la última versión de JavaScript ES2015 estándar, y proponer características de ES2016 y mucho más.

Sin embargo, si decide hacer uso de JavaScript moderno, tendrá una forma de apoyar los navegadores más antiguos, de lo contrario, su producto no funcionará para la mayoría de usuarios que utilicen estos navegadores.

La herramienta para lograr esto es Babel. Su trabajo consiste en “transpile” (traducir y compilar) sus características modernas en características estándar antes de enviar la aplicación.

3.2. WebPack

Webpack es un bundler módulo, es decir, si su código está escrito en los diferentes módulos (por ejemplo, diferentes archivos JavaScript), webpack puede “construir” éstos en un solo archivo que puede ser leído por un navegador.

Webpack también funciona como una tubería de acumulación, lo que le permite transformar el código antes de ser construido, por ejemplo, con Babel, Sass, o TypeScript, también se puede utilizar para optimizar su aplicación con una serie de plugins.

Muchos desarrolladores encuentran webpack difícil de entender y aún más difícil de configurar, pero sin ella, algunas de las mejores características de Vue, como componentes de un solo archivo, no serían accesibles.

3.3. TypeScript

TypeScript es un agregado o superconjunto del lenguaje JavaScript que incluye los tipos de datos (String, Boolean, Number, etc). El propósito de esto es para ayudarle a escribir código robusto.

Vue.js 3, próximo a llegar este 2019, se escribira en su totalidad en TypeScript. Esto no significa que tenga que utilizarlo en sus proyectos Vue, pero sí significa que si quieres contribuir a Vue y entender su funcionamiento interno necesita aprenderlo.

4. Frameworks Vue

4.1. Nuxt.js

Si usted quiere construir una aplicación de alto rendimiento con Vue, tendrá que utilizar Nuxt.js, que ofrece enrutamiento basado en componentes, representación del lado del servidor, división de código, y otras características de vanguardia.

El marco Nuxt.js ofrece todo esto, e incluso más características, como PWA, a través de su variedad de plugins de la comunidad.

4.2. Vuetify

Material Design de Google es un sistema ampliamente utilizado para la construcción de interfaces de usuario, hermosas que se utiliza en todos los productos de Google como Android, y también a través de la web.

El marco Vuetify implementa Material Design en una serie de componentes Vue. Esto le permite construir rápidamente aplicaciones Vue al estilo Material Design, además de widgets como ventanas modales, alertas, navbars, paginación, etc.

4.3. NativeScript-Vue

Vue.js es una biblioteca para crear interfaces de usuario web. Si desea utilizarlo para las interfaces móviles nativas, puede hacerlo con el Framework NativeScript-Vue.

NativeScript es un sistema para la creación de aplicaciones que utilizan componentes de la interfaz de usuario nativa en iOS y Android, mientras que NativeScript-Vue es un marco en la parte superior de NativeScript, proporcionando un uso de la sintaxis y los componentes Vue.

5. Varios

En esta última sección, vamos a cubrir otros temas que son importantes, pero no son esenciales o en todo caso no encajan en las categorías anteriores.

5.1. Desarrollo de Plugins

Si desea volver a utilizar la funcionalidad de Vue a través de sus proyectos o contribuir al ecosistema Vue, se puede hacer una característica instalable como un plugin de Vue.

Los plugins son una característica del núcleo de Vue, pero también hay una variedad de herramientas que le pueden ayudar en la creación de código de Vue portátil.

5.2. Animación

Si la animación es lo suyo, echa un vistazo al sistema de transiciones de Vue, que es también una parte de del núcleo. Las transiciones permiten aplicar la animación cuando se añadan elementos o eliminan el DOM.

Para hacer una transición, se crea clases CSS para definir el efecto de animación deseada, ya sea por aumento gradual, el cambio de color, o lo que quiera. Vue detectará cuando se añade un elemento o se retira del DOM.

5.3. Aplicaciones Web Progresivas (PWA)

Son como aplicaciones web normales, pero se han mejorado con características modernas que mejoran la experiencia del usuario. Por ejemplo, una PWA puede incluir caché sin conexión, la representación de servidores, notificaciones push, etc.

La mayor funcionalidad PWA se puede agregar a una aplicación Vue fácilmente a través de un plugin Vue CLI 3 o el uso de un marco como Nuxt.js, pero aún debe comprender las tecnologías claves, como el app manifest y el service worker.

Por donde empezar

En este momento puede sentirse deprimido o inspirado para darse cuenta de que hay mucho que aprender. O tal vez una combinación de varias cosas.

Ahora que ha visto todo el material que debe seguir, le recomendamos empezar con la primera parte.

No olvides compartir el material, te lo agrdeceríamos mucho.