Практычныя параверыя шаблонав структуры папак у React

Введэнне

Створыце новая праекта на React, і вы быстра зіткнёцеся з калямунам: React не мае жадных праблем да гэта, дзе должны знаходзіцца вашы файлы. Не існуе вбудованага стандартнага падзелення папак, няма адного „правільнага“ спосабу ўпорядкування — толькі катэгорыя src і абсалютная свабода упорядкуваць всё так, як вам здаецца дапаможным. Гэтая свабода спачатку здаецца вялікай перадчынай, але ёй стае не так вяліка, калі ваш праект вырастае да чатырохдзяціх і болей компонентаў, а каманда больш не можа дагадацца, дзе паслядній з іх мае знаходзіцца.

Іменна прычына, чаму важліва як можно раней разумець распаўзнутыя організацыйныя шаблоны, перш чым база коду стане настолькі заплутанай, што ўскладніць пераструктураванне без значных працяў. Нават шырэкае спільнатасць React паўзналася гэтыя проблемы. Next.js, самы популярны фреймворк, створаны на базе React, безпасебна рашае гэтыя пытанні у своему нарадчыку па структураванні проекту, адзначаючы, што рэшуча організаваная структура дапамагае командам размешчаць супакоўзаныя файлы разам і прадбачаць роботу маршрутаў, компонентав і бізнес-логікі па мере росту аплікацыі. У гэтым артыкуле паспрабавана раз’ясніць, што на самай працоўцы значыць структура проекту на React, якія шаблоны вы, верагодна, зустрэнете, як выбраць той, який падходзіць вашай аплікацыі, і чаму раннее прыняття такага рашэння можа захаваць вас ад значных проблем у будучыні.

Што на самай працоўцы значыць структура проекту на React

У сваім сутнасці структура проекту — это простая даговоренасць каманды ў паводзе арганізацыі файлоў: дзе знаходзяцца компаненты, дзе — логіка, і як усе гэта з’яўляецца ў сувязі. Паколькі сам React не дае чыязных інструкцый па гэтай тэме, каманды маюць свабоду, але майже не маюць чыязных кераванняў. Для маленькага проекту гэта практычна не мае значэння — калькі файлоў не будуць вызваліць плутанню, незалежна ад таго, як ўсе арганізавана. Але большыя проекты быстра рушаюць без якой-небудзь даговоранай структуры, таму што файлы распадаюцца на часткі залежна ад таго, хто іх стварыў першы, і пошук чаго-небудзь прыводзіць да дліткага пошуку замест кароткага аднаведэння.

Галоўныя шаблоны, якія вы зустрэнете

Большасць кодавых базаў на React у канечнасці прыходзяць да аднай з калькі вядомых структураў.

Арганізацыя па функцыях

У такым падходзе файлы групаваюцца ў папкі на адной засадзе — па тым, якую частку прылады яны падтрымляюць: усе, што стосуецца аутэнтыфікацыі, знаходзится ў одной папцы, а все, што стосуецца профіляў корыстніка, — у іншай. Гэты спосаб зазвычай лепей паскладванае, чым большасць альтернатыў, калі ўжо таму, што адчыненне новай функцыі зазвычай значыць рэдагаванне файлоў унутрь одной папкі, а не пошук у всім проекте. Ён таксама дапамагае легчэ заразумець, канфетна на самай працоўнік продукту, проста паглядзевшы на назвы папак.

Арганізацыя па шарах

Хутчэй, файлы групаваняць па ўсём тэхнічным іх значэнні, а не па тым, да якой функцыяй яны належаць: усе компаненты знаходзяцца разам, усі вызовы API таксама разам, усі функцыі-дапаможнікі таксама разам. Гэта лёгкая для пояснення людзі ў першы дзень, але калі прыкладнэць становіць певны размер, файлы, якія складаюць адну функцыю, распадаюцца на калькі незвязаных папак, чыяму стае сложней адстэпляць змяны.

Арганізацыя па домэнах

Гэты патэрн групавае код адносна бізнес-канцэпцый, а не тэхнічных катэгорыяў чы элементаў інтэрфейсу — напрыклад, расчытанне, замовленні і запасы стаюць верхнімі папакамі, якія маюць своія компаненты, логіку і механізмы обробкі дадзэнняў. Гэта падходзіць для большых, складных продуктов, дзе адныя домэны функцыонуюць практычна як адзінаковыя системы, часта падтрымваныя разнымі камандамі, якія працуюць з певным ступенем незалежнасці адзін ад другога.

Выбір правай структуры для вашага проекту

Калькольныя сігналы можаць памагчы вам выбраць правы варыянт. Найважлівейшы ўскладненні — габарыты проекту: калькольныя компаненты добра працуюць у простай, неструктураванай структуре, але калі ў проекте з’яўляецца 15–20 компанент, падход, заснованны на функціях чы абласе, становіцца карысным і без яго стае важка працаваць. Таксама важлівы ўскладненні команды — адзіны разработчык можа обходзіцца менш строгай структурой, але команда выгадвае ад болей прагнозавальной структуры, каб новы спеціяліст могаў адразу зорыяцца, а не витрачаць тыдні на выучэнне особлівасцей кодавой базы. Нарэшце, падумайце пра тое, наскількі, як ожыдваецца, будзе раставаць проект. Короткачасны внутршні інструмент, які не будзе сильна расширвацца, не патрабуе складной структуры, але продукт, які плануецца працаваць гады, значна выгадвае ад планавання сваей структуры з самага пачатку, а не ад спробы ўсё перэбудаваць пазней, калі кодавая база вяліка і кожныя змены несу рэальную абарону.

Чаму моцная структура ўзнаграджваецца

Ценнасць правільнага падходу з самага пачатку не завжды становіцца ясной, пакуль проект не працавае ў режыме експлуатаціі прыблізна яшчо калькі часу.

• Шырэйша адаптация: Калі у новага разработчыка є чыстая структура, якой можна следаваць, ён можа раней прыносіць корыстны вклад, замест таго каб першыя тыдні або два прасвятіў на тое, дзе знаходзяцца розныя элементы. Багато команд выбіраюць наймаць разработчыкаў на ReactJS, якія вже сталкнуліся з такымі питаннямі на іншых большых проектах, што дапамагае ухіліцца ад распашчытых памылак.
• Прыемнейшая дэбаггаванне: Калі супаўзялыя файлы знаходзяцца поблізу адзін другога, вычысцэнне прычыны бага трэбуе значна менш часу. У большай аплікацыі з неорганізаваным структурам цяпер, што магло зайняць пяць хвілін, можа ператворыцца на дзяўгі пошук у нерелевантных папках, асобліва калі дэбагуеце код, напісаны іншым чалавекам.

Адаптаванне даўжэй: Хорашая структура — гэта не толькі арганізацыя таго, што існуе сёння; яна залишае прастор для таго, што будзе ў майбутнім, такім чынам новыя функцыі можна дадаць без неабходнасці перарганізаваць весь кодовы база ў кожны раз, калі продукт рухаецца ў новым напрамку.

Кращая саавершанасць: Чыстыя межы між папкамі зменшаюць рызык таго, што разработчыкі випадкова заменяюць роботу аднаго другога, што становіцца ўсё бол важлівым, калі калькі команды дзеляцца аднай базай дадзеных і выпускаюць перакрываючыяся функцыі працоўнае падобныя тэрміны. Якщо ваша команда сталкаецца з патрэбай такой перарганізацыі, часта цяперашняе выкарыстоўваць стороннія экспертызу замест таго, каб рашаць проблемы праз пробы і памылкі на жывом продукце.

Заключэнне

Не існуе ўніверсальна правильная структура проекта на React, але існуе неправильная структура для вашага конкрэтнага дапрыяву: гэта тая структура, з якой ваша команда постоянна сперачываецца, замест таго каб ўсё будаваць. Пачатак з простага, увага да перашкод у меру росту кодавой базы, а таксама перехад на структуру, заснованую на функцыях або домэне, калі з’яўляецца рэальная складнасць, зазвычай добра працуе для большасці команд з часам. Калі дапрыявы на React продовжаюць расширвацца — ад маленькіх панелей керування да повноцэнных платформ — рашэнні ў структурным аспекте, прынятыя на ранніх этапах, вплываюць на тое, насколькі паволі відбываецца гэты рост.

Якщо вы плануеце большэй проект і хочаце другую думку па тым, як правільна ўсунуць його структуру з самага пачатку, можа будзе карыстныя прыкладзіцца да компаніі па розвіццю React JS, адколі самэ гэтыя выборы архітектуры — там, дзе спецыялізаваный дазнаўнік часта робіць разліку.

Супакойленыя статты

• Як браузер атрымляе зображэння і як у гэтым процесе выступае React — Дазнаёцеся, як Critical Rendering Path, процес супрацоўкі даных, Fiber і Scheduler разам прыменяюцца, каб ператварыць апдэйты React у пікселі на экране.

Дзевяць распашчаеў, які спрычыняюць непатрэбныя перераскладанні элементаў у React — Апяшвае дзевяць распашчаеў стану і эфектаў у React, якія таямніча расшырваюць масштаб перераскладання, і як пераструктураваць компоненты, каб аптэнаты заставаліся локальнымі.

Дыягназаванне проблемаў з выдатнасцю React за межамі часу адпаведзі API — Дазволяе зразумець, чаму шырокія API не гарантуюць быстрой адпаведзі UI, і як процес раскладання, размер пакетаў і арганізацыя файлаў таямніча вплываюць на рэальную выдатнасць дапрацоўкі на React.