Nový web Bezrealitky: 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.
Sladění představ a postup práce
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,“ uvádí 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, 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. 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 front-endu.
Jan Novák z firmy iD-SIGN, se kterým jsme byli po celou dobu v kontaktu, říká: „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ů.“
Kompletní knihovna komponent a stovky stránek
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.
Weby kódujeme tak, aby se líbily prohlížečům i lidem
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.
„SUPERKODERS byli skvělým parťákem na takto komplexní projekt. Vzhledem k agilnímu vývoji se zadání často doplňovala, upřesňovala nebo se kvůli technickým možnostem musela úplně změnit. Také se občas stalo, že jsme v zadání něco opomněli. Vůbec jsme třeba nemysleli na funkčnost v prohlížeči Safari. To všechno oni dělali automaticky, stejně jako tagy pro SEO, meta popisky a další optimalizace. Vždy nám předali odladěný výsledek,“ Daniela Veselá, projektová manažerka Bezrealitky.
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.
Vzniká komunikační platforma pro zájemce o nemovitost
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,“ dodává Petr Bulánek.
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.
„Na každý status call se SUPERKODERS jsem se těšila, jelikož spolupráce s nimi byla milá a příjemná. Překvapila mě jejich proaktivita a naše celková synergie. Kdykoliv bylo něco potřeba udělat, vyřešili to obratem. Příjemný bonus pro mě byl, že mají projekťačku holku, což v IT sféře nebývá časté,“ Daniela Veselá, projektová manažerka Bezrealitky.
Chceš s námi pracovat na projektech Českého rozhlasu, úspěšných
e-shopech Alkohol.cz, Calibra nebo třeba programovat nový “Netflix”?
