Angular 2 несе світ в галактику фронтенда

React, Redux, Angular, JavaScript, Dart — світ фронтенда знаходиться на межі повномасштабної війни адептів різних технологій. Настав час героїв — хто врятує світ у веб-розробці і стане головним героєм нової епохи? Здається, про це знає фронтенд-тимлид компанії Wrike Євген Гусєв. Нам вдалося відвернути його від роботи і поставити кілька запитань, які так хвилюють тих, хто вже встиг спробувати Angular 2 або ще тільки чув про нього. Євген розповів нам про переваги Angular 2, швидкості розвитку проекту, труднощі і радощі переходу на нього. Ми встигли обговорити React, JavaScript і Dart, — загалом, порівняти і змінити всі сили. Втім, вистачить тізерів. Магістр, вам слово!



— Розкажіть про себе, про те, з чим працюєте і як потрапили в Wrike?

Мене звати Євген, і я пишу на Dart і Angular 2. Напевно, дивний початок, але треба розставити всі крапки над «i». Працюю фронтенд-тимлидом в компанії Wrike, а починав з С++ під мікроконтролери, писав трохи на тому і на цьому, потім дійшов до C#. Коли перейшов в Dell, почав щільніше спілкуватися з фронтендом, причому самим банальним чином: кому-то треба було писати UI, а нікого не було. Причому писати почав відразу на CoffeeScript (так-так!). Роки йшли, і я перейшов в компанію, в якій я зараз працюю, а саме Wrike. Ми розробляємо велику SaaS-платформу для управління завданнями і спільної роботи. Зараз у нас майже 30 фронтенд-девелоперів, плюс команда верстальників, і ми, як Аліса з відомої казки, всі ростемо і розвиваємося.

Wrike пройшов досить великий шлях: від зовсім невеликої стартапу до двох мільйонів рядків коду за 9+ років розробки. Звичайно, за цей час у нас змінилася купа фреймворків та технологій. Все починалося з Dojo, потім Ext.js. Ми писали на Polymer 0.5, і, коли він став deprecated (з виходом версії 1.0), перед нами постало питання — що ж вибрати? Власне про те, які у нас були варіанти, і чому ми в підсумку вибрали Angular 2, я і розповім в своїй доповіді.



— Ваша доповідь на майбутній HolyJS озаглавлений як «Angular 2: знайомий герой, нові надії». Яку надію і кому може дати нова версія Angular?

Якщо коротко, то є Імперія (React world), а є повстанці (Angular). Коли-то в галактиці правила республіка, але потім, під тиском переважаючих сил їй довелося відступити. І тепер у світі скрізь тільки й чути: «React, Redux!» У стані Angular потрібен був герой, нова кров. І ось він прийшов.

А якщо серйозно, то так влаштована людина, що всі ласі на хайп і тренди, а в світі web тим більше, так як він змінюється набагато частіше, ніж, наприклад, бекенд. У Java — якщо технології менше 5 років, це beta. Тому у нас панує твиттерократия — править той, у кого більше репостов.

Колись Angular був самим модним, і тоді на нього сіло багато людей (тобто компаній, проектів). Звичайно, після світу jQuery — це було щось дуже круте і могутнє, як Стара Республіка (привіт фанатам Star Wars). Однак минали роки, Angular все більше відставав, і володарем умів став React. Зараз неможливо уявити собі жодної фронтенд конференції без теми про React або Redux і іже з ними.

Відступ: якщо ви прийшли на конференцію, і вона виявилася дико нудною, то згаяти час вам допоможе така цікава гра (так-так, ви правильно здогадалися! Це – «bullshit bingo»): гравці слухають доповідь, і, як тільки спікер каже «React» —всі випивають. Програє перший, кого виведуть із зали. За Redux всі п'ють два рази. Час пролетить непомітно, це точно. (привіт, Льоша https://habrahabr.ru/users/Flack/

Так от, Angular 1 вже не може змагатися з конкурентами — підхід до розробки, технологій змінився. Ми знову прийшли до товстим клієнтам з великим об'ємом бізнес-логіки, а вимоги до часу відгуку і швидкості роботи не змінилися. Навпаки, користувач каже: «У мене топовий комп'ютер, а ваш сайт працює повільніше, ніж гугл!» У підсумку складається така ситуація: у Angular як і раніше є чимало шанувальників, іноді з власної волі, іноді вимушено (legacy code). Однак, вони повинні переходити на React, тому що він, звичайно, на голову випереджає Angular 1.

І ось тут на сцену виходить Angular 2. React хоч і гарний, але не непогрішний, у нього є свої мінуси. Для тих, хто хоче альтернативи, або просто любить Angular, свіжа версія і може дати цю саму «нову надію».

— Angular 2 так значно відрізняється від попередньої версії? Може він змагатися з конкурентами?

Так, значно змінився. Та так, що між першою і другою версіями немає зворотної сумісності. Так, звичайно, це може звучати як «взяти все і переписати», але в основі Angular 1 лежать підходи, які зараз вже не працюють. Звичайно, в першу чергу, це двосторонній data binding. Сам по собі він не те щоб поганий, але його реалізація в першому Angular значно б'є по продуктивності. І звичайно, ніякого порівняння зі швидкістю React.
Робота над помилками була пророблена значна, команда розробників постаралася на славу. Я покажу і розповім про це в доповіді. Переваги нового Angular ми оцінили не тільки з «синтетичних» тестів і ToDo додатків, а, як я вже говорив, не так давно Wrike перейшов на Angular 2. Так що все, про що я кажу — «з перших рук». Всі бажаючі можуть зайти на www.wrike.com і спробувати, подивитися. Наприклад, швидкість Angular 2 ми оцінили відразу. Причому не одну, а цілих дві:

  • Швидкість роботи коду. Тут, звичайно, спрацював момент, що при зміні фреймворку код ще й подчищался, але тим не менш.
  • Швидкість розробки. На Angular 2 просто приємно і легко писати. До речі, документація досить повна, а що відсутня — легко зрозуміти з коду. Тут, в першу чергу, великий плюс у тому, що Angular 2 написаний на Typecript і транспилится у Dart. Яка часта проблема в JS: хочеш використовувати якусь функцію з бібліотеки, і розумієш, що незрозуміло — а які в неї взагалі аргументи. В документації не написано, IDE ставиш крапку, починаєш вбивати — тобі підказує десять функцій. У типизированном мовою з цим, звичайно, легше.


— Хіба Angular 2 ще не в beta версії?

У Зоряних Війнах є така цитата:«Змін не можна уникнути, так само як заходу сонця». Завжди потрібно змінюватися і підлаштовуватися під новий лад. Звичайно, було трохи страшно, але Angular 2 йде вперед величезними стрибками. Ще недавно вони були в beta, але вже готується release candidate (https://github.com/angular/angular/milestones).

— І скільки раз все ламалося з-за нових версій?

Насправді, жодного разу. Звісно, зміни в фрейморке постійно йдуть, і бувають breaking changes. Але, по-перше, вся розробка відкрита, тому про прийдешні зміни зазвичай завжди відомо заздалегідь. І по-друге, у нас хороша команда QA+Dev!

— А чому ви обрали саме Angular, а не той же React?

Як я вже казав, ми в Wrike пишемо на Dart. Про причини і плюси такого переходу ми вже багато де розповідалиhttps://www.youtube.com/watch?v=TtLMHfvY2uM). Про те, чому для великого проекту JS не дуже підходить, у мене був доповідь, яка у свій час викликала досить бурхливу дискусію.
До view framework ми висуваємо ті ж вимоги, що й до мови: багаті можливості «з коробки», модульність, швидкість, і сумісність з нашої екосистемою. React хороший, але у нього, на мою думку, є ряд мінусів:
  • Немає сутності для подій. Тобто компоненти можуть спілкуватися тільки з допомогою коллбеков, які спливають вгору. https://gist.github.com/bunopus/18792002dd40eab33c83e0252aa955a5#file-ng2vsreact)
  • Немає DI з коробки. Через це доводиться трохи милиць вставляти у вигляді High Order Component. (Є кілька рішень для DI — той же redux, reactive-di).
  • Немає типізації на рівні мови для опису інтерфейсів компонентів (тільки вбудована через propTypes і можливість прикрутити Flow).
  • Jsx — на тему якого є багато думок за і проти, тобто змішувати чи верстку та код чи ні.


тобто, в цілому, React вміє все, у нього багато точок розширення, відданих на відкуп зовнішнім розробникам, але при цьому не так багато ресурсів «з коробки». У нашому випадку такий плюралізм рішень — це не дуже добре.

Angular 2 багато забороняє, але і багато дає. Для нас в даний момент це оптимальний інструмент, так як його простіше адаптувати (потрібно змінювати тільки одну річ, а не розрізнений набір), простіше вчитися. І звичайно, великий плюс — його нативна підтримка Dart.


Незабаром ми розповімо про відмінності між React і Angular 2, слідкуйте за анонсами.

До речі, ми не єдина компанія з таким стеком (Angular 2 + Dart). Найбільша рекламна майданчик у світі використовує ті ж технології — я кажу про Google AdWords. Їх мотиви в цілому схожі на наші, більш детально можна прочитати в статті: http://news.dartlang.org/2016/03/the-new-adwords-ui-uses-dart-we-asked.html

— Аngular 2 + Dart. Яким проектам ви порадите вибирати таку ж зв'язку?

Терплячим розробникам ;-). Звичайно, перехід на Dart і Angular 2 робився не по клацанню пальців — тут було багато роботи. Але тут треба враховувати нашу специфіку, про неї, думаю, ми розповімо в нашому блозіhttps://habrahabr.ru/company/wrike/).
Якщо ж це новий проект, або ви замислюєтеся: «А не бахнуть мені все заново?», у першу чергу, я б радив подивитися саме цю зв'язку. Якщо виділяти якісь формальні ознаки, що я б назвав такі:

  • Ваш проект потрібно буде підтримувати тривалий час. Якщо ви знаєте, що через півроку проект закриють, то можна написати що завгодно. Знаєте JS — пишете на JS. Прочитали книжку «Php для самих маленьких» — пишіть на ньому. На Perl — будь ласка. Однак, якщо після вас прийде ще не одне покоління розробників, то, мені здається, вони вам скажуть спасибі за самодокументируемый код (наприклад, на Dart).
  • Значний обсяг коду. Цей пункт відсилає нас до першого. Все питання в підтримці. З мого досвіду, код на Dart здатний читати людина, яка вперше його бачить. Досить писати на С-подібному мовою (C, Java, C# etc).
  • Велика команда. Коли в команді від одного до трьох розробників — соціальні договори працюють: «Давайте будемо писати документацію», «Я тут зробив функцію — на виході рядок, а по понеділках — мапка, окей?», «Я там баг пофиксил, один модуль закомментил, завтра виправлю, поки не чіпайте». Але коли багато розробників, вже неможливо з усіма домовитися. А якщо ще й коду багато — може початися хаос. Тому чим меншою кількістю способів можна написати якусь логіку, тим краще. Ніхто ж не лає молоток, що їм неможливо фарбувати стіни.
  • Модульність. Якщо щось з перерахованого вище — про вас, то напевно ви б хотіли, щоб команди працювали максимально ізольовано. Тут Angular (втім, треба віддати належне й іншим мовам) працює на ура. Dart теж в цьому допомагає.


В цілому, все, що я перерахував, — це схоже на серйозний Enterprise (як до нього не ставитися). Це не означає, що ніяким іншим способом не побудуєш велике і надійне додаток — ні, звичайно. «Тільки ситхи все зводять в абсолют». Однак обидва інструменту (а Angular 2 в особливості) заточені саме під складний клієнтський код з великою кількістю логіки.

Кому може не підійти: якщо ви хіпстер, любіть під стаканчик свіжого смузі поколупатися «в кишочках» чого-небудь і імплементувати архітектуру Flux по-своєму («інші не розуміють, а я так бачу»). Ні, не тому, що я маю щось проти хіпстерів, а тому, що і Angular 2, і Dart, хоча і дають багато, але й забороняють багато. Тут різниця в парадигмах: «Single maintainer» vs «Community». Часом буває, що сам лаєшся: «ось тут би по-іншому», «навіщо тут так робити — ідіотизм», але це розплата за великі можливості для старту. У конкурентів Angular, наприклад, того ж React, куди більше можливостей для кастомізації.

— А які основні конкуренти Angular 2?

Порівнюючи різні фреймворки, часто ми порівнюємо екосистеми. Я думаю, що зараз у молодого Angular такі конкуренти, в порядку убування:
  • React. Тут стикаються не тільки екосистеми, але і релігії в якомусь сенсі. Про це я розповім в доповіді 5 червня.
  • Aurelia. Це теж досить молодий фреймворк, написана вихідцем з Google, який розчарувався в Angular 2 і вирішив написати свою бібліотеку «з преферансом і куртизантками». Виглядає досить перспективно, але деколи створюється враження, що він писався, виходячи з принципу «на зло мамі отморожу вуха».
  • Polymer. Тут Google конкурує сам з собою. Втім, не зовсім коректно їх порівнювати, все ж Polymer — це скоріше величезна бібліотека компонентів, а не цілісний фреймворк.
  • Як не дивно — Angular. Як і завжди буває з виходом нової версії чого-небудь, досить важко зрозуміти, навіщо переходити на свіжу версію, витрачати сили і час.


Якщо резюмувати — у Angular 2 є величезна перевага. З одного боку, досвідчена команда (багато брали участь у розробці першої версії) і база знань, як краще зробити. А з іншого, поки ще фреймворк не обтяжений вантажем зворотної сумісності, застарілих архітектурних рішень та іншого. Таким чином, Angular може взяти все найкраще з інших бібліотек і привнести світ в галактику.

— У ході нашої бесіди було дуже багато відсилань до Star Wars. Можна тебе попросити дати кілька рекомендацій фронтенд-розробникам у стилістиці цієї кіно-саги.

Ну, наприклад… Якщо перефразувати слова магістра Йоди «Гординя, упередженість… Все це веде на темну сторону сили». Я б порадив ніколи не заглиблюватися в крайності і не судити, не дізнавшись. Можливо, ні Стріла, ні Angular 2 вам не підійдуть. Можливо, це не найшвидші/зручні/модні інструменти. Але спробувати їх безперечно варто. Ми в Wrike, в свою чергу, завжди готові допомогти і відповісти на питання, заходьте в гості у наш пітерський офіс. Дякую за інтерв'ю, і «Так буде з вами сила».
Джерело: Хабрахабр

0 коментарів

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