Matt Mullenweg dijo en WordCamp US 2016: «Aprender JavaScript» desde ese momento el desarrollo del proyecto de WordPress va encaminado hacia esa tecnología, y en concreto utilizando la librería de Javascript React. Poco a poco todo el Back-end de WordPress estará hecho y controlado por Javascript.
En ese momento entendí que debía especializarme en algún framework de JavaScript para seguir desarrollando temas y plugins en el futuro. Y por eso me he decantado por Vue, uno de los frameworks mas populares y utilizados en la actualidad.
Pero ¿qué es Vue?
Como he dicho antes, Vue es un framework de JavaScript progresivo con el cual creamos interfaces de usuario de una forma sencilla. Su integración progresiva nos permite comenzar un proyecto desde cero y fácil de extender e incluso podemos llegar a tener una aplicación grande con tan solo unos pocos componentes.
Se trabaja mediante vistas, componentes, layouts, paginas… en definitiva, se construyen los proyectos de una forma modular, organizada y 100% escalable.
La combinación con WordPress, es ideal. Utilizaremos WordPress como back-end y con Vue nos encargamos de interpretar toda la lógica del front-end de la web a través de la REST API.
Características interesantes que te vas a encontrar
Estas son algunas de las características más interesantes de Vue y por las cuales me enamoré de este framework:
Aprovecha el virtual DOM, la reactividad y los componentes. El core está orientado a interfaces. Utiliza webpack para gestionar y empaqueta los proyectos. Tiene una curva de aprendizaje baja, siempre y cuando tengas conocimientos de HTML, CSS y JavaScript. Su código es legible e intuitivo. Es progresivo, es decir, se agregan funcionalidades según vayas necesitando. Es ligero, por lo tanto, tiene una velocidad de carga rápida. (buena performans, solo pesa 33.30KB) Utiliza una sintaxis de plantillas sencilla, con la doble llave {{ data }}. Es Escalable. Tiene una gran comunidad.
¿Cómo empezar?
Para inicializar un proyecto con Vue, bien lo puedes hacer de la forma más sencilla posible o bien complicándolo todo lo que uno quiera. Ahora voy a repasar las 3 formas mas sencillas que yo veo para comenzar un proyecto, tampoco voy entrar en muchos detalles, simplemente que las conozcas, siempre recomiendo seguir los pasos que se marcan en las documentaciones oficiales, estas serían:
- Utiliza la librería Vue desde una CDN.
- Crea un proyecto través de la herramienta Vue CLI.
- Haciendo uso de framework Nuxt.js
Primeras pruebas: utilizamos Vue a través de una CDN.
Empieza creando simplemente dos archivos, un archivo index.html donde tienes un esqueleto básico de HTML y un segundo archivo de JavaScript por ejemplo un main.js.
Para que Vue haga su magia tienes que añadir en el archivo index.html el siguiente script:
Con esto ya tienes un proyecto listo donde utilizar las funcionalidades del objeto Vue. Ya puedes instanciar la clase Vue desde este archivo main.js y conectar la parte del HTML con la lógica que ocurra dentro de esta instancia a través del atributo «el:»#app»».
Te dejo un ejemplo del esqueleto básico de HTML y JS, el cual puedes utilizar para inicializar un proyecto rápidamente.
Verás que he añadido un objeto data a la instancia, donde almacenar cierto contenido (en este caso un título). Este contenido es llamado y utilizado dentro del mismo HTML utilizando un sistema de templating característico de Vue. Con una sintaxis como esta {{ data }}.
Archivo HTML (index.html)
<script> src="https://cdn.jsdelivr.net/npm/vue"</script>
Archivo Javascript (main.js)
Segunda forma: crea un proyecto haciendo uso de la herramienta Vue CLI.
A través de la consola tienes que instalar de forma global dos cosas, por un lado Node.js (puedes descargarlo desde su web e instalarlo) y seguidamente instalar la herramienta Vue CLI, poniendo el siguiente comando (según los permisos que tengas igual tienes que añadir la palabra ‘sudo’ delante.
Una vez instalado estas dos dependencias de forma global ya puedes crear un proyecto Vue a través de la consola mediante el comando:
En el proceso de creación, el sistema te ofrecerá una serie de opciones para elegir o descartar en función del tipo de proyecto a desarrollar. Esto es debido a que es un framework progresivo como ya he comentado antes y lo mejor siempre será comenzar con algo muy básico e ir incorporando funcionalidades según las necesidades.
Si no te sientes cómodo utilizando comandos desde la consola, Vue CLI también dispone de una herramienta de configuración más intuitiva y con una interfaz más bonita. Con el siguiente comando puedes confeccionar tu proyecto con todo lo que necesites a golpe de clic:
Por ultimo: existe un framework basado en Vue llamado Nuxt.
Este framework te permite crear aplicaciones muy potentes siguiendo las buenas prácticas de Vue. Nuxt posee algunas características interesantes a tener en cuenta entre otras como:
- SSR (server side rendering).
- Tiene un potente sistema de enrutamiento (Amigable con el SEO)
- Servicio de archivos estáticos
- Minificación de CSS y JS
- Preprocesadores Sass, Less, Stylus etc
- Ampliación con arquitectura modular…
En la misma instalación desde la consola, deberás seguir una serie de pasos de configuración mediante la elección de distintas opciones para dejar la aplicación a tu gusto.
Como verás vas a disponer de un montón de posibilidades de configuración y opciones. Tienes que elegir entre otras como si vas a utilizar Javascript o TypeScript, te da opción de instalar desde el inicio un UI Framework como Bootstrap, Bulma, Vuetify, Tailwind y alguno más. También si tu proyecto necesita integrar un servidor como Express, Adonis, Koa… Añadir una librería para hacer pruebas unitarias, instalar Axios desde el comienzo, ¿necesitas que tu proyecto sea una PWA (aplicación web progresiva)?. Además de otras configuraciones, por último, te dice si quieres que tu aplicación sea Universal (SSR) o una SPA (aplicación de una sola página).
Nuxt es un framework muy extenso y posee una documentación muy buena y muy detallada con todas las posibilidades que tiene.
En cualquier caso los proyectos con Vue se desarrollan mediante componentes.
Los componentes de Vue están compuestos de HTML, CSS y Javascript (los llamados Single File Components), nos permiten modularizar un proyecto, combinar fácilmente un componente con otro y pueden escalar de una forma sencilla. En definitiva, orientamos un proyecto a componentes.
<script>
module.exports = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
Características de un componente web:
Flujo de datos unidireccional a través de: propiedades (props) y eventos (events) que son unos parámetros donde su función es cambiar lo que se ve y cómo se comportan los componentes.
Templates basadas en HTML.
Los componentes poseen un «css scope», es decir, el componente se envuelven en un CSS y este no afecta a otros o incluso unos estilos generales de la web.
Es totalmente reactivo.
Flexible (Puedes potenciar la calidad de tu código con librerías como estas ): pug, jsx, typescript, SASS, Webpack…
Es Simple, al final el «build» del proyecto se queda en archivos HTML, CSS y JS progresivo.
Vue en WordPress
Cuando hablamos de Vue y WordPress, me viene a la cabeza de nuevo los headless, algo de lo que ya hablé en otro artículo anterior y que puedes consultar para entender mas en profundidad el contexto de la terminología. En resumen, consistiría en extraer a través de la API REST cualquier dato almacenado en la base de datos de WordPress. Para lo cual utilizaremos los distintos endpoinsts que nos ofrece la propia API REST y que nos sirven para representar o renderizar el contenido en el frontal o front-end de una aplicación web utilizando el framework Vue.
Si en la API REST del proyecto que estemos montando, no dispone de algún endpoint, podemos crearlos nosotros utilizando funciones y hooks específicos que nos ofrece WordPress como pueden ser: (register_rest_route() o rest_api_init).
Actualmente no es habitual que encontremos aplicaciones conocidas donde se utilicen estas dos tecnologías, poco a poco iremos viéndolas mas a menudo porque esta combinación es ideal para realizar tanto pequeños como grandes proyectos.
En el momento de escribir este artículo, dentro de la comunidad de WordPress se está decidiendo sobre la estructura correcta que deberían de llevar los nuevos temas basados en JavaScript. Todo lo que implica la modificación de la jerarquía de plantillas que tiene WordPress ya establecida sobre PHP, su traslado a JavasScript y siempre sin que esto cree un problema de retrocompatibilidad con los miles de temas que hay creados.
Todo debería ir encaminado hacia desarrollos modulares basados en bloques de JavaScript, y es ahí donde quería llegar. Por lo tanto no será de extrañar ver de aquí en adelante temas creados sobre la nueva jerarquía y con estructuras desarrolladas con Vue, react, angular, svelte o cualquier librería o framework de JavaScript, donde principalmente predominen los componentes web.
¿Crees que se puede trasladar todas las funciones de WordPress a JavaScript?, además en el ecosistema de plugins también vamos a empezar a ver, como la tendencia se dispara en cuanto al desarrollo de extensiones construidas con JavaScript.
Conclusión
Todo esto solo es un granito de arena de lo que es un desarrollo completo con Vue. Hemos visto cómo crear un proyecto desde 0 de 3 formas distintas, cómo instalar y configurar dependencias según el tipo de proyecto que vayamos a construir. Hemos entendido que se trabaja con componentes, vistas, layouts, páginas etc. Todo mediante un sistema modular y altamente organizado. Sabes que, al ser un framework progresivo, en el momento de necesitar una funcionalidad solo tendrás que añadirla. Tu proyecto crecerá sin tener ningún problema. Y por último os he dado mi opinión sobre el poder y el futuro que tiene en conjunto con WordPress, que es lo que más me apasiona a mí y lo que iré reflejando en los próximos artículos y tutoriales.
Enlaces de interés
¿Qué más podemos hacer?
- Podemos crear bloques para el nuevo editor de WordPress basados en Vue.js
- Listar los últimos posts en un componente de Vue utilizando la API fetch o a través de la librería Axios
