homefinance blog
Hasta ahora, en nuestra serie, hemos cargado algunos datos en WordPress para jugar y nos aseguramos de poder acceder a ellos a través de la API REST. Durante el curso, hemos introducido una serie de conceptos básicos y herramientas simples que puede usar para comenzar a experimentar, incluso si no es un experto en tecnología. Esta vez, es hora de pensar en cómo podríamos administrar las cosas en el frente. Necesitamos un marco hermoso que podamos usar para extraer datos de WordPress a través de la API REST y mostrarlos. Es casi seguro que involucrará una solución basada en JavaScript. ¿Pero cuál?
Esta es exactamente la pregunta que pensaremos a continuación. Analizaremos brevemente el panorama de posibles opciones, seleccionaremos una y lo presentaremos, luego analizaremos los simples pasos para comenzar y trabajar. Sin embargo, comencemos con un recordatorio rápido sobre por qué JavaScript tiene sentido en este contexto. JavaScript come el mundo de JavaScript, como dijo Kevin Lacker recientemente, comiendo el mundo. Ha recorrido un largo camino desde sus orígenes como una solución a corto plazo en Netscape y ahora es, a través de algunas medidas, el lenguaje de programación más popular en la comunidad de desarrollo global. Con respecto al desarrollo de la web front-end en particular, es justo decir que JavaScript es efectivamente lengua franca de la web actualmente.
Calypso se basa en una pila moderna de JavaScript. También es como Matt Mullenweg quería enfatizar en su estado de la palabra 2015, es en gran medida la futura WordPress. La reciente llegada de Calypso ha demostrado la forma bastante dramática hacia la dirección en la que se dirige una gran parte de la plataforma: un núcleo de WordPress estable y seguro, que alberga datos que son consumidos por un conjunto creciente de servicios externos. por JavaScript. JavaScript también está bendecido con una serie de marcos delanteros estables y maduros que los desarrolladores pueden usar para trabajar de manera rápida y eficiente. Pasemos a algunos de los principales. Los líderes del JavaScript y cualquier otro lenguaje de programación, hay mucho que decir sobre los principios de secado y beso y el uso de un tipo de marco para lidiar con muchas tareas pesadas Luego, cuando se trata de JavaScript. Un número bastante confuso de cuadros de JavaScript ha aparecido y ha llamado la atención en los últimos años, pero en términos de estabilidad activa y desarrollo, la elección práctica aquí es prácticamente una de las cuatro:
Backbone.js. Creado por Jeremy Ashkenas, Backbone fue uno de los primeros cuadros en abandonar las puertas iniciales en 2010. Su combinación de compacidad y flexibilidad condujo a la adopción temprana por una impresionante lista de sitios y proyectos de alto perfil, incluidos WordPress.com y WordPress. .
Ember.js. Si Backbone tiene un conjunto de posibilidades de construcción deliberadamente reducido, Ember es un negocio sustancialmente más ambicioso y amigo de la opinión. El marco fue creado en 2011 por Yehuda Katz de Faima JQuery y Ruby en Rails y está diseñado para ayudar a los desarrolladores a abordar proyectos grandes y eficientes a gran escala. Se puede ver en acción en una serie de sitios de marca, incluidos discursos, groupon y livingsocial.angular.js. Presentando como “Marco Supereroico JavaScript MVW”, AngularJS es el perro de Google en la pelea de cuadros. Ofrece una curva de aprendizaje relativamente fácil y una comunidad de usuarios florecientes en todo el mundo. Sin embargo, la transición del marco de la versión uno a la segunda versión fue un poco controvertida y requiere poca participación de rendimiento cuando se implementó en la escala.
Reaccionar. Al llegar en 2013, React de Facebook es una adición más reciente en el campo, pero rápidamente atrajo a un ejército de receptores entusiastas, incluidos (algo obvios) en Facebook, Instagram, Flipboard, Netflix y muchos otros. React ha ganado elogios por la velocidad, la simplicidad comparativa y la fácil integración de dispositivos móviles en forma de React nativo.
La solución que utilizaremos para alimentar nuestra propia aplicación humilde es, de hecho, reaccionar. Es probablemente el más moderno del grupo y promete un proceso de incorporación que no derretirá por completo las mentes. Dada la continua dominación de servicios como Facebook e Instagram, que se basa en ellos, no estará desactualizado demasiado pronto.
Pasemos a la exploración reaccionar en profundidad. Presentamos lo primero para aclarar en Facebook es que React es, estrictamente, una biblioteca en lugar de un marco. Como dice la página inicial del proyecto y claramente, es una “biblioteca de JavaScript para la construcción de interfaces de usuario”. Además, se necesita un enfoque diferente a las otras tres soluciones que mencionamos anteriormente. En lugar de tratar de resolver cada parte de una aplicación completa en línea (como Ember), React utiliza un enfoque basado en un componente para enfocarse en gran medida en el lado del problema. .
Le permite definir componentes de UI extremadamente modulares que viven en su propio mundo discreto y pueden reutilizarse y discutirse fácilmente. Para ponerlo en términos un poco más formales, puede pensar en el React como la V en el MVC.
Si está buscando una introducción general sólida para React, la documentación del proyecto está bien ubicada, con el juego de pensamiento en el punto de partida muy útil. El curso reacciona los fundamentos de Egghead.io también es un excelente recurso, al igual que la reacción rápida de LearnCode.
React se puede utilizar junto con otras soluciones (como Flux y Redux) para crear aplicaciones complejas y completas, en una escala realmente enorme. También se puede utilizar para crear rápidamente aplicaciones nativas para iOS y Android, en forma de React nativo. Sin embargo, no intentamos construir un automóvil del día del juicio final aquí, por lo que mantendremos las cosas lo más vainilla posible.
Comencemos con ver si podemos hacer reaccionar para ejecutar localmente. ¿Está esto en esto? (Redux) Eche un vistazo rápido a muchos tutoriales en línea y pronto enfrentará un muro de opinión alrededor de los instrumentos de fondo, que involucran cosas como Browserify, Bower y Webpack. Estas opciones se explican bien en las páginas de gestión de paquetes React, pero buscaremos omitir completamente que las ratas anidan por un mero iniciador de descarga local. Starter Kit le ofrece un conjunto de archivos locales que puede llamar directamente a través del navegador. Usando DesktoPserver, creamos un nuevo sitio local llamado www.thoreaupp.dev y simplemente copiamos el contenido de inicio del kit en él. Ahora reemplazaré el contenido de ese archivo con el script Hello World de la documentación del kit de inicio. Una actualización rápida de la página y vea los siguientes resultados inspiradores:
No es la página más convincente del mundo, pero demuestra algo crucial: tenemos una carrera local y podemos mostrar contenido. Ahora veamos si podemos hacerle hablar con WordPress. Realización de una prueba API React/REST Si lee el artículo anterior, recordará que tenemos un WordPress local instalado para REST API que se ejecuta en http://walden.dev/. Si llamamos http://walden.dev/wp-json/wp/v2/posts por http, obtendremos una lista completa de todas las publicaciones de instalación. Usaré esto para verificar muy rápidamente que pueda reaccionar para hablar con WordPress a través de la API REST.
El siguiente código se basa en el consejo de la documentación reaccionar para cargar datos externos. No se preocupe demasiado por sus desventajas por ahora; Solo quiero ver si podemos hacer que nuestros componentes separados se comuniquen entre sí, reemplazando mi archivo index.html con el siguiente código:
<AP
¡Otra actualización rápida del navegador, y listo!
Es un resultado visual profundamente poco impresionado, pero hice algo bastante importante aquí, usé React para llamar a los datos de la API REST, analizarlos y luego mostrar los resultados en la pantalla. ¡En este momento, podemos decir con confianza que estamos en los negocios! Conclusión Las soluciones front-end basadas en JavaScript serán una parte importante del mundo de WordPress muy pronto, por lo que ahora es un excelente momento para comenzar a explorar su potencial. Después de enfatizar brevemente a los otros competidores importantes para construir nuestra aplicación simple, decidimos elegir React-una solución que estará disponible durante muchos años a partir de ahora.
También avanzamos bastante a nuestro objetivo final. Anteriormente, sabía que WordPress ofrecía contenido alegre a través del resto. También sabemos ahora que podemos hacer reaccionar para ejecutar localmente y consumir y mostrar ese contenido. Manténgase en el escenario para la próxima parte de nuestra serie, donde comenzaremos a investigar los detalles del trabajo con el contenido en React. Nos encantaría saber de usted si nos sigues en casa. ¡Póngase en contacto con la sección de comentarios a continuación y comparta sus pensamientos!
