Svaki put tako često, tehnološka odluka koja se jednom osjećala ispravnom počinje pokazivati svoje granice - kao što je shvaćanje koliko je neučinkovit vijač nakon korištenja strujnog bušilice.Styled ComponentsGodinama nam je dobro služio – nudeći obuhvaćene stilove, dinamično tematiziranje i punu kontrolu unutar naših React komponenti.Tailwind CSSOdrasla, postalo je jasno da je achange was overdue.
Ovaj post je sastavni dio našeg pomaka od Styled Components na Tailwind CSS, zašto smo napravili pomak, kako sam pristupio prijelazu i kakav je proces do sada izgledao.
Zašto je HackerNoon izvorno koristio stilizirane komponente
Nisam bio dio tima kada je Styled Components prvi put izabran za rukovanje našim CSS-om, ali u to vrijeme,Tailwind CSS hadn’t even been released, i Styled Components učinili su puno smisla za HackerNoonovu front-end arhitekturu.
To je omogućilo programerima da napišu CSS izravno unutar JavaScript-a, čineći komponente potpuno samostalno.encapsulated, reusable, and, at the time, thought to be easier to maintainDinamičke stilske mogućnosti, ugrađena potpora tematizaciji i sposobnost prelaska propisa izravno u stilove posebno su dobro funkcionirali za široku raznolikost stranica i rasporeda koje smo izgradili.Styled Components served HackerNoon well. u
Što nas je navelo da razmotrimo prijelaz na Tailwind?
Tijekom vremena naša je baza kodova rasla, a tako je i složenost stilova upravljanja.
Styled Components nam je dao fleksibilnost, ali to je došlo po cijenu:larger bundle sizes,runtime performance hitsi acluttered component structureSve je teže pratiti stilove ili ih učinkovito ponovno upotrijebiti bez dupliranja koda.
Također smo primijetili da se mnogi od naših stilova ponavljaju preko komponenti.Tailwind CSSPristup utility-first osjećao se kao način da se sve racionalizira - od rasporeda do odgovornosti i čak tematizacije.
Ali budimo realni: zasmall dev team like HackerNoon’s, ideja o refaktoriranju masivne kodne bazeline by lineIpak, nismo mogli zanemariti koliko je Tailwind široko prihvaćen u dev zajednici.
Kako sam napravio switch
Najteži dio ove promjene?Setup.
Instaliranje Tailwind-a bilo je jednostavno, ali kada je aktivno, globalni stilovi Tailwind-a - zahvaljujući Preflight-u - počeli su se sudarati s našim postojećim komponentama.
Spasitelj ovdje je bio postavljenpreflight: falseU natailwind.config.jsSljedeći članakOvo se krećedisabled most of Tailwind’s base resetsNaravno, još uvijek je bilo manjih problema sa stiliziranjem koje treba riješiti, ali stvari su izgledale manje kao ratna zona.
Odatle sam moraoestablish new conventions-kako bismo se nosili s globalnim stilovima, ponovili tečajeve i izgradili tematske komponente s Tailwindom.
A evo i onog što me još uvijek iznenađuje:AI made this process actually enjoyable.
Refactoring tisuće redaka koda solo bilo bi ludilo. ali ja sam koristio ChatGPT kako bi pretvorio naše stilirane komponente u Tailwind jedan po jedan. Za jednostavne komponente - rasporedi, raspodjela, struktura - to je bio vjetar. Samo prilepite, prilagodite i idite.
Now, let me be honest:AI nije dobio sve u redu.Složenije, tematske komponente još uvijek potrebnemanual coding and plenty of hoursNo, imati čvrstu osnovu za početak učinilo je stvari mnogo lakšim. Tailwindova dokumentacija također je pomogla popuniti praznine, a jednom sam u potpunosti prihvatioutility class mindsetStvari su počele kliknuti.
Kako je do sada izgledala migracija
Drago mi je rećiTailwind is now live on HackerNoon!
Od sada, naHackerNoon stranica je u potpunosti pretvorenana Tailwind CSS, sa Styled Components potpuno uklonjen. Većina ostalih stranica još uvijek se oslanja na Styled Components, a oni će se postupno pretvoriti—one component, one page at a time. u
HackerNoon stranica je u potpunosti pretvorena
Ovaj sporiji pristup zapravo je bio blagoslov.revisit and improvedizajn i strukturu naših stranica. Uz Tailwind konverziju, uveli smomore modern UI, bolje korištenje rasporeda, nove komponente, pa čak icustom-built theme pickerTo čini naš stari tematski sustav sramotnim.
Nakon više od 4 godine rada na HackerNoon-u, osjećamreignitedTailwind je ponovno napravio gradnju zabavnom. Čista je, dosljedna i moćna – i uzbuđen sam što ću nastaviti gurati konverziju naprijed.styled-componentsOd našihpackage.jsonZa dobro. 😉
Završne zamisli
Premještanje na Tailwind CSS nije bilo samo o zamjeni stilske knjižnice – bilo je o modernizaciji našeg frontend toka rada, prihvaćanju dosljednosti i pojednostavnjenju razvoja.flexibility, speed, and maintainabilityPotrebno nam je da nastavimo širenje.
To je još uvijek posao u tijeku – naša aplikacija još uvijek ima puno Styled Components – ali gledanje Tailwinda uživo na našoj početnoj stranici i u novonastalim komponentama bilo je nevjerojatno nagrađujuće.
HackerNoon se razvija, a naši stilovi se razvijaju s njom.
