DE{CODE}: 2022: año del desarrollador de WordPress

Nunca ha habido un mejor momento para especializarse en el desarrollo de WordPress. WordPress continúa devorando Internet como el sistema de administración de contenido (CMS) favorito del mundo, e incluso como el CMS sin cabeza más popular. En esta sesión principal de DE{CODE} 2022, el fundador y director de innovación de WP Engine, Jason Cohen, analiza los desafíos y las oportunidades que se avecinan para los desarrolladores de WordPress y los proyectos en los que WP Engine está trabajando para facilitarles la vida.

¡Mira el video completo a continuación!

Diapositivas de la sesión:

Transcripción de texto completo

JASON COHEN : Hola y bienvenido a DE{CODE}, la conferencia anual de WP Engine donde celebramos al desarrollador de WordPress. Mi nombre es Jason Cohen y soy el fundador de WP Engine. Quiero comenzar el DE{CODE} de este año con una convicción: 2022 es el año del desarrollador de WordPress. Voy a explicar por qué creo que este año tiene tanta promesa y oportunidad para todos nosotros y luego quiero hablar sobre cómo puede acelerar su carrera en este mercado.

Entonces, permítanme comenzar con una pregunta, cada comunidad de desarrolladores de software es conocida por algo, entonces, ¿por qué son conocidos los desarrolladores de WordPress? Diría que los desarrolladores de WordPress son conocidos por crear hermosos sitios web que a los editores les encantan. Esto es lo que quiero decir, todos sabemos que hay millones de sitios web que usan WordPress, pero también hay gente como Under Armour, una marca de ropa multinacional que usa WordPress y contrata a desarrolladores de WordPress.

Ahora, Under Armour obtuvo $ 5 mil millones en ventas el año pasado, por lo que no usan WordPress solo porque es gratis. Pueden darse el lujo de comprar cualquier software que quieran. Usan WordPress porque cumple con sus requisitos y emplean desarrolladores de WordPress porque saben cómo tomar esos requisitos y producir sitios web hermosos y fáciles de actualizar. Como éste.

O National Geographic, es una de las marcas de medios más reverenciadas del mundo y Nat Geo necesita sitios web hermosos y fáciles de actualizar con una gestión de activos digitales sofisticada que pueda manejar una experiencia rica en medios. Entonces, por supuesto, contratan desarrolladores de WordPress. Ese es un caso de uso por el que eres famoso. ¿Y qué hay de la tecnología? ¿Una empresa de tecnología moderna usaría WordPress?

Sí, el equipo de Dropbox puede crear un CMS desde cero si así lo desean o pueden usar cualquiera de las tecnologías de Site Builder que aparecen todo el tiempo. Pero Dropbox elige trabajar con WordPress y los desarrolladores de WordPress para las partes de su sitio que deben ser atractivas y fáciles de publicar. ¿Qué pasa con un caso de uso en el que el equipo de marketing quiere usar una tecnología front-end diferente a la de WordPress?

Así que quieren usar WordPress para el CMS pero algo diferente para el front-end, ¿pueden seguir usando WordPress? Por supuesto, eso es lo que es WordPress sin cabeza. Para que puedan tomar una decisión como lo hizo Android Authority e ir con WordPress sin cabeza. Entonces, Android Authority todavía usa WordPress como CMS para administrar escritores, contenido, medios, todas las cosas que son necesarias para administrar el back-end del sitio web, pero el front-end es manejado por un marco diferente.

Y cuando una marca quiere el enfoque sin cabeza, como la autoridad de Android, todavía llaman a los desarrolladores de WordPress porque quieren el rendimiento y la seguridad de un sitio web desacoplado, claro, pero necesitan que el sitio coincida con su flujo de trabajo de publicación y todas las demás cosas que necesitan. Durante los últimos casi 20 años, he llegado a esperar que WordPress haya estado impulsando su sitio web. Y los desarrolladores de WordPress saben cómo hacerlo.

Hacer felices a los editores es algo por lo que los desarrolladores de WordPress tienen una bien ganada reputación e incluso los competidores de WordPress lo saben. Algunas de las startups y desarrollo web más comentadas siguen hablando de WordPress. Cuando navega por sus sitios web, una de las cosas que ve en común es que siempre hay una página que se dirige a los desarrolladores de WordPress. Mires donde mires, todo el mundo está interesado en los desarrolladores de WordPress.

Por eso digo que 2022 es el año del desarrollador de WordPress porque has dominado lo que cada editor necesita y esas necesidades no han cambiado, simplemente se han acelerado. Por ejemplo, todos los editores necesitan tráfico orgánico de motores de búsqueda como Google, por supuesto que sí, y la gente todavía habla sobre cómo hacerlo todo el tiempo. ¿Es eso nuevo? No, obviamente no. Esencialmente, se han publicado los mismos artículos durante años y años y los desarrolladores de WordPress son expertos en hacer esto.

¿Qué hay de las pruebas A/B? O mejor aún, ¿sin pruebas A/B de código? Eso es elegante. Eso es innovador, ¿verdad? Ahora vas a tener que luchar y aprender estas nuevas herramientas. Bueno, excepto que no lo haces porque has estado haciendo esto durante años. Por ejemplo, esta idea también obtuvo fondos de capital de riesgo hace ocho años. Como, no hay cambios aquí. Todavía no hay pruebas A/B de código y ya sabes cómo hacer todo esto. Ya sois expertos en todo esto. Qué lindo.

Muchos de ustedes también conocen los cambios recientes en la búsqueda de Google que utiliza la experiencia de la página como factor de clasificación. La experiencia de la página significa cosas como la velocidad de la página y otras cosas, y también puede conocer esto como la actualización de Core Web Vitals. ¿Google ha realizado cambios como este antes a los que hayas tenido que reaccionar? Bueno, sí, todo el tiempo en realidad, ¿verdad? Y sabes cómo hacer eso.

Sí, es una herramienta nueva, pero hacer que los sitios web sean rápidos, que sea importante, no es nuevo y Google ha utilizado la velocidad de la página como un factor de clasificación durante mucho tiempo y ha tratado de inferir si un visitante del sitio estaría satisfecho durante mucho tiempo. . Estas son todas las cosas en las que ya eres experto. Entonces, de alguna manera, el mundo no cambia. Y es bueno celebrarlo porque cuando se trata de servir a los editores de esta manera, los desarrolladores de WordPress ya están a la vanguardia. Ya sois expertos.

Pero hay otros aspectos del desarrollo web en los que sí veo un cambio genuino. Donde el mundo está cambiando rápidamente. Y por eso aconsejo a los desarrolladores de WordPress que piensen como arquitectos. Entonces, un arquitecto combina los requisitos del cliente con el arte. Un arquitecto también combina requisitos y arte con la tecnología correcta, ya sea que se trate de materiales de construcción o software e infraestructura.

Eso significa que debe ser capaz de utilizar toda la tecnología disponible y eso significa aprovechar las nuevas innovaciones. Ahora, eso puede dar miedo porque tener que aprender algo nuevo puede ser perturbador, pero también es parte del trabajo. Cuando decidimos ser desarrolladores de software, una de las cosas sobre el software es que cambia todo el tiempo. Entonces, si vamos a ser buenos desarrolladores de software o buenos arquitectos, debemos estar al tanto de las últimas novedades para elegir la tecnología adecuada para los diferentes trabajos que tenemos.

Entonces, cosas como las pruebas A/B y el SEO pueden estar cambiando muy lentamente y, fundamentalmente, no cambiar en absoluto, pero la tecnología sí lo está y tienes que estar al tanto de eso y de eso es de lo que quiero hablar en los próximos 20 minutos. ¿Cuáles son algunas de esas cosas? Entonces, ¿cuáles son algunos de estos nuevos y emocionantes cambios en la tecnología que creo que deberías echar un vistazo e incluso adoptar? Quiero darles una idea de lo que veo como el semillero de cambios interesantes en nuestro espacio.

Entonces, el cambio más grande en la expectativa del usuario con el que debe familiarizarse se llama experiencias digitales adaptativas. Esto es como la personalización pero más. Los usuarios quieren que la apariencia y la funcionalidad del sitio se adapten a su entorno y condiciones específicos e incluso a su historial, incluso si no inician sesión. Ahora, cuando brinde una experiencia digital adaptativa personalizada, los usuarios estarán más satisfechos con su sitio web y de hecho, hay un montón de datos que indican que cuando los sitios web se adaptan, se convierten mejor, las personas permanecen en el sitio por más tiempo, hacen clic en más enlaces, etc.

En otras palabras, como empresa de medios, más clics significan más ingresos publicitarios. Como empresa de comercio electrónico, más conversiones significan más ingresos. Como empresa de tecnología o cualquier tipo de empresa que vende cosas en línea, incluso si no es comercio electrónico, más personas comprometidas significan más clientes potenciales o más ingresos. Entonces, en todos los casos, una experiencia digital más adaptable, lo que significa clientes más felices, literalmente significa más ingresos para los clientes. Por eso importa tanto.

Ahora, la buena noticia para nosotros es que muchos de los avances de la web desbloquean la capacidad de ofrecer estas experiencias adaptables. Así que vamos a explicar esto. Vamos a mostrar algunos ejemplos. ¿Cómo funciona esto? Así que aquí hay un ejemplo real, una revista en línea tenía el requisito de usar los foros de HubSpot para recopilar clientes potenciales. ¿Por qué los foros de HubSpot? Entonces, los foros de HubSpot usan una técnica llamada campos progresivos.

Lo que esto significa es que después de que el usuario complete un formulario, brinde la información tal vez para descargar un libro blanco u obtener algo, HubSpot recuerda que la próxima vez que esa persona quiera obtener algo, no se le pedirá esa información nuevamente. Eso significa que es más probable que la persona obtenga más información, se involucre más con el sitio y no se moleste.

Este es un gran ejemplo de una experiencia adaptativa. Pero hay una compensación. El uso de este script de terceros, como los foros de HubSpot y hubo otros en este ejemplo, ralentizó el sitio web. De hecho, su puntaje móvil de Lighthouse fue solo 40 de 100, lo que significa que su sitio es lento y significa que no van a tener una clasificación tan alta en SEO. Así que quieres esta experiencia adaptativa pero está causando un problema de velocidad. ¿Qué haces al respecto?

Ahí es donde entra en juego esta nueva técnica llamada Partytown. Así que Partytown saca scripts de terceros como este del hilo principal del motor JavaScript del navegador y los carga en un hilo separado. Esto significa que el sitio se vuelve interactivo mucho más rápido para que los usuarios no se vean bloqueados para realizar acciones e interactuar, y la puntuación de Lighthouse pasó de 40 a 90 simplemente usando Partytown con la misma funcionalidad genial y adaptativa.

Así que puedes tener los guiones adaptativos que son geniales pero lentos y que no sean lentos. Eso es genial. Ese es, como arquitecto, el tipo de cosas que debe hacer para que los sitios web de sus clientes sean geniales. Así que esa es una manera de hacer que JavaScript sea rápido. Otra gran pieza de rendimiento son los medios, que quizás ya conozcas, pero espera. Cualquiera, pero especialmente los editores con muchos medios, quieren imágenes hermosas y grandes que se vean geniales.

Pero si las imágenes son simplemente grandes, su descarga será lenta y eso ralentizará todo el sitio, especialmente en teléfonos móviles y redes móviles. Así que ahora hay nuevos formatos de imagen que tienen el mismo aspecto para un ser humano, pero son mucho más pequeños y, por lo tanto, se cargan mucho más rápido. Y probablemente conozcas algunos de estos formatos, tal vez hayas oído hablar de WebP. Pero es posible que no conozca AVIF, AVIF, que es incluso más pequeño que WebP pero aún se ve igual a simple vista.

Así que simplemente cambiar a imágenes AVIF puede acelerar drásticamente el sitio de esa revista o realmente cualquier sitio. Ahora aquí está lo divertido. Dije, probablemente lo sepas. Hice una presentación sobre AVIF el año pasado cuando solo tenía unos meses y ahora, un año después, ¿lo estás usando? No, casi nadie lo está usando. Según W3Techs, menos del 0,1 % de los sitios web utilizan AVIF, incluso con WebP, menos del 4 % de los sitios web lo utilizan.

Entonces, estas son técnicas que, en cierto sentido, son antiguas o deberían conocerse y, sin embargo, aún estás a la vanguardia si las usas. Es una manera realmente fácil de acelerar los sitios web que, por supuesto, es bueno para los usuarios y bueno para el SEO con formatos de imagen y, en general, la gente todavía no lo hace. Ahora, puede descubrir que WordPress no admite AVIF pero sí admite imágenes WebP.

Entonces, tal vez WebPs sea lo suficientemente bueno para su cliente, usando WordPress normal o tal vez esta sea otra razón para usar WordPress sin cabeza porque entonces es mucho más fácil admitir automáticamente AVIF. Depende de usted hacer malabares con los requisitos del cliente, hacer malabarismos con las capacidades técnicas y descubrir cuál es la forma correcta de armar esto. Pero creo que, como arquitecto, simplemente ignorar esto por completo no es una buena opción. Creo que debería desarrollar alguna técnica aquí porque es una manera muy fácil de ayudar a sus clientes.

Así que echemos un vistazo a otra innovación que está ocurriendo en el front-end, que es la configuración del usuario en computadoras de escritorio y teléfonos. Ahora existen estas nuevas configuraciones basadas en la web que no existían hace cinco años y los visitantes de los sitios web de sus clientes ahora esperan que se respeten esas configuraciones. Entonces, hay cosas como movimiento reducido, tamaño de fuente para personas como yo que preferirían que la web fuera un poco más grande, preferencias de modo claro y oscuro, ya sea que va de la hora del día o es solo una preferencia del usuario en cualquier momento, o accesibilidad, asegurarse de que los sitios web funcionen bien incluso para personas con diversas formas de interactuar con la web. Quizás para ciegos u otras circunstancias especiales a veces por regulación.

Y esto es genial para los usuarios, supongo, pero es mucho trabajo para ti porque tienes que implementar sitios que admitan todo esto. Y hay otro problema aquí. Cuando crea un sitio que se adapta, ya sea a capacidades de dispositivos como este u otras cosas, cosas que dependen del usuario, ¿cómo lo prueba? ¿Cómo se asegura de que esto funcione correctamente en todas estas circunstancias diferentes?

Entonces, como algo a lo que todos estamos acostumbrados, creo que en este momento tomaré mi sitio y lo probaré para el tamaño de un teléfono móvil, y luego lo probaré para un iPad, y luego pruébelo para una computadora portátil, tal vez lo probé nuevamente para una pantalla súper ancha, pero ya son tres o cuatro cosas que probé. Pero ahora, bueno, ¿qué pasa en cada uno de esos casos, qué pasa si el tamaño de fuente es realmente grande? ¿Todavía se ve bien? ¿Estás probando eso? ¿Qué pasa con el modo claro versus el modo oscuro? Eso es otro número de veces 2 de cosas que tienes que probar.

Así que cada una de estas cosas, el tamaño de fuente, el modo de luz, la accesibilidad, el uso de diferentes tipos de navegadores, todo eso multiplica las combinaciones de cosas que tienes que probar. Así que eso es un poco difícil. Entonces, para algunas personas, eso es lo que buscan para las pruebas automatizadas. Tal vez algunos de estos casos se puedan manejar a través de pruebas automatizadas en lugar de que un ser humano mire todo cada vez.

Eso es bueno, pero no es una respuesta completa porque una prueba automatizada no sabrá si el sitio en modo oscuro se ve bien. Eso es realmente algo que un ser humano tiene que juzgar. Así que esto de las pruebas sigue siendo un acertijo y volveré sobre él en un momento porque les mostraré la siguiente pieza de tecnología que, entre otras cosas, también ayuda con este acertijo de pruebas.

Entonces, lo siguiente que voy a mostrar es algo realmente genial que personalmente estoy muy emocionado de que estemos incorporando en CSS y HTML, porque lo he deseado. Y, de hecho, incluso construí código personalmente para intentar hacer esto en JavaScript, porque lo deseaba con todas mis fuerzas. Y ahora viene de forma nativa a CSS y HTML, lo que significa que estará disponible en todas partes. Y Performant y todas las demás herramientas lo admitirán. Y por eso estoy muy entusiasmado con esto.

¿Así que qué es lo? Por lo tanto, es posible que esté familiarizado con las consultas de medios CSS. Por lo tanto, esto le permite ofrecer un diseño o apariencia diferente según el tamaño de la pantalla completa. Pero ahora hay algo nuevo para los diseños adaptables que se llama consultas de contenedores CSS. Entonces, en lugar de que un diseño fluya de manera diferente debido al tamaño de toda la pantalla, un solo componente puede mostrarse de manera diferente solo en función de su tamaño o solo en función de los componentes que lo rodean.

Entonces, por ejemplo, puedo tener un componente como los que están viendo aquí, que tienen una versión más amplia y una versión más estrecha. Ahora podría necesitar la versión estrecha en el teléfono y la versión ancha en una computadora portátil. Esa es la forma habitual en que lo pensamos. Pero, ¿y si en la versión ancha tengo tres columnas? Así que en cada columna quiero el micrófono angosto.

Ahora vea que el CSS actual no es compatible con eso. Simplemente dice que toda la pantalla es ancha, por lo que eres ancho en lugar de sí, la pantalla puede ser ancha pero estás en una columna, por lo que aún debes actuar como si estuvieras en un teléfono. Eso es lo que hacen las consultas de contenedor. Súper emocionado por eso. Ahora, esto es solo parte de una tendencia aún más grande que es un cambio a pensar en las páginas web, no como una página web completa, sino en términos de componentes. Piezas de una página.

Ahora, como desarrollador de PHP, estás acostumbrado a separar algunas cosas. Los estilos van aquí, las funciones van allá, los diseños de página completos van allá y así sucesivamente. Pero cambiar a componentes es un cambio más grande. Está diciendo que la pieza que está dentro de una página debe estar compuesta por estos componentes individuales reutilizables. La tecnología subyacente de la web, como CSS y HTML, se está moviendo hacia los componentes, como acaba de ver con este componente, como pensar dónde debería estar mi tamaño basado en mí mismo y no en la página más amplia.

También puedes ver este tipo de pensamiento, por supuesto, en Gutenberg. Entonces, los usuarios de WordPress ya no escriben estas largas páginas. Están ensamblando bloques. Los bloques son componentes. Unidades que puede reutilizar y ensamblar de la forma que desee, ya sean piezas de contenido como texto o un título o una imagen o diseños como columnas y pestañas y todo tipo de otras cosas.

Y, por supuesto, con la edición completa del sitio, esto va aún más lejos. Ahora diseñar toda la página, también con bloques que son componentes, es cómo lo estamos haciendo con WordPress, por lo que este es un cambio que debe adoptar como desarrollador de WordPress para no quedarse atrás. Porque ya sea que lo mire desde la tecnología subyacente como HTML y CSS o si mira hacia dónde ha ido WordPress y hacia dónde va con Gutenberg y la edición completa del sitio, todo apunta a que tiene que pensar en las cosas en componentes, tal vez incluso desarrollar cosas como componentes.

Y esto es cierto incluso cuando miras la web más amplia del desarrollo frontend como en los sitios web sin cabeza y el mundo de JavaScript, es exactamente la misma historia. Entonces, los marcos de JavaScript como estos, reaccionar, ver y angular, que casi todos usan uno de ellos, se han basado en componentes desde el principio. Durante años. No pones las cosas en archivos separados, pones los componentes en archivos separados y los reutilizas.

Así que esto es lo que importa, ya sea que uses JavaScript con headless o WordPress o simplemente escribas HTML y CSS sin formato, aún tienes que pensar en los componentes. Así que hay mucho valor en ello. Es algo así como la forma en que la programación orientada a objetos encapsula datos y código. Del mismo modo, los componentes web encapsulan la apariencia, el comportamiento, los datos y el código también, y los hacen reutilizables, lo cual es increíble.

Otra cosa, además de ser reutilizables y componibles, es que se pueden probar individualmente. Así que esto vuelve a lo de las pruebas de las que hablábamos. Entonces, puede tomar un componente, incluso solo un botón, y luego puede probarlo en estos diferentes contextos. ¿Cómo se ve el botón cuando el texto es grande o pequeño? ¿Cómo se ve el botón en diferentes tipos de navegadores? ¿Cómo se ve el botón en modo claro o en modo oscuro, y así sucesivamente?

Cuando prueba solo un botón de forma aislada, es mucho más fácil probar todo tipo de combinaciones, es más fácil corregir errores, etc. Y luego tienes este bonito botón reutilizable que no tienes que seguir probando después de eso. Entonces, al tener una variedad de componentes que se pueden probar individualmente, lo cual es más fácil, ahora puede componer páginas que simplemente funcionan la primera vez. Así que esa es parte de la respuesta nuevamente a hey, ¿cómo pruebo y construyo estos sitios web que funcionan bien en todas estas circunstancias diferentes?

Entonces, componentes, es una forma como arquitecto que creo que necesitas para abordar los sitios web. Entonces, como desarrollador de WordPress, ya entiendes mucho del mundo. Entiendes cómo trabajar con los editores. Entiende cómo convertir sus requisitos en la vida real. Entiendes cómo combinar código, arte y requisitos y crear sitios web maravillosos y efectivos.

El truco es esta nueva tecnología para aprender e incorporar para que, en lugar de quedarse atrás, esté aprovechando cosas como experiencias adaptativas, y las herramientas detrás de ellas, y los componentes para construir estas cosas. Y así, en DE{CODE}, las presentaciones aquí están diseñadas para ayudarlo a hacer precisamente eso. Entonces, en DE{CODE} tenemos una pista para WordPress headless, puede aprender cuándo usar headless para un cliente, cuándo no usar headless. Tenemos talleres para ayudarlo a comenzar con headless desde cero, realmente rápido como en minutos. Entonces, si tienes curiosidad al respecto, ve a verlos.

También tenemos sesiones de comercio electrónico y administramos WordPress y otros temas. Y mi consejo es que a medida que avanza el día, mientras revisa todas estas sesiones, absorba lo que pueda, tome notas, etc., pero busque esa, dos o tres cosas que dice, bueno, esas son las cosas que voy a probar. Voy a aprender esas cosas. Voy a tratar de llevar esas cosas a un proyecto. Voy a ser bueno en eso. Tal vez incluso vuelva a mis clientes existentes y diga, hey, actualicemos su sitio para usar esto.

Así que esté atento a cuáles son esas pocas cosas que va a quitar y poner en práctica como arquitecto. Así que sigue deleitando a esos editores, sigue expandiéndote hacia nuevas fronteras, sigue creciendo como arquitecto y este año, 2022, será tu mejor año como desarrollador de WordPress. Gracias.