Svaki put tako često, odluka o tehnologiji koja se nekada osjećala ispravnom počinje pokazivati svoje granice – kao što je shvaćanje koliko je neefikasan screwdriver nakon korištenja strujnog bušenja. To je bio slučaj s HackerNoonovim korištenjem Styled Components. Godinama nam je dobro služila – nudeći obuhvaćene stilove, dinamično tematiziranje i punu kontrolu unutar naših React komponenti.Stavni dijeloviSljedeći članakTailwind CSS promjena je bila odgođena.
Ovaj post je sastavni dio našeg prelaska sa Styled Components na Tailwind CSS, zašto smo napravili taj korak, kako sam pristupio prijelazu i kako 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 nije čak ni objavljen, a Styled Components je imao puno smisla za HackerNoonovu front-end arhitekturu.
Tailwind CSS još nije objavljen
To je omogućilo programerima da napišu CSS izravno unutar JavaScript-a, čineći komponente potpuno samostalne. Ovaj pristup osjećao se vrlo "React-native" u prirodi -encapsulated, reusable, i, u to vrijeme, mislio da je lakše održavati u rastućoj kodi baze i timu. Dinamične stilske mogućnosti, ugrađena tema podrška, i sposobnost da se props izravno u stilove radio posebno dobro za široku raznolikost stranica i rasporeda smo izgradili.kapsuliran, ponovljiv i, u to vrijeme, mislio da je lakše održavatiStyled Components dobro služio HackerNoon
Što nas je navelo da razmotrimo prijelaz na Tailwind?
S vremenom je naša baza kodova rasla - a tako je i složenost stilova upravljanja.
Styled Components dali su nam fleksibilnost, ali to je došlo na cijenu: veće veličine paketa, performanse hit, i cruttered strukturu komponenti ispunjen s sve dužim stiliranim blokovima.veće veličine paketaruntime performanse pogodakzabranjena struktura komponenti
Također smo primijetili da se mnogi od naših stilova ponavljaju među komponentama. To je vrijeme kada je Tailwind CSS počeo imati puno smisla.Sljedeći članakTailwind CSS
Ali budimo stvarni: za mali razvojni tim poput HackerNoonovog, ideja o preoblikovanju masivne kodne baze linije za linijom osjetila se kao ogroman poduhvat.mali razvojni tim poput HackerNoon's linija po liniji
Kako sam napravio prekidač
Najteži dio ovog prekidača? Setup.
Uredi se.
Ugradnja Tailwind-a bila je jednostavna, ali nakon što je bila aktivna, globalni stilovi Tailwind-a - zahvaljujući Preflight-u - počeli su se sudarati s našim postojećim komponentama.
A lifesaver ovdje je postavio preflight: false u tailwind.config.js datoteci. To je pokretanje isključilo većinu Tailwindovih osnovnih resetova, što je vratilo neki red.preflight: falsetailwind.config.jsdeaktivirao većinu osnovnih resetova Tailwinda
I ovdje je dio koji me još uvijek čudi: AI je ovaj proces učinio stvarno ugodnim.
AI je ovaj proces učinio stvarno ugodnim.
Refaktoriranje tisuća redaka koda solo bilo bi ludilo.Ali ja sam koristio ChatGPT kako bih pretvorio naše stilizirane komponente u Tailwind jedan po jedan.
Sad, neka budem iskren: AI nije sve ispravio.Složeniji, tematski sastavni dijelovi još uvijek zahtijevaju ručno kodiranje i puno sati.Ali imati čvrstu osnovu za početak učinilo je stvari toliko lakšim.Tailwindova dokumentacija također je pomogla popuniti praznine, a kada sam u potpunosti prihvatio misljenje o razredu korisnosti, stvari su počele kliknuti.
Nadam se da ću biti iskren:manualno kodiranje i puno satiUtility razred razmišljanjeKako izgleda migracija do sada
Sretan sam što mogu reći Tailwind je sada uživo na HackerNoon! 🎉
Tailwind je sada uživo na HackerNoon!
As of now, the HackerNoon Homepage is fully converted to Tailwind CSS, with Styled Components completely removed. Most of the other pages still rely on Styled Components, and they’ll be converted gradually—one component, one page at a time.
HackerNoon Homepage is fully convertedHackerNoon Homepage is fully convertedjedna komponenta, jedna stranica u isto vrijeme
Ovaj sporiji pristup zapravo je bio blagoslov.Refactoring svaku komponentu dao mi je priliku da revisit i poboljšati dizajn i strukturu naših stranica.Uz Tailwind konverziju, uveli smo moderniji UI, bolju upotrebu rasporeda, nove komponente, pa čak i prilagođenog teme picker koji stavlja naš stari tematski sustav na sramotu.
revidirati i poboljšatisuvremenije korisničko okruženjePrikupljeni tematski odabir
Nakon što sam radio u HackerNoonu više od 4 godine, osjećao sam se reignited ponovno uroniti u našu bazu kodova. Tailwind je ponovno napravio gradnju zabavno. To je čisto, dosljedno i moćno – i ja sam uzbuđen da nastavim gurati konverziju naprijed. tko zna? Možda uskoro ćemo izbrisati styled-components iz našeg package.json za dobro. 😉
styled-componentspackage.json
Posljednje mišljenje o rješavanju problema
Prijelaz na Tailwind CSS nije bio samo o zamjeni stilske knjižnice – to je bilo o modernizaciji našeg frontend radnog toka, prihvaćanju dosljednosti i pojednostavnjenju razvoja. Dok su Styled Components pomogli oblikovati HackerNoonov sučelje tijekom kritične faze rasta, Tailwind nam daje fleksibilnost, brzinu i održivost koju trebamo dok nastavljamo razmjenjivati.
Fleksibilnost, brzina i održivost
HackerNoon se razvija, a naši stilovi se razvijaju s njim.
