Bibliotecas de JavaScript y WordPress: lo que necesita saber

Lo he dicho antes y lo diré de nuevo: si eres un usuario de WordPress, necesitas familiarizarte con JavaScript. Así es la web. El verdadero problema, entonces, es la inquietante cantidad de bibliotecas de JavaScript que tiene que revisar.

Hay Ember, React, Angular. Vue y Preact. Y no te olvides de Ionic, Express o Node. jQuery, Meteor y Bootstrap también merecen una mención. Ah, y qué tal…

Entiendes mi punto. (Y esos son solo los que podría nombrar de la parte superior de mi cabeza sin abrir una nueva pestaña). Las bibliotecas de JavaScript ensucian el paisaje porque son bastante esenciales para el desarrollo.

Ya sea que desee la manipulación de DOM, un marco MVC, llamadas AJAX o algo completamente diferente, es probable que haya una biblioteca de la que pueda extraer ayuda en su camino.

Como usuario de WordPress, eso debería ser música para tus oídos, y he aquí por qué.

¿Qué son las bibliotecas de JavaScript, de todos modos?

Simple: un código preescrito de buncha. Nada sofisticado. Sin embargo, puedes hacer un montón de cosas elegantes con ellos. Por eso son geniales.

Al utilizar un código preescrito y colocarlo en su sitio web, puede agregar funciones que le ahorran tiempo, pero probablemente también llenan los vacíos en su experiencia. Eres bueno en lo que haces, seguro, pero eres un desarrollador de WordPress, no un desarrollador de JavaScript.

Esta bien.

Cuando utiliza bibliotecas de JavaScript con WordPress, utiliza la experiencia de otras personas para mejorar su sitio y las experiencias de sus usuarios.

Lo primero es lo primero

Como usuario de WordPress, ya tiene acceso a un montón de bibliotecas de JavaScript y sus dependencias en Core. Consulte el Codex para obtener una lista completa y cómo usar wp_enqueue_script con JS integrado y externo.

Bibliotecas de JavaScript… ¿Para qué sirven?

Mucha gente se confunde cuando habla de bibliotecas de JavaScript porque a menudo están mal etiquetadas como marcos de JavaScript , que son diferentes. Un marco es una especie de biblioteca, pero funciona un poco diferente a la mayoría.

Los marcos son lo que usa para construir una aplicación o sitio web a gran escala. En esencia, los marcos JS cumplen la misma función que el propio WordPress: proporcionan la columna vertebral de cualquier proyecto en el que esté trabajando. Están mucho más estructuradas en términos de uso que las bibliotecas sin marco.

Los marcos se pueden dividir en algunas categorías: marcos de front-end, marcos de back-end y marcos de pila completa. Si no está familiarizado con los términos, front-end es con lo que interactúa el usuario, back-end es lo que se ocupa de los problemas del lado del servidor y full-stack maneja tanto el front-end como el back-end.

Probablemente haya oído hablar de algunos de los marcos más comunes/populares:

  • Angular
  • Nodo.js
  • Vue.js
  • Reaccionar
  • Ascua

¿Cómo funciona todo esto en WordPress?

Algunas de esas bibliotecas no. Ese es el punto que quiero resaltar: no necesitas un marco de back-end (y en ese sentido, un marco de pila completa) si estás trabajando con WordPress. Nuestro encantador Core ya maneja ese nivel de estructura por nosotros. (Tenga en cuenta que es un punto discutible si es un desarrollador que está contribuyendo específicamente a Core y/o está haciendo un montón de personalización por su cuenta).

Lo que sí necesita aprender a usar (o al menos comprender) son los marcos front-end y las bibliotecas de manipulación DOM. Estos entran en juego con mucha más frecuencia que cualquier otro tipo de bibliotecas de JavaScript.

PHP es un lenguaje impresionante. Nos dio WP como lo conocemos hoy, y funciona muy bien para poner todo tipo de lógica y funcionalidad en manos de los usuarios. Pero las bibliotecas de JavaScript toman el poder y lo aumentan exponencialmente.

Ciertos complementos como NinjaForms, aunque están escritos en PHP, porque WordPress lo dice, usan bibliotecas de JavaScript para brindar al usuario una mejor experiencia y mucha más funcionalidad de lo que sería posible de otra manera. WPNinjas usó las bibliotecas Backbone y Marionette para lograr esto.

Diablos, incluso aquí en Elegant Themes, Divi 3.0 (que es increíble y deberías unirte para usarlo en todos tus sitios) está escrito en React .

También lo es el próximo editor de Gutenberg (por el momento, al menos), y el panel de administración de WordPress.com llamado Calypso (así como Jetpack). Diablos, casi todo lo que haces en el tablero de .org funciona con JavaScript hasta que algo cambia. en el servidor y necesita ser guardado.

Pero incluso eso puede cambiar pronto… gracias a la API REST de WP.

API REST de WP + Bibliotecas de JavaScript = BFF

Probablemente ya haya oído hablar de la API REST de WP . En pocas palabras, está dando mucha vida al desarrollo de JavaScript de WordPress porque no tiene que realizar solicitudes de servidor a través de JavaScript en lugar de confiar en PHP.

Sí, ahora puede acceder directamente al back-end de su sitio desde el frente sin tener que lidiar con PHP, lo que ralentiza el tiempo de respuesta y limita la funcionalidad. WPMU tiene un desglose del uso de la API REST que también debe consultar.

Puede hacer tanto con JS y REST que casi da miedo pensar en ello. Cuando usa React (y específicamente React Native ), puede usar la base de datos de WordPress como back-end para su aplicación móvil sin siquiera tocar PHP. Puede interactuar directamente con MySQL a través de JSON a través de la API REST.

En cierto modo, esta interacción hace que WordPress funcione de manera muy similar a los marcos de JavaScript de back-end de los que hablamos anteriormente, proporcionando la estructura de la aplicación y la gestión de la base de datos sin ningún intermediario PHP. No es nada nuevo que WP funcione así, después de todo, eso es lo que hace un CMS, pero la implementación y la integración con las bibliotecas de JavaScript y JSON son

Si bien React Native es específicamente capaz de hacer eso para aplicaciones móviles, también puede usar cualquier marco o biblioteca de front-end para hacer lo mismo: Vue.js y Ember y React antiguo normal (o Preact, si es desagradable ).

Y si es realmente desagradable, puede tomar una de estas bibliotecas, hacer su sitio y usar solo suficiente Swift de Java para envolverlo en una vista web y lanzarlo en una tienda de aplicaciones gracias a la API REST. Es un poco feo, pero debería funcionar.

El futuro de WordPress

Matt dijo el año pasado que todos los desarrolladores de WordPress deberían “ aprender JavaScript profundamente ”.

Creo que es hora de que todos escuchemos. Honestamente, no importa qué biblioteca o bibliotecas de JavaScript elija aprender primero. Una vez que esté familiarizado con la forma en que uno o dos funcionan e interactúan con WordPress, está bien encaminado para ser parte del ecosistema JS y, a su vez, el futuro de WP.

Ya sea que desee crear una experiencia de cliente increíble para su complemento como Divi o Ninja Forms, una excelente aplicación web donde sus usuarios necesitan actualizaciones rápidas y sin problemas, o una aplicación móvil que solo usa WordPress como su base de datos de back-end, hay JavaScript bibliotecas por ahí para ello.

Miniatura del artículo de Creative Thoughts / shutterstock.com