Jak modernizovat 10 let starý systém? Nebát se výrazných změn a začít o datech přemýšlet jinak

Livesport
Livesport
Jul 1 · 5 min read
Image for post
Image for post

Administrační systém jedné z největších sportovních databází na světě budujeme už více než deset let. S rostoucími požadavky na další rozvoj jsme potřebovali zvýšit naši produktivitu a usnadnit si práci moderními technologiemi i novým pohledem na zacházení s velkým množstvím dat. Proto jsme si vyvinuli systém, díky kterému se můžeme naplno věnovat tomu, co je důležité pro naše uživatele.

Image for post
Image for post
Nástroj pro přiřazení uživatelů (data administrátorů) k live plněným zápasům.

Historicky prvním live sledovaným zápasem bylo památné finále Petry Kvitové a Marie Sharapovové ve Wimbledonu 2011. Od mimořádného utkání uplynulo už téměř 10 let a za tu dobu se i naše administrace plnění sportovních dat změnila k nepoznání. V roce 2011 jsme měli systém postavený na PHP a jQuery, které byly v té době na vrcholu své slávy. V situaci, kdy potřebujeme velmi rychlé aktualizace, vykreslování dynamických dat do prohlížeče bez zbytečného reloadování, počítání v reálném čase a mnoho dalšího, už ale tyto technologie nezvládají držet krok. Na to jsme museli reagovat a nahradit PHP i slabý JavaScript podporovaný jQuery těmito modernějšími a “silnějšími” technologiemi.

Naším cílem nebylo dostat je do systému jen kvůli dobrému pocitu a chlubení, jak jdeme s dobou. Především jsme chtěli ulehčit práci nám — vývojářům, abychom se mohli co nejvíce soustředit na aplikační logiku a potřeby uživatelů a neztráceli čas i pozornost rutinními činnostmi.

Zároveň jsme si potřebovali zachovat vysokou flexibilitu a možnost vlastní customizace (convention over configuration). V praxi to pak například znamená to, že jako programátoři řešíme především co chceme s daty dělat, ne jakým způsobem je načíst a uložit. Zároveň ale máme možnost pohodlně sestavit svůj dotaz na míru a data si obstarat vlastní cestou.

React a Node.js, ideální pro integraci

Vzít obrovskou aplikaci a přepsat ji do něčeho, “co zrovna frčí”, je samozřejmě tak trochu utopie.

Od začátku jsme si uvědomovali, že technologie i nové postupy nepůjde jen tak vyměnit, ale že budou muset žít určitou dobu vedle sebe. Nejen proto, že původního kódu jsou desetitisíce řádků. Během zavádění novinek je také stále nutné pracovat na dalších funkcích a vylepšeních ve stávajícím řešení.

I proto jsme si pro frontend vybrali React, jenž jde bez větších bolestí obousměrně integrovat i se starším JS kódem.

Jako hlavní backend technologii jsme zvolili Node.js. Díky tomu je sdílení business logiky mezi backendem a frontendem skutečně hračka. Obě technologie používají Typescript a my tak můžeme přímo sdílet samotný zdrojový kód. Typescript se ukázal jako neocenitelný pomocník i hlídač. Zajišťuje výrazně čitelnější a vůči chybám také odolnější kód.

Jádrem je datové schéma

Za základ našeho systému považujeme datové schéma — obecný popis dat, s nimiž systém pracuje. Na základě definice vlastností datových entit a vazeb mezi nimi pak můžeme automatizovat různé procesy, např. odstínit uživatele od komunikace s datovým úložištěm. Schéma v mnohém připomíná konfiguraci pro tradiční ORM frameworky jako Hibernate (Java) či Doctrine (PHP), jenže my pracujeme se schématem na backendu i na frontendu.

Díky schématu máme o každém atributu spoustu užitečných informací. Popisek, datový typ, reference na jiné entity (one-to-many, many-to-one, one-to-one), validační pravidla, výchozí hodnoty a řadu dalších vlastností umožňujících customizovat UI (options, input type …). Pro každý datový typ existuje výchozí React komponenta pro režim čtení i zápisu a s nimi si většinou bohatě vystačíme. Pokud potřebujeme použít vlastní komponentu, není problém ji pro danou situaci zaregistrovat a přepsat chování výchozí komponenty. V praxi jsme schéma schopni na frontendu využít např. pro generování celých formulářů pro správu dat i vybraných inputů.

Image for post
Image for post
Formulář v Reactu.

Přehled v každém okamžiku

Jedním ze základních požadavků na real time aplikace obecně je co nejrychlejší propagace změn. Akce jednoho uživatele by se řádově do sekundy měla projevit u všech ostatních, aby měli jistotu, že pracují s aktuálními informacemi. Abychom toho docílili, data načtená z datového úložiště uchováváme lokálně v tzv. storech, což vedle cachování umožňuje i porovnávat lokální změny s originálním stavem.

K rychlé reakci na změnu v datech nám pak slouží notifikační push mechanismus, který relevantní změny zpropaguje až do React komponent. Díky propagaci změn máme stále k dispozici aktuální stav a jasný přehled o tom, co se změnilo. Při potvrzení úprav pak k uložení na backend posíláme jen balík změn.

Image for post
Image for post
Formuláře (sportovní pavouk) — to nejsou jenom jednoduchá statická data.

Při práci s našimi lokálními úložišti evidujícími originální stav i veškeré lokální změny potřebujeme často pracovat s daty hierarchicky či izolovaně. Příkladem hierarchického přístupu je, když nechceme ukládat změny na datech rovnou do databáze, ale pouze určitým způsobem tyto změny a ovlivněná data promítnout do relevantních komponent. Izolováním pak myslíme situace, kdy pracujeme paralelně se stejnými daty a nechceme, aby docházelo ke vzájemnému ovlivňování, dokud se finálně nepotvrdí uložení změn.

Data ve větvích

Zavedli jsme proto izolované prostory reprezentující kontejnery lokálních úložišť, které jsme nazvali větve — branches, protože v praxi skutečně tvoří datovou strukturu strom. Stav odpovídající vzdálenému datovému úložišti reprezentuje hlavní větev — master a z ní pak vychází další větve tvořící stromovou hierarchii.

V každé větvi pak můžeme nezávisle na ostatních větvích izolovaně pracovat s daty. Veškerá editace se na pozadí průběžně propaguje do lokální úložišť a systém v každou chvíli přesně ví, jaká data se lokálně změnila i jaká byla jejich původní hodnota. Pokud vám použité názvosloví něco připomíná, přiznáváme, že podobnost s Gitem není náhodná :)

Image for post
Image for post
Ukázka debug nástroje se stavy, ve kterých se data nacházejí.

Máme tak nastavený upgrade proces více než 10 let starého systému, kde vedle sebe dobře fungují různé technologie a přístupy. Můžeme proto inkrementálně postupovat v modernizaci, zároveň řešit standardní agendu i podporu a dál fungovat jako spolehlivá a pevná páteř celého Livesportu.

Zaujalo tě, co v Livesportu děláme? Přidej se k nám!

Livesport Dev

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store