React.js State of the art (інтерв'ю з Max Stoiber)



Сучасна розробка веб-інтерфейсів зосереджена навколо кількох великих спільнот. Протягом останніх п'яти років React завойовував симпатії програмістів з різних галузей. React – це одна-єдина бібліотека, зробила MVC рудиментарним в програмуванні веб-інтерфейсів. Сьогодні React використовується найбільшими компаніями для розробки найрізноманітніших продуктів — Facebook, Airbnb, BBC, Coursera, eBay, Expedia, IMDB, список можна продовжувати.

Однією з унікальних особливостей світу React є найбільше і дуже активна спільнота опенсорс-розробників навколо нього. Max Stoiber — один з тих людей, завдяки яким React став тим, чим він є на сьогодні як проект. Впродовж останніх кількох років він працював над найпопулярнішим boilerplate проектом в співтоваристві і впроваджував найновіші та найкращі технології в масове використання.

Ми поговорили з Максом про нові віяння в співтоваристві, про статичної типізації для розробки з React, про новий підхід стилізації компонентів і про snapshot-тестуванні.

До секретів розробки на React можна долучитися нижче в інтерв'ю.

– Привіт, Макс! Що цікавого відбувається зараз в React Community?

styled-components — новий прекрасний спосіб стилізувати React-компоненти (зрозуміло, я суджу упереджено, так як сам зробив цей проект разом з Glen Maddern). Але якщо серйозно, React VR виглядає дуже багатообіцяюче, чекаю не дочекаюся хорошого шансу випробувати його в справі.

– Flow і React – розробка Facebook, і здається, що React-команда більш схильна до flow (react-native, наприклад, повністю покритий flow) react теж використовує flow. Чи означає це, що краще використовувати flow з React, ніж TypeScript? Може TypeScript бути потенційною заміною Flow + Babel?

– У своїй роботі я використовував зв'язку Flow і Babel з тієї простої причини, що ці два інструменти зроблені розробниками з Facebook і, отже, гарантовано будуть сумісні з React. C TypeScript трохи інша історія. У планах розробників Flow є багато цікавих ідей, від яких TypeScript буде неминуче відставати силу деяких особливостей свого пристрою (наприклад, dead code elimination).

Flow створює так званий Flowgraph, який представляє собою граф всього додатки — він запам'ятовує, які модулі пов'язані один з одним. TypeScript не пропонує нічого подібного, тому що це занадто велике завдання, Flow заходить далі. Flow визначає, відрізані великі частини програми від іншої частини коду, і пропонує видалити їх! Джефф Моррісон багато говорив про це на ReactEurope.

– React-boilerplate входить в топ-10 найбільш відомих і використовуваних boilerplate-проектів на всьому GitHub! Як ти думаєш, що зробило його настільки популярним?

– React-boilerplate входить в Топ-3, якщо рахувати create-react-app. Думаю, спільнота дуже допомогло йому увійти у першу трійку. Проект користується популярністю через активності спільноти навколо нього. Якимось чином мені вдалося забезпечити постійний приплив учасників, які проводять багато часу, покращуючи його. На відміну від багатьох інших boilerplate, це проект не одного ентузіаста — це робота величезної групи людей!

За допомогою react-boilerplate ви можете досить швидко розгорнути готову середовище для розробки і тестування вашого майбутнього React-додатки. Проект містить у собі інструменти для командного рядка, які допоможуть вам генерувати нові компоненти для майбутнього додатка за допомогою декількох коротких команд! Готова структура папок для ваших компонентів, styled-components, вся необхідна конфігурація для роботи з Babel та багато іншого у вигляді скомпільованого проекту тут і зараз доступні в цьому проекті.

Приєднуйтесь до спільноти, ради відгуками і участі.

– Ти нещодавно проводив опитування про те, як люди керують стилями в React-додатках і css-in-js. Які висновки ти можеш зробити? Що таке взагалі css-in-js (люди розуміють під цим різне)? Чим це краще, ніж просто CSS? Як стилізувати React-компоненти? Гарні inline-styles? Використовуються ще BEM/OOCSS?

– Мій висновок — нам потрібен більш зручний спосіб стилізувати компоненти, саме тому ми і стали працювати з Glen Maddern на styled-components, які, сподіваємося, вирішать всі проблеми! Використовуйте styled-components!

Особливість styled-components в тому, що вони забезпечують використання передових методик у ваших компонентно-орієнтованих системах. Моя виступ на ReactiveConf розповідає про це в деталях. У двох словах, суть у тому, що, позбуваючись зв'язку між компонентами і стилями (назви класів), ви створюєте цілу систему невеликих компонентів, які повністю зосереджені на виконанні одного завдання, також це допомагає розмежувати компоненти-контейнери та презентаційні компоненти.

Примітка автора: на сьогодні styled-components не підтримують можливості підсвічування синтаксису у всіх популярних редакторах і IDE, але Макс запевнив у своїй презентації на ReactiveConf 2016, що незабаром ця життєво необхідна функціональність буде доступна в Atom, WebStorm та інше.


– Які інструменти для розробки c React ти можеш порекомендувати?

Redux DevTools відмінний інструмент, тому що дозволяють мені дуже легко відстежувати всі зміни, які відбулися в моєму додатку, поки воно працює. На відміну від роботи з іншими фреймворків, наприклад, Angular, який використовує двосторонній прив'язку даних, я знаю абсолютно точно, що і чому відбувається в моєму додатку.

React і Redux DevTools просто прекрасні, дуже шкода, що не всі їх досі використовують.

Примітка автора: React Developer Tools, в свою чергу, є незамінним інструментом для візуалізації ієрархії компонентів у додатку. Ви можете аналізувати State, Props компонентів, не вдаючись до дебаггеру і не модифікуючи код.
– Якщо подивитися, чим тестують js і React зокрема, голова трохи йде обертом. Mocha, ava, jest, enzyme… теж кілька Способів, shallow testing, можна використовувати jsdom, нещодавно з'явилися ще snapshot'и в jest. Що нам з усім цим робити? Немає тут React testing fatigue?

– Не думаю, більш того, більшість цих інструментів не використовуються виключно для React. Інструменти для тестування існують вже багато років. Я великий шанувальник Jest, не тільки з-за того, що він зроблений австрійцем (Christoph Pojer), але також і тому, що snapshot-тестування — це справжня революція у тому, як люди тестують React-компоненти і в тестуванні взагалі!

Snapshot-тести спрощують юніт-тестування. По суті, вони автоматизує всю роботу, яку раніше доводилося виконувати вручну – ви просто робите знімок, і коли ви щось змінюєте, ви можете повідомити Jest: «Так, це правильне зміна» (що буде підтверджено в ході code review) або «Ні, все поламалося, поверніть як було!». Все відбувається автоматично, так що робити юніт-тестування тепер легко і швидко!

– Redux все ще на коні? Варто використовувати MobX?

– Я використовую в моїх програмах Redux разом з redux-saga і дуже задоволений цією комбінацією.

Можна уявити Saga у вигляді окремого потоку в додатку (JavaScript, звичайно, залишається однопоточним). Сага комунікує з головним потоком за допомогою Action (Redux Actions) асинхронно. Для програми неважливо, що відбувається після того, як кнопка натиснута, воно просто запускає Action. Потік Saga може почекати, поки дія дійде, зробити що-то, а потім відправити Action назад — весь цей час наше основне додаток не підозрює, що взагалі виконується якийсь Action. Тому що, коли Saga повертає Action, воно просто повторно рендерится, і все!

Це дивним чином покращує розробку, так як ваше основне додаток і ваші довгі поточні транзакції дійсно дуже, дуже чисті. Все ваше додаток стає чистим, функціональним і легко тестованим.

– Що не візьми: CSS, тестування, типізацію, bundling — у React купа рішень. Як ти вважаєш, це проблема? Всі React-додатки різні, як сніжинки, може, нам потрібні стандарти?

– Ні, я зовсім не вважаю, що нам необхідні стандарти. React використовується для створення складних інтерактивних додатків (принаймні, це його призначення). Кожний такий додаток, в силу своєї природної складності, висуває різні вимоги.




Незважаючи на удавану різноманітність можливих рішень, сьогодні вже можна виділити ряд рекомендованих передових підходів для вирішення типових завдань у розробці додатків, таких як стилізації, тестування і налагодження React-компонентів.

Можливо, styled-components трохи сируваті для використання в серйозних програмах сьогодні, проте все залежить тільки від прикладених зусиль контриб'юторів React-спільноти, які працюють над ним прямо зараз. Дайте їм півроку – або внести власний внесок у розробку однієї з найбільш популярних і сучасних бібліотек на сьогодні. Після розмови з Максом можна прийти до висновку, що сила React не стільки в продуктивності або паттернах, скільки в дружному співтоваристві людей, відкритих до нових ідей і відданих загальній меті робити розробку веб-інтерфейсів все краще і ефективніше.



Якщо ви намагаєтеся стежити за світом JavaScript, то найближчим професійний захід для вас – технологічна конференція HolyJS 2016 Moscow. На конференції буде 20 доповідей, присвячених JavaScript-розробки для фронтенда, бекенду, десктопа і навіть VR.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.