Progressive Web Apps: начало новой эры веб-приложений

Начало перемен в Web

В последнее время я всё чаще начинаю задумываться о судьбе современного Web. Привычный для нас веб потихоньку трансформируется во что-то грандиозное. Сейчас мы живём в эпоху стремительных перемен, за этим очень интересно наблюдать. Шумиха вокруг мобильных приложений, которая началась с появление iPhone и Android, потихоньку спадает. Количество приложений на смартфонах пользователей не растёт. У рядового юзера образовался определённый костяк приложений, которые он чаще всего использует: YouTube, Instagram, WhatsApp/Viber/Telegram, Facebook, VK, браузер (Chrome, Safari, Opera, Mozilla Firefox). В остальном нет необходимости. Если хочется почитать новости или развлекательный контент, всегда можно зайти на мобильную версию сайта, используя любимый браузер.

Мобильный вебсайт

Web 1.0

Когда я был маленьким, веб был примитивным. Большая часть сайтов в Интернете была статичной. Это был стандартный и привычный по сей день механизм рендеринга страницы на стороне сервера без какой-либо динамической составляющей на стороне юзера. Пользователь, используя браузер, посылал запрос на сервер, сервер его обрабатывал и возвращал назад готовую HTML страничку. О какой-либо интерактивной составляющей, а тем более шикарном user experience и речи не было. На компьютерах рядовых пользователей доминирующую роль играли desktop приложения, распространяемые на CD/DVD дисках (помните ведь эти сборники софта?). Но время не стоит на месте. Технологии стремительно развиваются, проникновение Интернета в дома простых людей неуклонно растёт, а с этим и скорость передачи данных. С приходом новых технологий, требование к качеству продуктов растёт. В 1995 году появился язык JavaScript, который до сих пор играет ключевую роль в нашей с вами повседневной жизни (хоть многие об этом и не догадываются). Благодаря его появлению Web «ожил». На, казалось бы, «бездушных» просторах Интернета появилась душа, странички стали оживать, благодаря модели DOM и тому как JavaScript «умело» справлялся с манипулированием элементов в браузере. Но тамошние веб-приложения были далеки от desktop приложений того мира…

Web 2.0

На смену эпохи Web 1.0 пришла новая эра. В 2005 году мир увидел технологию AJAX (Асинхронный JavaScript и XML). С появлением «аякса» привычная для пользователей Интернета модель обновления страницы, заключающаяся в полной перезагрузке, начала сдавать позиции. На смену пришла новая парадигма построения веб-приложений — фоновое взаимодействие между пользовательским браузером и сервером. Благодаря такому подходу браузер при обновлении контента на странице не перезагружал её полностью, а подгружал кусками в фоне за счёт чего у пользователя складывалось ощущение интерактивности во время взаимодействия с веб сайтом. Но и тут были свои проблемы, которые не давали полноценно вытеснить desktop приложения: плохая архитектура языка JavaScript, фрагментация браузеров и их производителей (Internet Exporer значительно отставал в развитии, но при этом занимал лидирующие позиции за счёт монополии Windows), сложность построения динамических веб-приложений, низкая скорость Интернет, а также качество связи. Помню как меня сильно раздражали веб-сайты, использующие AJAX повсеместно. Если во время взаимодействия с таким сайтом происходил обрыв связи, то было непонятно что делать дальше. Например, повторное нажатие кнопки могло привести к повторной отправке формы и дублированию информации. Также user experience значительно ухудшался за счёт кривизны рук у самих веб-разработчиков неспособных правильно обработать такого рода ситуации.

Эра мобильных приложений

Появление iPhone в 2007 году произвело фурор не только на потребительском сегменте, но и в производственном секторе также (Nokia потеряла позиции, Samsung значительно укрепила). Корпорация Apple изменила парадигму взаимодействия между пользователем и его смартфоном. Теперь небольшое устройство стало не просто средством связи с внешним миром, но и чем-то очень личным. Сегодня пользователи смартфонов во много идентифицирует себя со своим устройством, без него очень сложно жить современному человеку. Технологические новшества улучшили нашу жизнь: стало проще ориентироваться на местности благодаря Google Maps, поддерживать связь с близкими людьми через WhatsApp, развлекать себя смешным и не очень контентом на YouTube. Теперь каждый из нас может стать автором вирусного ролика или картинки благодаря мощнейшим камерам, встроенным в наши карманные устройства. Перечислять преимущества можно бесконечно.

Появление смартфонов временно остановило стремительное развитие веб-технологий. Началась эра мобильных приложений и их маркетплейсов (Google Play, App Store и т.д). Среди производителей устройств развернулась полномасштабная война за внимание потребителя. Кто-то в этой битве пал (Прощай, Nokia), кто-то оказался победителем (Да здравствует Samsung). Но наибольшую выгоду получили производители софта: Apple iOS и Google Android. Именно под их дудку пляшут многочисленные разработчики веб-приложений. Основная причина почему мобильные приложения стали популярны та же самая по которой в начале 2000-х доминирующие позиции занимали desktop приложения. Веб-приложения не могли конкурировать по причине скудного user experience (poor user experience). Нативные приложения (native apps) дают лучшее взаимодействие и обратную связь конечному пользователю, их проще разрабатывать благодаря продуманным инструментам и лучшей архитектуре систем. Но и в них есть подводные камни…

Недостатки мобильных приложений

В начале все были счастливы. Эксперты-технологи гордо заявляли о скорой кончине веба, мобильный трафик стремительно рос. За счёт конкуренции и широкой линейки устройств, цена снижалась. В бедных странах, где многочисленная часть населения не может позволить себе приобрести ноутбук, мобильное присутствие стремительно росло. Например, в Индонезии с населением около 260 миллионов человек, к 2018 году прогнозируется более 100 миллионов пользователей смартфонов. Большая часть интернет пользователей (более 80 миллионов) в стране выходит в сеть через мобильное устройство.

Indonesia Internet penetration

Indonesia Internet penetration

Всё бы ничего, да вот только разрабатывать мобильные приложения стало с каждым разом сложнее. Почему?

  • Фрагментация мобильных устройств
  • Многочисленность платформ
  • Актуальность информации
Фрагментация мобильных устройств

В стане Android устройств царит полный хаос. Производители предлагают целый спектр устройств: от мала до велика. Выбирай на любой вкус, тут есть и бюджетные варианты с небольшими экранами и скудными функциональными возможностями, а есть и флагманские устройства, напичканные по «самые помидоры» передовым железом и софтом, позволяющим превратить смартфон в космический корабль 🙂

Какое-то время Apple (пока был жив Стив Джобс) соблюдала строгую политику в отношении своих гаджетов. Новые версии устройств внешне мало чем отличались от своих предшественников, фрагментация была незначительной, а сама ОС закрытой. За счёт этого разработка приложений под iOS казалась не такой болезненной как под устройства на базе Android. Но мир диктует свои правила игры и чтобы получать максимальную прибыль нужно быть гибким. Теперь Apple выпускает устройства почти под все категории населения (от относительно бюджетных вариантов до дорогих устройств).

Многочисленность платформ

Под платформой в первую очередь я подразумеваю операционную систему устройства. Сегодня в мире лидирующие позиции занимает Android, за ним iOS, Windows Mobile и все остальные. С точки зрения бизнеса, продукту необходимо присутствовать хотя бы на 2-х из перечисленных платформ. Это в свою очередь несёт за собой определённые расходы на разработку и поддержку под обе системы. На пике своей популярности, разработчики мобильных приложений были своего рода Богами, получали высокие зарплаты (возможно и сейчас получают), на них остаётся высокий спрос до сих пор. Высокие зарплаты это постоянно растущие расходы.

Актуальность информации

Никогда раньше информация не имела такую ценность как в наше время. Но грош ей цена, будь она неактуальной. Современная жизнь стремительна, скорость передачи информации головокружительна. Современные инструменты и методы разработки информационных систем позволяют обновляться десятки раз в день без ущерба качеству продукта (при грамотном построении бизнес-процессов). Конкуренция с каждым днём растёт, конкурентным преимуществом помимо самого продукта также является и скорость его выхода на рынок, а также простота доставки конечному потребителю. Интернет ничто иное как дешевое и эффективное средство доставки продукта или услуги до конечного потребителя. Мобильные приложения в таком контексте оказываются далеко не лучшим средством потребления информации потому что:

  • Разработка и обновление приложений занимает время
  • Существуют задержки в распространении обновлений (модерация на маркетплейсах)
  • Из-за фрагментации устройств высока вероятность появления ошибок и нестандартного поведения на тех или иных девайсах
  • Сложность тестирования за счёт всё той же фрагментации
  • Пользователи неохотно обновляют приложения (обновления они могут и не заметить)

Web 3.0

Наступает новая эра веб-приложений. За последние годы front-end стремительно развивается, веб-разработчики приходят к понимаю, что манипулировать DOMом, используя jQuery стало не модно да и не так просто, когда перед тобой стоит задача написать сложное динамическое веб-приложение. Появляются всё новые абстракции. Сегодня хорошему front-end разработчику не составит труда написать кросс-платформенное веб-приложение, которое будет запускаться на всех ведущих платформах (Windows, Mac, Linux, Android, iOS) словно нативное (привет, Atom, Slack Desktop, Telegram Desktop, Visual Studio Code), используя например Electron.

Появление React и AngularJS растормошило привычный уклад веб-разработки. Новшества в современных браузерных движках заставляют задуматься о будущем веб-приложений и роли браузеров в них. Всё идёт к тому, что в ближайшее время мы будет пользоваться только браузером. Уже сейчас пользователи большую часть времени проводят внутри браузера. Современные веб-приложения вроде Google Docs практически ничем не уступают привычному всем нам Microsoft Word 🙂 И это только начало. Мобильный Chrome помимо всего прочего позволяет веб-разработчикам взаимодействовать с железом мобильного устройства на уровне API, например, считывать заряд батареи или наличие Bluetooth и многое другое. О повсеместном внедрении пуш-уведомлений через браузер я вообще промолчу.

Недавно открыл для себя новый термин — «Progressive Web Apps«. Судя по всему родоначальником этого термина является корпорация Google. Главная суть подхода — построение высокопроизводительных веб-приложений с передовым user experience, который можно сравнить с нативными приложениями. Если хочется глубже копнуть в эту тему, предлагаю посмотреть видео с Google I/O:

И вот ещё интересное видео о Progressive Web Apps:

Если бы в стане нативных мобильных приложений всё было хорошо и гладко, такие штуки как React Native или Angular Mobile Toolkit не получили бы широкое распространение и признание. Сегодня мы наблюдаем удивительную трансформацию веба. Мобильный Интернет стал быстрым, доступным и дешевым. К слову, в Казахстане за меньше чем 5 долларов в месяц можно получить доступ к 4G LTE с неограниченным мобильным трафиком. Удивительно.

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

Мой краткий прогноз на ближайшее будущее:

  • Бурное развитие браузеров, в частности Chrome. Появление новых API для работы с устройством на низком уровне.
  • Трансформация desktop/mobile приложений в т.н. progressive web apps.
  • Потуги в создании операционной системы-браузер (ChromeOS) скорее всего продолжатся. Монополию Microsoft на рынке ОС сложно сдвинуть, поэтому мы увидим и трансформацию самой Windows и в частности браузера Edge.
  • Игровая индустрия также не стоит на месте. Благодаря WebAssembly и развитию самих браузеров мы сможем играть в полноценные 3D игры. К слову, игры это отдельная тема для разговора. Мне кажется, что в ближайшем будущем для того, чтобы играть в самый последний шутер, не нужно будет иметь навороченый компьютер. Сама игра будет в «облаке». То есть запуск игры будет происходить на мощнейших серверах, а весь видео-поток транслироваться на машину игрока. В этом плане немалую роль также может сыграть браузер.

Что касается меня, то я уже начал активно изучать построение сложных веб-приложений и пока что остановил свой выбор на AngularJS 2. Почему? Об этом постараюсь рассказать в следующих постах, а пока видео на закуску 🙂

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

Полезные ссылки

  • Anton Kochnev

    А я подсел на Vuejs 😉
    А по остальному — те же мысли.

    • Vuejs сейчас тоже активно стал развиваться. Думаю скоро и хороший каркас для создания progressive web apps появится для мобилок

  • Anya Kuznetsova

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

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

    • Спасибо за отзыв 🙂 А можно пример таких вот «хотелок» для себя?

  • До вашей статьи не слышал про PWA — интересная концепция.
    И, конечно, очень хочется узнать почему же Angular 2. Очень молодая технология, которую пока единицы используют в продакшене. Не страшновато делать на нее ставку?

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

    • Почему же молодая? С 2013 года, а с учетом скорости развития технологий можно сказать, что даже «старая», если речь именно про 2-ю версию, то она определённо лучше первой во всех смыслах (правда несовместима). Основная причина — Angular 2 это фреймворк в отличие от того же React, к тому же используется TypeScript как основной язык + поддержка со стороны Google.

      • Да, я имел ввиду именно вторую версию. Она ведь очень сильно отличается от первой. И пока, кажется, не проверена кучей работающих проектов 🙂
        Сам я судить о плюсах/минусах пока не могу. Просто выбираю что выбрать для изучения как более перспективный вариант.

        • React и Angular жить точно будут, ИМХО. Проблема Angular2 в несовместимости и поэтому сейчас не так много библиотек и компонентов для второй версии, хотя для первой их достаточно. На их переписывание нужно время, но процесс уже запущен. Google активно педалит Ангулярку, а ещё стоит учесть, что Chrome также детище Google.