Шлях довжиною в React

VoxImplant ми використовуємо React.js і TypeScript для всіх нових фронтенд-проектів. Але намагаємося не зациклюватися на обраних інструментах і уважно дивимося по сторонах – не летить орел, не повзе змія, чи не трапилося що цікаве в інших фреймворків. Нещодавно нам попалася стаття, автор якої докладно і вдумливо порівнює React з Ember. І, так, у нього великий досвід роботи і з першим, і з другим (а не як це зазвичай буває). Пропонуємо вашій увазі адаптований, і, сподіваємося, легко читається, переклад.

3 січня 2016 року Ден Абрамов опублікував твіт:

«Хочу, щоб в 2016 році більше програмістів React створили що-небудь з допомогою Angular, Ember, Cycle. А програмісти Angular, Ember, Cycle – на React. Разом ми дізнаємося більше».

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

Це було якось так:


У боротьбі з документацією Angular

Перше незалежне фронтенд-додаток я зробив для шкільного проекту. Зліпив його за допомогою Angular, і додаток не було видатним. Я буквально спіткнувся через бібліотеку. Документація здалася мені складним для проходження, і тому процес навчання придушував мене. Все закінчилося тим, що я зробив програму, але у нього не було routes. Тому, за великим рахунком, воно було марним. На захист Angular можу сказати, що тоді я був ще зовсім зелений, і не міг оцінити – хороша чи погана документація для Angular 2.

Після невдалого досвіду я став шукати інші варіанти і вирішив спробувати Ember.


Моя реакція на документацію Ember

Вивчення Ember має такі ж труднощі, як вивчення чого-небудь, взагалі. Але порівняно з Angular, вчитися було легше. Не стверджую, що Ember легше Angular, а Angular важче, ніж Ember. Але підкреслю те, що я дійсно люблю співтоваристві Ember: увага до документації. Те, як спільнота веде документацію, робить знайомство з Ember простим. З моєї точки зору, вивчення Ember означає вивчення угод, прийнятих у цьому фреймворку. Ember застосовує філософію convention over configuration.

Фреймворк надає розробнику:
  • раутинг з допомогою Ember Router,
  • «выполнялку» для тестів,
  • фреймворк для тестів,
  • бібліотеки data persistence з ember-data,
  • бібліотеку роботи з асинхронним кодом RSVP,
  • інтерфейс командного рядка в ember-cli,
  • стандартну структуру проекту в Pods
  • багату систему аддонов.
Як ви могли помітити, в коробці інструментів Ember багато додаткових «плюшок». Буде потрібно час, щоб зрозуміти, як це все працює. Але після того, як подолали цю науку, ви відразу ж стаєте дуже продуктивним. Ви легко починаєте проект або приєднуєтеся до нього, бо знаєте, що де лежить.

Але іноді готові інструменти не йдуть ні в яке порівняння з власної архітектурою програми.


Розробка з допомогою React

React.js – це бібліотека, а не фреймворк. Очевидно, що вона не забезпечує розробника тими можливостями, які є у Ember. Ember дає вам будинок, а React – інструменти, за допомогою яких можна побудувати будинок. Або вежу. Чи космічний корабель. Але це не мій випадок. Прийшовши з Ember, де все готове, на початку важко зрозуміти, що і як використовувати React – особливо в частині налаштування тулчейна. Багато людей, які навчаються працювати з допомогою React, відчувають втому і, в деякому розумінні, розгубленість.

Після того, як ви налаштуєте все самі, навчитеся в процесі, що і де використовувати – це буде цінним уроком для вас як розробника. Корисно вивчити, як використовувати Webpack і лоадери, як налаштувати дів сервер або выполнялку тестів, наприклад Karma, з фреймворком тестування, наприклад, Mocha. Впевнений, що знання, які я отримав, можуть мені допомогти в майбутньому, і я буду цінувати всю роботу, яка робиться в Ember.

Самостійна настройка все може виглядати якось так:



Але це того варто!

Досить просто вивчити, як працювати з React. В останні роки React вплинув на багато JavaScript-фреймворки. Ember не став винятком. Він перейняв підхід «компоненти насамперед», дуже простий лайфцикл, систему «дії вгору, дані вниз», і інше.

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

Після того, як я вивчив і використав Ember з React, не можу стверджувати, що один фреймворк краще іншого. Обидва представляють різні підходи до вирішення одних і тих же проблем. І до того ж представляють різну філософію створення програмного забезпечення. Думаю, що замість того, щоб вибирати, на яку сторону стати (як якщо б це була війна), ми повинні віддати належне важкій роботі, яка лежить в основі створення будь-якого програмного забезпечення з відкритим програмним кодом – якими ми користуємося, з чиєю допомогою навчаємося і, якщо можемо, контрибьютим.

Зрештою, фреймворк або бібліотека, яку ми оберемо, буде визначатися терміном, поточною проблемою і, що ймовірно, керівником розробки. Круті програми можуть бути зроблені і за допомогою Ember.js, React.js. Обидві екосистеми прекрасні.

P. S. JSX не так вже й поганий.
Джерело: Хабрахабр

0 коментарів

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