Чтобы показать размер акулы, через которую современный Software development перепрыгнул, вот реальная история.

Пять лет назад надо было организовать JWT аутентификацию на сайте с PHP бэкендом. Взял firebase/php-jwt - продукт разработчиков Google, ноль зависимостей, один файл среднего размера который делал всю криптографию. Логика там простая - сгенерировать JWT токен при логине и проверить подпись токена при запросе с фронтенда. Реализация на бэке заняла строк 50 кода, на фронте - столько же.

Через некоторое время делал JWT аутентификацию на другом проекте, заметил, что firebase/php-jwt переписался в ОО стиле - появились классы JWT, Key, ExpiredException и т.д. Логика та же, размер общий чуть увеличился.

Продолжение следует...

#laravel #dx #optimization #jwt

О сложности в SD (продолжение)

Недавно надо было поставить JWT аутентификацию на Ларавель. Посмотрел в интернете - делается через пакет tymon/jwt-auth. Поставил, настроил.
Залез внутрь пакета - там 65 php файлов. Глянул в зависимости в composer.json:

"require": {
  "php": "^5.5.9|^7.0",
  "illuminate/auth": "^5.2|^6|^7|^8",
  "illuminate/contracts": "^5.2|^6|^7|^8",
  "illuminate/http": "^5.2|^6|^7|^8",
  "illuminate/support": "^5.2|^6|^7|^8",
  "lcobucci/jwt": "<3.4",
  "namshi/jose": "^7.0",
  "nesbot/carbon": "^1.0|^2.0"
}

Ой-вей, так этот пакет даже JWT криптографией не занимается, это просто прослойка между Ларавелем и другими пакетами, которые уже делают что-то полезное. То есть, это аналог того кода в 50 строк, который я писал пять лет назад.

Вот этот пакет со всеми зависимостями делает, по сути, то же самое, что и firebase/php-jwt. То же самое с точки зрения бизнес-требований, технической стороны, безопасности.

Складывается впечатление, что как минимум 90% кода пишется не для того, чтобы решить конкретную бизнес задачу, а по другой причине. Чтобы получить доход, но не прямо и конкретно, а в целом, "для отрасли". Для этого усложняются фреймворки и методики. То, что можно сделать просто, делается сложно. Это как таксист, который везет кругами неместного пассажира, чтобы накрутило на счетчик. Причем таксист сам не знает куда ехать - он ведёт по навигатору, он только это умеет. А навигатор ведет так, как в него заложил его хозяин.

Сфера software development усложняется и задурманивается, чтобы там нельзя было найти прямых путей. А те, кто помнит, как их находить, побыстрее вымерли.

#laravel #dx #optimization

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

Такая функция:

function add(a, b) {
  return {
    x: a.x + b.x,
    y: a.y + b.y,
  }
}

на таких объектах:

const o1 = { a: 1, b: 2};
const o2 = { a: 3, b: 4};

будет выполняться в 7-10 раз быстрее, чем на таких:

const o1 = { a: 1, b: 2};
const o2 = { b: 4, a: 3};

#js #optimization

Использование функций на массивах, типа filter, map и других, очень удобно и даёт красивый код, но может создавать проблемы в производительности из-за:

1. Выделения и потом уничтожения промежуточных массивов
2. Cоздавания циклов в циклах ( сложность O(N^2) ), хотя весь код можно разместить в одном цикле ( O(N) )

Например, код 1. ниже выполняется в 2-3 раза дольше, чем код 2.

// setup:
const numbers = Array.from({ length: 10000 }).map(() => Math.random())

// 1. functional
const result =
  numbers
    .map(n => Math.round(n * 10))
    .filter(n => n % 2 === 0)
    .reduce((a, n) => a + n, 0)

// 2. imperative
let result = 0
for (let i = 0; i < numbers.length; i++) {
  let n = Math.round(numbers[i] * 10)
  if (n % 2 !== 0) continue
  result = result + n
}

#js #optimization

Во всех браузерах кроме Firefox реализован Fetch Priority API

Это атрибут fetchpriority на тэгах img, script, link, который указывает, насколько приоритетен данный ресурс для загрузки.

Это важно в первую очередь для метрик Core Web Vitals, а именно - LCP. Если элемент LCP - картинка, имеет смысл указать ей fetchpriority="high".

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

Также можно указать fetchpriority="low" для картинок вне области видимости, - в том числе, в слайдере.

#tip #optimization #webvitals