Das Technologie-Team bei Jagex hat aus dem Jahr 2019 viel gelernt für unsere Pläne zur Zukunft des Webs bei Jagex. Wir haben enorme Fortschritte mit TypeScript, Node.js, Contentful und EJS gemacht, um Web-Erlebnisse zu liefern. So war die Bühne bereitet, um mit größeren, ehrgeizigen Projekten voranzukommen und neue Ansätze zu nutzen, um die kreativen Ambitionen unserer Entwicklungsteams zu unterstützen.

Wir haben stolz von 2019's "Projekt Merlin" vorangetrieben und mehr Inhalte auf dem neuen Tech-Stack geliefert und interessante und ansprechende Erlebnisse für die Spieler geschaffen, wie die RuneFest Memory Map und die World Out of Time Mini-Website, die den Entwicklern wirklich die Gelegenheit gab, zu zeigen, was wir erreichen konnten.

Die Memory Map war eine interaktive Karte von sowohl RuneScape als auch Old School RuneScape, die es dem Spieler ermöglichte, seine Erinnerungen auf einer Karte zu markieren und mit der Welt zu teilen. Es war ein Paradebeispiel für ein persönliches Projekt, das von einer Handvoll Entwicklern gefördert und in atemberaubendem Tempo gebaut wurde, um bei RuneFest 2019 präsentiert zu werden!

Wir hatten die Plattform, um diese wunderbaren Ideen zu entwickeln und Jagexs Web-Erfahrung voranzubringen, indem wir unser Front-End revolutionierten, aber wir benötigten eine Möglichkeit, die Implementierung und das visuelle Erscheinungsbild der Spielerfahrung zu standardisieren, während wir den Entwicklungsprozess reibungslos und schnell gestalten konnten.

Bis vor kurzem verwendeten wir eine breite Palette inkonsistenter und oft umständlicher Stylesheets, die normalerweise aus SASS über Gulp oder Webpack kompiliert wurden, um unsere Seiten zu stylen. Trotz der Verwendung von CSS-Strukturmethodologien wie BEM, um unser Styling zu organisieren, begann dies, unhaltbar zu werden und führte progressiv dazu, dass immer mehr visuelle Inkonsistenzen durchschlugen. Unser ständig wachsendes TypeScript für Front- und Back-End-Logik wurde auch zunehmend vom Benutzererlebnis abgekoppelt und schwer effizient zu verwalten. Selbst mit all den Vorteilen der neuen Plattform lieferten wir letztlich dennoch flache HTML-Webseiten, die zwar einen Schritt nach vorne darstellten, aber mit steigenden Kosten verbunden waren. Selbst unsere besten Bemühungen, Fortschritte zu machen, begannen sich zurückzudrehen und wurden zu dem, wovon wir versucht hatten, uns zu entfernen. Wir benötigten eine Möglichkeit, unsere Implementierungen zu standardisieren und unseren funktionalen Code kohärent mit unserem Styling zu halten…

Hier kommt React.js ins Spiel, ein von Facebook gepflegtes Webanwendungs-Framework, das verwendet wird, um Erlebnisse sowohl nativ als auch im Browser zu liefern.

Seit Ende 2019 arbeitet das Technologie-Team mit Sperasoft Studios in Russland zusammen, um uns bei der Umsetzung der ehrgeizigen Pläne des Unternehmens voranzubringen. Mit ihrem Wissensschatz und unseren eigenen Neueinstellungen konnte das Team und sogar die gesamte Firma schnell in React aufsteigen und begann sofort, Lösungen in diesem neuen Framework zu implementieren.

Von den vielen Vorteilen, die die Annahme von React.js mit sich bringt, war einer der umstrittensten zu dieser Zeit CSS-in-JS. Anstatt große CSS-Stylesheets zu pflegen, würden wir sie inline innerhalb der React-Komponenten hinzufügen. Zunächst war ich von dem neuen Paradigma nicht überzeugt, aber als wir mit diesen neuen Techniken arbeiteten, begannen die Vorteile hervorzuheben. Wir waren nicht mehr gezwungen, Hunderte von CSS-Klassen zu schreiben, um den visuellen Zustand von etwas auf der Seite zu ändern – diese Logik konnte mit JavaScript-Variablen erledigt werden und unsere Kompilierung kümmerte sich um den Rest für uns.

„Design ist ein lustiges Wort. Einige Leute denken, Design bedeutet, wie es aussieht. Aber natürlich, wenn man tiefer gräbt, geht es wirklich darum, wie es funktioniert.“ - Steve Jobs

Dies stellte uns jedoch vor das Problem, dass wir das Risiko der Duplizierung von Styles und Komponenten zwischen unseren Projekten eingehen konnten. Die Lösung für dieses Problem stellte sich als der Aufbau unseres eigenen Design-Systems heraus. Die Abteilung hat in der Vergangenheit Schritte unternommen, um dies zu erreichen. Allerdings beeinträchtigte die Kosten für die manuelle Pflege einer separaten Codebasis unsere Liefergeschwindigkeit negativ.

Also wandten wir uns an Storybook. Dieses Tool ermöglichte es uns, eine Bibliothek zu erstellen, um all unsere React.js-Komponenten zu definieren und sie dann in unsere verschiedenen anderen React-Produkte zu exportieren. Dies ermöglichte den Entwicklern, eng mit den Designern zusammenzuarbeiten, um Designs schnell aus Figma in Storybook zu exportieren und die Komponenten nicht nur anzuzeigen, sondern auch im Browser steuerbar zu machen. Daher konnten Designer es verwenden, um das visuelle Erscheinungsbild einer beliebigen Komponente isoliert oder als Gruppe zu überprüfen, bevor sie in ein kundenorientiertes Projekt eingeführt wurden.

Um die Effizienz dieses Ansatzes zu unterstützen, verwendeten wir auch Theme-UI, um die Stile zu konfigurieren und uns einige grundlegende Komponenten zu geben, anstatt das Rad vollständig neu zu erfinden. In Kombination mit all dem konnten die verschiedenen Scrum-Teams eine umfangreiche Bibliothek von Komponenten entwickeln, die über verschiedene Projekte und Abteilungen hinweg geteilt werden konnten.

Mit der semantischen Versionierung konnten die Teams darauf vertrauen, die Abhängigkeit ihres Projekts von diesem Design-System bei Bedarf zu aktualisieren. Plötzlich fanden wir das fehlende Glied in der Kette, das bedeutete, dass wir die Front-End-Erfahrung über unsere verschiedenen Projekte hinweg in gleichbleibend hoher Qualität halten konnten.

Es gab nie eine aufregendere Zeit, in der Technologie bei Jagex zu arbeiten, während wir den Weg für einige wahrhaft inspirierende Projekte ebneten. Wir sind einen langen Weg von einer maßgeschneiderten Template-Sprache auf einer veralteten Infrastruktur dorthin gekommen, wo wir jetzt stehen.

Willst du uns dabei helfen, zu noch größeren Höhen vorzustoßen – bewirb dich noch heute unter https://www.jagex.com/careers