Increment — выпуск про фронтенд

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

В интернете много технических материалов: инструкций, лайфхаков и туторов. Инкремент закрывает другую часть нашей айтишечки. Ту часть в которой люди работают с людьми, а продукты — наносят пользу клиентам.

С 2017 года набежало уже 13 выпусков. Каждый выпуск посвящен одной теме. Разные темы были затронуты, например: документация, опен сорс, тестирование, безопасность и интернационализация.

В мае 2020 года вышел выпуск про Фронтенд. Поделюсь небольшой выжимкой самого интересного, что я для себя нашел в этом выпуске. Это не пересказ и не сокращенная версия, а нечто вроде затравки.

Это всё мои субъективные мысли и выводы, мне нельзя верить. Но может кто-то найдет для себя тему интересной и погрузится в неё.

When frontend means full stack

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

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

Технологии с фронтенда можно использовать и в бэкенде. Один язык, одни инструменты и подходы здорово упрощают жизнь. Проекты можно сложить в монорепозиторий, а типы из Тайпскрипта использовать и на фронте и на бэке.

Мало того, даже бэкендом можно и не заниматься. Простые лямбды на Яваскрипте хорошо ложатся в Серверлесс мир.

A user’s guide to CSS variables

Статья про кастомные цсс свойства. В первую очередь, это свойства, а не цсс-переменные. Кастомные свойства, которые подчинены обычному поведению свойства. Например: наследование или каскад.

Кастомные свойства реактивные. Если использовать значение этого свойства и потом поменять (например при ховере), изменятся все стили с участием этого свойства. То есть изменяя значение свойства те места где оно используется — пересчитаются.

Развивая идею с реактивностью, кастомные свойства можно использовать для инкапсуляции. Представим себе кнопку, у которой есть несколько модификаторов: обычная, зелененькая и красненькая. Описав кастомные свойство с цветом, в модификаторе можно не переопределять значения цвета фона или цвета текста, а изменить значение кастомного свойства.

Можно из Яваскрипта пробрасывать значения в кастомные свойства. А значение уже кастомных свойств использовать даже в градиентах. Если раньше мы программировали такие градиенты вручную, то теперь Яваскрипт выступает как помощник.

Короче, разберитесь как работают кастомные свойства и процветайте.

How to reevaluate your frontend architecture

Статья про то, как портал БаззФид подошел к вопросу обновления своего кода. Раньше сам был статическим набором статей. Со временем появились комменты, аналитика, реклама, админка и еще куча внутренних штук.

Со старой системной дальше ехать нельзя, нужна новая. Автор предлагает системный подход к решению такой задачи. Замерить показатели текущей системы: метрики и фичи. Новая система должна быть не хуже.

По этим требованиям ребята выписали технологии, которые им могут подойти. Получилась матрица фич и технологий. С такой матрицей они и смогли принять взвешенное решение писать всё на Реакте, потому что другие проекты уже были на нём :)

Ни один проект не может жить вечно на одном софте. Все умирает и теряет актуальность. Правильно подойти к вопросу обновления — первый шаг к успешному завершению такого проекта.

The process: Making Vue 3

Статья Эвана Ю про разработку третьей версии Вью. Каждый модуль Вью2 изучен и доработан. Вью3 не будет совместим с предыдущей версией.

Автор рассказывает о том что происходит сейчас. Над чем работает кор тима и как работают с рфц от комьюнити.

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

Micro-frontends in context

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

Микрофронтенд предлагает решение с другой стороны. Разные большие части приложения могут разрабатываться разными командами. И реально, как у спотифай, айфремами выводиться на одну страницу. Или разные части приложения (клиенсткий кабинет, админский и тд) могут быть микрофронтендами.

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

A frontend stack for video games

Статья про разработку игр с помощью веб-технологий. Вместо Юнити и C# взяли Электрон и Тайпскрипт.

Игра еще в разработке, поэтому нет примеров кода или демо-версии. Но есть много скриншотов, размышлений и заключений, что на этом проекте веб-технологии составляют конкуренцию олдфагу Юнити.

Очень впечатляет и дополняет размышления от статьи про Фуллстеков.

Case study: Web components for screen readers

Статья про то как в Слаке разрабатывали доступные компоненты. И на инициативе Команды разработки сделали СлакКит с доступными компонентами.

Занимательно, что такая штука, как Слак, такое внимание уделяет доступности.

Ask an expert: Why is CSS. . . the way it is?

Статья описывает почему ЦСС такой каким мы его знаем. Автор рассказывает как принимались некоторые исторические решения и к чему они привели.

Сейчас многое изменилось и решения принимаются не только комитетом. Каждый может внести свой вклад: поработать над существующими спецификациями или предложить свою идею.

On composable, modular frontends

Статья описывает проблему современных фронтендов. Они большие, связные и переусложненные. Эта сложность означает большие количество багов и проблем с поддерживаемостью.

Автор предлагает рассматривать фронтенд, как систему из композиции модулей.

Модуль — это часть системы, которая слабо связана с другими частями. Такой модуль легко понять и внести изменения.

Композиция модулей означает, что модули могут эффективно взаимодействовать друг с другом.

Программист старается создавать свой код независимым, переиспользуемым и чистым. Эти же идеи можно переложить на уровень архитектуры всего фронтенд приложения.

Эта статья хорошо сочетается с мысли из статьи про Микрофронтенды.

The rise of React

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

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

Короче, Реакт решает узкий круг задач. Брать эту штуку себе в проект надо аккуратно. Если ты считаешь по-другому, try me

Но нельзя недооценивать вклад в опенсорс и собравшееся сообщество, которое двигает индустрию вперед.

Если ты не хочешь использовать Реакт, то на больших проектах ты скорее всего создаешь фрейворк сам. Правда без сообщества и хорошей документации.

A chatbot expedition

Статья про устройство чатботов у больших игроков. Автор предлагает выделить из этой системы четыре основных пункта:

• Логика диалогов (Dialogue logic)
• ИИ модули (AI modules)
• Управление отношениями (Relationship management)
• Ядро (Kernel)

Такое разделение подтверждает актуальность соседних статей выпуска про модульности и композицию.

Полезно будет прочесть тем кто хочет погрузиться в мир взрослых чатботов и устроиться работать на Алисой Яндекса или Сири Эпла.

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

Design by design

Статья описывает развитие инструментов дизайнеров.

Если раньше хватало Фотошопа и ПСД файла, но сейчас все и двигается быстрее и эффективность лучше при работе в команде.

Фигма — хороший пример инструмента, который позволяет дизайнеру делать многие вещи в одном месте: прототипировать, прорабатывать, собирать комментарии и передавать разработчикам.

Фигма и все будущие инструменты будут рассчитаны на более удобную работу в команде.

Чего уж там, даже я, как разработчик, часто пользуюсь Фигмой. Че-то набросать, прикинуть или даже задизайнить. Если прет, то надо делать. Так можно.

A frontend of our own

Статья про то как фанаты фанфиков собрались и создали крутую платформу для публикации фанфиков и обмена мнениями. Они даже смогли в 2019 получить премию Хьюго за Лучшую Связанную Работу.

Interview: Sarah Allen

Интервью с разработчицей участвовавшей в разработке After Effects, Shockwave и Flash. Просто интервью.

Frontend at scale

Статья в виде интервью или ответов на вопросы. Представители Тиндера, Вимео, Канвы и Атлассиана рассказывают как у них устроена работа, как собираются метрики и некоторые ближайшие планы. И всё в разрезе фронтенда.

Case study: Mobile payments in India

Статья про то как Гугл запустил в Индии мобильную платежную систему. Интересно было прочесть про то как они заставили всё работать на телефонах где не было даже камеры. Они изобрели Audio QR — штуку для отправки и приёмки данных через динамики и микрофоны.

Итоги

Размышления, наблюдения и опыт сильных ребят из индустрии меня воодушевляют. Не все статьи этого выпуска журнала откликнулись у меня, но они и не должны.

И помните, любите то, чем занимаетесь.

P.S. Свежие посты публикуются в телеграме. Если чувствуешь, что они полезны, то подпишись.