Всем привет! 👋

Меня зовут Алексей Родионов (@alexey_rodionov). И эту неделю @jsunderhood буду вести я.

Кто я такой? 👇

* PWA-разработчик, организатор русскоязычного сообщества, посвященного прогрессивным веб-приложениям (Progressive W… twitter.com/i/web/status/1…

* спикер, адвокат Web-платформы, евангелист PWA, Web Components, GraphQL. Выступаю на конференциях, фестивалях и ми… twitter.com/i/web/status/1…

* лидер сообщества Google Developers Group Krasnodar. Организовываю IT-мероприятия в Краснодаре.

* ведущий frontend-разработчик в Mercury Development (mercdev.com). Создаю команду мечты.

* ex-CTO в стартапе «ГдеЗерно» (“Uber” для зерновозов).

* UI/UX-инженер, open-source-контрибьютор. В свободное время попиливаю инструменты для GraphQL. Топлю за Developer Experience (DX).

* В общем, и швец, и жнец, и на дуде игрец. 😀

И, как вы уже могли догадаться, эта неделя будет посвящена PWA, Web Components и GraphQL.

А начнём мы завтра с PWA. 😉

Но для начала 3 опроса:

Разрабатываете ли вы прогрессивные веб-приложения (Progressive Web Apps, PWA)?

(Обосновать свой ответ, а также под… twitter.com/i/web/status/1…

Используете ли вы нативные веб-компоненты (Web Components)?

(Обосновать свой ответ, а также поделиться ссылками с… twitter.com/i/web/status/1…

Используете ли вы GraphQL?

(Обосновать свой ответ, а также поделиться ссылками с описанием своих проектов можно в… twitter.com/i/web/status/1…

Я вас обманул. 😀 4-й (теперь точно последний) опрос:

А пользуетесь ли вы PWA как потребители?

Сколько в данный момент прогрессивных веб-приложений установлено на ваших… twitter.com/i/web/status/1…

Что же такое PWA? 👇

Когда меня просят на пальцах объяснить, что такое PWA, я обычно говорю, что это такие сайты, иконку которых можно д… twitter.com/i/web/status/1…

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

Но на самом деле, это не так. Вот правильное определение PWA:

PWA — это веб-приложения, которые применяют стратегию прогрессивного улучшения (progressive enhancement), то есть п… twitter.com/i/web/status/1…

Как видите, в определении нет ни слова об иконке на главном экране, работе без доступа к интернету, получении push-уведомлений и т.д. 😀

Термин PWA был придуман в 2015 году инженером Google Алексом Расселом (@slightlylate) и его супругой Фрэнсис Беррим… twitter.com/i/web/status/1…

Идея PWA не нова — главные концепции были заложены и реализованы еще в Palm webOS, Firefox OS и Chrome OS, где все… twitter.com/i/web/status/1…

Еще в 2007, за 18 дней до выхода первого iPhone, Стив Джобс сформулировал идею приложений, которые создаются с испо… twitter.com/i/web/status/1…

App Store изначально не планировался, а в течение первого года существования устройства родной SDK не был доступен.

Кстати, у PWA есть одобренный сообществом логотип: github.com/webmaxru/progr….

Впервые на то, что у технологии нет св… twitter.com/i/web/status/1…

Народным голосованием победил логотип от Диего Гонзалеза (@diekus). В то время он был DevRel'ом команды Samsung Int… twitter.com/i/web/status/1…

Кстати, заметил, что многие, на кого я подписан в Twitter, кто так или иначе связан с PWA, перешли работать в Micro… twitter.com/i/web/status/1…

О PWA я узнал чисто случайно в 2015 году благодаря, как это ни странно, другой технологии — Web Components и проекту Google Polymer.

На Google I/O 2015 помимо самой библиотеки Polymer для создания Web Components был представлен набор готовых веб-ко… twitter.com/i/web/status/1…

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

Какие преимущества я для себя выделил?

* Низкий порог входа:

Для написания PWA не нужно изучать проприетарные SDK, достаточно знать HTML, JS, CSS.

Для разработки не требуется специальное оборудование (как, например, в случае с iOS), и можно даже обойтись без IDE… twitter.com/i/web/status/1…

А если у вас уже есть веб-приложение или сайт, можно постепенно внедрять различные Web API.

* Настоящая кроссплатформенность:

PWA работают на устройствах любого форм-фактора, на любой архитектуре и ОС, где есть браузер и доступ в интернет. О… twitter.com/i/web/status/1…

А единая кодовая база снижает стоимость разработки и дальнейшей поддержки.

* PWA выглядят и работают как нативные приложения:

PWA глубоко интегрируются в операционную систему, запускаются через иконку на главном экране, получают push-уведомл… twitter.com/i/web/status/1…

* Не требуют установки и обновлений:

Чтобы воспользоваться PWA, достаточно посетить сайт. Необходимый для работы к… twitter.com/i/web/status/1…

* Децентрализованность, открытость и независимость:

Веб — самая крупная платформа, больше, чем все остальные платф… twitter.com/i/web/status/1…

Однако при желании PWA можно упаковать в легковесную нативную оболочку и опубликовать в Google Play, App Store и других магазинах.

* Все преимущества веб-платформы:

PWA — это сайт, а значит весь контент индексируется поисковиками. У каждой стран… twitter.com/i/web/status/1…

Также пользователь может скопировать любой текст на экране и перевести на другой язык, изменить масштаб страницы, о… twitter.com/i/web/status/1…

* Меньший размер:

PWA сами не реализовывают API — они лишь вызывают API, уже реализованные в браузере. При запуске… twitter.com/i/web/status/1…

* Безопасность:

Код PWA выполняется в песочнице браузера, а для его загрузки и передачи данных используется безопасное соединение HTTPS.

Также веб-приложения используют более защищенную модель разрешений. Например, в отличие от нативных Android-приложе… twitter.com/i/web/status/1…

С преимуществами PWA всё ясно. А что насчёт недостатков? Неужели их нет?

Ещё как есть! Да столько, что они заслуживают отдельного треда. 🧵

* Неодинаковая поддержка на разных платформах:

Например, все браузеры на iOS вынуждены вместо собственного движка… twitter.com/i/web/status/1…

Так, браузеры на iOS-устройствах не поддерживают Web Push API, без которого не получится доставлять push-уведомления.

На самом деле, это проблема iOS, а не PWA. Но бизнесу или конечным пользователям не объяснишь…

Типичный пример: appleinsider.ru/app-store/ya-p….

* Look and feel:

В большинстве случаев, немного попользовавшись, я могу отличить PWA от нативного приложения.

* Отставание в возможностях:

Да, за 5 лет разрыв в возможностях, которые доступны нативным приложениям и которые д… twitter.com/i/web/status/1…

Недавно у меня появился шлем виртуальной реальности. И угадайте, что я проверил первым делом? )

Правильно: как PWA работают в VR. 😀

Кстати, я использую довольно извращённую конфигурацию:

Я установил Windows 10 Pro 64-bit через Bootcamp на свой Macbook Pro 16″ 2019, CPU Intel Core i9 9980HK @ 2.40-5.00… twitter.com/i/web/status/1…

Для тестов даже пришлось доработать демку. 🛠️

👀 Live demo: immersive-web.github.io/webxr-samples/…

📝 Pull request:… twitter.com/i/web/status/1…

Результаты тестов меня не обрадовали.

Ожидание / реальность: pic.twitter.com/8EtadjGGYJ

Снимать каждый раз шлем, чтобы разрешить или запретить доступ к тому или иному Web API — плохой UX.

Поэтому я откр… twitter.com/i/web/status/1…

Там можно почитать ответ разработчиков браузера, почему сделано именно так, что такое trusted pixels и почему всё н… twitter.com/i/web/status/1…

Кстати, в процессе ещё одна доработка демки, чтобы проверить, как в VR отображаются push-уведомления. 😉

А есть кто из команды @yandexbrowser?

Почему Яндекс.Браузер на Android не предлагает пользователю установить PWA,… twitter.com/i/web/status/1…

Почему PWA "не взлетают"? 👇

Ну, на самом деле, это не так.

Вот навскидку список известных зарубежных PWA:

Instagram, Twitter, Telegram, YouTu… twitter.com/i/web/status/1…

А вот навскидку список популярных российских PWA:

VK, Aviasales, 2GIS, ivi, Tinkoff, Meduza, Юла, Trivago, DNS Sho… twitter.com/i/web/status/1…

Если вы знаете ещё популярные сервисы известных российских брендов, которые являются PWA, пишите в комментариях. Gotta Catch 'Em All!

У Telegram, например, аж целых 3 разных PWA!

web.telegram.org
webk.telegram.org
webz.telegram.org

Потому что PWA ещё только в начале пути. Интерес к PWA только растёт, спрос на разработку только появился.

Потому что мышление людей ещё не перестроилось.

Раньше веб представлял из себя набор отформатированных документов (страниц).

Сейчас веб — это полноценная платформа, причём самая большая (она больше, чем все остальные платформы вместе взятые… twitter.com/i/web/status/1…

Из-за ошибок в продвижении и позиционировании технологии на рынке на ранних этапах.

Многие до сих пор думают, что… twitter.com/i/web/status/1…

Во-первых, это не так:

medium.com/dev-channel/wh…

Вообще, если вы следите за новостями веба, то могли заметить, что вокруг PWA кипят настоящие страсти. 👇

Самое интересное, на мой взгляд, происходит вокруг инициативы под названием Web Capabilities (кодовое название — Pr… twitter.com/i/web/status/1…

Это инициатива проекта Chromium по сокращению разрыва между возможностями, которые доступны нативным приложениям и… twitter.com/i/web/status/1…

Safari и Firefox могли бы организовать подобные инициативы, но не стали этого делать.

С Apple всё более-менее понятно.

Кажется, что команда браузера Safari и движка WebKit намеренно не улучшает поддержку прогрессивных веб-приложений,… twitter.com/i/web/status/1…

Так, например, в ходе WWDC 2020 компания Apple объявила, что не будет реализовывать в Safari поддержку целых 16 Web… twitter.com/i/web/status/1…

Я считаю, что проблемы нужно решать, а не бежать от них. Тем более, что у Apple есть на это ресурсы.

Ситуация обостряется ещё и тем, что на iOS, согласно требованиям всё того же App Store, все браузеры без исключения… twitter.com/i/web/status/1…

Примечательно также и то, что это первый раз, когда Apple использовала термин PWA с момента его появления.

А вот с Firefox интереснее. Буквально через несколько дней после заявления Apple команда Firefox объявила, что тоже… twitter.com/i/web/status/1…

Всё это приводит к расколу и фрагментации веба как платформы.

Именно Firefox ещё до появления термина PWA заложил многие концепции и прототипы Web API, например, для работы с ап… twitter.com/i/web/status/1…

Всё намного прозаичнее:

habr.ru/p/521248

habr.ru/p/515534

Но не стоит думать, что Google и Microsoft такие белые и пушистые. У каждой компании свои собственные цели и мотивы.

В отличие от Apple, большая часть бизнеса Google строится так и иначе вокруг веба (Поиск, Gmail, YouTube, ChromeOS… twitter.com/i/web/status/1…

С Microsoft всё тоже более-менее понятно. Её платформа Windows Phone умерла. Никто не хотел писать приложения под э… twitter.com/i/web/status/1…

После того, как Microsoft Edge переехал на Chromium, Chromium получил доминирующее положение в вебе.

Почему это пл… twitter.com/i/web/status/1…

Пользуясь доминантным положением, Google ни раз была замечена в пропихивании стандартов в вебе.

То есть, по сути, у пользователя есть выбор между Safari и Safari.

С одной стороны, если выйти на улицу и спросить первого встречного, нужно ли ему, например, Web USB API или Web HID… twitter.com/i/web/status/1…

С другой стороны, Chromium заявляет, что не добавляет никакие API просто так от нечего делать (это, на самом деле,… twitter.com/i/web/status/1…

Разгадка кроется в том, кого понимать под "пользователями".

Кто эти пользователи, которые просят Web API?

Разработчики!

Конечным пользователям и бизнесу в целом всё равно, ч… twitter.com/i/web/status/1…

PWA — это вообще про разработчиков и developer experience (DX).

Подумайте сами: основные идеи PWA были заложены инженерами, термин PWA был придуман инженером, PWA продвигаются Dev… twitter.com/i/web/status/1…

Это мы, как разработчики, хотим писать на веб-технологиях и иметь все эти API, как у других платформ, в веб-платфор… twitter.com/i/web/status/1…

Это объясняет различия в политике команд Google Chrome, Microsoft Edge и Samsung Internet, у которых есть целая арм… twitter.com/i/web/status/1…

При этом нельзя отрицать пользу Project Fugu для конечных пользователей.

Во время пандемии многие пользовались вид… twitter.com/i/web/status/1…

Так в чём же принципиальная разница между Web API для доступа к камере и микрофону и Web API для других аппаратных… twitter.com/i/web/status/1…

Ах да, чуть не забыл, ещё я — соавтор проекта Far Cry Beta Restoration Project:

moddb.com/mods/brp/artic…

Кто помнит Far Cry 1? pic.twitter.com/32dXN9SmPB

Нас в команде 4 человека и мы занимаемся тем, что по крупицам восстанавливаем, как игра выглядела до релиза.

Я отв… twitter.com/i/web/status/1…

Зачем мы это делаем? Just for fun!

Например, недавно удалось раздобыть pre-alpha demo, которую показывали на выставке E3 в 2002 году (за 2 года до релиза!).

Игре уже почти 20 лет, а она до сих пор занимает особое место в моём сердце. )

Помню, как перед Новым годом с 2003 на 2004 год отец купил компьютер. И вот уже до боя курантов оставались считанны… twitter.com/i/web/status/1…

А на 23 февраля мать подарила мне журнал Computer Gaming World, Russian Edition (был такой журнал о компьютерных иг… twitter.com/i/web/status/1…

На одном из дисков к этому журналу как раз и была демо-версия Far Cry 1, представляющая из себя один уровень из игр… twitter.com/i/web/status/1…

Помню, что на видеокарте ATI Radeon 9200 SE на стандартных, средних настройках графики игра представляла из себя вы… twitter.com/i/web/status/1…

Ах да, весь интерфейс был на английском, а интернета у нас тогда ещё не было. Приходилось искать каждое слово в бум… twitter.com/i/web/status/1…

И вот мне удалось запустить игру. Это был просто взрыв мозга! 🤯

Помню, что вечером того дня долго, до глубокой ноч… twitter.com/i/web/status/1…

Стоит ли говорить, что все мои мысли в школе были о том, как бы скорее вернуться домой и снова очутиться на виртуальном тропическом острове?

Так продолжалось целую неделю, пока я не получил 11 двоек по различным предметам и отец не всыпал мне такого ремня,… twitter.com/i/web/status/1…

На компьютер установили пароль и разрешали играть только по великим праздникам.

Но я всё равно иногда включал компьютер, когда родители были на работе, заходил через F8 в безопасный режим и там б… twitter.com/i/web/status/1…

В какой-то момент просто играть стало не так интересно и я стал ковырять файлы игры.

Собственно, я с детства ломал все игрушки. Было интересно, как они устроены внутри. Наверное, надо было идти в пент… twitter.com/i/web/status/1…

Я быстро обнаружил, что файлы с расширением *.pak являются обычными *.zip-архивами и легко открываются с помощью To… twitter.com/i/web/status/1…

Так я увлёкся гейм-моддингом и программированием. )

Lua – прикольный язык. На нём я в 9 классе написал читы для другой моей любимой игры — PainKilker (тоже, кстати, 20… twitter.com/i/web/status/1…

Олды тут? pic.twitter.com/pDAlQccS91

В 2015 Google закрыла Google Code и я перенёс проект на GitHub:

github.com/FluorescentHal…

О некоторых неочевидных проблемах, с которыми я столкнулся при разработке, запуске и эксплуатации в продакшене прог… twitter.com/i/web/status/1…

До Mercury Development я несколько лет работал в сфере стартапов. Основная задача любого стартапа — быстро создать… twitter.com/i/web/status/1…

Так, например, для одного стартапа я разработал первое в России коммерческое PWA и TWA (Trusted Web Activity), собр… twitter.com/i/web/status/1…

Позже приложение было переписано на LitElement + Apollo Client на фронтенде и GraphQL (Prisma + Apollo Server) на бэкенде.

Есть исследования, что PWA помогают генерировать больше посещений, чем нативные приложения.

Например, на каждом ша… twitter.com/i/web/status/1…

У меня же абсолютно противоположный опыт.

Сразу после запуска PWA стали поступать вопросы от пользователей, как скачать и установить приложение. Я пытался об… twitter.com/i/web/status/1…

Проблема заключается в том, что большинство пользователей не знают и не понимают, что такое PWA.

Пользователи прив… twitter.com/i/web/status/1…

Пришлось упаковать PWA в Cordova. На дворе был 2017 год и никаких Trusted Web Activity ещё не существовало.

После публикации в Google Play и App Store количество посещений резко возросло.

А ещё магазины приложений предоставляют социальную информацию, которая может использоваться пользователями при прин… twitter.com/i/web/status/1…

Кстати, чтобы пользователь установил PWA, он должен обязательно посетить сайт, чтобы увидеть предложение установки.… twitter.com/i/web/status/1…

В том же Google Play или App Store пользователь может установить приложение впрок, запустив его, когда ему будет нужно.

Другая проблема, с которой я столкнулся, заключается в том, что веб не поддерживает background geolocation — получе… twitter.com/i/web/status/1…

Пришлось реализовывать background geolocation нативно. Здесь-то второй раз и пригодилась Cordova со своей концепцией гибридных приложений.

Кстати, Cordova не поддерживает service workers. Поэтому, чтобы получившиеся гибридные iOS- и Android-приложения мо… twitter.com/i/web/status/1…

Получение push-уведомлений тоже пришлось реализовывать нативно.

Поэтому появление Trusted Web Activity (TWA) для Android стало настоящим спасением.

Но и с TWA не всё так радужно. )

Дело в том, что в TWA нет нормального способа передавать данные между веб- и нати… twitter.com/i/web/status/1…

Ещё немного underhood (подковёрных игр и того, как всё устроено под капотом на самом деле). 👇

Google сейчас довольно активно продвигает TWA (Trusted Web Activity).

На самом деле, TWA — это костыль, который ре… twitter.com/i/web/status/1…

Мне больше нравится подход Samsung:

Кстати, если вы вдруг не знали, установка PWA в Chrome на Android — это не просто добавление иконки на экран.

При установке браузер отправляет URL веб-манифеста PWA на так называемый minting server, и из Google Play на устрой… twitter.com/i/web/status/1…

Вот только Google не даёт доступ к своему minting server другим браузерам.

Поэтому PWA в сторонних браузерах типа… twitter.com/i/web/status/1…

Samsung Internet спасает то, что у Samsung вместо Google Play есть свой Galaxy Store, который и генерирует WebAPK.… twitter.com/i/web/status/1…

Теоретически, по такому же пути могла бы пойти Xiaomi, у которой на Android тоже есть свой магазин приложений.

Вангую, что в будущем магазины приложений станут не нужны. Поисковики (тот же Google или Bing) станут магазинами (в… twitter.com/i/web/status/1…

А пока для упаковки PWA в легковесные оболочки для публикации в магазинах приложений можно использовать онлайн-серв… twitter.com/i/web/status/1…

Кстати, под капотом для упаковки PWA в Android-приложение PWABuilder использует консольную утилиту Bubblewrap, подд… twitter.com/i/web/status/1…

Впервые идею создать генератор TWA из PWA команде Google Chrome предложил я:

github.com/GoogleChromeLa…

Но PWA на мобильных устройствах, пытаясь мимикрировать под нативные приложения, теряют часть этих уникальных возмож… twitter.com/i/web/status/1…

Сейчас для всех запущенных PWA и WebAPK в Chrome отображается так называемое "постоянное уведомление" (persistent n… twitter.com/i/web/status/1…

Моя идея заключается в том, чтобы расширить этот persistent notification таким образом, чтобы при клике по нему отк… twitter.com/i/web/status/1…

На мой взгляд, было бы здорово иметь persistent notification с таким меню и для TWA, и в браузерах, отличных от Chr… twitter.com/i/web/status/1…

* ставьте ⭐️ в crbug.com/974785 😉

* ставьте 👍 в github.com/mozilla-mobile… 😉

Следующая проблема заключается в том, что обычные пользователи не осознают, что PWA и TWA работают через браузер. Д… twitter.com/i/web/status/1…

В случае с PWA это может быть ещё более-менее понятно, потому что пользователь посещает сайт и именно браузер предл… twitter.com/i/web/status/1…

Пользователь устанавливает приложение из Google Play. Приложение запрашивает у него разрешение на доступ к геолокац… twitter.com/i/web/status/1…

В вебе у вас есть, по сути, только один шанс спросить у пользователя разрешение на доступ к тому или иному Web API.… twitter.com/i/web/status/1…

Но тут выясняется, что доступ к геолокации просто необходим для корректной работы этого приложения, без него прилож… twitter.com/i/web/status/1…

Как думаете, сколько пользователей догадалось, что чтобы изменить своё решение, нужно идти в браузер?

Правильно: 0 (ноль)!

А у пользователя может быть установлено несколько браузеров.

Какой именно из них открывать?

Нужно глубоко в настройках браузера (а у каждого браузера свой UI) найти раздел с настройками сайтов, найти нужный… twitter.com/i/web/status/1…

Я как евангелист PWA постоянно работаю с сообществом, собираю обратную связь о проблемах, с которыми сталкиваются р… twitter.com/i/web/status/1…

* Включить permission delegation. Это когда обработка разрешений в TWA делегируется не браузеру, а нативной оболочк… twitter.com/i/web/status/1…

А один мой знакомый разрабатывал PWA для одного крупного известного порно-сайта. И вот там тот факт, что PWA работа… twitter.com/i/web/status/1…

Кстати, порноиндустрия одна из первых, кто освоил технологию PWA.

У кого-то ещё остались сомнения, что порно — дви… twitter.com/i/web/status/1…

Дело в том, что вся история поиска и просмотра из приложения сохраняется и доступна в браузере. Большинство пользов… twitter.com/i/web/status/1…

В Chromium на десктопе при удалении PWA есть галочка «Также удалить данные».

Но вот на Android при удалении PWA, W… twitter.com/i/web/status/1…

Кстати, при отметке этой галочки разрешения (permissions) не сбрасываются.

Об этом есть issue в баг-трекере Chromi… twitter.com/i/web/status/1…

Поля description и screenshots уже давно описаны в тексте спецификации W3C Web Application Manifest, но до этого ни… twitter.com/i/web/status/1…

Если вы не попали в A/B-тест, то пощупать новый UI установки PWA всё равно можно, например, на сайтах… twitter.com/i/web/status/1…

Голосуйте за эту идею, ставя ⭐️ в crbug.com/1168211, если хотите, чтобы она тоже была реализована. 🤞

Думаю, на этом хватит промывать вам мозги прогрессивными веб-приложениями. 😂

Если тема PWA вам интересна, то рекомендую:

* ознакомиться с github.com/andreylipattse…

* вступить в чат t.me/pwa_ru

* подписаться на @alexey_rodionov

* подписаться на @webmaxru

Максим Сальников — самый активный в мире популяризатор PWA. Пишет статьи, выступает на… twitter.com/i/web/status/1…

* подписаться на twitter.com/i/lists/100840…

О Web Components. 👇

Скажу лишь, что с теплотой вспоминаю времена Google Polymer, когда всё веб-приложение можно было построить целиком… twitter.com/i/web/status/1…

Также мне очень нравится фреймворк A-Frame, поддерживаемый командой Mozilla, который позволяет создавать 3D-, VR- и… twitter.com/i/web/status/1…

Вот пример WebXR PWA, построенного на A-Frame:

hubs.mozilla.com

Hubs — это VRChat, созданный с использованием веб-технологий.

На работе я использую сейчас React. Просто потому, что все проекты на React и вся команда использует React.

Для личных проектов я использую Lit:

lit.dev

Если вы знакомы с React, то очень быстро освоите Lit… twitter.com/i/web/status/1…

Это веб-компонент, помогающий реализовать различные паттерны установки PWA:

web.dev/promote-instal…

В планах реализовать набор веб-компонентов на каждое Web API для построения прогрессивных веб-приложений:

webcomponents.org/collection/Flu…

Также в своё время разрабатывал набор веб-компонентов для интеграции Apollo GraphQL Client с Polymer:

webcomponents.org/element/reach-…

Сейчас вместо них рекомендую Apollo Elements от Benny Powers (@PowersBenny):

apolloelements.dev

Если тема Web Components вам интересна, то рекомендую:

* ознакомиться с github.com/mateusortiz/we…

* ознакомиться с arewebcomponentsathingyet.com

* вступить в чат t.me/webcomponents_…

* подписаться на @iamkulykov и @serhiikulykov

Сергей Куликов — эксперт Web Components и основной поставщик информа… twitter.com/i/web/status/1…

О GraphQL. 👇

GraphQL — самая революционная технология извлечения данных со времен AJAX. Так же как React изменил опыт создания п… twitter.com/i/web/status/1…

На самом деле, всё, что я хотел бы рассказать вам о GraphQL, есть в моём докладе «Developer Experience (DX): Разраб… twitter.com/i/web/status/1…

youtu.be/m9DHmTowLvI

youtu.be/i4lBV8by8t4

Это 2 записи одного и того же доклада, сделанные в разное время.

Слайды:

bit.ly/graphql-dx

В этом докладе я рассказал об опыте интеграции и эксплуатации GraphQL в одном крупном проекте, какие проблемы решае… twitter.com/i/web/status/1…

Дело в том, что у GraphQL довольно высокий порог вхождения. Большая часть инструментов для GraphQL сфокусирована на… twitter.com/i/web/status/1…

Так как я лид команды разработки и сам являюсь разработчиком, я очень пекусь о разработчиках и о developer experien… twitter.com/i/web/status/1…

GraphQL Voyager — инструмент, который позволяет наконец-то увидеть тот самый граф в GraphQL.… twitter.com/i/web/status/1…

Также я активно участвовал в разработке GraphiQL Explorer.

Этот инструмент позволяет мышкой натыкать всегда валидн… twitter.com/i/web/status/1…

Все мои идеи собраны в этом треде:

github.com/OneGraph/graph…

Многие мои идеи из этого треда также были реализованы в Apollo Studio:

Например:

В какой-то момент я понял, что иметь 2 инструмента — один для работы с GraphQL, а другой для работы с кодом — IDE,… twitter.com/i/web/status/1…

Также я разработал инструмент, который отображает GraphQL-схему в 3D:

graphql-3d.web.app pic.twitter.com/rEV4swpzRl

И инструмент, который отображает GraphQL-схему в VR:

graphql-vr.web.app

Кстати, под капотом A-Frame (Web Com… twitter.com/i/web/status/1…

Зачем? Just for fun! 😀

Если тема GraphQL вам интересна, то рекомендую:

* посмотреть youtu.be/i_rsfHMF3x4

* вступить в чат t.me/graphql_ru

* подписаться на @alexey_rodionov

* подписаться на @nodkz

Павел Черторогов — самый активный адвокат GraphQL на территории СНГ. Выступает на конферен… twitter.com/i/web/status/1…

Кстати, @nodkz ещё не был ведущим @jsunderhood. 😲 Непорядок! 😂

Amazing thread with some cool GraphQL tools. I hope we can implement some of these in Relay (and release that to OS… twitter.com/i/web/status/1…

Также я активно участвовал в разработке GraphiQL Explorer.

Этот инструмент позволяет мышкой натыкать всегда валидн… twitter.com/i/web/status/1…

17:22

Кстати, ищу frontend-разработчиков в команду, кто будет вместе со мной решать сложные, но интересные инженерные зад… twitter.com/i/web/status/1…

Напомню, я работаю лидом frontend-разработки в Mercury Development.

Это крупная компания родом из Самары с центрам… twitter.com/i/web/status/1…

Мы расширяемся. Сейчас в Меркури работает более 500 квалифицированных специалистов. Текущая цель компании — вырасти… twitter.com/i/web/status/1…

Все заказчики — исключительно зарубежные компании. В основном это перспективные стартапы из Кремниевой долины, полу… twitter.com/i/web/status/1…

Вы точно сталкивались с нашими разработками в повседневной жизни. )

Например, мы разработали софт для озвучки Звёз… twitter.com/i/web/status/1…

А ещё помогли создать фитнес-трекеры для Fitbit — компании, которую недавно купил Google.

vc.ru/tech/196785

Помимо аутсорс-разработки у компании есть свой собственный продукт — стартап внутри компании — Eventicious.

Это —… twitter.com/i/web/status/1…

Я как раз сейчас работаю в команде Eventicious.

Продукт интересный, лидер рынка приложений для мероприятий в России и Восточной Европе.

В прошлом году приложения, созданные на Eventicious, использовалось более чем на 1000 мероприятиях, включая Нашеств… twitter.com/i/web/status/1…

Фестиваль 404 (#404fest):

404fest.ru

Дизайн-выходные (Digital Weekend):

designweekend.ru

У меня всё. 😀

Надеюсь, эта неделя вам понравилась. 🤞

Подписывайтесь на меня. 🔔

Twitter: @alexey_rodionov

GitHub: git.io/alexey.rodionov