Flutter протык React Native: Рашэнні, якія пазнаёцца толькі ў рэальных умовах выкарыстоўвання

Flutter і React Native практыкуе тое ж самае: напісаць адну базу коду, выкласты ёю дапрацоўку для Android і iOS, і перастаць падтрымваць два адналежныя натыўныя дапрацоўкі. На паперы ўсё выглядае аднакова, і для першага экрана дапрацоўкі гэта справдзіваеся. Стварэнне кнопкі, атрыбутаванне ліста, наладка навігацыі чы выкліканне адповедзі API є простым у будзь-якай з эйфорактур. Разлікі, якія насправды вплываюць на проект, там не прыкметны. Яны стаюць виднымі, калі дапрацоўка развіваецца з адзінаковым UI, анімацыямі, рэальным станом, інтеграцыямі з натыўнымі тэхналогіямі і гадамі падтрымкі. Гэта порэванне таго, што пачынае здавацца разным пасля дэманстрацыі, ўпрынцыпе, каб вы моглі выбраць на адной засадзе таго, як кожная эйфорактура працуе у масштабных умовах, а не таго, насколькі быстра яна выкартавляе „Hello World.“

Перша асцензія ўмыслова аднаковая

Оба фреймворка даюць можлівасць шыбкаа стварыць працуючыя дапрацоўкі. Вы можете ствараць экраны, дадаць навігацыю, вызываць API, атрыбутаваць спісы та обрабоўваць данні, якія апускае корыстувач, без неабходнасці роздзелвання на два натыўныя кодавыя базы, і самэ гэта спільнае прадуктыўнасць якраз і є прычыной, чаму команды спачатку выбіраюць міжплатформеныя інструменты. Просты экран выглядае практычна аднакова незалежна ад таго, калькі вы выберазе. Колі дапрацоўка становіцца складней, тады две філасофіі пачынаюць розходзіцца, таму адказвальныя порэванні відбываюцца у складных частках, а не ў стартовых шаблонах.

Flutter працуе з віджэтамі

Самая зразумелая асаблівасць у Flutter — гэта тое, што практычна ўсё, чым вы касаецеся, являе сабою віджэт. Экраны, кантакты, прасторава навакол іх, а таксама макет, які ўпорядковвае іх, — усё гэта віджэты; таксама як і багатыя структуры, якія ніколі не атракцеююць нічога візуальнага на экране. У гэтым прыкладзе столбець складаецца з пазначкі, некалькіх прастораваў і кантакта; кожны з эых элементаў ёсць самастоятельны віджэт, які знаходзіцца ўнутрь іншага віджэта ў структуре дрэва.

Column(
  children: [
    Text('Welcome'),
    SizedBox(height: 16),
    ElevatedButton(
      onPressed: () {},
      child: Text('Continue'),
    ),
  ],
)

Калі такая модэль выбрана, ствароўчы інтерфейс становіцца надзвычайна аднообразным: вы складаеце маленькія віджэты ў большыя, а большыя згодна стаюць цэлымі экранамі. React Native выбирае іншы падход. Ён описвае інтерфейс за дапамою компонентаў React, напісаных на JavaScript або TypeScript, таму ментальная модэль па сутнасці адпавядае ствароўчы ўраг React, што адразу ж здаецца прыродным для тых, хто вядома працуе з React. Жадна з модэляў не є абсалютна кращай. Яны проста спяшаюць вас думаць пра структураванне інтерфейсу разнымі спосабамі, а „правильны“ варыянт значна залежыць ад таго, якія інстынкты вже є у вашай команды.

Атрыбутаванне та ступень контролю над інтерфейсам

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

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

Dart проты JavaScript і TypeScript

Адзін з галоўных разлікоў прыступае ўжо да самага стварэння інтерфейсу: мова програмавання. Flutter створаны на базе Dart; React Native працюе на JavaScript, а ў болей серйозных проектах — на TypeScript. Dart — это мова з жорсткай типаваннем, створаная спецыяльна для викорыстання з Flutter, і як толькі вы ўсвайоміцеся з яю, стаўка на яе як на мову для коду прыложэння здаецца цэлкам логічной. Калькі заяваў з типаваннем выглядаюць так.

final String name = 'Ankit';
final int age = 25;

Такая статычная типаванняя спрыяе лепшаму розумэнню большых кодавых баз, адтолькі ўскладнення знаходзяцца і выправляюцца ўсё раней, чым прыложэнне запускаецца, так как кампайлер фіксуе цэлыя класы памылак. Команды React Native часта выбіраюць TypeScript, каб атрымаць тое ж практычнае прынесенне у свете JavaScript.

const name: string = 'Ankit';
const age: number = 25;

TypeScript апранае моцную типаванне, застаючыся часткай экасистемы JavaScript, і гэта ўсё ж такі справжнія прыбутак для арганізацый, якія вже інвеставалі ў JavaScript. Компанія з адкульшчэнай командай для розработы на React часта може болей шчодра адключыць React Native, таму што разрабоцкія працавальнікі переносяць концэпцыі, інструменты і прычыны, якія ўжо у ўпрабаванні. Для команды, якая абоўсюдзе прыкладзена да Dart, Flutter працоўвае як спецыялізаваная, самодостатня среда. Адплата за гэта — шырокае існуюча экасистема проты цэлеспрабаванасці спецыяльнаўскай среды.

Кантроль стану больш не ёсць простым завданнем

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

Оба экасыстэмы прысвячаны стварэнню вароў. У фреймворку Flutter сярод іх ёсць Provider, Riverpod, BLoC, Cubit, GetX і іншыя; у React Native — Redux, Zustand, MobX, Context API і ўсё больш. Колькасць пакетаў тут мало чаго сказывае. Ключовым пытаннем для забезпечэння адрабатнасці є тое, чы можа ваша команда стабільна структуруваць і развиваць стан прыкладнення з часам. Фреймворк можа запясці выдатную працэздатнась UI, але ўсё раве стварыць прыкладнення, якое немагчыма адрабатваць, якщо архітэктура стану ёсць слабая. Тая ж дысціпліна, якая падтрымвае цэласць архітэктуры React прыкладнення, прабывае і тут, незалежна ад таго, які фреймворк відображае пікселі.

Працэздатнась — гэта не цыфра-памятнік

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

Аплікацыя на Flutter, збудаваная некачэнна, можа працаваць медленна, так сама як і аплікацыя на React Native, збудаваная некачэнна. Непатрэбныя перзбудовы, часта выкарыстоўванне рэндарынгу, занадта вялікія картыны, неэфектывныя спісы, дорогія вычыслення, недбалая выкарыстоўванне памяці і паслаба спроектаваныя схемы супрацоўкі з мережай вызываюць сповалення працы, незалежна ад назвы фрэймворку. Болей значным пытаннем є тое, насколькі хораша архітэктура аплікацыі справляецца з ўсунутай на яе работай, а не тое, які фрэймворк выграе ў абстрактным супернікаванні. Адказ на пытанне „який швэцей“ ў большасці случаў не мае значэння, якщо не вядома, што самэўчынаеся.

Спісы памагаюць уточніць сутнасць

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

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    return ProductCard(
      product: products[index],
    );
  },
)

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

Экасістэма ўсё-такі являецца важлівым факторам

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

Перадзея Flutter ў тым, што яна пропонуе адносна сфокусаваную экосістэму, якая центруецца навакол Flutter і Dart; гэта можа здавацца дужо логічным для каманд, якія воліюць ствараць мобільныя дапыты, не павязваючыся з вельмі шырокім светам JavaScript. Ні адна з ягоў не є строга кращай; выбор залежыць ад таго, якія каманды у вас вже є.

Тады каторы з іх вам следуе выбраць?

Няма ўніверсальнага пабедця, а правильная выбор чыста залежыць ад спецыфікі проекту і людзей, які яго ствараюць. Якщо команда вже мае значны дазнаўцтва ў React і TypeScript, то React Native легка інтэгруецца ў яе існуючую структуру. Якщо ж команда хочаць спецыяльную платформэнезалежную рамку інтэрфейса, створаную на базе Dart і моделі, якая апоўнена віджэтамі, то Flutter являецца ідеяльным выборам. Аплікацыя, якая завісіць ад накупленага дазнаўцтва команды ў React і яе інфраструктуры на JavaScript, є пераконлівым аргументам на корыстаць React Native; аплікацыя, якой трэба высока індывідуалізаваны інтэрфейс, створанный людьмі, які вже знаюцься на Flutter, — пераконлівым аргументам за іншы варыянт. Патрэбна адмовацца ад помыслу выбраць рамку толькі таму, што якась статыя назвала ёю „лепшай“, а не таму, што яна падходзіць да вашага продукту.

Заключэнне

Flutter і React Native рашаюць тую ж загальную проблему з разных направленняў. Flutter задае модэль, базаваную на віджетах, з языкам Dart і чыста інтеграваным наборам засобаў для стварэння інтерфейсу, які чудова падходзіць для індывідуальнага дизайна. React Native прыносіць екоспэракт React і JavaScript у сферу мобільных прыстроёў, адкрываючы доступ да можлівасцяў натыўных платформаў за дапамогою архітектуры, якая значна працавала лепш, чым спачатку думалі. Жадны з вароў не робіць кожную аплікацыю автаматычна лепшай. Актуальны вопыт не ў тым, «каторы фрэймворк выграе», а ў тым, «каторы фрэймворк падходзіць для гэтага продукту, гэтай команды і гэтага типу аплікацыі». Практычна ўсё можа атрыбутаваць той першы экран; усё, што следуе пасля яго, — гэта там, дзе два фрэймворка справжнім чынам розходзяцца.