Мир web’а в эпоху mobile first

Уже давно в продуктовой разработке популярен девиз mobile first, что приводит к выпуску мобильных приложений с основной функциональностью, а веб используется для привлечения новых клиентов. Несмотря на это, количество открытых вакансий фронтенд разработчиков постоянно растет. Возникает вопрос — насколько долго будет продолжаться этот рост и какие компетенции в фронтенд разработке будут популярны. Для ответа на этот вопрос я подготовил выступление в рамках Google Developer Group Party, а здесь будет расшифровка этого выступления.

Знакомство

Структура управления

Из этого рисунка ясно, что мы отвечаем за разработку публичного web’а, мобильного банка и сервисов управления данными, поэтому яя могу достаточно свободно говорить о перспективах web’а в эпоху mobile first. Теперь, когда мы познакомились, давайте перейдем к основной части.

Статистика современного потребления интернета и мобильных приложений

  • 4.57 млрд людей используют internet
  • 5.16 млрд уник мобильных пользователей (~ 2/3 от популяции)
  • Пользователей мобильного интернета 92% от всех (4.2 млрд)
  • Веб-трафик делится так: 52% mobile, 45.3% desktop, 2.7% tablet
  • Веб-трафик между мобильными OS: 72.3% Android, 27% iOS
  • Самые популярные сайты (SimilarWeb): Google, Youtube, Facebook
  • Самые популярные приложения (MAU): Facebook, Whatsapp, FB Messenger, Wechat, Instagram, Tiktok

Видно, что проникновение интернета и мобильных устройств очень велико. Мобильный трафик обгоняет веб, а Android приблизительно в 3 раза больше iOS. Среди трех самых популярных веб ресурсов два сайта компании Google и один Facebook. Если смотреть на мобильный рынок, то Google владеет самой популярной платформой, а Facebook четырямя из шести самых популярных приложений (FB, Whatsapp, FB Messenger, Instagram). То есть Google и Facebook самые яркие компании, что двигают рынок вперед. Теперь, когда мы знаем текущую ситуацию, давайте заглянем в историю и поймем как мы сюда пришли.

Таймлайн развития технологий

Таймлан развития технологий

Начало (1989–2000)

В 1994 году Марк Андриссен вместе с Джеймсом Кларком основали компанию Mosaic Communications Corporation, впоследствии переименованную в Netscape Communications Corporation. Применяя опыт работы над Mosaic, они создали новый браузер Netscape Navigator, первый выпуск которого состоялся 15 декабря 1994 года. В 1995 году руководители Netscape поручили Брендану Эйхому внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Это позволило бы сделать страницы динамичными. По легенде этот язык был спроектирован за неделю.

В 1996 году был стандартизированы каскадные таблицы стилей (CSS), которые тогда поддерживались так себе, поэтому не сильно повлияли на практику создания вебсайтов.

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

В 1999 году Internet Explorer от Microsoft завершил победой первую браузерную войну, в которой он разгромил Netscape Navigator. Казалось бы дальше падать некуда, но уже в 2000 году лопнул пузырь доткомов и многие компании обанкротились, что привело к временному охлаждению инвесторов к технологическим компаниям.

Зарождение мобильных (2000–2009)

В 2002 году сотрудники Netscape Communications стартовали проект Firefox, который пришел логически на смену Netscape Navigator.

В 2004 году была создана компания Facebook, которая стала глобальной социальной сетью, а также владеет 4 из 6 топовых (по метрике MAU) приложений, а именно Facebook, Whatsapp, FB Messenger, Instagram. И эта компания как и Google сильно повлияла на развитие веб и мобильных технологий, что будет видно в дальнейшем.

В 2005 году появилась технология Ajax, которая позволила сделать сайты динамическими так, чтобы в фоне можно было отправлять запросы на сервер, а потом получать ответ и частично изменять html страницу без полной перерисовки ее на стороне сервера.

В 2006 году появилась jQuery, которая обеспечила кроссбраузерный способ написания кода, а в каждом браузере тогда был собственный зоопарк имплементаций рекомендаций W3C. А также эта бибилотека упростила использование Ajax.

В 2007 году вышел iPhone от Apple с тачскрином, что было новым глотком в мобильном мире. А уже в 2008 году был выпущен Android от Google, который в итоге занял доминирующее положение на мобильном рынке.

Также в 2008 году компания Google выпустила свой браузер Chrome, который решил посягнуть на лидерство Internet Explorer и в котором был реализован JavaScript движок V8 с открытым исходным кодом.

Уже в 2009 году этот движок берет Райан Даль для создания Node.js, где он отхходит от традиционной модели параллелизма на основе потоков и обращается к событийно-ориентированному подходу. В итоге, целью Node становится предложить простой способ построения масштабируемых сетевых серверов.

В том же 2009 году выходит мобильный фреймворк для создания приложений Apache Cordova (до этого Nitobi, а потом PhoneGap), который позволял писать кроссплатформенные приложения, используя веб технологии … Работало это все так себе:)

К началу 2010 году веб-технологии уже окрепли, а мобильные технологии появились и начали завоевывать рынок.

Ускорение развития (2010–2020)

В 2010 году компания Microsoft решила заскочить в уходящий поезд и вышли на рынок с Windows Phone, которая стала приемником Windows Mobile.

В 2013 году Facebook выпустила open source бибилиотеку React для разработки пользовательских интерфейсов. React тоже может использоваться для разработки одностраничных приложений. Целью его создания было — предоставить высокую скорость, простоту и масштабируемость решений, использующих эту библиотеку.

В том же 2013 году вышел фреймворк Electron от GitHub, который позволял разрабатывать нативные графические приложения для настольных операционных систем с помощью веб-технологий. Основан он был на Node.js и библиотеке рендеринга из Chromium.

В 2014 году вышел фреймворк Vue, который во многом похож на React. Но по ощущениям сейчас кривая обучения новичков для него более пологая.

В 2015 году Chrome вышел в лидеры среди браузеров, получив больше половины рынка — так он победил во второй браузерной войне. В этом же году Facebook выпустила React Native — open-source фреймворк для мобильной разработки, который позволял использовать React наряду с нативными возможностями платформы. В 2015 году широкую известность приобрела технология PWA благодаря расширению возможностей браузера Google Chrome и продвижению Service Worker и Web App Manifest. Тогда же дизайнер Фрэнсис Берримэн и инженер Google Chrome Алекс Рассел придумали сам термин PWA.

В 2016 году Google выпускает вторую версию Angular, которая обратно несовместима с первой. Возникает коллизия в нейминге и Google переименовывает Angular 1 в Angular JS, а за новой версией остается старый нейминг.

В 2017 году Google выпустил open source фреймворк Flutter, который позволяет разрабатывать кроссплатформенно под Android, iOS и веб. Правда, там используется эзотерический язык Dart, который за 9 лет существования так и не стал широко распространен.

Импакт двух компаний Google и FB

Импакт Google и Facebook на развитие web’а и mobile

После того, как мы рассмотрели таймлан развития технологий давайте вернемся в наши дни.

Web сейчас

Web сейчас

Во второй браузерной войне победил Chrome, еще в 2015 отожрав больше половины рынка. Причем часть конкурентов Chrome теперь работают на базе open source движка Chromium:)

Среди платформ можно выделить следующие:

  • обычный Web — я назвал его Web as Usual
  • Web для mobile — его мы обсудим отдельно
  • Web и backend — по нему тоже будут примеры
  • Desktop и Electron — эту штуку упомянем мельком, но на ней работает любимый многими Visual Studio Code и не всеми любимый Slack

Теперь давайте подробнее.

Web As Usual

  • React — это обычно выбор решения для создания интерфейсов для конечных пользователей отдельной фронтовой командой
  • Angular — это выбор для создания богатых интерфейсов, наподобие разнообразных административных панелей или веб приложений типа онлайн бухгалтерии
  • Vue — это выбор тех, что хочет React, но с более пологой кривой входа aka php разработчики, которых назвали fullstack’ами и заставили писать современный фронт

Сами веб приложения тоже меняют свой статус. Раньше именно в десктопном браузере происходило основное использование продукта. Потом оно начало смещаться постепенно в мобильный браузинг, а дальше в мобильное приложение. В итоге, сейчас для новых компаний создающих b2c решения зачастую веб остается в качестве средства привлечения, посадочных страниц и страниц с описанием продуктов, а само использование продукта идет через мобильное приложение.

Если говорить про мой опыт в Tinkoff, то этот сценарий заметен все ярче. Так как я последние несколько лет был CTO управления привлечением до перехода на новую позицию, то и пример мой будет из этой области. А конкретно про то, что и привлечение теперь тоже сдвигается в сторону мобильных приложений. Для этого давайте рассмотрим стандартный flow привлечения нового клиента.

Стандартный flow нового пользователя Tinkoff

Если кратко, то раньше мы находили новых клиентов в одном из каналов, например, социальные сети или контекст (рекламные объявления в поиске). Дальше мы приводили этих клиентов на посадочные страницы, где они заполняли форму на продукт. Дальше продукт выпускался и доставлялся клиенту. Часть клиентов начинали пользоваться продуктом, обычно устанавливая мобильное приложения для удобства использования. Эта схема является довольно стандартной и работает достаточно хорошо.

Но мы решили ее расширить и улучшить путем добавления привлечения через мобильные приложения. В последних релизах нашего Мобильного Банка появился следующий flow:

  • вы видите рекламу нашего банка
  • переходите по ссылке и скачиваете мобильное приложение
  • внутри мобильного приложения заполняете заявку на продукт
  • и ждете пока вам его выпустят и привезут … но если вы заказали prepaid карту, то использовать ее можно почти моментально, без ожидания доставки

В итоге, mobile врывается даже на территорию привлечения и в перспективе становится значимым каналом. Комбинированный flow выглядит так

Комбинированный flow нового пользователя Tinkoff

Web и Mobile

Мобильная разработка: native, cross-platform, hybrid, web

У каждого из представленных на изображении вариантов есть свои плюсы и минусы, но если принимать решение с точки зрения технологических и продуктовых инвестиций, то

  • если надо испробовать идею, то проще всего начать с web’а + добавить PWA, а потом если нужны Google Play и App Store, то завернуть приложение в нативную оболочку
  • если идея летит и есть ресурсы, то стартуем нативную разработку
  • если идея летит, но писать дважды или даже трижды (если учитывать web отдельно) не хочется, то можно положиться на кросс-платформенный фреймворк типа React Native или Flutter, но надо помнить об их ограничениях

Web и backend

Для клиентов же это выглядит так, как на рисунке снизу. Клиент открывает экран мобильного приложения, на общее API отправляются три (а может и 33 запроса). Общее API отправляет его дальше по сервисам, собирает данные и возвращает мобильному приложению.

Старый способ работы фронтенд части (web/mobile)

В такой схеме есть несколько проблем

  • много вызовов с фронта — мы грузим сеть
  • мердж данных на фронте — мы пишем логику сборки частей данных, пришедших из разных API на фронте, а зачастую еще несколько раз (как минимум для iOS и Android)
  • размазанный ownership между front и back — мы не можем получить именно то, что мы хочем от API, так как владеет им другая команда

Один из вариантов решения этой проблемы — это паттерн Backend For Frontend. Подробнее теорию можно прочитать в статье Сэма Ньюмана. Если же возвращаться к практике, то это выглядит как-то так

Новый способ работы фронтенд части (web/mobile)

По-факту, мы добавляем отдельные сервисы Mobile Backend For Frontend и Web Backend For Frontend, за которые отвечают команды Mobile и Web соответственно. В эти сервисы уезжает логика опроса общего API и мердж данных. В итоге, фронтовый код становится проще и легче в поддержке, а сложный код у нас оказывается на стороне backend сервисов, над которыми у нас гораздо больший контроль и мы способны их релизить с той частотой, которой нужно. Новая схема решает ряд проблем старой и имеет ряд особенностей:

  • Много io нагрузки — асинхронная модель хороша
  • Ownership за командой фронта (web/mobile) — классно если стек близок
  • Потенциально добавляется еще одна точка отказа + увеличивается время ответа, т.к. ждем самый долгий ответ

Про десктоп и Electron мы уже обсудили раньше и здесь останавливаться не будем. А значит время подводить итоги.

Итоги

  • Начинать с веба все еще относительно просто и интересно
  • На этом стеке можно писать под большинство платформ (но ограничений больше, чем при использовании нативных инструментов)

Это конечно все хорошо, но что нас ждет дальше?

  • Мобильная разработка как и веб все больше коммодизируется
  • На смену mobile first приходит AI first подход, о котором говорили главы Facebook и Google еще в 2016 году
  • И как туда запрыгнуть веб разработчикам?
  • Можно посмотреть в сторону TensorFlow.js, библиотеку для ML, которую можно использовать как в браузере, так и на сервере с Node.js — это позовлит понять является ли вашей темой ML … или ну его:)

Источники

  1. Мобильная разработка: native, cross-platform, hybrid, web … — моя статья на Medium
  2. Pattern: Backends For Frontends — статья Сэма Ньюмана
  3. Эволюция web’а tinkoff.ru за последние 3 года — мое выступление на ArchDays 2019
  4. TensorFlow.js — javascript библиотека для ML, которую можно использовать как в браузере, так и на сервере с Node.js
  5. Презентация этого выступления

Director of digital ecosystem development department at Tinkoff. Bachelor at applied math, Master at system analysis, Postgraduate studies at economics.

Director of digital ecosystem development department at Tinkoff. Bachelor at applied math, Master at system analysis, Postgraduate studies at economics.