Era um dia ensolarado em Cambridge em agosto de 2017… membros da equipe da Web Jagex acabaram de lançar as páginas responsivas 'Criar Conta' para RuneScape e Old School. Finalmente, os jogadores em dispositivos móveis poderiam criar contas através do nosso site de maneira mais fácil e rápida do que nunca. Nossa estrutura responsiva usou o melhor de nossas linguagens escolhidas para fornecer uma interface elegante e limpa. Estávamos aproveitando o layout de grade do Zurb Foundation 6 e a abordagem de Design Atômico que nos permitiu transformar nosso fluxo de criação de contas legado em uma quinzena.

Página de Criação de Conta do RuneScape

Mas algo estava faltando…

Sabíamos que o sistema era bom, mas apesar de nossos avanços e execução técnica em alta velocidade, não podíamos chamá-lo de verdadeiramente 'grande'. No mundo do desenvolvimento web moderno, a velocidade de carregamento da página é tudo e nosso novo sistema responsivo ainda estava faltando velocidade!

O tempo de nossos usuários é um recurso muito limitado. Precisamos levar informações a eles o mais rápido possível. A Engenharia de Usabilidade da Nielsen sugere que 10 segundos é o limite para manter a atenção de um usuário. Entregar sites rápidos de forma confiável estava se tornando cada vez mais desafiador por várias razões – e a mais proeminente era a tecnologia antiga.

Como exemplo, estimativas aproximadas mostraram que, em alguns casos, o site corporativo da Jagex demoraria mais de 20 segundos para carregar por uma conexão 3G padrão de um usuário na Califórnia, EUA. Pesquisas mostraram que, para cada segundo que seu site móvel leva para carregar, as conversões caem em até 20%! Algo tinha que mudar.

Jagex.com

A Jagex foi fundada em 1999 pelos irmãos Gower – os magos que construíram tudo, desde o motor do jogo e a linguagem de script até sua própria plataforma web. A escala de sua arquitetura era impressionante; no entanto, mantê-la estava se tornando cada vez mais complicado. Mesmo com melhorias como a nossa transição para o Freemarker, que nos afastou bem da linguagem de template proprietária mais antiga, chamada WebScript, era hora da equipe da Web começar a pensar em como poderíamos ser radicalmente mais rápidos.

Código WebScript

Para melhorar nosso desempenho, precisávamos começar do zero e considerar novas abordagens para alinhar nossa pilha de tecnologia com os padrões modernos de desempenho. As pessoas costumam usar o termo 'nuvem' como a solução para todos os problemas técnicos. Descobrimos que, embora a nuvem tivesse escalabilidade e potencialmente velocidade, ela abriu um abismo de outros problemas, incluindo segurança, custos e treinamento de desenvolvedores.

Como todas as ideias verdadeiramente visionárias, nossa solução levaria tempo – muito tempo. A ponto de aqueles de fora da equipe poderiam até dizer que, durante grandes períodos de tempo, parecia que nenhum progresso estava sendo feito. A busca por nosso futuro web nos levou aos três grandes provedores de nuvem: Google Cloud, AWS e Microsoft Azure. Também revisamos várias soluções gerenciadas como Heroku e Netlify antes de finalmente nos decidirmos pela AWS. Precisávamos de um provedor confiável com funcionalidade existente e flexibilidade para expandir quando a empresa exigisse, e o conjunto de ferramentas ampliado oferecido pela AWS atendia a esses requisitos.

Mas a infraestrutura não era o único problema que precisávamos resolver. Para entregar páginas web dinâmicas em nossa plataforma atual, precisaríamos de desenvolvedores com conhecimento em Java, Freemarker, CSS e JS para fornecer uma página que fosse adequada para os usuários finais. Isso frequentemente exigia dois desenvolvedores (front e back end) por página, o que muitas vezes diminuía nossa velocidade de projeto.

Então, como poderíamos resolver isso? E se pudéssemos usar uma única linguagem para fazer o backend, a lógica de template e o comportamento front-end? Bem, fizemos uma viagem ao mundo do JavaScript como uma linguagem de back-end (fazendo a lógica antes mesmo de começar a desenhar a página). Podíamos sentir todos os desenvolvedores de back-end estremecerem só de sugerir tal coisa – a reputação do JavaScript talvez unfairmente preceda a si mesma. A verdade é que é como a maioria das linguagens - use-a de forma criativa e apropriada e você pode fazer tarefas incríveis com ela – mas com grande poder vem grande responsabilidade. Precisávamos ter confiança na qualidade do nosso código e, para facilitar isso, decidimos usar o TypeScript. No TypeScript, todas as nossas variáveis e funções têm tipagem estrita, o que impede que aqueles problemas preguiçosos do JavaScript apareçam.

Também implementamos EJS como uma linguagem de template em vez do Freemarker. Isso significava que tanto a lógica de backend quanto de template usava métodos do JavaScript. Portanto, poderíamos reduzir a dependência de desenvolvedores precisando conhecer diferentes linguagens.

Finalmente, implementamos SCSS com a versão mais recente do Zurb Foundation para lidar com a estética da página, permitindo-nos produzir layouts complicados com CSS reutilizável e organizado. Um framework de aplicação web Node.js então une tudo isso para servir nossas páginas web ao mundo.

Para testar com precisão o desempenho da nossa nova implementação, escolhemos um site pequeno para usar como referência. O site da empresa era o candidato perfeito e nos permitiu comparar o desempenho com nosso sistema mais antigo sem afetar o acesso ao jogo.

Nossas descobertas foram muito encorajadoras, pois reduzimos mais de 40% do nosso tempo total de carregamento. A nova plataforma funcionou, mas precisávamos de um CMS por trás dela para permitir que outros funcionários pudessem alterar o conteúdo da página sem a necessidade de um desenvolvedor.

O CMS que finalmente escolhemos foi o poderoso Contentful. O poder e a versatilidade deste CMS nos permitiram alterar rapidamente o conteúdo da página, mas mantendo flexibilidade. Com tudo isso junto, chamamos o projeto de Merlin – o futuro dos Serviços de Tecnologia da Jagex.

Você está, na verdade, lendo um dos primeiros artigos de blog servidos a partir da plataforma Merlin, junto com o restante de Jagex.com e RuneFest.com. Logo depois disso, também começamos a mover RuneScape.com para a nova plataforma com o World Out of Time mini-site.

Mini-site World Out of Time

O futuro de nossa pilha de tecnologia está cada vez mais brilhante à medida que avançamos por 2019 com mais conhecimento e compreensão do que nunca. Estamos fazendo grandes avanços, mas colocando nossos pés em solo firme.

Quer se juntar a nós na formação do futuro da tecnologia da Jagex? Acesse a página carreiras para as oportunidades atuais e nos ajude a reformular a maneira como entregamos conteúdo.