← Înapoi la Blog

Cuprins

• De ce să migrăm?
• Evaluarea framework-urilor
• Strategia de implementare
• Caracteristici cheie
• Rezultate și cronologie
• Lecții învățate
• Gânduri finale

---

De ce să migrăm?

Site-ul Experian a avut doar două migrări majore în întreaga sa istorie de douăzeci de ani. A trecut de la HTML simplu gestionat prin CMS-ul acum retras TeamSite, la o configurație găzduită pe AWS folosind template-uri EJS - și acum, migrarea sa in desfășurare către Astro. Pentru un site static, acest nivel de evoluție este suficient. Cu toate acestea, fără un design system, fiecare programator nou aduce propriile pattern-uri și preferințe, iar pe măsură ce echipa crește, acea flexibilitate se transformă rapid în inconsistență. În acel stadiu, definirea unor standarde clare devine esențială. Dar cel mai important, când vulnerabilitățile critice încep să crească pentru că dependențele npm nu mai pot fi actualizate fără modificări care ar strica funcționalitatea, este un semnal să reevaluezi riscurile, mai ales pentru un site care servește ca punct principal de intrare pentru milioane de utilizatori care își verifică scorurile de credit.

Evaluarea framework-urilor

Cerința cheie pentru inițierea unei migrări de framework este să ai o conducere suportivă — atât un Manager cât și un Director de Produs pentru .co.uk care înțeleg valoarea schimbării și sunt dispuși să autorizeze efortul. Din fericire, am avut exact asta. Odată ce provocările și limitările sistemului actual au fost prezentate clar și aprobarea dată, următorul pas este să stabilești un plan structurat și să implici dezvoltatori suplimentari prompt. Prioritățile se schimbă rapid, și nu vrei ca proiectul să stagneze înainte să înceapă măcar.

Am început prin dezvoltarea mai multor proof-of-concept-uri: Next.js, Gatsby, React și Astro, fiecare cu propriile puncte forte și limitări. Pentru nevoile noastre specifice, Astro a fost cea mai potrivită opțiune. După ce am prezentat evaluarea noastră părților interesate cheie și liderilor din alte echipe, și am primit aprobarea să continuăm, ne-am concentrat atenția pe execuție.

Strategia de implementare

Primul nostru pas a fost validarea dacă Astro se poate integra cu codul nostru vechi existent și structura proiectului. S-a integrat, permițând o configurație hibridă fără probleme. Am început prin migrarea unei pagini minimale cu trafic redus și conținut simplu ca prim caz de test. De acolo, am construit componentele principale Astro necesare pentru următorul set de pagini: Buton, Meniu, Subsol de pagină, Baner și Carusel.

Am organizat un workshop intern interactiv pentru a alinia întreaga echipă pe cele mai bune practici, și am inclus quiz-uri pentru a menține sesiunea captivantă, am oferit mici premii, și chiar am creat suporturi de pahar personalizate pentru a face experiența memorabilă.

Echipele de Design și Testare au fost incredibil de înțelegătoare și colaborative. Deoarece totul a fost reconstruit de la zero, paritatea pixel-perfect cu site-ul legacy nu a fost întotdeauna posibilă. Am convenit să acceptăm diferențe vizuale minore pentru a ne putea concentra pe livrarea valorii în loc să urmărim replicare 100%.

Colaborarea noastră cu echipa CloudServices a fost de asemenea excelentă. Ne-au sprijinit în integrarea build-ului Astro în pipeline-ul de deployment, iar migrarea noastră simultană la GitHub Actions s-a aliniat perfect. Și-au luat timp să înțeleagă workflow-ul Astro și cum să sprijine cel mai bine tranziția.

Caracteristici cheie

Câteva caracteristici minunate fac Astro excepțional: zero kB JavaScript implicit, routing integrat, arhitectura de tip insulă, optimizarea imaginilor, colecții de conținut live, și modelul său flexibil hibrid server-client, care permite unei pagini să se randeze pe server în timp ce alta rulează complet pe client. Este o combinație impresionantă. Astro împrumută concepte de la alte framework-uri, dar doar cele mai puternice. Felicitări lui Fred și echipei pentru a-l modela în ceva atât de rafinat.

Astro îți permite și să încorporezi componente din orice framework frontend—React, Vue, Angular, Svelte și altele—fără fricțiune. Unul dintre cele mai mari avantaje este că aceste componente sunt renderizate pe server, așa că browser-ul nu primește niciodată runtime-ul framework-ului decât dacă le hidratezi explicit folosind directive precum client:load, client:visible, etc. Fără hidratare, componenta livrează zero JavaScript, iar o pagină complet statică nu trimite deloc. Asta nu înseamnă că orice framework ar trebui încorporat doar pentru că este posibil. Un punct forte al abordării agnostice a Astro ar fi când o altă echipă — poate una care lucrează în React, construiește un widget sau o funcționalitate pentru un produs diferit care ar fi plictisitor sau nepractic de recreat ca o componentă pură Astro. În loc să o reconstruiești, poți integra direct acea componentă. Este un concept similar cu Micro Frontend Federation, dar cu mult mai puțin overhead, și util mai ales când un plugin sau widget existent oferă mai multă flexibilitate decât o alternativă nativă Astro.

Rezultate și cronologie

Migrarea este încă în desfășurare, dar suntem încrezători că putem finaliza cele 300 de pagini rămase până la sfârșitul anului. Procesul a fost remarcabil de lin până acum, Astro este simplu de învățat, configurat și înțeles. Experiența dezvoltatorului a fost remarcabilă, mai ales comparativ cu configurația noastră anterioară Webpack, unde pornirea serverului de dev dura 30 de secunde și era practic o invitație să mergi să-ți faci un ceai. Cu Astro, este instant.

Numerele de performanță arată deja promițător. Facem câteva ajustări finale înainte să le împărtășim, pentru că dacă ne lăudăm, vrem ca scorul Lighthouse să strălucească verde și să spunem: “Da, a meritat”. Dar chiar și fără numerele exacte, îmbunătățirile în timpii de încărcare și interactivitate sunt perceptibile, mai ales pe mobil unde am reușit să eliminăm kB nenecesari. Noua arhitectură a făcut și mai ușoară întreținerea și actualizarea site-ului, iar echipa este entuziasmată de posibilitățile viitoare cu caracteristicile și ecosistemul Astro.

Un exemplu de pagină Astro este: Aplicarea pentru un card de credit.

Lecții învățate

Am întâmpinat câteva probleme neașteptate, inclusiv asset-urile implicite \_astro fiind blocate de CORS în producție chiar dacă totul funcționa perfect în pre-prod. A trebuit să facem rollback, să sincronizăm cu DevOps, și să re-deployăm a doua zi. Din fericire, build-ul nostru durează doar aproximativ 10 minute, așa că rollback-ul a fost nedureros. Am fost entuziasmați să publicăm totul live — ca un copil care desface o jucărie nouă — și când nu a funcționat, a fost ca și cum acea jucărie a fost luată brusc. A fost o bună reamintire a importanței testării în medii similare producției și a avea un plan solid de rollback.

Desigur, oricât de mult ne place să lucrăm cu Astro, progresul pe care l-am făcut nu este în întregime datorită framework-ului. Începând totul de la zero, ne-a dat o șansă rară să regândim totul cu grijă — să eliminăm straturi de override-uri, să înlocuim markup-ul zgomotos cu componente care înseamnă ceva cu adevărat, să personalizăm experiența mobilă astfel încât să încarce doar ce contează cu adevărat, și multe altele. S-a simțit mai puțin ca o resetare tehnică și mai mult de a da proiectului spațiu să respire din nou.

Gânduri finale

Astro s-ar putea să nu fie alegerea perfectă pentru fiecare echipă, dar din ce în ce mai multe site-uri îl adoptă — și cu bun motiv. Singura modalitate reală de a ști dacă este potrivit pentru tine este să-l pui la încercare, să-i explorezi capabilitățile și să cântărești avantajele și dezavantajele.

Am avut și ocazia să întâlnim echipa Astro în persoană și ne-am bucurat de o conversație excelentă cu Sarah, Matt și Fred. Dacă ai vrea să sprijini dezvoltarea Astro, au un fond Open Collective — chiar și contribuțiile mici fac o diferență: Open Collective - Astro.

Deși Astro a fost recent achiziționat de Cloudflare, Astro continuă să opereze independent, iar echipa rămâne dedicată rădăcinilor sale open-source și abordării orientate spre comunitate.

Galerie

Fotografii făcute de mine în timpul ViteConf în Amsterdam, 2025.