Jiní kodéři si na něj netroufli, my jsme jej sestavili jako knihovnu react komponent

Služba Bezrealitky od roku 2009 propojuje zájemce o nemovitosti s jejich majiteli a pomáhá řešit záležitosti kolem bydlení – komunikaci, inzerci i právní služby. To vše on-line. Po sedmi letech od posledního redesignu jsme se znova potkali, abychom web posunuli zase o kus dál. Chopili jsme se více než 400 připravených wireframů a poskládali z nich knihovnu komponent pro nový web, který je moderní, intuitivní a stojí na aktuálních technologiích.

Se službou Bezrealitky jsme se seznámili už v roce 2014, kdy jsme jim pomohli s prvním redesignem webu.

Když byl na stole další redesign, měli v počátcích obavu, že je projekt až moc rozsáhlý a budou těžko hledat dodavatele. Proto jich oslovili více.

„Ačkoliv se to zvenčí nemusí zdát, náš web je hodně komplexní, obsahuje např. uživatelské profily, inzeráty, vyhledávání nemovitostí, mapy, generátor smluv, hlídací psy, elektronickou peněženku a mnoho dalších funkcionalit… Spoustu firem komplexita a provázanost našeho webu odradila, ale SUPERKODERS jako jediní hned řekli, že do toho s námi jdou. Navíc jsme s nimi měli pozitivní zkušenost z minulého redesignu, takže byli jasná volba,”

Daniela Veselá,
projektová manažerka Bezrealitky

Na základě podkladů jsme připravovali systém UI komponent v Reactu. Programátoři z Bezrealitky chtěli využít knihovnu React-Bootstrap, protože má dobrou komunitní podporu a je rozšiřitelná o základní interaktivní komponenty. Díky tomu byla i výsledná implementace UI snadnější a rychlejší.

Všechny komponenty jsme vyvíjeli izolovaně a atomicky. Jejich samotnou prezentaci jsme vyřešili pomocí interaktivního rozhraní Storybook. To nám umožnilo jednotlivé stavy dobře otestovat a zdokumentovat možnosti každého prvku.

„S vytvářením design systémů a spoluprací na velkých projektech máme bohaté zkušenosti. Použitelnost, přístupnost a rychlost načítaní jsou pro nás vždy prioritou, proto rádi vše stavíme na zelené louce. Kód máme pak více pod kontrolou a dokážeme zajistit stoprocentní výsledek. Zadání od klienta má ale přednost, takže požadované použití knihovny React-Bootstrap pro nás nebyl žádný problém.”

Petr Bulánek,
hlavní vývojář SUPERKODERS

Komponenty jsme podle designů nebo wireframů sestavili do finálních šablon. V Bezrealitky si tak mohli výsledek naší práce prohlédnout ještě předtím, než šel k 1:1 nasazení, o které se postarala firma iD-SIGN Externí odkaz . Pro zajištění maximální kvality jsme si nasimulovali produkční prostředí a provedli statický build všech šablon do HTML. Na nich jsme testovali rychlost a přístupnost frontendu.

„Při spolupráci se SUPERKODERS vím, že komunikuji s lidmi, kteří rozumí uživatelům i technologiím. Tím je mnohem snazší najít vhodné řešení. Vážím si bezproblémové a rychlé komunikace při vlastním vývoji i při sdílení postřehů.”

Jan Novák,
hlavní vývojář iD-SIGN

Zhruba první dva měsíce jsme se věnovali kódování jednotlivých komponent. Z těch se potom skládaly stránky. Systém komponent je nachystaný tak univerzálně, že se z nich může kdykoliv v budoucnu jednoduše sestavit nové stránky.

Celá spolupráce probíhala agilně – zadání se postupně rozšiřovalo a zpřesňovalo dle potřeby klienta. Za běhu se přidávaly i prvky a celé stránky, se kterými se původně nepočítalo (např. štítky, přihlášení k odběru newsletteru, stránka na pomoc Ukrajině apod.) Pro některé stránky nebyla navržená ani grafika, ale díky dobře připravenému design systému jsme je zvládli nakódovat i bez návrhu.

Knihovna React-Bootstrap je monolitická, všechny styly jsou tedy součástí jednoho souboru. Abychom pro každou stránku stahovali jen to potřebné a zrychlili načítání webu, kód jsme upravili tak, aby obsahoval jen prvky, které opravdu používáme. Výchozí styly některých komponent v sobě zahrnovaly pro nás nepotřebné stavy, takže jsme si místo toho napsali vlastní. Použili jsme technologii CSS modulů, která právě toto řeší. Například při vstupu na domovskou stránku se zbytečně nenačítají data pro stránky pro přihlášené uživatele.

Při kódování je pro nás samozřejmostí testování. Myslíme na všechny typy zařízení i prohlížečů a přístupnost pro handicapované. Dáváme si také záležet na použití webu jen s klávesnicí, aby se dal bez obtíží ovládat bez použití myši.

Hlídali jsme, aby všechny knihovny třetích stran byly použity v aktuální verzi, abychom nevytvářeli technický dluh ještě před spuštěním projektu. V průběhu kódování nastala třeba situace, kdy pro jednu komponentu vyšla nová major verze, která měla dost změn oproti původní použité. Mohli jsme ji nechat tak a říct, že komponenta pojede jen na jedné verzi, my jsme se ale rozhodli komponentu celou přepsat, aby fungovala na všech.

Unikátním prvkem na webu Bezrealitky je kalendář prohlídek přístupný uživatelům po přihlášení. Majitel nemovitosti vytvoří různě dlouhé časové sloty, do kterých se zájemce může přihlásit. Oba pak mohou své domluvené prohlídky jednoduše spravovat. Výzvou bylo zejména vytvořit kalendář plně responzivní a ovladatelný na různě velkých zařízeních.

„Kódování kalendáře prohlídek zahrnovalo hodně vymýšlení a postupných iterací. Z výsledku mám ale radost.”

Petr Bulánek,
hlavní vývojář SUPERKODERS

Bezrealitky stále pracuje na zlepšování svých služeb, s čímž budou souviset občasné úpravy na webu. Takže zůstaneme ve spojení a rádi jim pomůžeme v další fázi redesignu.