A equipe de tecnologia da Jagex aprendeu muito com 2019 em nossos planos para o futuro da web na Jagex. Fizemos grandes avanços com TypeScript, Node.js, Contentful e EJS para entregar experiências na web. Portanto, o palco estava preparado para avançar para projetos mais grandiosos e aproveitar novas abordagens para apoiar as ambições criativas de nossas equipes de desenvolvimento.

Orgulhosamente avançamos a partir do "Projeto Merlin" de 2019, entregando mais conteúdo na nova pilha tecnológica e criando experiências interessantes e envolventes para os jogadores, como o Mapa da Memória do RuneFest e o mini-site World Out of Time, que realmente deram aos desenvolvedores a chance de mostrar o que podíamos alcançar.

O Mapa da Memória era um mapa interativo tanto de RuneScape quanto de Old School RuneScape que permitia ao jogador marcar suas memórias em um mapa para compartilhar com o mundo. Foi um exemplo perfeito de um projeto pessoal defendido por alguns desenvolvedores e construído em uma velocidade impressionante para ser exibido no RuneFest 2019!

Tínhamos a plataforma para construir essas ideias maravilhosas e avançar na experiência web da Jagex, revolucionando nosso front-end, mas precisávamos de uma maneira de padronizar a implementação e a aparência da experiência do jogador, enquanto tornávamos o processo ágil e rápido de desenvolver.

Até recentemente, usamos uma ampla gama de folhas de estilo inconsistentes e frequentemente incómodas, geralmente compiladas a partir de SASS via Gulp ou Webpack, para estilizar nossas páginas. Apesar de usar metodologias de estrutura CSS como BEM para organizar nosso estilo, isso começou a se tornar insustentável e estava causando progressivamente mais inconsistências visuais. Nosso TypeScript em crescimento para lógica de front-end e back-end também estava se tornando mais desconectado da experiência do usuário e difícil de gerenciar de maneira eficiente. Mesmo com todos os ganhos da nova plataforma, ainda estávamos entregando páginas web em HTML plano que, embora fossem um avanço, vinham a um custo crescente. Até nossos melhores esforços para progredir estavam começando a retroceder e se tornar exatamente aquilo do qual tentamos nos afastar. Precisávamos de uma maneira de padronizar nossas implementações e manter nosso código funcional coeso com nosso estilo...

Entre em cena o React.js, um framework para aplicações web mantido pelo Facebook, usado para entregar experiências tanto de forma nativa quanto em um navegador.

Desde o final de 2019, a equipe de tecnologia tem cooperado com Sperasoft Studios na Rússia para nos ajudar a entregar os planos ambiciosos que a empresa tem para o futuro. Com sua riqueza de conhecimento e nossas próprias novas contratações, a equipe e até mesmo a empresa mais ampla foram capazes de rapidamente se aprimorar em React e imediatamente começaram a implementar soluções neste novo framework.

Das muitas vantagens de adotar o React.js, uma das mais controversas na época era o CSS-in-JS. Em vez de manter grandes folhas de CSS, estaríamos adicionando-as inline dentro dos componentes React. A princípio, eu não estava convencido pelo novo paradigma, mas à medida que trabalhamos com essas novas técnicas, os benefícios começaram a se destacar. Não estávamos mais forçando a nós mesmos a escrever centenas de classes CSS para mudar o estado visual de algo na página – essa lógica poderia ser feita usando variáveis JavaScript, e nossa compilação cuidava do resto para nós.

“Design é uma palavra engraçada. Algumas pessoas pensam que design significa como se parece. Mas, é claro, se você investigar mais a fundo, é realmente como funciona.” - Steve Jobs

Isso, no entanto, nos apresentou o problema de que corremos o risco de duplicar estilos e componentes por toda parte entre nossos projetos. A solução para esse problema acabou sendo construir nosso próprio sistema de design. O departamento fez progressos para alcançar isso no passado. Contudo, o custo de manter manualmente uma base de código separada afetou adversamente nossa velocidade de entrega.

Então, voltamos-nos para Storybook. Essa ferramenta nos permitiu criar uma biblioteca para definir todos os nossos componentes React.js e depois exportá-los para nossos vários outros produtos React. Isso possibilitou que os desenvolvedores trabalhassem em estreita colaboração com os designers para rapidamente exportar designs do Figma para o Storybook e ter os componentes não apenas exibidos, mas também controláveis dentro do navegador. Assim, os designers puderam usá-lo para verificar os visuais de qualquer componente em isolamento ou em grupo, antes de entrar em um projeto voltado para o cliente.

Para ajudar na eficiência dessa abordagem, também usamos Theme-UI para cuidar da configuração dos estilos e nos dar alguns componentes básicos, em vez de termos que reinventar a roda totalmente. Com tudo isso em combinação, as várias equipes de scrum foram capazes de desenvolver uma vasta biblioteca de componentes para compartilhar entre vários projetos e departamentos.

Com versionamento semântico, as equipes podiam ter confiança em atualizar a dependência de seus projetos deste sistema de design quando desejassem. De repente, encontramos o elo perdido na corrente que significava que poderíamos manter a experiência do front-end de qualidade consistente entre nossos vários projetos.

Nunca houve um momento mais empolgante para trabalhar em tecnologia na Jagex enquanto pavimentamos o caminho para alguns projetos verdadeiramente inspiradores. Já percorremos um longo caminho desde uma linguagem de modelagem sob medida em uma infraestrutura arcaica até onde estamos agora.

Quer nos ajudar a avançar para ainda maiores alturas – candidate-se hoje em https://www.jagex.com/careers