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. Можно тебя попросить дать несколько рекомендаций фронтенд-разработчикам в стилистике этой кино-саги.
Ну, например так… Если перефразировать слова магистра Йоды «Гордыня, предвзятость… Всё это ведёт на темную сторону силы». Я бы посоветовал никогда не ударяться в крайности и не судить, не узнав. Возможно, ни Dart, ни Angular 2 вам не подойдут. Возможно, это не самые быстрые/удобные/модные инструменты. Но попробовать их определённо стоит. Мы в Wrike, в свою очередь, всегда готовы помочь и ответить на вопросы, заходите в гости в наш питерский офис. Спасибо за интервью, и «Да пребудет с вами сила».
Автор: JUG.ru Group
