Eladó ingatlanok meghirdetésére szolgáló weboldal fejlesztésének néhány lépésébe enged bepillantást vendégszerzőnk alábbi írása. A wequire.homes weblapjának érdekessége, hogy segítségével az eladók közvetlenül, a jutalékot felszámító ingatlanosok kihagyásával érhetik el az érdeklődőket saját készítésű hirdetéseikkel. Ennél azonban tovább mentek: lakberendezési kalauzt készítettek, tanácsokat adnak a profi ingatlanfotózáshoz, sőt össze is kötik a szakemberekkel a tulajdonosokat.
- Induláskor, 2020 elején mi is kipróbáltuk az ismert weboldal-készítőket, mint a Wix vagy a WordPress, ám nagyon hamar világossá vált, hogy egyik platform sem tudja nyújtani azt a testreszabhatóságot és flexibilitást, amire szükségünk van. Ezért úgy döntöttünk, hogy nulláról kezdünk el építkezni, számol be a kezdetekről a startup társalapítója, Soós Róbert. - A komponenseket illetően a lehető legegyszerűbb összeállítással indultunk. Ez egy Java/Spring-alapú backend API-t és egy React SPA (single-page application) frontendet jelentett. Ami a platformot illeti, az ár-érték arány és az egyszerű infrastruktúrával kapcsolatos igényeink miatt a Herokura (platform mint szolgáltatás, PaaS) esett a választás. Ám mivel nem akartunk elveszni a nagyon egyedi megoldásokban, elkezdtük feltérképezni az Amazon Web Services (AWS) nyújtotta lehetőségeket is.
Áttérés SSR frameworkre - Next.js: Amint a frontend elért az MVP (minimum viable product) fázisába, világossá vált, hogy a kliens oldalon renderelt SPA sem lesz nyerő. Nehezen tudtunk volna rá működő SEO-stratégiát építeni. Nem mintha az SPA-k nem volnának SEO-kompatibilisek, de az optimalizáció korántsem olyan egyszerű és egyértelmű.
Szerencsére cégünk még mindig kezdeti fázisban volt, így tudtunk még jobb megoldásra váltani; ez volt a szerveroldali renderelés (SSR), azon belül a Next.js. Ezt az ingyenes, nyílt forráskódú keretrendszert kifejezetten a Reacttel való együttműködésre találták ki, és mellette szólt az egyre bővülő felhasználói kör is.
Képminőség és oldalsebesség-optimalizáció: Idejében elkezdtük feltérképezni az AWS nyújtotta lehetőségeket. A képoptimalizáció azért volt különösen érdekes számunkra, mert az ingatlanokat megjelenítő oldal kifejezetten magas felbontású képek feltöltésére ösztönzi a felhasználókat. Természetesen a nagy képméret a letöltési sebesség rovására megy, különösen mobileszközökön. Ennek kiküszöbölése érdekében kezdtük el használni az AWS Lambda/Lambda@Edge szolgáltatásokat, hogy képeinket röptében módosíthassuk, méretezhessük. A költséghatékonyság érdekében nem akartuk harmadik fél (Cloudinary, Imgix) szolgáltatásait igénybe venni, egy egyszerű lambda függvény megfelelt az igényeinknek.
Képeinket S3-ban tároljuk. Amikor kérelem érkezik fotó betöltésére, azokat a megfelelő dimenzióban és fájlformátumban tudjuk előhívni, miközben a módosított verziót is mentjük. Ezenfelül természetesen mind a képeket, mind a forrásokat (JS, CSS) cache-eljük CloudFronton, így azokat nem közvetlenül az S3-ból kell betölteni.
Kiadások csökkentése AWS-sel: Minden vállalkozás keresi a költségcsökkentési lehetőségeket. Mi ezt a teljes frontend átköltöztetésében találtuk meg. Búcsút intettünk a Herokunak, és áttértünk az AWS ECS-re. Ezzel nem csak a költségek csökkentek, de a komponensek testreszabásának lehetőségei is javultak.
További kihívások és célok: Az egyik legnagyobb kihívás és egyben cél, hogy minél jobb eredményt érjünk el a Google Lighthouse-nál. Ehhez kiemelkedő teljesítményt kell nyújtani a tartalom, a felhasználóbarát UX, a modern webkomponensek terén. Mindezt persze kiemelkedő oldalsebesség mellett, így a kihívás elég nagy. Terveink szerint a backend infrastruktúrát szintén AWS-re telepítjük az olyan applikációk miatt, mint a képfelismerés vagy az SNS (Simple Notification Service) technológia, és a továbbiakban is szeretnénk lépést tartani az új webfejlesztési megoldásokkal.
Cikkünk a Computerworld magazin 2021. február 24-i lapszámában (LII. évfolyam 4. szám) jelent meg.
