Visbiežāk tehnoloģiju pīlāru lēmums, kas kādreiz likās pareizs, sāk parādīt savas robežas – piemēram, apzinoties, cik neefektīvs ir skrūvgrieziens pēc jaudas urbšanas. Tas ir bijis gadījums ar HackerNoon izmantošanu Styled Components. Gadu gaitā tas mums labi kalpoja – piedāvājot apjomīgus stilus, dinamisku tematiku un pilnīgu kontroli mūsu React sastāvdaļās. bet, kā mūsu koda bāze attīstījās un rīki, piemēram, Tailwind CSS nogatavojās, kļuva skaidrs, ka maiņa bija atlikta.
Stiklveida sastāvdaļasTailwind CSS Mājas lapa izmaiņas bija pārtrauktas.
Šis ieraksts ir mūsu pārejas no Styled Components uz Tailwind CSS, kāpēc mēs izdarījām pāreju, kā es tuvojos pārejai un kā process līdz šim izskatījās.
Kāpēc HackerNoon sākotnēji izmantoja stilizētas sastāvdaļas
Es nebiju daļa no komandas, kad Styled Components pirmo reizi tika izvēlēts, lai apstrādātu mūsu CSS, bet tajā laikā Tailwind CSS pat nebija izlaists, un Styled Components padarīja daudz jēgas HackerNoon front-end arhitektūrai.
Tailwind CSS pat nebija atbrīvots
Tas ļāva izstrādātājiem rakstīt CSS tieši JavaScript, padarot komponentus pilnīgi pašpietiekamus. Šī pieeja šķita ļoti “React-native” pēc būtības -encapsulated, atkārtoti lietojams, un, tajā laikā, uzskatīja, ka tas ir vieglāk uzturēt visā pieaugošo kodu bāzi un komandu. Dinamiskās stilēšanas iespējas, iebūvēts tēmas atbalsts, un spēja nodot props tieši stilus strādāja īpaši labi, lai plašu lapu un izkārtojumu mēs veidojām.iekapsulēts, atkārtoti lietojams un tajā laikā domāts par vieglāku uzturēšanuStyled Components kalpoja HackerNoon labi
Kas lika mums apsvērt pāreju uz Tailwind?
Laika gaitā mūsu koda bāze pieauga, un tāpat arī stilu pārvaldības sarežģītība.
Styled Components deva mums elastību, bet tas bija par izmaksām: lielāki bundžu izmēri, izpildes ātruma hits, un apgriezta komponentu struktūra piepildīta ar arvien garākiem stilizētiem blokiem.lielāks bundžu izmērsruntime snieguma hitsapgriezta sastāvdaļu struktūra
Mēs arī pamanījām, ka daudzi no mūsu stiliem atkārtojas visās sastāvdaļās.Tad Tailwind CSS sāka daudz jēgas.Tailwind CSS Mājas lapa
Bet ļaujiet mums būt reāliem: mazai izstrādātāju komandai, piemēram, HackerNoon's, ideja pārveidot masveida kodu bāzi līnija pēc līnijas jutās kā milzīgs uzņēmums.small dev komanda, piemēram, HackerNoon's līnija pēc līnijas
Kā es izveidoju maiņu
Šī pārslēdzēja vissarežģītākā daļa? Setup.
Rīcības plāns.
Tailwind uzstādīšana bija vienkārša, bet, kad tas bija aktīvs, Tailwind globālie stili – pateicoties Preflight – sāka sadurties ar mūsu esošajām sastāvdaļām.
Dzīvības glābējs šeit iestatīja preflight: false failā tailwind.config.js. Šī kustība deaktivizēja lielāko daļu Tailwind bāzes nodošanas, kas atveda atpakaļ kādu kārtību.preflight: falsetailwind.config.jsdeaktivizēja lielāko daļu Tailwind bāzes iestatījumu
No turienes man bija jāizveido jaunas konvencijas - kā mēs risinātu globālos stilus, atkārtoti izmantotu klases un izveidotu tēmu apzinātas sastāvdaļas ar Tailwind.izveidojiet jaunas konvencijas
Un šeit ir daļa, ko es joprojām apbrīnoju: AI padarīja šo procesu patiešām patīkamu.
AI padarīja šo procesu patiešām patīkamu.
Tūkstošu līniju kodu pārveidošana būtu bijusi neprāts. bet es izmantoju ChatGPT, lai pārvērstu mūsu stilizētos komponentus Tailwind vienā reizē. Vienkāršiem komponentiem - izkārtojumiem, attālumiem, struktūrai - tas bija vējš.
Tagad ļaujiet man būt godīgam: AI nesaņēma visu pareizi. sarežģītāki, tematiski komponenti joprojām prasīja rokas kodēšanu un daudzas stundas.Bet, ja ir stabils pamats, lai sāktu, tas padarīja lietas tik daudz vieglāk.Tailwind dokumentācija arī palīdzēja aizpildīt plaisas, un, kad es pilnībā pieņēmu lietderības klases domāšanu, lietas sāka klikšķināt.
Nu, ļaujiet man būt godīgam:rakstiskā kodēšana un daudzas stundasUtility klases domāšanas veidsKā līdz šim izskatījās migrācija
Esmu priecīgs teikt Tailwind tagad ir dzīvs HackerNoon! 🎉
Tailwind tagad ir dzīvs 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 convertedviena sastāvdaļa, viena lapa vienā reizē
Šī lēnāka pieeja faktiski ir bijusi svētība. Katra komponenta pārveidošana man deva iespēju pārskatīt un uzlabot mūsu lapu dizainu un struktūru. Līdztekus Tailwind konversijai mēs ieviesām mūsdienīgāku UI, labāku izkārtojuma izmantošanu, jaunas sastāvdaļas un pat pielāgotu tēmas atlasītāju, kas apkauno mūsu veco tēmu sistēmu.
pārskatīt un uzlabot vairāk mūsdienu UIīpaši izveidota tēmas izvēle
Pēc vairāk nekā 4 gadu darba HackerNoon, es jūtos reignited nirst mūsu kodes bāzi atkal. Tailwind ir padarījis būvēt jautri atkal. tas ir tīrs, konsekvents, un spēcīgs – un es esmu satraukti, lai turpinātu virzīt konversiju uz priekšu. kas zina? Varbūt drīz mēs būs dzēst styled-komponents no mūsu package.json par labu. 😉
styled-componentspackage.json
Final Tailwinding domas
Pāreja uz Tailwind CSS nebija tikai par stila bibliotēkas nomaiņu - tas bija par mūsu frontend darba plūsmas modernizēšanu, konsekvences pieņemšanu un izstrādes vienkāršošanu. kamēr Styled Components palīdzēja veidot HackerNoon saskarni kritiskā izaugsmes fāzē, Tailwind dod mums elastību, ātrumu un uzturēšanu, kas mums ir nepieciešama, jo mēs turpinām mērogoties.
Fleksibilitāte, ātrums un uzturēšana
Tas joprojām ir darbs — mūsu lietojumprogrammā joprojām ir daudz Styled Components, bet redzot Tailwind dzīvi mūsu mājas lapā un jaunizveidotajās sastāvdaļās, ir bijis neticami apmierinoši.
HackerNoon attīstās, un mūsu stili attīstās ar to.
