company_banner

«Готовимся к переходу на Angular 4»: Tinkoff.ru о JS-разработке


    Как известно, клиенты Tinkoff.ru видят перед собой не отделение банка, а интерфейс сайта или мобильного приложения — так что для компании две эти вещи особенно важны. О мобильной разработке мы её недавно уже расспрашивали. А теперь в преддверии конференции HolyJS, где разработчик Tinkoff.ru Алексей Носов выступит с докладом, задали вопросы о JS/фронтенде: и самому Алексею, и руководителю HR-проектов компании Ольге Шпунтенко.


    Алексей Носов


    — Вводный вопрос: над чем вы работаете в компании?

    — Я занимаюсь проектами дистанционного клиентского обслуживания. Хоть у меня и внутренние заказчики, стратегически мы занимаемся улучшением качества нашего сервиса. Например, накапливается определённое количество пожеланий от клиентов по какой-то конкретной user-story, и они встают не в бэклог, а исполняются вполне себе быстро. Мы оптимизируем наши существующие проекты не всегда в рамках продукта, а в рамках клиентского обслуживания, влияем на конверсию.

    — Год назад под хабрапостом «Как мы разрабатываем новый фронтенд Tinkoff.ru» можно было прочитать, что компания не испытывает необходимости в Redux, а сейчас в ваших вакансиях можно увидеть его упоминания. За год ситуация изменилась?

    — Когда мы начинали, Redux был в зачаточном состоянии, непонятно, куда и как бы он развивался. Сейчас мы используем Flux, он гораздо больше подходит нашим требованиям к архитектуре. Тем не менее, это не мешает нам брать полезные штуки из Redux. В вакансиях мы пишем про Redux, потому что опыт его использования для нас индикатор: кандидат что-то понимает про современную архитектуру приложений, как управлять потоками данных React/Redux приложений, и, значит, довольно быстро разберётся в нашей архитектуре.

    — И банк в целом, и лично вы используете RxJS — а можете ли рассказать подробнее? Почему изначально ощутили потребность в нём? Столкнулись ли с подводными камнями?

    — У нас была проблема с тайпингами для специфичных классов Rx, используемых в тестировании. Сам по себе RxJS достаточно тяжеловесный, но, если выбрать правильную сборку, то вес можно уменьшить. Вообще, RxJS — это библиотека, позволяющая работать асинхронными потоками данных, которые можно рассматривать в качестве массивов и реализовать парадигму реактивного программирования для связи между собой компонентов приложений, генерирующих и потребляющих эти события. С помощью Rx можно в несколько строк реализовать сложную логику с помощью чистых функций, избавившись от возможных side-эффектов и проблем на этапе отладки.

    В «Тинькофф для Бизнеса» мы повсеместно используем RxJS. Преимущества можно загуглить — как минимум, это удобное связывание данных, one way data flow, что позволяет не путаться с направлением данных. Ощутили потребность в RxJS, когда стало сложно поддерживать старые приложения на первом Ангуляре, использующие промисы и эмиттеры, которые были слабо связаны и про которые можно было забыть. Когда мы переписали наш мессенджер на Angular 2 и RxJS, сразу повысилась производительность, облегчилась поддержка. Подводных камней нет, но, конечно, есть порог входа — нужно перестроить мышление (т.н. потоки данных).

    — Среди бэкендеров банк известен активным использованием Scala, что довольно необычно — а в технологическом стеке фронтэнда есть что-нибудь настолько же неожиданное?

    — У нас нет цели привнести побольше экзотики: на проекты выходит много новых людей, не хочется тратить их время и заставлять продираться сквозь дебри. Мы используем трендовые и популярные подходы, но и экспериментируем тоже. Например, с функциональным подходом — используем библиотеку ramda (альтернатива lodash).

    — Чего ждать от вашего доклада на HolyJS?

    — Я буду рассказывать про кобраузинг — демонстрацию экрана нашего клиента оператору колл-центра. Доклад называется «Как это сделать легко», но это совсем не легко — объяснить бабушке из Тамбова, как купить акции Амазона. Технических подробностей раскрывать не буду, приходите на доклад :)

    Ольга Шпунтенко


    — Tinkoff.ru очень нетипичный банк — а как эта необычность сказывается на JS-разработке, в чём оказывается ваша специфика?

    — Наша специфика — сначала сделать MVP, проверить идею, и, если она выстреливает, оптимизировать и развивать дальше.

    Тут такой интересный компромисс — с одной стороны, нужно сделать такой код, чтобы быстро проверенная идея могла потом быть легко развиваемой. При этом нужно достаточно строго соблюдать требования безопасности — мы ведь финансовая организация, работаем с приватными данными клиентов, это всё требует дополнительного контроля. С другой стороны, если ты будешь писать красивый академический код, но идея не пройдет проверку, его придется просто выбросить, а это обидно.

    Наш приоритет — производительность интерфейсов. Когда этап теста уже прошёл, мы, конечно же, оптимизируем и ужимаем всё, что можно — размеры бандлов, кэшируем запросы, и в принципе стараемся уменьшить их количество.

    — В компании давно использовали AngularJS, затем перешли к новому Angular («Angular 2»). А стал ли для вас значимым событием недавний выход 4.0 и собираетесь ли переходить на него?

    — Готовимся к переходу на Angular 4, уже перевели один из наших проектов — Стартер (это бутстрэп, с которого мы запускаем все наши новые проекты). Преимущества в том, что в нём оптимизирована работа с АOТ и серверным рендерингом. Есть некоторые трудности для гибридных приложений — например, проблемы с upgrade-адаптером, но мы их скоро полностью переведём на Angular 2.

    — Tinkoff.ru ещё и проводит митапы по Angular, и с последнего нет видеозаписей — в будущем стоит внимательно следить за расписанием, чтобы заставать их лично? Почему из возможных технологий митапы сосредоточились именно на Ангуляре?

    — Последний митап был с онлайн-трансляцией, потому что мы уже не вмещаем всех желающих :) Все видео положим на официальный канал нашего митапа на ютюбе, и на нашем сайте meetup.tinkoff.ru. Там же можно оставить свой е-мэйл, чтобы получать оповещения о предстоящих митапах — так точно не пропустите.

    Мы с удовольствием принимаем у себя разные комьюнити, и наши ребята участвуют в разных митапах и конференциях. Митап по Ангуляру мы решили проводить по очень простой причине — на тот момент их никто не делал :) Документации было тогда мало (на русском так и вообще не было), а у нас уже было что показать на проде. А вечный холивар между Реактом и Ангуляром вообще благодатная тема — всегда есть что обсудить, поделиться подходами. Ну, и набросить, конечно.
    JUG.ru Group
    826,00
    Конференции для программистов и сочувствующих. 18+
    Поделиться публикацией

    Комментарии 24

      +12
      Очень крутая статья, которая мне, как программисту, на многое открыла глаза.
      Таких бы статей побольше, а то последнее время хабр наводнили низкосортные
      бездарные рулоны с текстом. Я её в закладки наверное добавлю.
        +4
        сарказм?)
          +4
          А как по мне, так очередной рулон
            0
            На митап-то пойдете?
            0
            Готовимся к переходу на Angular 4, уже перевели один из наших проектов — Стартер (это бутстрэп, с которого мы запускаем все наши новые проекты).

            Так вы новые проекты будете делать на Ангуляре, а не Реакте? Почему?

              –1
              Потому что React просто модное фуфло по сравнению с Angular. Особенно без своих прицепчиков. Субъективное ИМХО. Можете кидаться тапками. ))
                +9
                Комментарии быстро подтвердили собой тезис «вечный холивар между Реактом и Ангуляром вообще благодатная тема» :)
                +3
                мы Ангуляр используем в проекте «Тинькофф для Бизнеса», платформа на Реакте. На чём делать новые проекты во многом зависит от команды:)
                  +1

                  Какая команда быстрее справляется с реализацией новых фич?

                    +2
                    А типа фичи на разных проектах одинакавые?
                      0

                      Но уж точно все фичи не могут быть уникальными и ни на что не похожими.

                      +1
                      Как вы предлагаете померить? Если бы это было соревнование, сделать одну и ту же функциональность, возможно, кто-нибудь бы и победил:)
                        +1

                        Хорошая идея для хакатона.

                  +6
                  выкиньте фронт-енд и верните виджеты, текущий интернет банк просто ужасен и очень тормознутый. Кто придумал эту концепцию, надо всех поувольнять
                    0

                    Поддерживаю, старый интерфейс был лучше. Текущий очень тормозной, стал юзать с мобильника, там нормально.

                      0
                      Интересно… он на реакте или на ангуляре, Вы случайно не в курсе? ))
                        0
                          +1
                          Я даже не засмеялся, если бы узнал что это попытка, очень талантливых react разработчиков, реализовать redux для angular! Потому что я даже не знаю, как можно сделать так медленно.
                            0
                            в консоле проверьте таким кодом
                            document.querySelector('[data-reactroot], [data-reactid]')
                            

                            он написан на
                            реакте
                              +1
                              Ну тогда уже без иронии. Странно что он ДЕЙСТВИТЕЛЬНО такой медленный. Наверное какие-то статистики личные и очень медленные, ведь чему ещё там грузить? Даже если предположить что код для всех роутов грузится вначале, то его должно быть очень мало и даже в дев среде он так не должен тормозить. У меня есть очень РЕАЛЬНО с красивостями и множеством кода, но даже в разработке он так не грузится долго.
                              Даже redux так замедлить не в состоянии. Может кто-то модный await нафигачил или ему подобное, что блокирует работу.
                                +3
                                Вход в банк:
                                * Ввёл пароль — ~20 запросов
                                * Ввёл код из смс — ~ 150 запросов
                                Может дело в этом?
                          +6
                          А теперь со всей этой хренотенью мы попробуем взлететь (с)
                          В итоге страница интернет-банка весит 6 Мб, грузится 25 секунд и показывает 3-4 полезных цифры на экран площади…
                            +3
                            Зато архитектура современная с т.н. потоками данных вместе с парадигмой реактивного программирования. Может вы просто мышление до сих пор не перестроили?
                            0
                            Год назад, если не ошибаюсь, тормозил только раздел бонусов
                            Теперь «висит» весь сайт. Молодцы.
                            :)

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое