Как да изградите съставим софтуер, който позволява на екипите да работят автономно и да пускат нови функции независимо
В предишната публикация в блога разгледахме отблизо предимствата на система за композируем дизайн. Видяхме как предлага голяма персонализация и гъвкавост, основни атрибути в днешния забързан свят на разработка на софтуер.
Системата за проектиране в разпределения софтуер се поддържа като независими компоненти, хоствани от обхвата на „дизайна“ и притежавани от дизайнерския екип.
Подобно на обхвата на проектиране, други обхвати, които имат други цели, независимо дали са специфични за продукта или инфраструктурни, включват части от организацията и са собственост на съответните автономни екипи.
В тази публикация в блога ще покажем как демонстрационната 'showoff' организация, която изгражда приложението за лично портфолио на разработчици, прилага принципи, модели и методологии, които дават възможност на екипите да работят автономно и да доставят нови функции, като същевременно поддържат стандартизация и последователност.
Ще се потопим дълбоко в тази тема. Ще проучим как да използваме Bit, за да структурираме вашата организация, като я оптимизираме за ефективност и гарантираме, че е добре подготвена за успех. И така, да започваме!
Какво е обхват и как функционира?
Преди да се потопим в конкретните обхвати, нека отделим малко време, за да разберем какво е „обхват“ в контекста на Bit.
Обхватът е хост сървър за компоненти, които служат на обща цел. Тъй като Bit компонентите не са свързани с конкретно работно пространство или хранилище, а по-скоро могат да бъдат разработени и актуализирани навсякъде, те изискват един единствен хост, който да им служи като източник на истина.
Например, за да поддържате компонента ‘бутон за превключване’, първо трябва да го импортирате от неговия отдалечен обхват във вашето локално работно пространство:
bit import showoff.design/inputs/toggle-button
След като направите промените, ще създадете нова негова версия и ще я експортирате обратно в нейния отдалечен обхват:
bit snap showoff.design/inputs/toggle-button && bit export
Всеки обхват се превръща в организационна единица във вашия проект, пространство, където живеят компоненти от определен тип или функция. Обхватът съответства на конкретен екип в организацията, отговорен за поддържането му. Това прави обхвата „инвентаризация на услугите“, които този екип предоставя (от елементи на потребителския интерфейс до пълни функции и услуги).
Като организирате вашата кодова база в различни обхвати, вие подобрявате модулността на вашите проекти. Това разделение позволява на разработчиците да работят в рамките на конкретни обхвати, без да засягат другите, насърчавайки по-бързо и по-фокусирано развитие.
Важно е да се отбележи, че компонентите, хоствани в различни обхвати, образуват мрежа от зависимости. Те не са изолирани един от друг, а по-скоро могат да консумират други компоненти.
Обхват на разработката: среди за разработка за многократна употреба
Нашият обхват „dev“ играе съществена роля, като служи като център за всички компоненти за разработка, като средите за разработка на компоненти са от първостепенно значение. Този обхват предлага компоненти на средата за разработка, всеки от които е пригоден за различни типове компоненти в организацията.
За да илюстрираме това, нека разгледаме средата за разработка на компоненти „react-with-mui“ („env“). Тази среда осигурява компоненти с необходимите инструменти и изграждане на конвейер. Той също така създава визуализации на компоненти, обвити по подразбиране с „системата за проектиране, базирана на MUI на организацията“.
Красотата на тези среди за разработка на компоненти е, че те са предварително конфигурирани и готови за използване, така че разработчиците вече не трябва да прекарват време в настройване на своите настройки за разработчици за всеки нов проект.
Всеки път, когато екипът за разработчици актуализира env, всеки комплект компоненти с този env се възползва от актуализацията. Това гарантира стандартизация във вашите компоненти и позволява на разработчиците да се фокусират повече върху кодирането и по-малко върху конфигурацията.
Имайте предвид, че тази настройка не е ограничена до React или дори до frontend разработка. Обхватът на разработка често ще предоставя среди за разработка на компоненти и за бекенд компоненти, като модули NodeJS, работници на Cloudflare, AWS ламбда и т.н.
Обхват на дизайна: обединяващи градивни елементи
Както разгледахме в нашата „предишна публикация“, обхватът на „дизайна“ е мястото, където се намират компонентите на нашата система за проектиране. Това е централният център за унифицирани градивни блокове, които могат да се използват във всички компоненти. Тези елементарни компоненти, от бутони и квадратчета за отметка до типография и оформления, осигуряват основополагащите елементи за конструиране на по-сложни компоненти или приложения.
В базирана на Material-UI система като нашата, темата предоставя начин за систематично персонализиране на външния вид на компонентите. Той определя цветовата палитра, типографията и разстоянието, което да се използва във всички компоненти. Тази последователна тема придава на предните продукти последователен вид и усещане, без значение кой създава компонентите, които ги съставят.
Чрез централизирането на тези основополагащи градивни елементи в обхвата на „дизайна“, ние гарантираме, че промените или актуализациите на тези елементи са еднакво отразени във всички компоненти, насърчавайки последователност в различните проекти. Това от своя страна ускорява процеса на проектиране, намалява дублирането и подобрява цялостното потребителско изживяване.
Обхватът за връзка с мен: стандартизирани функции
Следва обхватът „свържете се с мен“, идеален пример за „обхват на функции“. Този обхват е дом на компоненти, свързани с функцията за контакт на нашите проекти, като contact-form-handler (ламбда функция на AWS) и формуляр за контакт (компонент на React).
Специален екип управлява и подобрява тези компоненти, като гарантира, че са актуални, ефективни и без грешки. Този фокус върху специализацията на функциите гарантира последователна функционалност във всички приложения в организацията.
Като структурираме организацията по този начин, ние извличаме множество ползи. Например, разгледайте случая на обхват на „авторизация“. Ако всеки отдел трябваше да поддържа свой собствен екип за „авторизация“, това би довело до значително дублиране на усилията.
Вместо това един екип управлява обхвата на „удостоверяване“, като поддържа един единствен компонент за удостоверяване за многократна употреба и го излага на цялата организация. Цялата организация се възползва от тази изключително поддържана и усъвършенствана функция за „авторизация“, спестявайки значително количество работна ръка.
Ако екип или разработчик открие, че трябва да разшири API (формуляра за контакт), препоръчителният подход би бил да предложи промени в екипа за обхват „свържете се с мен“. След това те могат да преценят дали исканата функционалност е широко приложима и да я включат в основния компонент на формуляра за контакт. По този начин цялата организация печели от това подобрение.
Началният обхват: Катализатор за развитие
Обхватът на „началото“ функционира като катализатор за разработчиците, служейки като хранилище за шаблони за работно пространство. Тези шаблони могат да служат на две основни цели: улесняване на ученето и ускоряване на развитието.
За учене шаблоните за „начало“ могат да научат членовете на екипа за съществуващите компоненти. Хората могат да разклоняват тези компоненти (да ги копират в техния обхват) и да си играят с тях, насърчавайки задълбочено разбиране на това как работят. Например, нашият сайт за портфолио има един стартер, който по същество позволява на потребителите да импортират или разклоняват (създават отделно копие на) приложението за портфолио и неговите страници. Това осигурява лесен начин за разработчиците да учат, експериментират и разбират по-добре системата.
За ускоряване на разработката, „стартовите“ шаблони са полезни, когато работите върху голямо приложение. Не забравяйте, че в Bit няма такова нещо като клониране на цялото репо - вие само импортирате това, върху което работите, в работното си пространство.
Така че, вместо да импортирате цялото приложение и всички свързани компоненти всеки път, когато работите, вие създавате „стартер“, който импортира приложението и необходимите компоненти. Това позволява на разработчиците бързо да започнат работа по своите специфични задачи, без да се затъват в процеса на настройка.
В една реална организация тази ефективност се засилва. Обикновено вие импортирате компонентите, от които се нуждаете, а шаблонът за работно пространство „starter“ настройва останалото за вас.
Помислете за примера на нашия стартов bit.dev за нашия сайт на общността. Той импортира маршрутите на приложението и документацията, позволявайки на разработчиците бързо да импортират и редактират специфичните MDX компоненти, от които се нуждаят, за да предложат промени. Всичко е свързано с опростяване и ускоряване на процеса на разработка.
Обхватът на личното портфолио: готовият продукт
Обхватът на „лично портфолио“ въплъщава продуктов обхват, където живее крайният продукт. Този обхват представлява цялостно приложение, готово за внедряване.
Компонентът „лично портфолио“ е напълно разгръщаемо приложение. Това го прави идеална витрина на готовия продукт, демонстриращ какво може да се постигне с компонентите и обхватите, които обсъдихме.
Освен това, тъй като Bit обработва всички компоненти, включително приложения, като напълно независими единици, потребителите могат да разклоняват конкретни страници от приложението и да ги редактират според нуждите. По този начин потребителите могат да приспособят приложението към своите специфични изисквания, без да засягат оригинала.
Нека направим бърза обиколка на приложението „лично портфолио“:
- Целева страница: Това е целевата страница на портфолиото, където потребителите получават първото впечатление за собственика на портфолиото. Той включва съществени подробности и кратко въведение.
- Страница с проекти: Тази страница показва проектите на собственика на портфолиото, заедно с описания, използвана технология и връзки към демонстрации на живо или хранилища на кодове.
- Страница за контакт: Това е мястото, където потребителите могат да се свържат със собственика на портфолиото. Компонентът на формуляра за контакт от нашия обхват „свържете се с мен“ се използва тук, илюстрирайки повторното използване на компоненти в различни обхвати.
- Страница за информация: Тази страница предоставя по-задълбочена представа за миналото, уменията и опита на собственика на портфейла. Това е разказът за професионалния път на собственика на портфолио.
Както можете да видите, всяка страница от приложението „лично портфолио“ може да бъде разклонена, модифицирана и разгърната като независима единица, като същевременно се поддържа последователност и стандартизация в цялото портфолио.
Заключение
Използването на Bit за сегментиране на организация в отличителни обхвати значително повишава производителността, ускорява разработката и гарантира постоянно качество на кода в проектите. Той насърчава повторното използване на компоненти, намалява излишъка и опростява структурата на вашата кодова база, правейки я по-управляема и достъпна за всички членове на екипа.
Чрез разделянето на нашата „показна“ организация на обхвати „dev“, „design“, „contact-me“, „starters“ и „personal portfolio“, ние демонстрирахме как можете да рационализирате вашата организация и да поддържате високи стандарти за развитие. Тези обхвати обаче служат само като примери. В сценарий от реалния свят можете да проектирате и наименувате вашите обхвати въз основа на уникалните нужди и структура на вашата организация.
И така, това приключва нашето изследване на обхвата на организацията с Bit. Очаквайте следващата ни публикация, където ще се задълбочим в динамиката на управлението на тези обхвати и техните взаимодействия. Това е завладяваща тема, която няма да искате да пропуснете!
