Desmistificando o JAMstack: uma entrevista com Phil Hawskworth

Alguns de vocês já devem ter ouvido falar do JAMstack e talvez até sobre como mudar do WordPress para o Hugo, mas o JAMstack é uma opção viável para qualquer tipo de projeto?

Falei com Phil Hawksworth, um engenheiro de front-end que (após 9 anos trabalhando em agências voltou a trabalhar em um produto independente) agora está se concentrando no desenvolvimento de estratégias para tecnologias JAMstack para tornar a construção para a web mais simples, rápida e mais seguro. Phil também será co-anfitrião da JAM_stack ldn, uma conferência dedicada a geradores de sites estáticos, sem servidor e JAMstack em Londres, de 9 a 10 de julho.

Vitaly: Olá e bem-vindo a uma de nossas conversas com nossos palestrantes na Smashing Conf e pessoas geralmente legais. Você pode se lembrar daqueles tempos em que o FTP era uma grande coisa e talvez você ainda esteja implantando porque o FTP é um espaço perfeitamente seguro, então você não precisa se preocupar com isso. Mas as mudanças são altas que você não está mais usando FTP e, em vez disso, migra para fluxos de trabalho baseados em Git e, provavelmente, implantação contínua. Todos esses apitos e sinos extravagantes. E hoje estou muito feliz em receber Phil Hawksworth, que está trabalhando na Netlify, Relacionamento com desenvolvedores [inaudível 00:10:00]. Olá Phil. Como você está hoje?

Phil: Estou ótimo, como você está Vitaly? É bom ver você.

Vitaly: Ah, estou indo muito bem. É sempre um prazer vê-lo. Você é como um sol transmitindo Netlify e Jump Stack e tudo mais.

Phil: Eu tento. Eu nem estou marcado, que oportunidade perdida.

Vitaly: Tudo bem, tudo bem. Mas você tem que me dizer, então aquela gem ou jen ou jeet, tipo, jem? É Jem?

Phil: Jam. É geléia. É tudo sobre o congestionamento.

Vitaly: É tudo geléia. Então o JAMstack. Para desenvolvedores ou designers, na verdade, nunca ouvi o termo antes. Se você quisesse resumir o que é e por que é bom e quais são os benefícios disso em primeiro lugar. Por que você iria querer mudar de sua pilha tradicional e velha para o JAMstack. Talvez você possa resumir brevemente.

Phil: Deixe-me ver se posso tentar porque é tentador apenas dizer, JAMstack, o JAM significa Javascript, APIs e maquete. Mas isso por si só não explica muito, apenas saber o que significa. Então, realmente, o JAMstack é uma maneira de implantar e servir sites que não dependem de um servidor de origem, eles não dependem de solicitações que atingem um servidor ativo o tempo todo.

Phil: Então você pode estar mais familiarizado com pilhas como a pilha LAMP que era Linux, Apache, MySQL e PHP, que era o tipo de pilha que estava servindo seu site lá. Com o JAMstack, fica um pouco diferente porque meio que subimos um nível, longe do servidor e mais perto do navegador, então está pensando muito em entrar em um navegador o mais rápido possível e depois usar tecnologias no navegador para melhorá-lo e aumentá-lo mais tarde. Então o JAMstack tem tudo a ver com pré-renderização de sites, colocá-los no navegador, e então talvez aprimorá-los, aprimorá-los, a experiência com Javascript rodando em seu navegador, talvez fazendo requisições para APIs e esse tipo de coisa.

Phil: Então esse é o modelo, tentar fugir de ter um servidor que você precisa manter porque eu sei que manter um servidor é difícil. Eu não sei você, mas eu tenho muitos sites que meio que sumiram quando eu dei as costas para eles por alguns anos. Eu precisava atualizar o PHP, o que significava que precisava atualizar a versão do Linux que fiz uma vez em uma lua azul. Portanto, manter servidores é difícil, então a ideia do JAMstack é tentar tornar o mais simples possível servir sites como ativos estáticos e, em seguida, aproveitar ao máximo todas as APIs e inabilidades no navegador para fazer aumento e fazer mais coisas com eles lá.

Vitaly: Certo, faz sentido. Bem, na verdade, nos mudamos para o JAMstack há cerca de 2 anos.

Phil: Dois anos?

Vitaly: Sim, foi uma jornada e tanto para nós. E, claro, aprendemos algumas lições ao longo do caminho. Mas eu estou querendo saber, você diria que essencialmente todo projeto poderia se beneficiar de alguma forma de mover ou mover algumas partes dele para o JAMstack ou algo assim, onde você vê suas limitações? É algo que potencialmente todo desenvolvedor poderia usar em um projeto ou é algo dedicado a um grupo específico de sites ou a um grupo de projetos?

Phil: Sim, quero dizer, é tentador dizer, ah sim, você pode usá-lo para tudo, mas acho que você deve ter cuidado ao dizer isso sobre qualquer tecnologia. Você sabe, você realmente precisa escolher os casos de uso e certificar-se de que está bem adaptado. Eu diria que o primeiro instinto quando você pensa em um site JAMstack e talvez pense em algo que é servido como ativos estáticos, talvez diretamente de um CDN. Você pode pensar, bem, isso só é bom para sites que não mudam com muita frequência, eles são cotações sobre cotações, estáticos, eles não mudam. Mas, na verdade, esse não é realmente o caso, porque agora existem muitas ferramentas que podem reduzir o atrito na implantação das coisas.

Phil: Você pode implantar muitas vezes por dia, ou muitas vezes por hora, se quiser, e realmente fazer as coisas parecerem muito mais dinâmicas do que antes. Então, alguns desses casos de uso em que você acha que não seriam apropriados; aqueles realmente entram no redil também. O momento em que fica desafiador, talvez, é quando estamos criando sites que têm muitas páginas, muitas centenas de milhares ou muitos milhões de páginas, porque o modelo JAMstack realmente faz muito sentido quando você pode pré-gerar seu site então você pode estar usando um gerador de site estático. Esses estão realmente em voga no momento; esses são realmente muito populares.

Phil: Mas é claro, eles têm que fazer um trabalho cada vez que implantam uma atualização, então se você tiver um site, talvez como um site de jornal, que tenha muitos milhões de páginas, o trabalho necessário para gerar novamente pode ser bastante, você sabe, isso pode levar muito tempo, então é aí que você começa a se deparar com algumas das limitações de onde o JAMstack pode ser, mais ou menos, usado. Você pode começar a ficar um pouco astuto e começar a contornar isso se, você sabe, você for muito, muito astuto, mas isso definitivamente apresenta alguns desafios.

Phil: Uma das coisas que estou começando a ver de uma variedade de diferentes geradores de sites estáticos como Gatsby por exemplo ou React Static, e também Hugo. As equipes por trás desses geradores de sites estáticos estão começando a explorar maneiras de fazer a geração progressiva das páginas, em outras palavras, você não reimplantará o site inteiro ou regenerará o site inteiro toda vez que algo mudar, mas tente encontrar maneiras para fazer compilações incrementais. É um problema meio desafiador de superar, mas há trabalho sendo feito para isso no momento, então isso ajudará a tentar quebrar essa barreira também. Mas, certamente no momento, encontrar maneiras de usar um site JAMstack para um site que tem muitos milhões de páginas ou muitas centenas de milhares de páginas, é aí que pode ser um pouco desafiador agora.

Vitaly: Ah, isso é interessante. Então, na verdade, a ideia de servir a um div do estado que você tem e, essencialmente, o que quer que você tenha que construir, como um novo portal, tem que ser paginado nele, então é interessante ver isso acontecendo. Porque você também, recentemente, acho que duas semanas atrás, surgiu um artigo de Jason Pamental onde a ideia era realmente muito semelhante, onde você carregaria as fontes, e então você carregava a primeira página que você precisa e então você carregue o segundo e, em seguida, você realmente os mescla de forma a criar uma nova fonte, como também o carregamento incremental de fontes.

Phil: Interessante.

Vitaly: Seria muito interessante explorar isso.

Phil: Sim, e não é apenas o carregamento, é a geração-

Vitaly: A geração, a construção.

Phil: Sim, exatamente.

Vital: Eu entendo. Mas quais você acha que são os desafios comuns que a maioria dos desenvolvedores tem? Bem, quero dizer, deixe-me voltar primeiro. Se você nunca trabalhou no JAMstack antes e está muito confortável e feliz com sua pilha LAMP e talvez queira explorar a possibilidade e vantagens como segurança e desempenho do JAMstack. Como você realmente começaria? O que você moveria, o que significa mudar o fluxo de trabalho?

Phil: Então, as mudanças no fluxo de trabalho podem ser bastante profundas porque você está tirando muita infraestrutura da qual você normalmente depende e diz que podemos acabar com isso e começar a implantar coisas diretamente em uma CDN. Mas em termos de como alguém pode começar a experimentar isso, é provável que eles já estejam usando alguns dos aspectos disso. Você sabe, mesmo em formas tradicionais de construir coisas para a web.

Phil: Se você pensar em como você pode construir algo na pilha LAMP, é provável que no seu PHP esteja fazendo coisas como escrever um modelo que pega dados de uma fonte de dados, neste caso, o banco de dados MySQL ou algum tipo de banco de dados, tornando essas coisas à vista e, em seguida, servindo-as. E isso é semelhante a como os geradores de sites estáticos funcionam. Eles têm modelos, eles pegam dados de algum lugar que pode ser um tipo de dados estruturados em arquivos ou pode estar atingindo algum tipo de banco de dados ou uma API de conteúdo. De qualquer forma, está pegando dados, combinando esses dados com modelos, gerando visualizações e a única diferença é que não está fazendo isso sob demanda, está fazendo isso antes do tempo. Então, algumas das etapas lógicas nesse tipo de etapas cognitivas para um desenvolvedor podem não ser tão grandes.

Phil: A maior mudança é pensar em como você implanta as coisas. Porque realmente o que você está implantando é a totalidade de seus ativos renderizados e construídos toda vez que você deseja fazer uma implantação. Isso começa a trazer coisas como o gerenciamento do conteúdo e o gerenciamento do código, tudo no mesmo lugar, para que coisas como o controle da visão em todas essas coisas juntas. Então, começa a ser uma maneira um pouco diferente de pensar sobre como você pode desenvolver e gerenciar sites e o conteúdo dentro deles. Então tem algumas mudanças aí. Mas o bom é que muitos geradores de sites estáticos podem ser bastante simples para começar a experimentar e o bom é que você não precisa de uma tonelada de infraestrutura para fazer isso. Então, o bom é que você pode realmente começar a construir coisas diretamente em sua máquina local. Você está executando um gerador de site estático diretamente em sua máquina e pode ter uma boa noção de qual será o resultado sem precisar se apoiar em muitas outras infraestruturas.

Phil: Então esse tipo de primeiro passo, a rampa de acesso, pode ser bastante superficial para você começar a dizer: “Bem, vou tentar esse conjunto específico de ferramentas. Eu posso executá-los localmente.” E você terá uma boa confiança de que, quando implantar a saída disso em algum lugar, será exatamente o mesmo onde você o implantará, como seria localmente. Essa é uma das coisas que eu amo na renderização de coisas estáticas porque você não depende de muita infraestrutura e peças móveis para servi-las. Você pode olhar para eles no servidor estático em sua própria máquina e pensar: “sim, é assim que funcionará quando for para um CDN”.

Vitaly: Mm-hmm (afirmativo); E também a infraestrutura quando olhamos, por exemplo, para a forma como construímos single [inaudível 00:10:07], e há um grande número de opções do que você pode fazer. Para o servidor, para o cliente e tudo mais.

Phil: Sim.

Vitaly: E assim, eu acho, no nosso caso porque estamos construindo um esqueleto e está servindo direto através do CDI com conteúdo e tudo e aprimorado com Javascript. Na verdade, foi bastante razoável e bastante, eu não diria fácil, mas fazia sentido mudar para esse tipo de configuração. Porque no final, é apenas o conteúdo que sai na página. É apenas HTML com algumas áreas de comentários e caixa de pesquisa e algumas outras coisas. Mas se você estiver migrando para um aplicativo realmente autônomo, talvez até um aplicativo financeiro, banco on-line, esse tipo de coisa. Você ainda acha que o JAMstack seria uma boa opção a se considerar lá se você estiver tendo algo que requeira muita lógica? Ele precisa de um servidor ou não?

Phil: Bem, eu odeio usar a velha frase “depende”. Mas isso meio que depende um pouco. Com isso dito, existem muitos aplicativos que funcionam tão bem sendo um aplicativo Javascript quanto realmente tendo um componente do lado do serviço para eles. Digo isso com certa cautela porque sou um pouco antiquado quando se trata de desenvolvimento web e gosto muito de colocar as coisas no navegador como HTML o máximo possível e depois ter uma marca d'água muito alta de onde você aprimora progressivamente a partir de. Então, eu pessoalmente não gosto de fazer tudo em Javascript e apenas enviar uma tag de corpo vazio e depois executar tudo através de Javascript.

Phil: Dito isso, às vezes isso é perfeitamente aceitável. Se você está pensando em um determinado tipo de aplicativo que, é claro, dependeria muito de Javascript e você conhece seu público. Isso pode ser completamente razoável. Há coisas que foram enviadas recentemente. Na verdade, estou pensando em algo que foi enviado para o Google IO para, por exemplo, a equipe do chrome montar um jogo que era muito Javascript e que funcionava lindamente servido estaticamente. Existem muitos casos de uso em que isso pode funcionar.

Phil: Voltando ao seu exemplo financeiro, eu costumava trabalhar, meu primeiro trabalho, na verdade, era colocar números nas telas para que os comerciantes negociassem usando tecnologias da web e isso foi antes dos soquetes da web, foi antes do Ajax, foi antes de qualquer coisa realmente isso foi útil para ajudá-lo a fazer isso e é meio desafiador, mas mais recentemente, você faria muito desse tipo de coisa em Javascript e isso faz todo o sentido. Você pode começar a fazer solicitações seguras para APIs diretamente do navegador. Existem muitos modelos agora para fazer autenticação e autorização diretamente do seu navegador. Portanto, de muitas maneiras, isso pode simplificar a pilha para instituições financeiras que desejam desenvolver algumas dessas coisas, porque a maneira como elas podem dissociar algumas dessas coisas pode torná-las muito mais gerenciáveis. Então, eu certamente acho que o modelo JAMstack também pode funcionar perfeitamente nesse cenário.

Vitaly: Ok, talvez volte agora para explorar esse mundo de JAMstack e front-end. Com o que você está mais animado nos dias de hoje, Phil? Se você olhar para o JAMstack e o front-end em geral, é algo que realmente o mantém acordado à noite, onde você acorda de manhã esperando que sim, eu vou trabalhar nisso algum dia. Um dia eu vou conseguir. Você tem [conversa cruzada 00:13:33]

Phil: Sim, e esse é o tipo de coisa em que sua resposta pode ser diferente a cada dia, porque parece que esse mundo se move muito rapidamente. E isso por si só é uma das coisas que me excita tanto. Agora que estamos começando a ver as APIs do navegador começarem a realmente progredir e os tipos de coisas que podemos fazer diretamente no navegador sem ter que implementá-las nós mesmos. Isso é meio excitante para mim. Eu ainda sou muito duffer quando se trata de SVGs. Eu deveria explicar a palavra duffer, se alguém que não é inglês e está assistindo isso, significa um tolo. Significa que estou muito atrás da curva.

Phil: Mas eu me vejo realmente querendo fazer mais com SVGs e animações são coisas que eu estou muito atrasada e quero brincar com isso. Mas coisas como as APIs do navegador, seja para offline ou para melhorar o desempenho e, principalmente, no momento, a maneira como o carregamento de fontes parece estar ficando cada vez mais acessível para que possamos realmente começar a criar coisas visualmente muito ricas e mais próximas o que podemos querer fazer com tipografia. Eu sou um pouco nerd para essas coisas, gosto desse tipo de coisa, então quero tocar cada vez mais com isso.

Vitaly: Então Phil, falando sobre a JAMstack conf em Londres. Você também pode explicar em poucas palavras como vai ser, qual é o foco e para quem é e qual é o seu papel lá? Apenas nos bastidores, cuidando do conteúdo e tudo. Qual é o seu papel lá?

Phil: Então eu tive a parte divertida do trabalho. Então eu tive a oportunidade de sair e encontrar palestrantes e encontrar conteúdo interessante, então estou muito empolgado com a forma como os programas se reúnem. Temos pessoas como Chris Coia que falará sobre capacitar desenvolvedores front-end e o quanto podemos fazer com tecnologias front-end agora baseadas neste modelo JAMstack. Temos pessoas como Jake Archibald e Surma da equipe do Google Chrome que falarão sobre coisas como desempenho no front-end e maneiras pelas quais podemos realmente gerar experiências de desempenho com hospedagem estática ou infraestrutura ou código que é executado diretamente o navegador.

Phil: Também teremos Yuna Kravitz falando sobre coisas a ver com CSS e Houdini e todos esses tipos de coisas. E muito mais além disso. Também falaremos sobre o que fazer com a mudança cultural que um modelo JAMstack pode ter em sua organização e em seus projetos para que realmente alcance todo o lugar. Então, estou meio empolgado com isso. Também terei a chance de apresentar todas essas pessoas porque elas me deixaram enlouquecer e ser o MC também, o que significa que posso conversar com essas pessoas e fazer algumas perguntas e esse tipo de coisa. Então acho que deve ser muito interessante para quem está interessado em desenvolvimento front-end e também em novos modelos de entrega de projetos na web de forma realmente eficiente.

Vitaly: Ah, então você gosta dos holofotes no palco, hein?

Phil: Eu sou um buscador de atenção. Você já deve saber disso, Vitaly.

Vitaly: Ah, na verdade eu sempre pensei que você fosse uma pessoa muito humilde e legal e gentil, aparentemente eu era-

Phil: É um ato, é um ato.

Vitaly: Ok, tudo bem. Phil, vamos nos encontrar daqui a pouco, na verdade, amanhã.

Phil: Vejo você em breve para outro evento, mas, caso contrário, vejo você em julho, nos dias 9 e 10 de julho.

Vitaly: [inaudível 00:16:52] Então, com isso em mente, obrigado Phil e se despedindo. Adeus a todos.

Phil: Até breve.

Isso é um envoltório!

Estamos ansiosos para receber Phil na SmashingConf Toronto 2019, com uma sessão ao vivo no JAMstack. Adoraríamos vê-lo lá também!

Por favor, deixe-nos saber se você acha esta série de entrevistas útil, e quem você gostaria que entrevistássemos, ou quais tópicos você gostaria que abordássemos e nós vamos direto ao assunto!