DE{CODE}: 2022—Ano do Desenvolvedor WordPress

Nunca houve um momento melhor para se especializar no desenvolvimento do WordPress. O WordPress continua a dominar a Internet como o sistema de gerenciamento de conteúdo (CMS) favorito do mundo e até mesmo o CMS headless mais popular. Nesta sessão de abertura do DE{CODE} 2022, o fundador e diretor de inovação do WP Engine, Jason Cohen, discute os desafios e as oportunidades que estão por vir para os desenvolvedores do WordPress e os projetos nos quais o WP Engine está trabalhando para facilitar suas vidas.

Confira o vídeo completo abaixo!

Diapositivos da Sessão:

Transcrição de texto completo

JASON COHEN : Olá e bem-vindo ao DE{CODE}, a conferência anual do WP Engine onde celebramos o desenvolvedor WordPress. Meu nome é Jason Cohen e sou o fundador da WP Engine. Quero começar o DE{CODE} deste ano com a convicção de que 2022 é o ano do desenvolvedor WordPress. Vou explicar porque acredito que este ano traz tantas promessas e oportunidades para todos nós e depois quero falar sobre como você pode acelerar sua carreira neste mercado.

Então, deixe-me começar com uma pergunta: toda comunidade de desenvolvedores de software é conhecida por algo, então, pelo que os desenvolvedores do WordPress são conhecidos? Eu diria que os desenvolvedores do WordPress são conhecidos por criar belos sites que os editores adoram. Então, aqui está o que quero dizer, todos nós sabemos que existem milhões de sites por aí que usam o WordPress, mas você também tem pessoas como a Under Armour, uma marca multinacional de roupas que usa o WordPress e contrata desenvolvedores do WordPress.

Agora, a Under Armour faturou US$ 5 bilhões em vendas no ano passado, então eles não estão usando o WordPress apenas porque é gratuito. Eles podem comprar qualquer software que quiserem. Eles usam o WordPress porque atende aos seus requisitos e empregam desenvolvedores WordPress porque você sabe como atender a esses requisitos e produzir sites bonitos e fáceis de atualizar. Como este.

Ou National Geographic, é uma das marcas de mídia mais reverenciadas do mundo e a Nat Geo precisa de sites bonitos e fáceis de atualizar com gerenciamento sofisticado de ativos digitais que possam lidar com uma experiência rica em mídia. Então é claro que eles contratam desenvolvedores WordPress. Esse é um caso de uso pelo qual você é famoso. E quanto à tecnologia? Uma empresa de tecnologia moderna usaria WordPress?

Sim, a equipe do Dropbox pode criar um CMS do zero se quiser ou pode usar qualquer tecnologia do Site Builder que aparece o tempo todo. Mas o Dropbox escolhe trabalhar com desenvolvedores WordPress e WordPress para as partes de seu site que precisam ser atraentes e fáceis de publicar. Que tal um caso de uso em que a equipe de marketing deseja usar uma tecnologia de front-end diferente do WordPress?

Então, eles querem usar o WordPress para o CMS, mas algo diferente para o front-end, eles ainda podem usar o WordPress? Claro, isso é o que é o WordPress sem cabeça. Assim, eles podem fazer uma escolha como o Android Authority fez e usar o WordPress sem cabeça. Portanto, o Android Authority ainda usa o WordPress como CMS para gerenciar escritores, conteúdo, mídia, todas as coisas necessárias para gerenciar o back-end do site, mas o front-end é tratado por uma estrutura diferente.

E quando uma marca deseja uma abordagem headless, como a autoridade do Android, eles ainda chamam os desenvolvedores do WordPress porque desejam o desempenho e a segurança de um site desacoplado, com certeza, mas precisam que o site corresponda ao fluxo de trabalho de publicação e todas as outras coisas que eles precisam. Nos últimos quase 20 anos, esperamos que o WordPress tenha alimentado seu site. E os desenvolvedores do WordPress sabem como fazer isso.

Deixar os editores felizes é o que os desenvolvedores do WordPress têm uma merecida reputação de fazer e até mesmo os concorrentes do WordPress sabem disso. Algumas das startups e desenvolvimento web mais comentadas continuam falando sobre o WordPress. Quando você navega em seus sites, uma das coisas que você vê em comum é que sempre há uma página que apresenta aos desenvolvedores do WordPress. Não importa para onde você olhe, todos estão interessados ​​em desenvolvedores WordPress.

É por isso que digo que 2022 é o ano do desenvolvedor WordPress porque você dominou o que todo editor precisa e essas necessidades não mudaram, apenas se aceleraram. Tipo, todo editor precisa de tráfego orgânico de mecanismos de pesquisa como o Google, claro que sim, e as pessoas ainda falam sobre como fazer isso o tempo todo. Isso é novo? Não, obviamente não. Essencialmente, os mesmos artigos foram publicados por anos e anos e os desenvolvedores do WordPress são especialistas em fazer isso.

Que tal testes A/B? Ou melhor ainda, nenhum teste de código A/B? Isso é chique. Isso é inovador, certo? Agora você vai ter que se esforçar e aprender essas novas ferramentas. Bem, exceto que você não faz isso porque faz isso há anos. Tipo, essa ideia também obteve financiamento de VC há oito anos. Tipo, não há mudança aqui. Ainda não existe o teste A/B No Code e você já sabe como fazer tudo isso. Você já é especialista em tudo isso. Muito legal.

Muitos de vocês também sabem sobre as mudanças recentes na pesquisa do Google que usam a experiência da página como um fator de classificação. Experiência na página significa coisas como velocidade da página e outras coisas, e você também pode saber sobre isso como a atualização do Core Web Vitals. O Google já fez alterações como essa antes às quais você teve que reagir? Bem, sim, o tempo todo, na verdade, certo? E você sabe como fazer isso.

Sim, é uma ferramenta nova, mas tornar os sites rápidos, ter isso importante não é novo e o Google usa a velocidade da página como fator de classificação há muito tempo e tenta inferir se um visitante do site ficaria satisfeito por muito tempo . Todas essas são coisas nas quais você já é especialista. Então, de certa forma, o mundo não muda. E é bom comemorar porque, quando se trata de atender aos editores dessa maneira, os desenvolvedores do WordPress já estão à frente. Vocês já são especialistas.

Mas há outros aspectos do desenvolvimento da Web em que vejo mudanças genuínas. Onde o mundo está mudando rapidamente. E é por isso que aconselho os desenvolvedores do WordPress a pensar como um arquiteto. Assim, um arquiteto combina os requisitos do cliente com a arte. Um arquiteto também combina requisitos e arte com a tecnologia correta, quer isso signifique materiais de construção ou software e infraestrutura.

Isso significa que você precisa ser capaz de usar toda a tecnologia disponível e isso significa aproveitar as inovações. Agora isso pode ser assustador porque ter que aprender algo novo pode ser perturbador, mas também faz parte do trabalho. Quando decidimos ser desenvolvedores de software, uma das coisas sobre o software é que ele muda o tempo todo. Então, se vamos ser bons desenvolvedores de software ou bons arquitetos, temos que nos manter atualizados para escolher a tecnologia certa para os diferentes trabalhos que temos.

Então, coisas como testes A/B e SEO podem estar mudando muito lentamente e fundamentalmente não estão mudando, mas a tecnologia está e você tem que estar no topo disso e é sobre isso que quero passar os próximos 20 minutos falando. Quais são algumas dessas coisas? Então, quais são algumas dessas novas mudanças emocionantes na tecnologia que eu acho que você deveria dar uma olhada, talvez até mesmo adotar? Quero dar a você um vislumbre do que vejo como o foco de mudanças interessantes em nosso espaço.

Portanto, a maior mudança na expectativa do usuário com a qual você deve se familiarizar é chamada de experiências digitais adaptativas. Isso é como personalização, mas mais. Os usuários querem que a aparência e a funcionalidade do site se adaptem ao seu ambiente e condições específicos e até mesmo ao seu histórico, mesmo que não façam login. Agora, quando você oferece uma experiência digital adaptativa personalizada, os usuários ficam mais satisfeitos com o site e na verdade, há uma tonelada de dados que quando os sites são adaptáveis, eles convertem melhor, as pessoas permanecem no site por mais tempo, clicam em mais links e assim por diante.

Em outras palavras, como empresa de mídia, mais cliques significam mais receita publicitária. Como uma empresa de comércio eletrônico, mais conversões significam mais receita. Como uma empresa de tecnologia ou qualquer tipo de empresa que vende coisas online, mesmo que não seja e-commerce, mais pessoas envolvidas significam mais leads ou mais receita. Portanto, em todos os casos, uma experiência digital mais adaptável, significando clientes mais felizes, significa literalmente mais receita para os clientes. É por isso que importa tanto.

Agora, a boa notícia para nós é que muitos dos avanços da web desbloqueiam a capacidade de fornecer essas experiências adaptativas. Então vamos explicar isso. Vamos mostrar alguns exemplos. Como é que isso funciona? Então, aqui está um exemplo real, uma revista online tinha um requisito para usar os fóruns da HubSpot para coletar leads. Por que os fóruns da HubSpot? Portanto, os fóruns da HubSpot usam uma técnica chamada campos progressivos.

O que isso significa é que, depois que o usuário preenche um formulário, fornece as informações, talvez para baixar um white paper ou obter algo, o HubSpot lembra que, da próxima vez que a pessoa quiser obter algo, ela não será solicitada novamente. Isso significa que é mais provável que a pessoa obtenha mais informações, se envolva mais com o site e não seja incomodada.

Este é um ótimo exemplo de experiência adaptativa. Mas há uma troca. O uso desse script de terceiros, como os fóruns da HubSpot e outros neste exemplo, tornou o site mais lento. Na verdade, a pontuação do farol para dispositivos móveis foi de apenas 40 em 100, o que significa que o site deles é lento e significa que eles não terão uma classificação tão alta em SEO. Então você quer essa experiência adaptativa, mas está causando um problema de velocidade. O que você faz sobre isso?

Então é aí que entra essa nova técnica chamada Partytown. Então Partytown move scripts de terceiros como este do thread principal do mecanismo JavaScript do navegador e os carrega em um thread separado. Portanto, isso significa que o site se torna interativo muito mais rápido, para que os usuários não sejam impedidos de realizar ações, interagir e a pontuação do farol passou de 40 para 90 apenas usando o Partytown com a mesma funcionalidade adaptável legal.

Então você pode ter os scripts adaptativos que são muito legais, mas lentos e não lentos. Isso é legal. Esse é, como arquiteto, o tipo de coisa que você deve fazer para tornar os sites de seus clientes excelentes. Essa é uma maneira de tornar o JavaScript rápido. Outra grande peça de performance é a mídia, que você já deve conhecer, mas espere. Portanto, qualquer um, mas especialmente os editores com muita mídia, deseja imagens grandes e bonitas com ótima aparência.

Mas se as imagens forem simplesmente grandes, elas serão lentas para baixar e isso deixará todo o site lento, especialmente em telefones celulares e em redes móveis. Portanto, agora existem novos formatos de imagem que parecem iguais para um ser humano, mas são muito menores e, portanto, carregam muito mais rápido. E você provavelmente conhece alguns desses formatos, como talvez já tenha ouvido falar do WebP. Mas você pode não saber sobre o AVIF, o AVIF, que é ainda menor que o WebP, mas ainda parece o mesmo a olho nu.

Portanto, apenas mudar para imagens AVIF pode acelerar drasticamente o site da revista ou realmente qualquer site. Agora aqui está a coisa engraçada. Eu disse, você provavelmente sabe disso. Fiz uma apresentação sobre o AVIF no ano passado, quando tinha apenas alguns meses e agora, um ano depois, você está usando? Não, quase ninguém está usando. De acordo com a W3Techs, menos de 0,1% dos sites estão usando AVIF, mesmo com WebP, menos de 4% dos sites estão usando.

Portanto, essas são técnicas que, de certa forma, são antigas ou deveriam ser conhecidas e, no entanto, você ainda está na vanguarda se usá-las. É uma maneira muito fácil de acelerar sites, o que, claro, é bom para os usuários e bom para SEO com formatos de imagem e as pessoas geralmente ainda não estão fazendo isso. Agora, você pode descobrir que o WordPress não suporta AVIF, mas suporta imagens WebP.

Então, talvez os WebPs sejam bons o suficiente para o seu cliente, usando o WordPress regular ou talvez esse seja outro motivo para usar o WordPress sem cabeça, porque é muito mais fácil oferecer suporte automaticamente ao AVIF. Cabe a você conciliar os requisitos do cliente, conciliar os recursos técnicos e descobrir qual é a maneira certa de juntar tudo isso. Mas acho que, como arquiteto, simplesmente ignorar isso não é uma boa opção. Acho que você deveria desenvolver alguma técnica aqui porque é uma maneira muito fácil de ajudar seus clientes.

Vejamos outra inovação que está acontecendo no front-end, que são as configurações do usuário em desktops e telefones. Agora existem essas novas configurações baseadas na web que não existiam cinco anos atrás e os visitantes dos sites de seus clientes agora esperam que essas configurações sejam respeitadas. Há coisas como movimento reduzido, tamanho da fonte para pessoas como eu que prefeririam que a web fosse um pouco maior, preferências de modo claro e escuro, seja de hora do dia ou apenas uma preferência do usuário a qualquer momento, ou acessibilidade, garantir que os sites funcionem bem, mesmo para pessoas com várias formas de interagir com a web. Talvez para cegos ou outras circunstâncias especiais, às vezes para regulamentação.

E isso é ótimo para os usuários, mas dá muito trabalho para você, porque você precisa implementar sites que suportem tudo isso. E há outro problema aqui. Quando você cria um site adaptável, seja para recursos de dispositivo como este ou outros, coisas que dependem do usuário, como você o testa? Como você garante que isso funcionará bem em todas essas circunstâncias diferentes?

Então, como uma coisa com a qual estamos acostumados, acho que neste momento vou pegar meu site e testá-lo para o tamanho de um telefone celular e, em seguida, testá-lo para um iPad e, em seguida, teste-o para um laptop, talvez testado novamente para uma tela super larga, mas já são três ou quatro coisas que fiz um teste. Mas agora– bem, e em cada um desses casos, e se o tamanho da fonte for muito grande? Ainda parece certo? Você está testando isso? E o modo claro versus o modo escuro? Isso é outro vezes 2 vezes o número de coisas que você precisa testar.

Então cada uma dessas coisas, tamanho da fonte, modo de luz, acessibilidade, uso de diferentes tipos de navegadores, tudo isso multiplica as combinações de coisas que você tem que testar. Então isso é meio difícil. Então, para algumas pessoas, é isso que elas alcançam para testes automatizados. Talvez alguns desses casos possam ser tratados por meio de testes automatizados, em vez de um ser humano olhando para tudo o tempo todo.

Isso é bom, mas não é uma resposta completa, porque um teste automatizado não saberá se o site do modo escuro parece bom. Isso é realmente algo que um ser humano tem que julgar. Esse negócio de teste ainda é um quebra-cabeça e voltarei a ele daqui a pouco porque vou mostrar a vocês a próxima peça de tecnologia que, entre outras coisas, também ajuda nesse quebra-cabeça de teste.

Então, a próxima coisa que vou mostrar é algo realmente legal que estou pessoalmente muito animado por estarmos obtendo em CSS e HTML, porque eu desejava isso. E, na verdade, eu mesmo criei um código para tentar fazer isso em JavaScript, porque eu queria muito. E agora está vindo nativamente para CSS e HTML, o que significa que estará disponível em todos os lugares. E o Performant e todas as outras ferramentas irão apoiá-lo. E estou muito animado com isso.

Então o que é? Portanto, você pode estar familiarizado com as consultas de mídia CSS. Portanto, isso permite que você forneça um layout ou aparência diferente com base no tamanho da tela inteira. Mas agora há algo novo para layouts adaptativos que é chamado de consultas de contêiner CSS. Portanto, em vez de um layout fluir de maneira diferente devido ao tamanho da tela inteira, um único componente pode ser exibido de maneira diferente apenas com base em seu tamanho ou apenas com base nos componentes ao seu redor.

Por exemplo, posso ter um componente como os que vocês estão vendo aqui, que tem uma versão mais larga e outra mais estreita. Agora posso precisar da versão estreita no telefone e da versão ampla em um laptop. Essa é a maneira usual como pensamos sobre isso. Mas e se na versão ampla eu realmente tiver três colunas? Portanto, em cada coluna, quero o microfone estreito.

Agora veja que o CSS atual não suporta isso. Ele apenas diz que a tela inteira é larga, então você é largo ao contrário de sim, a tela pode ser larga, mas você está em uma coluna, então ainda precisa agir como se estivesse em um telefone. É isso que as consultas de contêiner fazem. Super animado com isso. Agora, isso é apenas parte de uma tendência ainda maior que é uma mudança para pensar em páginas da web, não como uma página inteira, mas pensando nela em termos de componentes. Pedaços de uma página.

Agora como desenvolvedor PHP, você está acostumado a separar algumas coisas. Estilos vão aqui, funções vão lá, layouts de página inteira vão lá e assim por diante. Mas mudar para componentes é uma mudança maior. É dizer que a peça que está dentro de uma página deve ser composta nesses componentes individuais reutilizáveis. A tecnologia subjacente da Web, como CSS e HTML, está se movendo em direção aos componentes, como você acabou de ver com esse componente, como pensar onde meu tamanho deve ser baseado em mim mesmo, não na página mais ampla.

Você também pode ver esse tipo de pensamento, é claro, em Gutenberg. Portanto, os usuários do WordPress não estão mais escrevendo essas páginas longas. Eles estão montando blocos. Blocos são componentes. Unidades que você pode reutilizar e montar da maneira que quiser, sejam partes de conteúdo como texto, título ou imagem ou layouts como colunas e guias e todos os tipos de outras coisas.

E, claro, com a edição completa do site, isso vai ainda mais longe. Agora, fazer o layout da página inteira, também com blocos que são componentes, é como estamos fazendo com o WordPress, então essa é uma mudança que você deve adotar como desenvolvedor do WordPress para não ficar para trás. Porque se você olhar para a tecnologia subjacente, como HTML e CSS, ou se você olhar para onde o WordPress já foi e para onde está indo com o Gutenberg e a edição completa do site, tudo isso aponta para que você tenha que pensar sobre as coisas em componentes, talvez até mesmo desenvolver coisas como componentes.

E isso é verdade até mesmo quando você olha para a web mais ampla de desenvolvimento de front-end, como em sites sem cabeça e no mundo do JavaScript, é exatamente a mesma história. Então frameworks JavaScript como esses, react, view e angular, que quase todo mundo usa um deles, eles foram baseados em componentes desde o início. Por anos. Você não coloca coisas em arquivos separados, você coloca componentes em arquivos separados e os reutiliza.

Portanto, se você usa JavaScript com headless ou WordPress ou apenas escreve HTML e CSS bruto, ainda precisa pensar nos componentes. Portanto, há muito valor nisso. É mais ou menos como a programação orientada a objetos encapsula dados e código. Da mesma forma, os componentes da Web encapsulam a aparência, o comportamento, os dados e o código também e os tornam reutilizáveis, o que é incrível.

Outra coisa, além de serem reutilizáveis ​​e combináveis, é que eles podem ser testados individualmente. Então, isso volta ao teste de que estávamos falando. Portanto, você pode pegar um componente, mesmo que seja apenas um botão, e testá-lo nesses diferentes contextos. Qual é a aparência do botão quando o texto é grande ou pequeno? Como é o botão em diferentes tipos de navegadores? Qual é a aparência do botão no modo claro ou no modo escuro e assim por diante.

Quando você testa apenas um botão isoladamente, é muito mais fácil testar todos os tipos de combinações, é mais fácil corrigir bugs e assim por diante. E então você tem esse belo botão reutilizável que não precisa continuar testando depois disso. Portanto, por ter uma matriz de componentes que podem ser testados individualmente, o que é mais fácil, agora você pode compor páginas que funcionam da primeira vez. Então, isso é parte da resposta novamente para ei, como faço para testar e construir esses sites que funcionam bem em todas essas circunstâncias diferentes?

Então, componentes, é uma maneira como um arquiteto que eu acho que você precisa para abordar sites. Portanto, como desenvolvedor do WordPress, você já entende muito do mundo. Você entende como trabalhar com editores. Você entende como converter seus requisitos na vida real. Você sabe como misturar código, arte e requisitos e criar sites maravilhosos e eficazes.

O truque é aprender e trazer essa nova tecnologia para que, em vez de ficar para trás, você aproveite coisas como experiências adaptativas, as ferramentas por trás delas e os componentes para construir essas coisas. E assim, no DE{CODE}, as apresentações aqui são projetadas para ajudá-lo a fazer exatamente isso. Portanto, no DE{CODE}, temos uma faixa para WordPress sem cabeça, você pode aprender quando usar sem cabeça para um cliente, quando não usar sem cabeça. Temos workshops para ajudá-lo a começar do zero com o headless, muito rápido, como em minutos. Então, se você está curioso sobre isso, vá dar uma olhada.

Também temos breakouts para e-commerce e gerenciamos WordPress e outros tópicos. E meu conselho é que, ao longo do dia, ao passar por todas essas sessões, você absorva o que puder, faça anotações, etc., mas procure por uma, duas ou três coisas que você diz, OK, essas são as coisas que vou tentar. Eu vou aprender essas coisas. Vou tentar trazer essas coisas para um projeto. Eu vou ficar bom nisso. Talvez eu também volte para meus clientes existentes e diga, ei, vamos atualizar seu site para usar isso.

Portanto, fique de olho em quais são aquelas poucas coisas que você vai tirar e realmente colocar em prática como arquiteto. Portanto, continue encantando esses editores, continue expandindo para novas fronteiras, continue crescendo como arquiteto e este ano, 2022, será seu melhor ano como desenvolvedor WordPress. Obrigado.