WordCamp Sevilla para desarrolladores – Día 1 Talleres

El pasado viernes 4 de Octubre fue el primer día de la WordCamp de Sevilla dedicada a los desarrolladores. Una cita imprescindible para todo desarrollador. Y esta entrada me sirve de recordatorio / resumen de todo lo que pude ver.

Hubo tres salas y tres talleres de cada sala. A continuación son las anotaciones de las charlas que estuve

Entiende y crea bloques de Gutenberg

Nadia Prida

Nos explicó cómo está estructurado los bloques de Gutenberg, el nuevo editor de WordPress. Me llamó la atención que sin tener experiencia en WordPress se haya iniciado directamente a realizar bloques.

nadia prida bloques gutenberg

Del caos a la excelencia:
Refactorizando un plugin

Gorka Urrutia

Experimentado desarrollador, realiza su trabajo en Solvent.

gorka urrutia refactorizacion plugin

Utilizar buenas prácticas:

  • Conocer tu framework y sus buenas prácticas.
  • PHP Composer.
  • Pruebas automatizadas: Cypress, PHPUnit, etc.
  • Herramientas: Git, Docker, Jira / Trello / Asana.

Buenas prácticas, ¿para qué?

  • Cuesta lo mismo hacerlo bien que mal
  • Un código limpio y claro se entiende mejor
  • Tu yo del futuro te lo agradecerá.
  • Hacer modificaciones es más fácil.
gorka urrutia y cypress

Paso a paso

  1. Entender el problema
  2. Analizar código
  3. No rompas más
  4. Añadir test
  5. Comenzar a refactorizar

Conocemos Cypress como herramienta de Test, que simula la acción de usuario para realizar tests atomatizados.

Revisamos errores más comunes:

  • Nombres de variables y funciones confusos.
  • Notaciones diferentes.
  • Comentarios que no corresponden al código.
  • Usar constantes en vez de números.
  • Tener un único return en los métodos.

Principios SOLID

  • Responsabilidad única. Que debe una función o clase tiene un sólo cometido.
  • Open / Closed
  • Sustitución de Liskov
  • Interface Segregation
  • Dependency Inversion

Recomendaciones:

Building an AMP compatible WordPress site (English)

Introducción a AMP Framework

Se piensa que es para una versión muy sencillas páginas, pero no es así. Es la web creada directamente AMP. No tiene sentido ahora tener dos versiones de una web.

AMP es un framework de componentes web fácil de crear

Originalmente el nombre de AMP era webs aceleradas, y ahora no tiene sentido dicho nombre, pero se sigue nombrando AMP.

Democratización del rendimiento

  • AMP es un proyecto abierto.
  • AMP tiene un modelo propio de gobernancia
  • AMP está hecho para web abiertas.

Componentes Web

Permite definir tus propias APIs para el navegador y utilizar tus propias etiquetas HTML, reutilizar y guardarlas.

Hay muchos tipos.

Porqué AMP es potente?

Porque Javascript es tiene un gran coste en móviles.

coste javascript 2019

AMP no está basado en Javascript, está basado en HTML.

Ejemplos:

  • amp-analytics: permite añadir la etiqueta de Google Analytics.
  • amp-carousel: Un carousel directamente sin necesidad de javascript.
  • amp-image-lightbox: al hacer clic en una imagen, se vuelve más grande.

AMP Validatorhttps://validator.ampproject.org/

Permite validar tu código AMP y comprobar si es correcto.

AMP se compone de:

  • Componentes Web
  • Validator
  • CDN & Caché

Principios básicos de la Compatiblidad AMP:

  • Utiliza componentes AMP y declara atributos en vez de Javascript.
  • No puedes utilizar más de 50Kb de CSS por página.
  • Utiliza siempre componentes AMP para archivos media (Ej. amp-img en vez de img).
  • Tener formularios que envíen los datos con AJAX.
  • Siempre desarrolla teniendo en cuenta el móvil primero.

Utilizando AMP en WordPress

AMP plugin se preocupa de todas las piezas de tu web que necesitan interacción con AMP. Todavía el ecosistema de plugins, no está adaptado a AMP.

Principales funcionalidaes

  • Automatizar las partes más grandes del proceso
  • Proveer al desarrollador herramientas y guías
  • Monitorizar el desempeño de AMP. Si aceptas los errores AMP, será válido, pero perderás la funcionalidad del plugin.

Modos de plantilla:

  • Standard – La mejor plantilla, pero necesitarás conocimientos de desarrollo.
  • Transicional.
  • Lector.

Taller

Cogemos una versión de WordPress para ver las posibilidades de AMP.

Encontrar complementos compatibles con AMP

Es importante conocer componentes web compatibles con AMP para construir la funcionalidad que necesitas para tu web.

Consejos

  • Usa un tema que sea compatible con AMP
  • En AMP Ecosystem puedes conocer qué plugins y temas están adaptados a AMP.

Más información en amp.dev amp-wp.org

Próximas versiones y qué será del futuro de AMP, lo encuentras en su roadmap.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

ÚLTIMOS ARTÍCULOS

Cierre Ventana

Cómo mantener tus dependencias al día

Cuando programamos en PHP/JS y utilizamos librerías como composer o npm, que son fundamentales en nuestro trabajo. Tenerlas…

Cierre Ventana

Cumplo mi primer aniversario en el equipo de plugins de wordpress

Viendo a mi compi Fran Torres, me he dado cuenta que yo también cumplía un año el 5…

Cierre Ventana

Hacer un mundo mejor con WordPress

Este pasado fin de semana del 23 de marzo estuve en el evento WordCamp Torrelodones 2024, un congreso…