L'équipe technologique de Jagex a beaucoup appris de 2019 dans nos plans pour le avenir du web chez Jagex. Nous avons fait de grands progrès avec TypeScript, Node.js, Contentful et EJS pour offrir des expériences web. Ainsi, la scène était prête pour avancer vers des projets plus ambitieux et tirer parti de nouvelles approches pour soutenir les ambitions créatives de nos équipes de développement.

Nous avons fièrement poursuivi nos efforts depuis le "Projet Merlin" de 2019, en livrant plus de contenu sur la nouvelle pile technologique et en créant des expériences intéressantes et engageantes pour les joueurs, telles que la Carte des Souvenirs RuneFest et le mini-site World Out of Time, qui ont vraiment donné aux développeurs l'occasion de montrer ce que nous pouvions réaliser.

La Carte des Souvenirs était une carte interactive à la fois de RuneScape et de Old School RuneScape qui permettait au joueur d'annoter ses souvenirs sur une carte à partager avec le monde. C'était un exemple parfait d'un projet personnel porté par une poignée de développeurs et construit à une vitesse fulgurante pour être présenté lors de RuneFest 2019!

Nous avions la plateforme pour construire ces idées merveilleuses et faire avancer l'expérience web de Jagex en révolutionnant notre front-end, mais nous avions besoin d'un moyen de standardiser la mise en œuvre et les visuels de l'expérience utilisateur tout en rendant le processus fluide et rapide à développer.

Jusqu'à récemment, nous utilisions une large gamme de feuilles de style inconsistantes et souvent encombrantes, généralement compilées à partir de SASS via Gulp ou Webpack, pour styliser nos pages. Malgré l'utilisation de méthodologies de structure CSS telles que BEM pour organiser notre style, cela a commencé à devenir insoutenable et provoquait progressivement de plus en plus d'incohérences visuelles. Notre TypeScript en constante augmentation pour la logique front et back-end devenait également de plus en plus déconnecté de l'expérience utilisateur et difficile à gérer efficacement. Même avec tous les avantages de la nouvelle plateforme, nous livrions encore au final des pages web HTML statiques qui, bien qu'étant un pas en avant, avaient un coût en augmentation. Même nos meilleurs efforts pour progresser commençaient à revenir en arrière et à devenir ce dont nous avions essayé de nous éloigner. Nous avions besoin d'un moyen de standardiser nos mises en œuvre et de garder notre code fonctionnel cohérent avec notre style...

Entrez React.js, un framework d'application web maintenu par Facebook qui est utilisé pour offrir des expériences à la fois nativement et dans un navigateur.

Depuis fin 2019, l'équipe technologique collabore avec Sperasoft Studios en Russie pour nous aider à réaliser les plans ambitieux que l'entreprise a pour l'avenir. Grâce à leur richesse de connaissances et à nos nouvelles recrues, l'équipe et même l'entreprise plus large ont pu rapidement monter en compétences en React et ont immédiatement commencé à mettre en œuvre des solutions dans ce nouveau cadre.

Parmi les nombreux avantages de l'adoption de React.js, l'un des plus controversés à l'époque était CSS-in-JS. Au lieu de maintenir de grandes feuilles CSS, nous les ajouterions en ligne à l'intérieur des composants React. Au début, je n'étais pas convaincu par le nouveau paradigme, mais à mesure que nous travaillions avec ces nouvelles techniques, les avantages ont commencé à se manifester. Nous n'étions plus obligés d'écrire des centaines de classes CSS pour changer l'état visuel de quelque chose sur la page - cette logique pouvait être réalisée à l'aide de variables JavaScript et notre compilation s'occupait du reste pour nous.

“Le design est un mot drôle. Certaines personnes pensent que le design signifie à quoi cela ressemble. Mais bien sûr, si vous creusez plus profondément, cela concerne vraiment comment cela fonctionne.” - Steve Jobs

Cela nous a cependant présenté le problème que nous risquions de dupliquer les styles et composants un peu partout entre nos projets. La solution à ce problème s'est révélée être la création de notre propre système de design. Le département a fait des progrès pour y parvenir dans le passé. Cependant, le coût du maintien manuel d'une base de code séparée affectait négativement notre vitesse de livraison.

Ainsi, nous nous sommes tournés vers Storybook. Cet outil nous a permis de mettre en place une bibliothèque pour définir tous nos composants React.js et de les exporter vers nos divers autres produits React. Cela a permis aux développeurs de travailler en étroite collaboration avec les designers pour rapidement exporter des conceptions de Figma vers Storybook et d'avoir les composants non seulement affichés mais aussi contrôlables dans le navigateur. Ainsi, les designers pouvaient l'utiliser pour vérifier les visuels de tout composant donné en isolation ou en groupe, avant qu'il n'entre dans un projet orienté client.

Pour aider à l'efficacité de cette approche, nous avons également utilisé Theme-UI pour gérer la configuration des styles et nous donner quelques composants de base plutôt que de devoir réinventer complètement la roue. Avec tout cela en combinaison, les différentes équipes Scrum ont pu développer une vaste bibliothèque de composants à partager entre divers projets et départements.

Avec le versionnage sémantique, les équipes pouvaient avoir confiance en la mise à niveau de la dépendance de leurs projets vis-à-vis de ce système de design lorsqu'elles le souhaitaient. Soudain, nous avons trouvé le maillon manquant dans la chaîne qui signifiait que nous pouvions maintenir une expérience front-end d'une qualité constante élevée entre nos différents projets.

Il n'a jamais été aussi excitant de travailler dans la technologie chez Jagex alors que nous ouvrons la voie à des projets véritablement inspirants. Nous avons parcouru un long chemin depuis un langage de templating sur une infrastructure archaïque jusqu'à notre situation actuelle.

Vous voulez nous aider à aller encore plus loin - postulez dès aujourd'hui sur https://www.jagex.com/careers