Представяме ви един модел на елемента

Правила и най-добри практики за създаване на надеждни градивни елементи с библиотеки на React и други компоненти.

Още през 2002 г. - когато започнах да изграждам неща за мрежата - повечето разработчици, включително и мен, структурираха техните оформления, използвайки

тагове.

Едва през 2005 г. започнах да следвам уеб стандарти.

Когато даден уеб сайт или уеб страница е описан като отговарящ на уеб стандартите, това обикновено означава, че сайтът или страницата имат валидни HTML, CSS и JavaScript. HTML също трябва да отговаря на указанията за достъпност и семантичност.

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

HTML кодът, който написахме, беше почти същият като изходния код, който отиде в браузъра. Това означава, че валидирането на нашия изход чрез W3C Validator и други инструменти ни научи как да пишем по-добър код.

Времето мина. За да изолирам части за повторно използване на предния край, използвах PHP, шаблонни системи, jQuery, Polymer, Angular и React. Последното, по-специално, използвам последните три години.

С течение на времето кодът, който написахме, ставаше все по-различен от този, обслужван на потребителя. В наши дни ние прехвърляме кода си по много различни начини (използвайки например Babel и TypeScript). Пишем ES2015 + и JSX, но изходният код ще бъде само HTML и JavaScript.

В момента, въпреки че все още можем да използваме W3C инструменти за валидиране на нашите уеб сайтове, те не ни помагат много с кода, който пишем. Все още преследваме най-добрите практики, за да направим нашия код по-последователен и поддържан. И ако четете тази статия, предполагам, че и вие търсите същото.

И аз имам нещо за теб.

Моделът на единичен елемент (Singel)

Не знам точно колко компоненти съм писал досега. Но, ако сглобя полимер, ъглов и реактивен, мога спокойно да кажа, че това число е над хиляда.

Освен фирмени проекти, поддържам котел с React с повече от 40 примерни компонента. Също така работя с Рафаел Томазела, който също допринесе за тази идея, на инструментариум с потребителски интерфейс с десетки повече от тях.

Много разработчици имат погрешното схващане, че ако започнат проект с перфектната файлова структура, няма да имат проблеми. Реалността обаче е, че няма значение колко последователна е вашата файлова структура. Ако вашите компоненти не следват добре дефинирани правила, това в крайна сметка ще затрудни вашия проект.

След като създадох и поддържам толкова много компоненти, мога да идентифицирам някои характеристики, които ги направиха по-последователни и надеждни и следователно по-приятни за използване. Колкото повече компонент наподобява HTML елемент, толкова по-надежден става.

Няма нищо по-надеждно от
.

Когато използвате компонент, ще си зададете един или повече от тези въпроси:

  • Въпрос №1: Какво става, ако трябва да предам реквизит към вложени елементи?
  • Въпрос №2: Това по някаква причина ще счупи ли приложението?
  • Въпрос № 3: Ами ако искам да предам идентификатор или друг HTML атрибут?
  • Въпрос №4: Мога ли да го оформя като преминаващ className или стил реквизит?
  • Въпрос №5: Какво ще кажете за обработващите събития?

Надеждността означава, че в този контекст не е необходимо да отваряте файла и да разглеждате кода, за да разберете как работи. Ако имате работа с

, например, ще знаете отговорите веднага:

  • Правило № 1: Представете само един елемент
  • Правило № 2: Никога не прекъсвайте приложението
  • Правило № 3: Представете всички HTML атрибути, предадени като реквизит
  • Правило № 4: Винаги обединявайте стиловете, предадени като реквизит
  • Правило № 5: Добавете всички обработващи събитията, предадени като реквизит

Това е групата правила, които наричаме Сингел.

Рефакторни разработки

Направете го да работи, след това го направете по-добър.

Разбира се, не е възможно всичките ви компоненти да следват Singel. В един момент - всъщност в много точки - ще трябва да нарушите поне първото правило.

Компонентите, които трябва да следват тези правила, са най-важната част от приложението ви: атоми, примитиви, градивни елементи, елементи или каквото наричате вашите основни компоненти. В тази статия ще ги нарека единични елементи.

Някои от тях са лесни за абстракция веднага: бутон, изображение, въвеждане. Тоест онези компоненти, които имат пряка връзка с HTML елементи. В някои други случаи ще ги идентифицирате само когато започнете да се налага да дублирате код. И това е добре.

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

Колкото по-висок е процентът на единични елементи в приложението ви в сравнение с други компоненти, толкова по-последователно и по-лесно ще се поддържа.

Поставете ги в отделна папка - елементи, атоми, примитиви - така че, когато импортирате някой компонент от нея, ще сте сигурни в правилата, които следва.

Практически пример

В тази статия се фокусирам върху React. Същите правила могат да се прилагат за всяка базирана на компонент библиотека.

Това каза, помислете, че имаме компонент на карта. Състои се от Card.js и Card.css, където имаме стилове за .card, .top-bar, .avatar и други селектори за класа.

В един момент трябва да поставим аватара в друга част на приложението. Вместо да дублираме HTML и CSS, ние ще създадем нов единичен елемент Avatar, за да можем да го използваме повторно.

Правило № 1: Представете само един елемент

Съставен е от Avatar.js и Avatar.css, който има стила .avatar, който извлечихме от Card.css. Това прави само :

Ето как бихме го използвали в Card и други части на приложението:

<Аватар профил = {профил} />

Правило № 2: Никога не прекъсвайте приложението

не прекъсва приложението, ако не предавате атрибут src, въпреки че това е задължителен. Нашият компонент обаче ще разбие цялото приложение, ако не преминем профила.

React 16 предоставя нов метод на жизнения цикъл, наречен компонентDidCatch, който може да се използва за изящно справяне с грешки вътре в компонентите. Въпреки че е добра практика да прилагате граници на грешки във вашето приложение, това може да маскира грешки в нашия единствен елемент.

Трябва да сме сигурни, че Avatar е надежден сам по себе си и да приемем, че дори и необходимите реквизити може да не бъдат предоставени от родителски компонент. В този случай, освен да проверяваме дали профилът съществува преди да го използваме, трябва да използваме Flow, TypeScript или PropTypes, за да предупредим за него:

Сега можем да изобразим <Аватар /> без реквизит и да видим на конзолата какво очаква да получи:

Често игнорираме тези предупреждения и оставяме конзолата да акумулира няколко от тях. Това прави PropTypes безполезни, тъй като вероятно никога няма да забележим нови предупреждения, когато се появят. Така че, не забравяйте винаги да решавате предупрежденията, преди да се умножат.

Правило № 3: Представете всички HTML атрибути, предадени като реквизит

Досега единственият ни елемент използваше персонализирана опора, наречена профил. Трябва да избягваме използването на персонализирани реквизити, особено когато те са картографирани директно в HTML атрибути. Научете повече за това по-долу, в предложение №1: Избягвайте добавянето на персонализирани реквизити.

Лесно можем да приемем всички HTML атрибути в нашите отделни елементи, като просто прехвърлим всички подпори надолу към основния елемент. Можем да разрешим проблема с персонализирани реквизити, като очакваме вместо това съответните атрибути HTML:

Сега Avatar изглежда повече като HTML елемент:

Това правило включва и изобразяване на деца, когато, разбира се, основният HTML елемент го приема.

Правило № 4: Винаги обединявайте стиловете, предадени като реквизит

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

Вътрешният стил на един елемент е еквивалентен на стила, който браузърите прилагат към естествените HTML елементи. Като се има предвид, нашият Аватар, когато получава опора на className, не трябва да замества вътрешния, а да го добави.

Ако приложихме вътрешен стил опора към Avatar, това би могло да бъде лесно разрешено чрез използване на спред на обекта:

Сега можем надеждно да приложим нови стилове към нашия единствен елемент:

<Аватар
  име на класа = "ми-аватар"
  style = {{borderWidth: 1}}
/>

Ако ви се наложи да дублирате новите стилове, не се колебайте да създадете още един единствен елемент, съставящ Avatar. Добре е - и често е необходимо - да се създаде един елемент, който прави друг единичен елемент.

Правило № 5: Добавете всички обработващи събитията, предадени като реквизит

Тъй като предаваме всички реквизити надолу, нашият единствен елемент вече е готов да получи всеки обработващ събитията. Ако обаче вече имаме, че обработващият събитията е приложен вътрешно, какво да правим?

В този случай имаме две възможности: можем изцяло да заменим вътрешния манипулатор с опората или да извикаме и двете. Това зависи от теб. Просто не забравяйте винаги да прилагате манипулатора на събитията, идващ от опората.

предложения

Предложение №1: Избягвайте да добавяте персонални реквизити

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

Използвайки Аватар като пример, поради някаква ексцентричност на дизайнера предполагаме, че имате някои места, където аватарът трябва да бъде квадрат, и други, където трябва да се закръгли. Може да мислите, че е добра идея да добавите закръглена опора към Avatar.

Освен ако не създавате добре документирана библиотека с отворен код, устоявайте на това. Освен въвеждането на необходимостта от документация, това не е мащабируемо и ще доведе до несъстоятелен код. Винаги се опитвайте да създадете нов единичен елемент - например AvatarRounded - който прави Avatar и го променя, вместо да добавя персонализирана опора.

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

Предложение №2: Получете основния HTML елемент като опора

Не всяка обичайна опора е зло. Често искате да промените основния HTML елемент, изобразен от един елемент. И добавянето на персонализирана опора е единственият начин да се постигне това.

Често срещан пример е изобразяването на бутон като :

<Бутон като = "a" href = "https://google.com">
  Отидете в Google

Или като друг компонент:

<Бутон като = {Link} до = "/ posts">
  Публикации

Ако се интересувате от тази функция, препоръчвам ви да разгледате ReaKit, инструментариум React UI, създаден с Сингъл.

Утвърдете вашите единични елементи, като използвате Singel CLI

Накрая, след като прочетете всичко това, може би сте се замислили дали има инструмент за автоматично валидиране на вашите елементи спрямо този модел. Разработих такъв инструмент, Singel CLI.

Ако искате да го използвате в текущ проект, предлагам ви да създадете нова папка и да започнете да поставяте сингелните си елементи там.

Ако използвате React, можете да инсталирате singel през npm и да го стартирате по този начин:

$ npm install - глобален сингъл
$ singel компоненти / *. js

Резултатът ще бъде подобен на този:

Друг добър начин е да го инсталирате като dev зависимост във вашия проект и да добавите скрипт в package.json:

$ npm install --dev singel
{
  "скриптове": {
    "singel": "компоненти на singel / *. js"
  }
}

След това просто стартирайте npm скрипта:

$ npm тичам сингъл

Благодаря, че прочетохте това!

Ако ви харесва и ви е полезно, ето някои неща, които можете да направите, за да покажете вашата подкрепа:

  • Натиснете бутона clap върху тази статия няколко пъти (до 50)
  • Дайте звезда ️ в GitHub: https://github.com/diegohaz/singel
  • Следвайте ме в GitHub: https://github.com/diegohaz
  • Следвайте ме в Twitter: https://twitter.com/diegohaz
dupliceopportunita.com © 2020