Два дня назад на конференции F8 была представлена новая версия facebook.com. Команда разработчиков рассказала о технологиях, которые лежат в основе новой версии социальной сети.

Новый сайт — это полноценное SPA-приложение. За данные отвечают GraphQL и Relay, которые позволяют получать только те данные, которые нужны компонентам на текущей странице. Такой подход помог избавиться от загрузки избыточных данных и сделал возможным загрузку данных параллельно коду. Очень много внимания уделили Code-Splitting'у. С помощью Relay был достигнут Data-Driven Code-Splitting — вместе с данными указываются компоненты, которые нужны для отрисовки кода. Ещё реализовали пару дополнительных функций для разделения кода в зависимости от фаз отрисовки страницы: показ начальной страницы загрузки, отрисовка страницы, добавление интерактивности.

Также рассказали про изменения в CSS. Теперь за каждое правило отвечает отдельный класс (Atomic Stylesheets), что позволило снизить общее количество скачиваемых стилей. Используют React.Suspense, для того чтобы улучшить UX. Рассказали про свою работу над Chromium: скоро зарелизят новое браузерное API isInputPending. С помощью этого API станет возможным прерывать работу JS, если известно, что пользователю результат выполнения кода не нужен. Например, если код на первой странице приложения ещё не отработал, а пользователь уже попытался перейти на следующую страницу.

Информации очень много, рекомендую посмотреть.

#relay #codesplitting #facebook

https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/

Honeypot выложил на youtube новый документальный фильм, посвящённый GraphQL — "GraphQL: The Documentary".

Вот краткий пересказ. В 2011 году Facebook решил переписать своё мобильное приложение с HTML5 на нативные технологии — web на тот момент не позволял сделать качественное мобильное приложение. При переписывании самой сложной частью, которая не ложилась на традиционные API, была лента новостей (news feed). В феврале 2012 года Ник Шрок разработал прототип нового API, с помощью которого можно было получать произвольные наборы данных из бэкенда. Разработка прототипа заняла несколько дней. В начале он назывался SuperGraph. Ли Байрон и Дэн Шейфер вдохновились идеей и присоединились к Нику, чтобы довести прототип до production-решения.

Ребята с успехом справились с задачей. Лента была переписана на новом API за несколько месяцев. Спустя полтора года уже практически весь мобильный Facebook работал на GraphQL. Затем разработчики решили открыть исходный код своего решения. В ходе обсуждения Ли предложил переписать реализацию: "Если бы мы знали, что делаем, что мы бы сделали по-другому?". В 2015 году GraphQL был представлен публично и получил широкое распространение, его стали использовать в других компаниях: Github, Airbnb, Twitter и т.д.

Honeypot снял хороший фильм. Советую посмотреть, если интересуетесь историей развития технологий.

#graphql #history #facebook

https://www.youtube.com/watch?v=783ccP__No8

Facebook открыл исходный код JavaScript-движка Hermes, который был разработан для оптимизации работы React Native приложений на Android.

Hermes в отличие от V8 использует ahead-of-time компиляцию (парсинг и компиляция JS-кода в байткод происходит не на устройстве пользователя, а на этапе сборки программы). Приложения, использующие Hermes, запускаются гораздо быстрее (примерно в 2 раза быстрее в демо с Mattermost) и потребляют меньше памяти. При сборке приложений с новым движком apk-пакеты занимают меньше места. Для режима разработки предусмотрена ленивая компиляция кода на устройстве, чтобы фидбек при разработке оставался быстрым.

Движок поддерживает большую часть синтаксиса ES2015. В процессе разработки добавление const, let, ES-модулей, классов, вычисляемых свойств объектов. Исключены из поддержки Proxy, Reflect, with и другие редко-используемые части языка.

Hermes уже используется в production-приложениях Facebook. На данный момент разработчики не планируют адаптировать Hermes для работы на сервере или в web'е.

https://www.youtube.com/watch?v=zEjqDWqeDdg

#talk #reactnative #engine #announcement #facebook

Дилан Паулус около месяца назад написал пост про то, как Facebook борется с блокировщиками рекламы — "How Facebook Avoids Ad Blockers".

Все карточки с рекламой в Facebook содержат слово "Sponsored". Это единственная зацепка, которая может однозначно идентифицировать рекламу. CSS-классы для идентификации не подходят, так как они могут переиспользоваться на разных элементах — в Facebook используется подход Atomic CSS. То есть вы не найдёте слово "Sponsored" в html. Там, где находится это слово, будет много элементов, в атрибутах которых (или внутри тега) будет записана одна буква, причём некоторые символы будут "мусорными", вставляющимися на страницу великим рандомом. Всё это сделано для того, чтобы нельзя было написать CSS-селектор для определения рекламы, например, такой:

span[data-content="S"]
  + span[data-content="p"]
  + span[data-content="o"]
  + span[data-content="n"]
  + span[data-content="s"]
  + span[data-content="o"]
  + span[data-content="r"]
  + span[data-content="e"]
  + span[data-content="d"] {
  display: none;
}

Проверил у себя — адблок уже научился обходить этот трюк. Но всё равно статья интересная, рекомендую заглянуть.

#ads #facebook #obfuscation

https://www.dylanpaulus.com/2019-11-24-how-fb-avoids-adblockers/

Ахмад Шадид написал статью про CSS-находки в новой версии Facebook — "CSS Findings From The New Facebook Design".

Из самого интересного. Для изменения цвета некоторых иконок используется хак с CSS-фильтрами ( filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%); ). Так было сделано, чтобы поддержать смену цвета у legacy-иконок для тёмной темы. Тень заголовка сайта сделана не с помощью свойства box-shadow, а с помощью изображения. Рой Хагиги из Facebook объяснил, что box-shadow убивал производительность при прокрутке страницы, особенно это было заметно на странице с большим количеством видео — отдельные части страницы при прокрутке временно исчезали.

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

#css #facebook

https://ishadeed.com/article/new-facebook-css/

Пару недель назад инженеры из facebook опубликовали статью про редизайн главного сайта социальной сети — "Rebuilding our tech stack for the new Facebook".

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

Для работы с CSS используют своё CSS-in-JS решение, которое на стадии сборки приложения извлекает стили из кода компонентов в CSS-файлы. При извлечении стилей используется подход Atomic CSS, в котором одно правило представляется отдельным классом. Благодаря Atomic CSS удалось уменьшить общий объём стилей на 80% по сравнению со старой версией facebook. Кроме извлечения стилей CIJ-библиотека упрощает работу с относительными размерами шрифтов для улучшения a11y. Разработчики могут использовать в коде компонентов размеры в пикселях, на этапе сборки они автоматически преобразуются в rem'ы.

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

#facebook #cssinjs

https://engineering.fb.com/web/facebook-redesign/

В техническом блоге Facebook была опубликована статья про подходы улучшения доступности, которые были использованы на новом сайте социальной сети, — "Making Facebook.com accessible to as many people as possible".

Основные пункты статьи. Чтобы не допускать распространённых ошибок доступности, используют eslint-плагин eslint-plugin-jsx-a11y. Для работы с фокусом используют специальные компоненты, которые также упрощают добавление навигации с клавиатуры. Для улучшения читабельности текста на этапе сборки конвертируют размер шрифта в rem. Иерархия заголовков в документе поддерживается автоматически с помощью специального API. Улучшили работу горячих клавиш с помощью API на базе React контекста. Для валидации разметки используют самописный инструмент, который подсвечивает красным оверлеем все элементы с проблемами a11y.

Хорошая статья. Рекомендую почитать всем, кто интересуется темой доступности.

#a11y #react #facebook

https://engineering.fb.com/web/facebook-com-accessibility/

Встроенный браузер Facebook

Томас Штайнер проанализировал работу встроенного браузера Facebook (In-App Browser — IAB), чтобы разобраться, чем он отличается от обычных браузеров — "Inspecting Facebook's WebView".

Некоторые приложения открывают ссылки во встроенном браузере на базе WebView, потому что это даёт им больше возможностей для работы со страницей. На сайтах, открытых с помощью IAB Facebook, встраивается код сбора метрик производительности и информации о доступных возможностях WebView, в window добавляются свойства TEMPORARY и PERSISTENT, модифицируется отправляемый HTTP-заголовок User-Agent.

WebView не поддерживает все возможности браузеров, поэтому некоторые страницы в нём могут быть сломаны или отображаться неправильно. Так как пользователей Facebook несколько миллиардов, вероятность встречи с подобными ошибками довольно высока. Для упрощения решения проблем в IAB включён режим отладки, чтобы разработчики могли подключиться к WebView удалённо с помощью DevTools браузера.

#facebook #debug #mobile

https://blog.tomayac.com/2019/12/09/inspecting-facebooks-webview/