7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Mobile Development

Presentación de Vue y Weex para aplicaciones móviles nativas

Read Time: 17 mins

Spanish (Español) translation by Charles (you can also view the original English article)

Vue es un popular marco de JavaScript para aplicaciones web con fácil enlace entre los datos en memoria y la interfaz de usuario. ¡Ahora Weex nos permite codificar aplicaciones móviles nativas usando el framework Vue!

¿Por qué usamos Vue y otros marcos de enlace de datos como Angular y React? ¿Qué tiene de especial? Los usamos para garantizar que los datos de la aplicación que se almacenan en la memoria permanezcan sincronizados con la interfaz de usuario y viceversa.

También usamos estos marcos para permitirnos crear aplicaciones muy rápidamente y de una manera optimizada para el rendimiento.

En este tutorial le mostraré cómo usar el marco Vue, en particular cómo comprender sus conceptos de enlace de datos y plantillas. Luego, pasaré a presentar la plataforma Weex, para codificar aplicaciones móviles nativas usando Vue!

Enlace de datos

Veamos un ejemplo sencillo para entender cómo estos marcos pueden realmente ahorrarnos tiempo. Lo que queremos es un campo de entrada simple que se mantenga sincronizado con los datos de nuestra aplicación. Nuestra propia aplicación puede cambiar los datos mediante programación, y el usuario puede cambiarlo a través de la entrada del usuario, por lo que tenemos que estar observando tanto la interfaz de usuario como los datos de la aplicación.

Two way data bindingTwo way data bindingTwo way data binding

Escribir código que admita este enlace de datos sería detallado. Necesitaríamos crear detectores de eventos y objetos proxy y observables para capturar cualquier cambio en los datos de la aplicación. Y estas complejidades simplemente crecen y crecen a medida que se agregan más tipos de datos e insumos. Vue y otros marcos de enlace de datos evitan que tengamos que escribir todo ese código de enlace.

Con Vue, si nuestro usuario cambia algunos datos de entrada, se sincronizará de nuevo con los datos de la aplicación de la siguiente manera:

Changes flowing from the UI to the modelChanges flowing from the UI to the modelChanges flowing from the UI to the model

O si la aplicación cambia los datos, actualizará la interfaz de usuario de la siguiente manera:

Changes flowing from the model to the UIChanges flowing from the model to the UIChanges flowing from the model to the UI

Cuando mantenemos la interfaz de usuario y los datos de la aplicación juntos sincronizados, significa que nuestra aplicación hace exactamente lo que esperamos que haga. Vue gestionará todo esto y permitirá que se produzcan otros potentes procesos de enlace de datos.

Configuración

Ahora que sabemos por qué usamos estos marcos, vamos a configurar una aplicación Vue simple para ejecutar algunos ejemplos. Cree un nuevo archivo HTML en cualquier lugar del equipo y pegue el código siguiente en él:

Este es un archivo HTML simple que se vincula a la biblioteca Vue JS. Contiene un elemento div con el identificador de app. Dentro de las etiquetas de script tenemos una variable llamada aplicación que usamos para apuntar a nuestra vista, explicaré esta parte más adelante.

Luego creamos una nueva instancia de Vue, o "vista". Este constructor indica al marco de trabajo qué elemento contendrá nuestra interfaz de usuario de la aplicación y la mantendrá sincronizada con los datos de la aplicación.

Ahora haga doble clic en el archivo HTML para abrirlo en el navegador y abra la ventana de la consola del navegador.

The browser console in ChromeThe browser console in ChromeThe browser console in Chrome

Interpolación de texto

La interpolación de texto nos permite incrustar expresiones en nuestro código HTML que se interpretarán cuando se represente la página. Las expresiones son en vivo, por lo que si se cambian los datos de los que dependen, la página se actualizará en tiempo real. Esto se conoce como representación declarativa, que nos permite colocar expresiones en cualquier lugar dentro del contenido de un elemento. Repasemos con un ejemplo sencillo.

Js

Nuestro código JavaScript ahora contiene un objeto de datos que almacenará todos los datos de nuestra aplicación para esta vista. Dentro de ella, he creado la propiedad de mensaje con la cadena "Hello world".

A continuación, vamos a mostrar esta propiedad en el código HTML.

HTML

Las expresiones se indican con sintaxis de llaves dobles. Vue JS gestiona las dependencias de cada expresión y actualiza la página en directo si cambian. En nuestro caso, tenemos dos expresiones, con la propiedad message como dependencia de cada una. La primera expresión {{ message }} solo muestra la propiedad message. La segunda expresión {{ message.split('').reverse().join('') }} toma la propiedad message y, a continuación:

  • Divide la cadena en una matriz:[ "h","e","l","l","o"," ","w","o","r","l","d" ]
  • Invierte el orden de la matriz:[ "d","l","r","o","w"," ","o","l","l","e","h" ]
  • Une la matriz para obtener "dlrow olleh", que es el mismo mensaje pero impreso hacia atrás.

Ahora abra el navegador y actualice la página HTML. A continuación, abra la ventana de la consola del explorador y asigne a app.message un nuevo valor y vea cómo se actualiza el resultado en el explorador.

Simple Vue template exampleSimple Vue template exampleSimple Vue template example

También puede utilizar matemáticas en expresiones de plantilla o datos estructurados en objetos. En realidad, como habrás adivinado, las expresiones de Vue son solo JavaScript. Sin embargo, el acceso a las variables globales está en un espacio aislado, por lo que puede acceder a Matemáticas, pero no a la ventana. Esto ayuda a mantener sus aplicaciones seguras, y sus usuarios también.

Al usar Vue con solo unas pocas líneas de código, podemos tener un enlace de datos bidireccional avanzado. Esto garantiza que la interfaz de usuario y los datos de la aplicación estén sincronizados con relativa facilidad.

Directivas

En nuestra opinión, las directivas son otra forma de datos vinculantes. Podemos usarlos para enlazar datos de aplicación a atributos, eventos, campos de entrada y datos repetibles. Vamos a repasar cada directiva y descubrir cómo funcionan.

  • v-bind: enlazar un valor de atributo
  • v-model: enlazar datos de la aplicación a un elemento input como textarea
  • v-on: definir un controlador de eventos
  • v-for: enlazar a una matriz u objeto

v-bind Directiva

La directiva v-bind se utiliza para el enlace de datos de atributos. Nos permite enlazar los datos de la aplicación al valor de un atributo. Piense en ello como interpolación de texto pero dentro de un atributo. Puede enlazar class, id, value o cualquier otro atributo con la directiva v-bind.

Para este ejemplo, me gustaría enlazar los datos de nuestra aplicación al atributo data-attr mediante la directiva v-bind v-bind:data-attr.

Js

HTML

En el ejemplo anterior, enlazamos un atributo denominado data-attr a una serie de orígenes de datos diferentes. En primer lugar, lo enlazamos a las propiedades type y names de object. Luego lo enlazamos a una expresión matemática y luego unimos todos los enlaces juntos en un solo atributo de matriz.

Eche un vistazo a la salida en el navegador: puede hacer clic en la pestaña Elementos para ver la salida del valor de cada atributo.

Binding attribute valuesBinding attribute valuesBinding attribute values

De nuevo, puede cambiar los datos de la aplicación en la consola para ver el proceso de enlace de datos.

Changes to the model are rendered automaticallyChanges to the model are rendered automaticallyChanges to the model are rendered automatically

Piense en la directiva v-bind como si permitiera expresiones en valores de atributo. Esto es increíblemente poderoso y fácil de establecer con la biblioteca Vue.

v-model Directiva

Esta directiva se utiliza específicamente para mantener los datos de la aplicación sincronizados con campos de entrada, áreas de texto y elementos de selección. A continuación se muestra un ejemplo:

Js

HTML

Para la primera sección de esta página, tenemos un campo de entrada de texto y un área de texto, los cuales tienen la directiva v-model que mantiene estos campos de entrada sincronizados con la propiedad message, usando v-model="message". De esta manera, si cambia cualquiera de ellos, el modelo se actualizará y, a continuación, se actualizará el otro campo de entrada. ¡Adelante y pruébalo!

Binding to input elementsBinding to input elementsBinding to input elements

En la siguiente sección tenemos un menú desplegable sincronizado con la propiedad seleccionada con v-model="selected". De esta forma, si se cambia la selección, se actualizará nuestro modelo.

Por último, tenemos una selección múltiple. He mostrado cómo hacer esto de dos maneras: con varias casillas de verificación y con una entrada de selección múltiple. Como podemos tener varios valores, he creado la matriz checkedNames que puede almacenar varios valores. La entrada de selección múltiple y las casillas de verificación tienen cada una una directiva v-model destinada a la propiedad checkNames. Pruébelo y deben permanecer sincronizados a medida que realiza selecciones.

Multiple selection bindingMultiple selection bindingMultiple selection binding

La Directiva v-on

Esta directiva nos permite adjuntar eventos a elementos HTML. Esta directiva se puede usar en ciertos elementos que pueden tener eventos de entrada asociados a ellos, como mantener el mouse, clics, entrada de texto, presionar teclas y más. Para este ejemplo, crearemos un botón simple con un evento de clic.

Js

HTML

En la directiva v-on, después de los dos puntos, especificamos el evento que queremos adjuntar. En este ejemplo, cuando se desencadena el evento click, ejecutaremos algunas expresiones. En primer lugar, abrimos un cuadro de diálogo de alerta y, a continuación, cambiamos el valor de la propiedad en la que se ha hecho clic. Tenga en cuenta que puede llamar a funciones en expresiones v-on.

A button with a click eventA button with a click eventA button with a click event

Directiva v-for

Esta directiva es una de las más poderosas de todas. Podemos observar cualquier objeto o matriz en busca de cambios y representar repetidamente una parte de nuestro código de plantilla para cada propiedad o elemento que se encuentra en ese objeto o matriz. Por ejemplo, para representar una matriz de nombres como una lista:

Js

HTML

En este ejemplo, primero adjuntamos la directiva v-for al elemento que desea repetir. El valor de la directiva especifica el objeto o matriz que queremos recorrer en iteración (nombres), así como una variable que contendrá el valor para cada iteración (nombre). Ahora, dentro de este elemento repetido, podemos usar la variable name en expresiones.

Si luego modificamos la matriz, por ejemplo con un método como push, sort o reverse, los datos de la plantilla se actualizarán automáticamente. Intente ejecutar el ejemplo y modifique la matriz en la ventana de la consola.

Rendering a list of elements with the v-for directiveRendering a list of elements with the v-for directiveRendering a list of elements with the v-for directive

Componentes

El proceso de enlace de datos se produce en las vistas. Los componentes son simplemente vistas reutilizables que podemos repetir en toda nuestra aplicación. Cada componente debe tener algunos datos de plantilla que se van a representar como parte de la interfaz de usuario y algunos datos de la aplicación. Opcionalmente, puede incluir algunos estilos si lo desea.

Vamos a usar la directiva v-for de nuevo para generar elementos de lista. Pero esta vez, haremos de cada elemento un componente. Le daremos a este componente un nombre para que podamos dirigirlo dentro de nuestro código de plantilla: list-item. Los componentes también pueden tener "propiedades registradas", a las que podemos asignar un valor a asignar cuando creamos el componente. En mi caso, el componente list-item esperará recibir un valor para la propiedad name, definida con props:["name"].

Ahora vamos a crear este componente. Agregue el siguiente código a las etiquetas de script:

Js

Asegúrese también de que tiene los siguientes datos de aplicación:

HTML

Aquí puede ver que el componente list-item se repetirá para cada nombre que se encuentre en la matriz. Cada nombre se asignará a la variable name que se define en la directiva v-for. Estamos pasando la propiedad name al componente mediante v-bind.

Cada instancia es simplemente una copia del componente. Podemos modificar cada copia o instancia independientemente unas de otras. Por lo tanto, piense en los componentes como el blueprint y las instancias como copias realizadas desde el blueprint. Aquí está el resultado final:

List rendered with componentsList rendered with componentsList rendered with components

Compilación y la CLI de Vue

Hemos estado trabajando con un archivo HTML muy simple y dejando que Vue interprete todo en tiempo de ejecución. Sin embargo, Vue viene con una herramienta de línea de comandos. Es posible que te estés preguntando por qué. Una razón es que las plantillas de página precompiladas funcionarán mejor que las plantillas que Vue interpreta en tiempo de ejecución. Otra razón es que, si tuviéramos que crear una aplicación a gran escala e intentar encajarla en un archivo HTML, rápidamente se volvería inmanejable.

Así que necesitamos modularidad para descomponer una aplicación grande en pedazos más pequeños.

Instalación de la CLI de Vue

Para usar la línea de comandos, deberá abrir la ventana de la consola de su sistema operativo.

  • Para Mac, presione Comando-Espacio y luego escriba terminal y presione Retorno.
  • Para Windows, busque el símbolo del sistema en el menú de inicio, asegúrese de hacer clic con el botón derecho y "abrir como administrador".
  • Para Linux, pulse Control-Alt-T.

Antes de continuar, asegúrese de que tiene instalada la versión más reciente de Node.js. Luego necesitamos instalar Webpack, que comprimirá el tamaño del archivo de nuestro proyecto, haciéndolo más rápido en nuestro navegador. A continuación, podemos instalar la CLI de Vue y ejecutar los comandos pertinentes para su plataforma:

Mac y Linux

  • sudo npm install -g webpack
  • sudo npm install -g vue-cli

Windows (asegúrese de ejecutar la consola como administrador)

  • npm install -g webpack
  • npm install -g vue-cli

¡Eso es todo! Ahora estamos listos para comenzar a configurar nuestro proyecto webpack avanzado. En primer lugar, navegar hasta el directorio donde queremos crear nuestro proyecto, en mi caso el escritorio, y luego crear el proyecto. Puede reemplazar myapp con cualquier nombre de proyecto que desee.

  • vue init webpack myapp

Se le llevará a través de una serie de preguntas sobre su proyecto, lo que le pedirá que complete datos como el título y la descripción y le preguntará si desea instalar complementos de terceros. En este ejemplo, puede responder no a todos los extras opcionales. Una vez creado, necesitamos instalar las dependencias, así que vaya al directorio del proyecto y ejecutaremos el comando install.

  • cd miaplicación
  • Instalación de npm

Deje que NPM instale todos los paquetes de dependencia y, a continuación, estamos listos para continuar.

Creación de un proyecto de Vue

Una vez que se han instalado los paquetes, podemos ejecutar el servidor de desarrollo escribiendo npm run dev. La ventana del explorador debe abrirse, mostrando la siguiente página.

The Vue starter project welcome screenThe Vue starter project welcome screenThe Vue starter project welcome screen

No vamos a ir a través de la estructura de todo el proyecto, pero cuando se abre el directorio myapp verá el directorio src. Contiene un archivo App.vue, un archivo main.js y, en el directorio de componentes, el archivo Hello.vue.

Los archivos Vue son componentes. El archivo main.js configura la vista inicial y potencialmente otras configuraciones también. Echemos un vistazo a los archivos App.vue y Hello.vue.

The vue files from the Vue starter projectThe vue files from the Vue starter projectThe vue files from the Vue starter project

Aquí puede ver que cada componente de Vue se divide en tres partes:

  • <template>: el marcado HTML que forma parte de la interfaz de usuario.
  • < script > : datos de aplicación, filtros, métodos, propiedades calculadas, observadores y métodos.
  • < style >  : el estilo CSS o Sass de nuestros componentes.

compilación

La compilación de todos los componentes juntos producirá una aplicación a gran escala. Esto significa que cuando estamos desarrollando, trabajamos en pequeñas piezas modulares de código, denominadas componentes, en lugar de toda la aplicación. En Vue tenemos componentes de un solo archivo que contienen JavaScript, HTML y CSS. Incluso se encargará de transpilar ES6 a ES5, Sass a CSS y Jade a HTML si elige usar esos idiomas.

Notará que en el archivo App.vue, he resaltado dónde importa el componente Hello.vue. ¡Los componentes se pueden anidar dentro de otros componentes!

Al compilar, nuestro proyecto se construye con el siguiente proceso:

Vue build processVue build processVue build process

Seguimos usando la misma sintaxis que en los ejemplos anteriores. Sin embargo, ahora estamos trabajando con archivos Vue más pequeños y compilándolos juntos. También tenemos algunas características más avanzadas como los preprocesadores y la compresión Jade, Sass, ES6 y Webpack.

Weex

Ahora que entendemos la biblioteca de Vue, echemos un vistazo rápido para ver cómo podemos tomar nuestra aplicación web y convertirla en una aplicación móvil nativa, instalable en iOS o Android.

Weex es un marco híbrido, lo que significa que permite múltiples tecnologías, al igual que un automóvil híbrido puede usar tanto eléctrico como de gasolina. En nuestro caso, usamos código JavaScript desde nuestra aplicación web, pero representamos en una interfaz de usuario nativa. Además, desde JavaScript podemos acceder a las API nativas del dispositivo para acceder a hardware como la cámara, los sensores y el sistema de archivos.

Parts of a Weex appParts of a Weex appParts of a Weex app

Con Weex, en lugar de representar nuestra aplicación en HTML, usamos XML. En realidad, HTML y XML son muy similares, por lo que la sintaxis le resultará familiar. A continuación, este XML se convertirá en componentes nativos. Ahora nuestro JavaScript podrá hablar con esos componentes nativos al igual que habla con el DOM en Vue con HTML. No solo eso, sino que los componentes nativos se pueden aplicar estilo y colocar con CSS, incluidas animaciones, transiciones y más, y se pueden integrar en la capa nativa.

Eso es solo un teaser de lo que Weex puede hacer. En los próximos tutoriales, te llevaré más en profundidad con Weex, y veremos cómo crear algunas aplicaciones nativas multiplataforma prácticas.

Pros

Vue tiene una sintaxis simple y está aumentando en popularidad muy rápidamente. Weex nos permite crear aplicaciones móviles con JavaScript y Vue, pero aún así ofrecer una experiencia de aplicación nativa.

Contras

Vue en sí es estable, pero Weex todavía está en desarrollo temprano, actualmente reside en la incubadora Apache. Pero no te preocupes, Weex estará listo para la producción pronto, y está respaldado por el gigante tecnológico Alibaba. Por lo tanto, si la creación de una vista previa para desarrolladores le preocupa, puede esperar hasta que Weex llegue a su versión completa.

conclusión

Ahora ha visto cómo el enlace de datos es una razón clave para usar Vue y marcos similares. Nos ahorran tiempo de desarrollo y proporcionan una forma estándar de crear aplicaciones. También has visto cómo usar la interpolación de texto, las directivas y los eventos en Vue, y cómo estas características funcionan juntas para mantener los datos de la aplicación sincronizados con la interfaz de usuario.

Comenzamos con un proyecto básico con una sola vista. Pero luego creamos un proyecto más avanzado que tenía vistas más pequeñas y modulares llamadas componentes. Los componentes nos permiten desglosar nuestro proyecto para que sea más fácil de codificar y mantener. Después, vimos cómo usar el compilador Vue para permitir la transpilación de ES6, Jade y Sass en los lenguajes estándar, mientras comprimía los tamaños de archivo al mínimo.

Todo este conocimiento te ayudará cuando empieces a codificar con Weex. Weex nos permitirá tomar nuestra aplicación web Vue y convertirla en una aplicación móvil. Weex es un poco diferente, usamos XML con componentes especiales, en lugar de HTML, pero aún podemos usar otras tecnologías web, como CSS y JavaScript. Eso significa que no tenemos que cambiar nuestra lógica de aplicación de aplicación web a aplicación móvil.

Estad atentos a mi próximo post sobre el desarrollo de Weex, y mientras tanto, echa un vistazo a algunos de nuestros otros posts sobre el desarrollo de aplicaciones móviles con tecnologías web.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.