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

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

Запись трансляции выступления

Знакомство

Я руковожу управлением разработки цифровых экосистем в Tinkoff. Был когда-то аналитиком, разработчиком, тимлидом, руководителем проектов, руководителем отдела и вот теперь руковожу управлением, в котором порядка 250 крутых технарей. Вот из каких отделов состоит наше управление

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

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

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

И начнем мы со статистики текущего потребления интернета. Для релевантности анализа я взял Digital 2020 April statshot report от команды We Are Social. Этот отчет очень интересен в общем, поэтому рекомендую его полистать. Но в этой статье меня интересуют только следующие цифры:

  • 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 самые яркие компании, что двигают рынок вперед. Теперь, когда мы знаем текущую ситуацию, давайте заглянем в историю и поймем как мы сюда пришли.

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

Для того, чтобы понять что нас ждет в будущем, хорошо бы понять где мы находимся сейчас, а это в свою очередь завист от того, какой путь мы прошли. И для того, чтобы вспомнить последние 30 лет развития технологий веба я построил следующий таймлайн

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

Начало (1989–2000)

Web как таковой зародился в CERN, а конкретно в голове гениального Тима Бернерс-Ли, который занимался там разработкой распределённых систем для сбора научных данных в 1984. В 1989 году, работая в CERN над внутренней системой обмена документов Enquire, Бернерс-Ли предложил глобальный гипертекстовый проект, ныне известный как World Wide Web. Проект был утверждён и реализован. С 1991 по 1993 год были предложены спецификации URI, HTTP и HTML. В 1993 появился браузер NCSA Mosaic Марка Андриссена, который стал одной из важнейших вех становления Всемирной паутины, поскольку обеспечил её популяризацию благодаря доступности широкому слою пользователей персональных компьютеров.

В 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)

В тот же кровопролитный 2000 год комапния Microsoft вышла на рынок с Windows Mobile для Pocket PC. Это были интересные телефоны с резистивными экранами, где управлять было не пальцами, а стилусом (привет Galaxy Note).

В 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 году Google выпустило Angular — javascript-фреймворк, предназначенный для разработки SPA (Single Page Application), который стал довольно популярным. Изначально он разрабатывался как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки корпоративных приложений.

В 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 на пару поучаствовали в создании большей части описанных выше технологий, если исключить зарю всемирной паутины (с 1989 по 2000 год). И это не совпадение

Импакт 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

В текущий момент фронтовые веб решения обычно создают используя богатстов инструментов, созданных эру фреймворков (с 2010 по 2020 год). По моему мнению, самыми значимыми является трио React, Angular, Vue. Причем у каждого из инструментов своя сфера применимости

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

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

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

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

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

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

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

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

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

Web и Mobile

Про это я рассказывал в отдельной статье на Medium “Мобильная разработка: native, cross-platform, hybrid, web …”. Для затравки дам иллюстрацию из презентации и выводы.

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

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

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

Web и backend

Здесь приведу пример из своей практики. Зачастую в компании есть мобильные и веб приложения, за которые отвечают отдельные команды. Еще есть API общего назначения, за который отвечает отдельная команда. За этим API расположены backoffice системы, которых может быть много и у которых свои команды и свои roadmaps. В такой схеме API обычно является общим и предоставляется всем +/- одинаково.

Для клиентов же это выглядит так, как на рисунке снизу. Клиент открывает экран мобильного приложения, на общее 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. Digital 2020 April statshot report от We Are Social
  2. Мобильная разработка: native, cross-platform, hybrid, web … — моя статья на Medium
  3. Pattern: Backends For Frontends — статья Сэма Ньюмана
  4. Эволюция web’а tinkoff.ru за последние 3 года — мое выступление на ArchDays 2019
  5. TensorFlow.js — javascript библиотека для ML, которую можно использовать как в браузере, так и на сервере с Node.js
  6. Презентация этого выступления

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store