Аня Крх

Современные фронтенды

Знаете, рынок технологий — это такой же рынок как обычный, и он способен "порешать", то бишь подчиняется законам эволюции. То что нужно и пользуется спросом — живёт. Плохое — умирает. И это работает в 99% случаев. Однако современные фронтенды входят в тот 1% случаев, когда что-то пошло не так. Но я надеюсь что ещё не вечер. По моему глубокому убеждению фронтенды переоценены, их суют везде не по назначению и потом долго страдают.

Немного исторической справки. Термин frontend это относительно молодое понятие. Раньше не было фронтендеров, были верстальщики. И они не называли себя программистами, кстати. Им на вход давался макет в фотошопе (фигмы тогда не было), а на выходе они отдавали архив с вёрсткой в формате html + css + js. Дальше программисты (их ещё не называли разработчиками) "натягивали" эту вёрстку на "движок". Верстальщики думали про совместимость с разными браузерами, про поддержку Internet Explorer старых версий, про адаптивность и мобильную вёрстку. Тогда только появлялись планшеты. Потом это дело начало развиваться, появился sass, less. Потом angular со своим знаменитым to-do листом в качестве демо. Спойлер: на этом ангуляре удобно делать только to-do листы, идеальный инструмент для этой задачи, но с чем-то более сложным возникнут трудности. Потом верстальщики с мотивацией о том что нужно что-то упростить (10%), решили усложнить всё остальное (90%). Придумали vue и react. Переименовались во "фронтенд разработчиков". Кто не хочет быть разработчиком? Разработка — это что-то сложное, вот они решили что у них теперь сложное и можно называться разработчиками. React стал модным и теперь это дефолт-технология для браузерной вёрстки. Кстати, поскольку теперь всё сложно, то можно не заморачиваться с тем чтобы поддерживать браузеры старые как говно мамонта (т.е. те которым больше 3х месяцев с обновления), про Internet Explorer все и думать забыли. Теперь если браузер не очень, то вполне нормально повесить плашку на весь экран с предложением поменять браузер. И неважно что на самой странице — рокетсайнс интерфейса или простой текстовый сайтик. Адаптироваться? Нет. Повышать конверсию с рекламных заходов? Нет, это не наши проблемы. Плюс админы ещё капчу от cloudflare сверху навесят, и враг точно не пройдёт.

Логика разделения web интерфейса звучит на первый взгляд правильно и понятно, "разделяй и властвуй". Бекендеры могут улучшать свои бекенды, фронтендеры могут якобы независимо улучшать свои фронтенды, эти единицы могут мастшабироваться независимо друг от друга. Красота. Но в чём подвох?

А подвох в том что делить нужно то что делится, а не то что не делится. Представьте, вы — водитель. У вас 3 основных органа управления машиной: педали, руль и коробка передач. Реализация подхода "разделяй и властвуй" здесь была бы нянять отдельного человека на педали, отдельного человека на КПП и отдельного на руль, а вы, как менеджер, будете им тикеты ставить "Нажми сцепление", срок - 30 секунд, "Переключи скорость с первой на вторую", срок - 40 секунд, но после того как первый выжмет сцепление. Если же произошёл рассинхрон, то придётся откатывать операцию обратно. А ещё надо общаться не в директивном тоне, а говорить "пожалуйста" и "спасибо", иначе исполняющий обязанности кручения руля может выгореть и придётся искать нового. А потом, когда окажется что мы не справляемся, не успеваем доехать из точки А в точку Б, какое решение примет менеджер? Что нужно больше исполнителей, например взять на педали 2 человека, один пусть нажимает на сцепление, а второй - на газ и тормоз. Ну вы меня понели.

А что нужно сделать вместо этого если оно не работает? Правильно. Вернуться к истокам. Вот я и предлагаю вернуться к истокам. И не смотреть что если как-то сделано в гугле или яндексе, то это не значит что вам для вашей задачи, в ваших условиях, с вашими ресурсами и целями нужно делать как они. Если вы будете делать как яндекс, то это не значит что вы станете яндексом, лол. Это больная крупная корпорация которая может позволить себе многое, то что стартап себе позволить не может. И это скорее минус чем плюс. Не надо делать как они, надо заимстовать лучшее (точно то что подходит именно вам), а худшее оставить корпам. Кстати, на тему отличия между корпорациями и стартапами в контексте темы фронтенда написана офигенная длинная статья.

Так вот, вернуться к истокам. А именно — к server side rendering'у (далее SSR), каким он был раньше. Это бекенд, который отдаёт готовые страницы и они сразу рендерятся в браузере. Если мы говорим про web продукт со своим дизайном, то схема создания продукта такая:

  1. Дизайнер делает дизайн всех страниц
  2. Верстальщик его верстает, это вполне себе проектная работа, т.к. "вход", "выход" определены и приёмка результата проходит просто
  3. Бекендер берёт готовую верстку и натягивает её на свой "движок"

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

Тут я сразу слышу возражение "сайт будет не отзывчивый, некрасивый, неудобный, надо страницу перезагружать". А щас не надо? И страницу перезагружать и кеш ещё почистить впридачу. 99% любого функционала можно сделать на SSR и технологиях классической вёрстки. Есть ajax, есть websockets. И обмазывать этим можно точечно те места, где это требуется, количество этих мест обычно оооочень далеко от 100%, чтобы ради них страдать.

А вот если оно близко к 100%, то тут уже другой разговор. Тогда придётся уж пострадать и делать не на SSR, а на SPA (single-page application). Если у вас реально настоящее приложение в браузере, то да. Принимаю ваше осознанное решение делать на react. В этих случаях современный фронтенд действительно уместен! Только какова вероятность этого? Что вы делаете? Калькулятор в браузере? Вопросов нет. При этом и суперсложные приложения вы на react'е тоже не напишете. Ту же фигму. Или Яндекс.Карты. Они не написаны на react'е, там более низкоуровневая работа с браузером. Вы же скорее всего пилите не такое, а что-то уровня интернет-магазин. И зачем, делая интернет-магазин, страдать с SPA? Цель? Потому что все так делают? Или GPT посоветовал? А по факту у него современного фронтенда применение очень узкое, это и не 1% супер-технологичных SPA и не 95% обычных среднестатистических маркетплейсов которые надо делать на SSR. Да даже игры в браузере не пишутся на react, они пишутся на js. Или проекты типа Яндекс.Музыки. Там нет react'а.