От стилни компоненти до Tailwind CSS: A HackerNoon миграционна история

Всеки път едно решение за технологичен стак, което някога се е чувствало правилно, започва да показва своите граници – като осъзнаването колко неефективен е отвертката след използване на мощна тренировка. Това е случаят с използването от HackerNoon на Styled Components. В продължение на години, то ни е служило добре – предлагайки обхванати стилове, динамично тематизиране и пълен контрол в рамките на нашите компоненти на React. Но тъй като нашата кодова база се е развила и инструменти като Tailwind CSS са узрели, става ясно, че промяна е отложена.

Тази публикация е прекъсване на нашия преход от Styled Components към Tailwind CSS, защо направихме този ход, как подходих към прехода и какъв е процесът досега.

Защо HackerNoon първоначално използва Styled Components

Не бях част от екипа, когато Styled Components беше избран за първи път, за да се справя с нашия CSS, но по това време, Tailwind CSS дори не беше пуснат, и Styled Components направи много смисъл за архитектурата на предния край на HackerNoon.

Той позволи на разработчиците да пишат CSS директно в JavaScript, което прави компонентите напълно самостоятелни. Този подход се чувстваше много "React-native" в природата - , капсулирани, многократно използваеми, и по това време се смяташе, че е по-лесно да се поддържа в една нарастваща кодова база и екип. Динамичните възможности за стилизиране, вградената поддръжка на теми и способността да се прехвърлят прописите директно в стилове работят особено добре за голямото разнообразие от страници и оформления, които изграждаме.вкапсулирана, многократно използваема и по онова време смятана за по-лесна за поддръжкаStyled Components обслужва HackerNoon добре

Какво ни накара да помислим за превключване на Tailwind?

С течение на времето нашата кодова база се разраства – както и сложността на стиловете за управление.

Styled Components ни даде гъвкавост, но това дойде на цена: по-големи размери на опаковки, изпълнение на време хитове, и натрупана структура на компоненти, изпълнена с все по-дълги стилизирани блокове.по-големи размери на пакетаRuntime Performance Hits Изтеглянесгъната структура на компонентите

Ние също така забелязахме, че много от нашите стилове се повтарят в различни компоненти. Тогава Tailwind CSS започна да има много смисъл.Редактиране на CSS

Но нека бъдем реални: за малкия екип на разработчиците като HackerNoon's, идеята за пресъздаване на масивна кодова база линия по линия се чувстваше като огромно начинание.малък екип за разработка като HackerNoon's линия по линия

Как направих превключвателя

Най-трудната част от този превключвател? Setup.

Инсталирането на Tailwind беше просто, но след като беше активно, глобалните стилове на Tailwind – благодарение на Preflight – започнаха да се сблъскват с нашите съществуващи компоненти.

А спасител тук беше задаване preflight: false в tailwind.config.js файл. Това движение деактивира повечето от основните нулиране на Tailwind, което донесе обратно някакъв ред. Разбира се, все още имаше малки проблеми със стила, за да се поправи, но нещата изглеждаха по-малко като военна зона.

От там трябваше да установя нови конвенции - как ще се справим с глобалните стилове, ще използваме класове и ще изграждаме съзнателни за темата компоненти с Tailwind. установяване на нови конвенции

И ето частта, която все още ме учудва: AI направи този процес наистина приятен.

Рефакторизирането на хиляди реда соло код би било лудост. Но аз използвах ChatGPT, за да конвертирам нашите стилизирани компоненти в Tailwind един по един. За прости компоненти - оформления, разстояния, структура - това беше вятър. Просто поставете, настройте и отидете.

Сега, нека да бъда честен: AI не получи всичко правилно.По-сложни, тематични компоненти все още изискват ръчно кодиране и много часове.Но като има солидна основа, за да започнете от направи нещата толкова по-лесни.Документацията на Tailwind също помогна да се запълнят празнините, и след като напълно приех разсъдъка на класата за полезност, нещата започнаха да кликват.

Как изглежда миграцията досега

Щастлив съм да кажа Tailwind вече е на живо в 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.

Този по-бавен подход всъщност беше благословия.Рефакторизирането на всеки компонент ми даде възможност да преразгледам и да подобря дизайна и структурата на нашите страници.Наред с Tailwind конвертирането, въведохме по-модерен потребителски интерфейс, по-добро използване на оформлението, нови компоненти и дори персонализиран темен пикер, който поставя старата ни тематична система в срам.

След като работя в HackerNoon в продължение на повече от 4 години, чувствам reignited потапяне в нашата кодова база отново. Tailwind е направил изграждането забавно отново. Той е чист, последователен и мощен – и аз съм развълнуван да продължа да тласкам конверсията напред. Кой знае? Може би скоро ще изтрием styled-components от нашия package.json за добро. 😉

Final Tailwinding Thoughts

Преминаването към Tailwind CSS не беше само за замяна на библиотека за стилизиране – това беше за модернизиране на нашия работен поток на предния край, приемане на последователност и опростяване на разработването.Докато Styled Components помогна за оформяне на интерфейса на HackerNoon по време на критична фаза на растеж, Tailwind ни дава гъвкавостта, скоростта и поддръжката, от които се нуждаем, докато продължаваме да се разширяваме.

гъвкавост, скорост и поддръжка

Това все още е работа в ход - нашето приложение все още има много стилни компоненти, но виждането на Tailwind на живо на нашата начална страница и в ново преработени компоненти е невероятно възнаграждаващо.

HackerNoon се развива и нашите стилове се развиват с него.