Crea una SPA con WooCommerce y React.js

isaias-subero

WooCommerce es una herramienta poderosa y altamente personalizable ¿pero que pasaría si la combinásemos con tecnología de punta del lado del frontend como React? Obtendríamos el rendimiento que una SPA (Single Page Application) sin tener que desarrollar un complejo backend de ecommerce desde cero.

Pudiésemos aprevechar muchas de las funcionalidades de WooCommerce (y muchas de sus extensiones) pero con una experiencia de usuario mejorada y altamente escalable; pudiendo incluso dar el salto a una Progressive Web App más adelante, de esas que tanto le gustan a Google. ¡El potencial es tremendo!

Una estructura del taller:

  1. Create React App.
  2. Consumiendo la API de WooCommerce con Axios.
  3. Creando rutas con react-router.
  4. Creando las vistas: Productos, producto, checkout, gracias.
  5. Agregando estilos.
  6. Creando el componente Carrito.
  7. Manejando el estado global con Context Api de React.
  8. Creando pedidos.

Nota: Por razones de tiempo y practicidad, el taller se realizaría con create-react-app en lugar de Next.JS, dejando de lado cosas como Server Side Rendering o autenticación de usuarios, porque a pesar de pertenecer a funcionalidades que se esperan en una aplicación real, no son esenciales para demostrar la combinación React-WooCommerce, que es lo que se quiere lograr con este taller.

  • Isaías Subero

    Isaías es Licenciado en Administración, desarrollador web especializado en WordPress, WooCommerce y NodeJS. También es co-organizador de la Meetup de WordPress Oviedo.

    Ayuda a empresas de diferentes países a tener una presencia efectiva en Internet. Compartir es la mejor manera de reforzar el conocimiento adquirido.

Aperitivo formativo

Durante las próximas semanas vamos a ir publicando material complementario (vídeos, cursos, tutoriales, etc) para que puedas sacarle todo el partido a esta sesión.

Enlace a la presentación y vídeo en WordPress.tv

Configura todas las cachés de WordPress

javier-casares

WordPress tiene muchas capas de caché. La más conocida es la caché de página, que es la que habitualmente se configura con los plugins, pero no es la más potente de todas.

¿Te gustaría conocer todas las capas de caché que tiene WordPress? Y, lo más importante, ¿te gustaría configurarlas para hacer que tu WordPress vuele?

En esta charla/taller veremos las capas de caché existentes, cómo saber si están disponibles, cómo activarlas y sacar el máximo rendimiento de nuestro sitio WordPress.

  • Javier Casares

    Utiliza WordPress desde la versión 1.5, es el responsable de WPdanger.com y Director de Operaciones en brutal., una empresa de Administraciónd e Sistemas.

    La palabra que más le identifica es «internauta», ya que en general ha pasado por todo lo que se podría pasar por Internet: desarrollo de sitios web, programador, emprendedor, inversor…

    Últimamente se dedica a la administración de sistemas y seguridad para sitios basados en WordPress.

    Puedes encontrar más sobre él en JavierCasares.com

Aperitivo formativo

Durante las próximas semanas vamos a ir publicando material complementario (vídeos, cursos, tutoriales, etc) para que puedas sacarle todo el partido a esta sesión.

https://openwebinars.net/talleres/wordpress-cache/

Enlace a la presentación y el vídeo en WordPress.tv

Buscando patrón con expresiones regulares

pablo-lopez

En el mundo del desarrollo web en alguna ocasión te ha tocado lidiar con las expresiones regulares.

Nos enfrentamos a migraciones o extracciones de datos de un campo tipo «cajón de sastre», parsear ciertos datos, heredar algún proyecto chungo para refactorizar, shortcodes, que si el lock-in, etc…

Es entonces cuando nos toca tirar de ingenio y de expresiones regulares, para filtrar los datos que necesitamos y tratarlos según nuestras necesidades.

En este taller veremos qué son las expresiones regulares, cómo funcionan, y diferentes ejemplos (en PHP) de cómo acometer estas búsquedas de patrones.

Tráete el portátil, porque aunque habrá mucha teoría, en los minutos finales haremos varios ejemplos para poner en práctica las expresiones regulares.

  • Pablo López Mestre

    Pablo lleva en el mundo del desarrollo web desde 2006 y es WordPresser desde 2011. Defensor de la P mayúscula, le gusta la optimización de los desarrollos y el código bien indentado.

    Participó unos años como Co-organizador del grupo de meetup de Madrid WordPress, y como organizador también en las dos primeras ediciones de WordCamp Madrid.

    Actualmente trabaja como WordPress Consultant en UNIR y es autor del blog desarrollowp.com donde comparte noticias, tutoriales, trucos y consejos sobre WordPress

Aperitivo formativo

Pablo nos recomienda que tengamos algo de soltura con las expresiones regulares, y para eso nos recomienda estos recursos:

Enlace a la presentación y vídeo en WordPress.tv

Pruebas de navegador automatizadas para WordPress

steve-henty

Lanzar una nueva versión de tu plugin puede ser una experiencia bastante estresante. Todos hemos publicado versiones con errores de regresión que se podrían haber evitado. En este taller comparto cómo utilizamos Codeception y Docker para garantizar la fiabilidad de Gravity Forms en los 2 milliones de sites activos.

  • Steve Henty

    Steve es británico pero lleva desde 1995 trabajando en España como desarrollador.

    Actualmente es Lead Developer en Rocketgenius (creador de Gravity Forms) desde el 2012, y también es fundador de Gravity Flow desde el 2015. Anteriormente trabajaba en proyectos de gran escala para marcas globales y agencias. Ahora vive en Zaragoza con su mujer y su hijo de 8 años.

Aperitivo formativo

Podéis preparar el taller con este material:

https://www.stevenhenty.com/taller/

También tenéis formación adicional proporcionada por OpenWebinars:

https://openwebinars.net/cursos/introduccion-testing/

Enlace a la presentación y vídeo en WordPress.tv

Del caos a la excelencia: Refactorizando un plugin

gorka-urrutia

Vamos a empezar con un plugin que incluirá el máximo posible de malas prácticas y chapuzas y lo vamos a ir mejorando y refactorizando hasta que consigamos un plugin que nos llene de orgullo y podamos enseñar a familia y amigos.

El primer paso será crear un sistema automatizado de pruebas que nos permita comprobar que los cambios que vayamos haciendo no van a romper el plugin.

Una vez tengamos el sistema listo comenzaremos a refactorizar y a limpiar el código. Esto requerirá de la participación de la audiencia. Entre todos iremos viendo poco a poco qué cosas se pueden ir mejorando para aumentar la legibilidad del código y eliminar errores y código spaguetti.

Por el camino iré introduciendo conceptos de POO, SOLID, patrones, etc.

Al final verás que las cosas se pueden hacer de forma correcta y que resulta más rápido y divertido que andar haciendo chapuzas.

  • Gorka Urrutia

    Sus comienzos en el desarrollo web tienen su origen en la procastinación. Mientras estudiaba la carrera de ingeniería industrial descubrió que los libros de informática de su hermano le apasionaban más que la termodinámica y la mecánica cuántica.

    Montó su primera empresa allá por el año 2001 y desde entonces ha intentado hacer siempre lo que más le apetecía en el momento (desde el desarrollo web hasta montar una tienda de comics).

    Ha llegado a odiar PHP… hasta que descubrió que otra forma de programar era posible. Tanto le volvió a enamorar el desarrollo que incluso escribió un libro de POO en PHP.

    El año pasado entró como socio en Solvent, probablemente, una de las mejores empresas de desarrollo del mundo (o eso dicen nuestras madres). Ahora está como pez en el agua, gestionando y desarrollando en proyectos en PHP.

Aperitivo formativo

Para seguir el taller de manera cómoda y poder participar se recomienda a los asistentes:

Enlace al vídeo en WordPress.tv

Building an AMP compatible WordPress site (English)

feliz-arntz

AMP is an open-source web components framework that enables building websites that are compelling, smooth and performant and can be built in an easy and declarative way. With AMP, even highly dynamic and interactive web pages load near instantaneously. The framework furthermore ensures that the high-quality experience achieved after the initial build of a website is maintained over time, by utilizing its powerful validation framework which immediately highlights issues that could potentially hurt user experience.

The core of this workshop is to build a WordPress site that benefits from the power of the AMP framework, taking into consideration all the different pieces a typical site consists of. We will go through the process of creating an AMP compatible theme, and learn what to look out for when selecting or building AMP compatible plugins to enhance the feature set of your site. In preparation for this, a brief introduction will highlight the key principles of AMP, explain why it exists, and showcase some impressive use-cases of the framework.

  • Felix Arntz

    Felix is a Developer Programs Engineer in the Content Experience team at Google and a WordPress core committer from Germany, currently residing in Switzerland. He has been contributing to WordPress for several years, being one of the co-leads of the Servehappy project and a former maintainer of the Multisite, Capabilities and REST API components. He is passionate about user experience and the open web, and he always keeps an eye out on the latest technologies the web ecosystem has to offer.

    Outside of the web, he spends his time producing music, playing the piano and playing soccer. He also drinks a lot of Mountain Dew.

Aperitivo formativo

Felix quiere que lleguemos a su taller con la tarea hecha y todo preparado, así que nos ha pedido que tengamos ya listo el entorno con el que vamos a trabajar en el equipo.

Tenéis todos los pasos aquí debajo.

Enlace a la presentación y el vídeo en WordPress.tv

Crea un tema con React en menos de 30 minutos

luis-herranz-david-arenas

¿Por qué hacer un tema con React? ¿Y qué beneficios tiene un tema hecho en React frente a un tema tradicional de PHP? Tras una introducción a esta nueva forma de trabajar con WordPress que se abre ante nosotros te mostraremos cómo puedes crear un tema con React para tu sitio WordPress en menos de 30 minutos.

No te preocupes, te enseñaremos todo lo necesario para que después te puedas desenvolver tú solo. ¿Nuestro objetivo? ¡Que salgas del taller con un nuevo tema perfectamente funcional e increíblemente rápido para tu blog! ¿Te animas? ¡Pues manos a la obra!

  • David Arenas

    David es ingeniero informático, fanático de JavaScript, React, Nodejs, y del Metal 🤘. Ha trabajado como desarrollador web desde 2013. En 2017 entró a formar parte del equipo de Worona, poco antes de convertirse en Frontity. Durante esa etapa adquirió y fue ganando experiencia con WordPress (sobre todo la REST API), y otras tecnologías como React, Babel, Webpack o TypeScript.

    Desde hace año y medio trabaja diseñando e implementando el framework que, en junio de 2019, se transformó en el proyecto open-source de Frontity.org.

  • Luis Herranz

    Ingeniero de Sonido y Software y emprendedor. Después de trabajar unos años en estudios de grabación, empezó su viaje hacia el emprendimiento en 2011 con TrainYourEars.com, un software de entrenamiento auditivo para ingenieros de sonido que a día de hoy sigue siendo utilizado por miles de profesionales, escuelas y universidades de sonido. En 2015 empezó también un proyecto open source de paneles acústicos llamado HertzLovers.com para ayudar a pequeños estudios de grabación a mejorar su acústica.

    A día de hoy, Luis es cofundador y CTO de Frontity.org, un proyecto open source para crear webs con WordPress (como headless CMS) y React. Luis tiene una amplia experiencia con proyectos open source y lleva usando tanto WordPress como React desde sus principios.

Aperitivo formativo

David y Luis han preparado un taller para este septiembre en la Meetup de WordPress Devs de Madrid que puede servir de introducción a su taller. Si estás por allí puedes asistir, y si no, pronto lo encontrarás enlazado aquí para poder revisarlo.

Si traes Node instalado en tu equipo, mejor: https://nodejs.org

Puedes mirarte esto:

https://docs.frontity.org/javascript-and-and-react/javascript-basics
https://docs.frontity.org/javascript-and-and-react/react-basic

Y si quieres avanzar un poco más:
https://docs.frontity.org/learning-frontity

O bien puedes usar tu acceso a OpenWebinars y mirar estos cursos relacionados:

Por último y como extra, puedes ver este taller de introducción a React que hizo Sonia en la WordPress Meetup Madrid for Devs hace un par de semanas:
https://www.youtube.com/watch?v=tow1PrsnB2M

Enlace a la presentación y el vídeo en WordPress.tv

Entiende y crea bloques de Gutenberg

nadia-prida

En este taller entenderemos y analizaremos la estructura de un bloque de Gutenberg:

  • ¿Qué ficheros son necesarios?
  • ¿Cómo organizarlos?
  • ¿Qué función desempeña cada unos de ellos?

El objetivo de este taller es que la gente comprenda el funcionamiento de un bloque de Gutenberg. Entre cosas veremos cómo maquetarlo tanto en el Front como en el Backend, así como recoger información y almacenarla utilizando los estándares que marca WordPress.

  • Nadia Prida

    Nadia es diseñadora de interfaces de usuario y desarrolladora Front-end. Trabaja con tecnologías como HTML, CSS, JAVASCRIPT, PHP … y con frameworks como Cake PHP, Symfony o Laravel. Actualmente se dedica al desarrollo front-end de aplicaciones web y móviles.

    Utiliza WordPress para sus side-projects, a modo de hobby, por su facilidad de uso y herramientas pre-desarrolladas.

Aperitivo formativo

Como requisitos previos es aconsejable tener nivel medio de JS y PHP y algo de CSS para dar estilos

Se pueden utilizar también estos artículos para profundizar:

Enlace al ejemplo y vídeo en WordPress.tv

WordCamp Sevilla 2019 is over. Check out the next edition!