Creación de complementos reactivos de WordPress – Parte 1 – Backbone.js

Este es el artículo 1 en 3 de la serie “Creación de complementos reactivos de WordPress”
Creación de complementos reactivos de WordPress – Parte 1 – Backbone.js
Creación de complementos reactivos de WordPress – Parte 2 – Vue.js
Creación de complementos reactivos de WordPress – Parte 3 – ELM
Este es el comienzo de una breve serie de artículos que muestran cómo crear un widget de panel de WordPress simple con estilo delantero reactivo. Construiremos el mismo complemento en cada artículo, cambiando la tecnología de desarrollo frontal a cada cambio mínimo en PHP Backend. En este artículo, usaremos BackBone.js para el front-end, pero debido a que es el primer artículo de la serie, también habrá un poco más para mostrar sobre cómo se configura el trasero.
¿Reactivo? La programación reactiva no es nada nuevo, pero recientemente tecnologías como React y Vue.js lo han llevado al centro de atención. Sobre algunas tecnologías reactivas que ya he escrito varias veces aquí. Jeff comenzó la serie WP REST API con Native React, y Gilbert escribió sobre React y Laravel Lumen y sobre el uso de Vue.js con la API WP para un tema. La belleza del desarrollo del estilo reactivo es que conduce a una mayor separación de preocupaciones con un flujo de datos más simple a través de su aplicación.
¿Por qué Backbone.js? Normalmente, sobre Backbone.js no se habla de la misma manera que reaccionan y vue.js en términos de ser reactivo, probablemente porque es un poco más antiguo, no tan de moda y no usa una parte del “nuevo caliente” debajo El capó, como lo hacen los nuevos niños en el bloque, por ejemplo, las correcciones DOM. Backbone.js es un marco JavaScript de estilo reactivo; Actualizar una parte de los datos de un modelo y un componente de visualización se actualiza mágicamente para mostrar los cambios, mientras que una solicitud al servidor se activa para persistir en segundo plano. Hay muy buenas nociones básicas en el sitio. Backbone.js, que introduce brevemente el flujo reactivo con su modelo y vista de separación y colecciones. Sin embargo, la razón principal para usar Backbone.js para el primer artículo de esta serie es que quería que la primera iteración del complemento se construya sin ninguna otra adicción externa que lo que ya viene con WordPress. Backbone.js se ha incluido oficialmente en WordPress a partir de la versión 3.5 y se usa en el núcleo para cosas como la visualización de la cuadrícula de la biblioteca de medios. Entonces, pensé que sería muy bueno usar Backbone.js, porque es una configuración más simple del complemento.
El complemento construiremos un complemento muy pequeño de WordPress que crea un widget de tablero para mostrar lo que está en el programa de WordPress Cron. Se llama WP Cron Pixie y esto es lo que parece …
En la demostración, puede ver que los programas de Chron como “una vez por hora”, “dos veces al día”, etc. Cada uno tiene una lista de eventos de Chron esperando ser ejecutados. Cada evento tiene una fecha límite, y al lado de (en los paréntesis) es tanto como el evento debe llevarse a cabo. Si mira cuidadosamente, esos tiempos hasta que la madurez cambia cada 5 segundos más o menos. A la izquierda de cada evento de Chron hay un ícono “ahora ejecutado” (se asemeja a las flechas dobles “rápida”). Al hacer clic en el ícono respectivo, la fecha de vencimiento se cambia instantáneamente en la fecha y hora actuales, y la hora hasta que el vencimiento sea “ahora”. Otros 5 segundos después y el evento de Chron que se ejecutaría ahora, en lugar de más tarde, tiene un nuevo tiempo asignado en algún lugar en el futuro, basado en su programa. Esto significa que WordPress Chron ha procesado el evento y ha programado la próxima vez que se realice el trabajo. Probablemente notará tres eventos “Chron_pixie_” en la lista de programas. Estos trabajos de Chron son creados por WP Cron Pixie con ciertos períodos de tiempo para probar cómo se gestionan y se muestran. No hacen nada cuando se inicia WordPress Chron, y el complemento los volverá a crear si son eliminados. Entonces, ¿cómo es esto reactivo? Ingresaremos los detalles serios más adelante, pero probablemente sea fácil imaginar que al hacer clic en el botón “Ejecutar ahora” acaba de actualizar la fecha de vencimiento en la fecha y hora actuales, y desde aquí ha sucedido una cadena de eventos. La parte importante era una función simple en la vista que se llama cuando se activa un evento de “clic” para ejecutar ahora:

Cuando se ejecuta la función runnow (): se toman algunos valores del modelo adjunto.
Hay una verificación rápida para ver si vale la pena establecer la fecha de vencimiento si ya está muy cerca.
El tiempo (segundos de 1970-01-01 00:00 en el servidor) se establece en “ahora” disminuyendo con segundos actuales hasta madurez (ambos valores del servidor para consistencia).
El modelo adjunto a la vista se guarda con una nueva marca temporal.
No hay elementos de búsqueda en DOM para actualizarse con nuevos valores. No hay una construcción específica y en ejecución de AJAX llamadas al servidor para guardar el modelo actualizado. Solo guardamos el modelo con nuevos valores y detrás de escena, la visualización (DOM) se actualiza para reflejar el modelo modificado y se realiza una llamada al servidor con los datos del modelo actualizado.
Otra forma de mostrar programas de Chron es Reactive es la forma en que se actualiza cada cinco segundos. En general, pensamos en una interfaz reactiva en términos de botones y otros comandos de entrada con los que el usuario puede interactuar, pero a menudo olvidamos que el tiempo es una entrada. Quería que la interfaz no solo fuera reactiva en la entrada del usuario, sino que también estuviera viva y reaccionara a los cambios que tienen lugar a tiempo, sin la intervención del usuario. En las escenas, un temporizador simplemente requiere el servidor los datos actuales del programa CRON y actualiza la colección de programación CRON. Verá esto en detalle más adelante, pero es así, el temporizador no hace nada especialmente para actualizar los datos que se muestran. Simplemente actualizar los datos indica las opiniones de las cuales se preocupan por los datos del programa para actualizar para reflejar los cambios.
Una implementación más elegante podría usar sockets web para mantener un canal abierto al servidor y recibir actualizaciones a medida que sucede, en lugar de buscar datos con un cronómetro. Sin embargo, esto supera con creces el propósito del pequeño complemento que desarrollamos aquí. Puede haber sido posible usar la API Heartbeat de WordPress en lugar de un temporizador, pero no quería meterme con la frecuencia predeterminada una vez por minuto. Ok, es bastante introductorio de chat-chat, pasemos para construir un complemento de WordPress … Backend como con cualquier complemento de WordPress, todo comienza con un pequeño archivo PHP con algunas sedes específicas: todo lo que sucede realmente en WP-cron- Pixie.php es que se conecta a la acción de Admin_init, de modo que el complemento hace algo solo en las páginas de administración, a través de las cuales la clase Chron_pix cobra vida. CRON_PIXIE Class Esta es la carne y las papas del Backynd y comienza verificando si el usuario actual tiene suficientes privilegios para jugar con el programa CRON y, en caso afirmativo, registre todas las funciones y filtraciones que le interesan:
Notará que usamos las acciones wp_ajax_* proporcionadas admin-ajax.php en lugar del nuevo API REST WP. De la misma manera que usamos Backbone.js para esta versión del complemento, quería usar algo probado y probado y compatible con muchas versiones anteriores de WordPress. La infraestructura básica para la API REST WP se ha agregado solo en la versión estable actual (v4.4.x), mientras que Admin-AJAX.PHP ha estado prácticamente disponible para siempre en comparación. Hay altas posibilidades en un artículo futuro para pasar a la API REST, pero para esta versión la mantenemos “Old Skool”. Hay una pequeña función que se llama cuando comienza el tablero, es el lugar donde llega el widget Life WordPress: /*** registra la devolución de llamada de widget y contenido. */ Public function add_dashboard_widget () {wp_add_dashboard_widget ($ this-> plugin_meta [‘slug’, $ this-> plugin_meta [‘name’], array ($ this, ‘dashboard_widget_center’); } wp_add_dashboard_widget registra la función Dashboard_widget_content () en la clase para proporcionar el contenido del widget. En wp_add_dashboard_widget vemos por primera vez backbone.js.
Bueno, de hecho, es más código subrayado.Las secciones son plantillas que no serán procesadas por el navegador web y simplemente se paran en el DOM.Luego podemos referirnos a ellos por sus ID para usarlos como tentaciones para una red troncal.view.Verá cómo se usan cuando llegamos a JavaScript.Sin embargo, algo importante es que las secciones de las plantillas.Esta es la forma de la plantilla para permitirle ingresar datos de Backbone. Modelo que alimenta la visualización como resultado.También hay etiquetas para la producción con escape, y
Se usa para JavaScript Old Simple, como si … de lo contrario en el código anterior. Después de ver la demostración de WP Cron Pixie anterior, esperamos que reconozca la plantilla Chron-Pixie-Schedule-Print-TMP que se muestra el nombre que se muestra para un programa Chron, seguido de una UL llena de eventos cron. Del mismo modo, la plantilla Cron-Pixie-Event-Pritem-TMP elimina el contenido para cada uno de estos eventos de Chron, con poca lógica para cuando un programa tiene una lista vacía de eventos. De lo contrario, muestra el icono “Ejecuta ahora”, el nombre de nombre, la marca de tiempo para el momento de la madurez y el valor de Second_ -Processing (). El DIB con la identificación Cron-Pixie-Main es el lugar donde está sucediendo toda la acción en el frente. Es el lugar donde la columna vertebral. Más sobre esto más tarde, lo prometo. Para una configuración más fácil en un complemento de producción, recomendaría insistentemente mover estas plantillas a sus propios archivos e incluirlas a cambio. Podría ser aún mejor eliminar las plantillas de subscore.js de Admin_footer. La función enqueue_scripts hace que las cosas habituales digan WordPress qué hojas de estilo y archivos JavaScript quieren que se incluya el complemento:
También utiliza el wp_localise_script de la función de WordPress para proporcionar una cronpixy variable JavaScript llena de cosas útiles, como: filas de caracteres que se pueden traducir, con qué frecuencia queremos que el temporizador actualice los datos (podría configurarse en el futuro). ), y nuestros datos iniciales para la pantalla, de modo que no se espera que la interfaz JavaScript lo tome del servidor. La función _get_schedules () que se usa para obtener los datos del programa es un poco desordenado, pero traté de escribirlo de una manera simple de seguir: vale la pena echar un vistazo a WP_GET_SCHEDULES y las funciones crónicas de WordPress para darle una idea de cómo se adapta, pero no voy a profundizar, porque siento que te impacientas y quieres alcanzar las cosas front-end. Como tal, solo mencionaré brevemente las dos funciones que tratarán las acciones wp_ajax_cron_pixie_schedules y wp_ajax_cron_pixie_events que vienen de frontand, respectivamente ajax_schedules y ajax_events. /*** Envíe una respuesta a la solicitud AJAX, como JSON. * * @param mixto $ respuesta */ función privada _ajax_return ($ respuesta = true) {echo json_encode ($ respuesta); salida; } /*** Muestra una lista codificada de JSON de horarios cron. * * @return mixed | cadena
} Ajax_schedules solo llamar _get_schedules que se muestran anteriormente y transmite el resultado a la función _ajax_return que envía la respuesta como JSON y luego sale del script para que no se envíe ninguna salida. No permitimos ningún cambio en los programas de Chron en el frente, por lo tanto, ya sea que se trate de obtener una publicación, solo lo trataremos como un Get. Tampoco gestionamos solicitudes de ciertos programas de Chron. La función AJAX_EVENTS verifica los datos del evento publicado de CRON y actualiza el programa CRON para reflejar los cambios en el evento y luego le diga a Cron que procese cualquier evento debido. Es un poco complicado debido al hecho de que te aseguras de no destruir un evento de Chron existente con un recurrente y viceversa. Actualmente, no tenemos ninguna razón para solicitar datos sobre eventos cron en la interfaz, ya que todos se proporcionan como parte de los datos de programación de Chron, por lo que solo administramos las aplicaciones posteriores, solo caerá si se prueba una solicitud. Esta función es un poco asquerosa y no está lista para la producción. Tal vez lo fortalecemos en el futuro.
Puede ver AJAX_EVENTS, así como las otras dos funciones que configuran el programa de prueba CRON y la fuente completa de class-chron-pixie.php: https://github.com/ianmjones/wp-clon-pixie/blob/backbonejs /src. /includes/class-clon-pixie.php frontnd Si ha hecho su tarea como se sugirió anteriormente, entonces probablemente ya tenga una buena idea sobre lo que se incluirá en el archivo JavaScript.Algunos modelos para definir, como nuestros datos de programa o evento, algunas colecciones para mantener programas y eventos y algunas vistas discretas para definir cómo eliminar un programa, un evento y una lista de cada una (de sus colecciones).
Si echa un vistazo al código anterior en Main.js, lo primero que probablemente se destaca es que no usamos directamente Backbone.Model o Backbone.Collection para definir EventModel, EventsCollection, Schedulodel y ScheduleCollection. Esto se debe al hecho de que, por defecto, Backbone.js espera usar un descanso para sus discusiones con el servidor Backynd, pero actualmente usamos Admin.php Al WordPress, que no está determinado en el resto. Por lo tanto, en la parte superior del archivo, definimos un objeto adminaJaxsyncableMixin que sabe cómo anular la backbone.sync Normal. Normalmente, cuando usa admin-ajax.php, le dice qué gancho desea activar en WordPress, proporcionando una cadena de acción en la fecha enviada a AJAX. Por lo tanto, nuestro pequeño objeto de excursión se ocupa de tomar una acción establecida en modelos o colecciones que se extiendan desde él o usan su propia acción predeterminada (establecida en “Chron_pixie_request” en este caso, que no va a ninguna parte). De acuerdo con nuestra definición de adminaxsyncablemixin, una base y una base se configuran en su funcionalidad y se extiende desde la troncal real. Modelo y backbone. Luego llegamos a las definiciones del modelo y la colección del evento Cron: /*** Single Cron Event. */ Cronpixie.eventmodel = basemodel.extem ({Action: ‘cron_pixie_events’, defaults: {programar: null, interval: null, gancho: null, null, timestam: null, segundos_due: null}}); /*** Colección de eventos cron. */ Cronpixie.eventsCollection = base base.extend ({Action: ‘
cron_pixie_events ‘, modelo: cronpixie.eventmodel}); Aquí ve dónde definimos la acción de WordPress que queremos que se nos llame cada vez que los datos de modelo o recopilación se sincronizan con el servidor. EventModel también incluye el conjunto de campos que esperaríamos ver en los datos, inicializados en valores nulos. EventsCollection especifica solo que es una colección de eventos. Cuando mira el código Main.js, notará que las clases ScheduleModel y ScheduleCollection se definen de manera muy similar. Luego siga las vistas que mostrarán nuestros datos de EventModel/Collection y SchedulEmodel/Collection en la página web. /*** La vista principal para los horarios de Ling Cron. */ Cronpixie.scheduleslistView = backbone.view.extem ({el: ‘#cron-pixie-main’, inicialize: function () {this.listento (this.collection, ‘sync’, this.render);}, render : function () {var $ list = this. $ (‘ul.cron-pixie-schedules’) .Empty (); this.collection.ach (function (model) {var item = new Cronpixie.scheduleSitemView ({Model: modelo: modelo});
ScheduleListView es la vista principal que se adjunta al #Cron-Pixie-Main Div que vi en HTML que se muestra como un contenido del widget del complemento. ScheduleListView tiene una función de Initialize que se utiliza para decir su contenido cada vez que se sincroniza su recopilación de datos. En nuestro caso, cada vez que le decimos a ScheduleCollection que luego hemos establecido la vista para tomar datos del servidor. Esta vista ejecutará su función de renderizado después de actualizar los datos. En la posición de Render, primero eliminamos la lista existente de programas de la lista desordenada con la clase “Cron-Pixie-Schisules” que están dentro del “cron-pixie-main”, que es la raíz de la visualización. Luego, para cada programa en la colección, da vida a una vista de programación con sus datos y le dice que juegue solo y luego agregue esa salida a la lista desordenada. /*** Vista de un solo horario de Cron. */ Cronpixie.scheduleitemView = backbone.view.extem ({tagName: ‘li’, classname: ‘cron-pixie-schedule’, plantlate: _ .html ()), inicialize: function () {this.listento (this. .Model, ‘cambiar’, this.rerder); this.listento (this.model, ‘destruir’, this.remove);}, render: function () {var html = this.template (this.model.tojson ( )); This. nuevo Cronpixie.eventsli {Model: Model});
}, este); devolver esto; }}); Cada vez que se instala un ScheduleStitititeWView, crea un elemento LI con la clase “Chron-Pixie-Ladule”. Esto es lo que las propiedades de TagName: Li y ClassName: ‘Cron-Pixie-Schedule’. Como se discutió anteriormente, cuando hablamos sobre el contenido inicial del widget, ScheduleListItemView utiliza la funcionalidad de la plantilla subterránea para procesar el elemento “#cron-pixie-schedule-tampl” como plantilla para su salida. La función Render aplica los datos del patrón actual de la plantilla y luego establece el contenido de la vista en su salida HTML. La función de plantilla funciona con datos codificados JSON, en lugar de con objetos javascript antiguos simples, donde el uso de esto.model.tojson (). Esta visualización del elemento del programa se complica fácilmente por la necesidad de mostrar todos los eventos secundarios de Chron del programa. Pero notará que exactamente el mismo modelo se utiliza para reproducir la colección de eventos Cron vestida en el modelo de planificación, como se usa para reproducir la colección de programas en la vista principal de programas. En cambio, instantáneamente visualiza EventListitemView para cada evento. Esto deja una visión más para discutir: /*** La vista de un solo evento de Cron. */ Cronpixie.eventsListitemView = backbone.view.extend ({tagName: ‘li’, className: ‘Cron-Pixie-Event’, Template: _.template (#Chron-Pixie -ithm-tmpl ‘) .html ())) , inicialize: functer () {this.listento (this.model, ‘cambio’, this.rerder); this.listento (this.model, ‘destruir’, this.remove);}, eventos: {‘click .cron -Pixie-Event-Run ‘:’ Runnow ‘
}, render: function () {var html = this.template (this.model.tojson ()); This. $ El.html (html); devolver esto; }, runnow: functer () {cronpixie.paUsetImer (); // Solo boter para ejecutar la actualización si no se debe a la siguiente actualización. Var Seconds_due = this.model.get (‘Seconds_due’); If (Seconds_due> Cronpixie.timer_period) {var timestamp = this.model.get (‘timestamp’) – Seconds_due; This.model.save ({timestamp: timestamp, Seconds_due: 0}, {éxito: function (modelo, respuesta, opciones) { / * console.log (opciones); console.log (respuesta); * / Cronpixie.runtimer ( );}, error: función (modelo, respuesta, opciones) { / * console.log (opciones); console.log (respuesta); * / Cronpixie.Intimer ();}}); }}}); No hay nada nuevo en la clase EventIntItemView hasta que llegue al siguiente bit: Eventos: {Haga clic en .Cron-Pixie-Event-Run ‘:’ Runnow ‘}, ¿recuerda cuando discutimos la función runnow () en el “complemento” ¿sección? Esta propiedad de eventos es todo lo que es necesario para especificar los eventos de escucha y qué funciona para activar en respuesta. En este caso, estamos buscando eventos de clic cuando el elemento objetivo tiene la clase “Chron-Pixie-Tovent”, al igual que nuestros iconos “Ejecutar ahora”. No repasaré la función de mostrar un uso útil, no es algo específico para Backbone.js y solo convierto nuestros valores de “segundo a madurez” en una cadena más leída. Entonces DisplayInterval (12345); eliminaría “3H 25m 45s”. También espero que RefreshData, Runtimer, Pausetimer y Toggletimer sean bastante explicativos: /*** Recupera nuevos datos del servidor. */ Cronpixie.Refreshata = function () {Cronpixie.schedules.fetch (); };

/*** Inicie las actualizaciones de visualización recurrentes si no se ejecuta Alree. */ Cronpixie.ruTimer = function () {if (Underfined == Cronpixie.timer) {Cronpixie.timer = setter (Cronpixie.refrefrdata, Cronpixie.timer_period * 1000); }}; /*** Detenga las actualizaciones de visualización recurrente si se ejecutan. */ Cronpixie.pausetimer = function () {if (undefined! Eliminar Cronpixie.Timer; }}; /*** Togle Actualizaciones de visualización recurrente. */ Cronpixie.TogGletimer = function () {if (Underfined! == Cronpixie.timer) {Cronpixie.paUsetImer (); } else {cronpixie.rintimer (); }}; Lo único que debe ver es qué tan simple se actualiza. Realizar la realización de hornear.fetch () es todo lo que es necesario para hacerse cargo de todos los datos en el servidor para recopilar programas de Chron definidos en la variable de horarios. “¿Pero de dónde viene esa variable de horarios?” ¿Te escucho? Bien … /*** Fecha de configuración inicial en la vista y comience a recurrentes actualizaciones de visualización. */ Cronpixie.init = function () {// Instanciar los datos y la vista base. Cronpixie.schedules = new Cronpixie.schedulesCollection (); Cronpixie.schedules.reset (cronpixie.data.schedules); Cronpixie.scheduleslist = new Cronpixie.schedulesListView ({colección: Cronpixie.schedules}); Cronpixie.scheduleslist.render (); // Inicie un temporizador para mejorar la fecha. Cronpixie.rintimer (); }; $ (documento) .Ready (function () {cronpixie.init ();});
Cuando el DOM está completamente cargado, se llama a la función Init para reproducir los datos proporcionados en la variable cronpixie.data.schedules establecida por el complemento.La primera línea crea una variable de horarios como una nueva ScheduleCollection.Luego se llama a su función de reinicio para establecer sus datos sin activar ningún evento de sincronización, porque no queremos intentar enviar datos al servidor cuando nada ha cambiado aún.Luego vemos instantáneamente una vista ScheduleListView, configurando su colección para ser la colección de horarios que acabamos de configurar.Luego les decimos a los nuevos puntos de vista que regresen solo por primera vez, luego se jugará solo cada vez que cambie la colección.Para actualizar esa colección de programas cada 5 segundos, luego llame a RunTimer ();
Para comenzar el cronómetro, que, como ha visto anteriormente, en última instancia llame a Antecy.fetch () cada vez que se desencadena. Voila, ahora tenemos actualizaciones constantes que provienen del servidor que actualiza nuestros datos y difunde nuestras opiniones. Lavar este fue un artículo bastante largo, pero presenta un nuevo arado que fue escrito desde cero, esperamos en un código fácil de seguir. También alcanzamos el concepto de desarrollo de estilo reactivo y mostramos cómo se puede utilizar con las tecnologías existentes en una instalación de stock de WordPress. Para el próximo artículo de esta serie “WordPress Reactive Plugin Building”, cambiaremos la implementación de Backbone.js con algo diferente. ¡No discutiremos el backend por mucho, así que esperamos que tenga un artículo más corto! ¿Te gustó este artículo? ¿Has aprendido algo nuevo y te complace intentar usar Backbone.js en el próximo complemento WordPress, en lugar de confiar en la manipulación de JQuey Dom? Por favor, dígame en los comentarios a continuación. Este es el artículo 1 en 3 de la serie “Creación de complementos reactivos de WordPress” creando complementos reactivos de WordPress – Parte 1 – Backbone.js
Creación de complementos reactivos de WordPress – Parte 2 – Vue.js
Creación de complementos reactivos de WordPress – Parte 3 – ELM