Когда я работаю над frontend, голова у меня обычно занята вопросом "как": почему этот компонент рендерится без необходимости, почему этот layout ломается на определенном экране, где хранить это состояние? На днях, разбираясь со старым багом совместимости браузеров, я на мгновение остановился. Все инструменты, которыми я пользуюсь каждый день, каждая проблема, которую я пытаюсь решить, на самом деле опирались на тридцать лет накопленного опыта. В тот момент мне стало интересно, откуда взялся этот мир, в котором я живу каждый день.
Эта статья - результат того любопытства. Как веб превратился из простого документа CERN в сегодняшнюю платформу приложений; почему HTML, CSS и JavaScript стали такими, какие они есть; как браузеры сталкивались друг с другом и как посреди всего этого поисковые системы заново выстроили правила игры? Я расскажу обо всем этом с собственной точки зрения, глазами разработчика.
Все началось в 1989 году с одного предложения
Годом рождения веба обычно называют 1989-й. В том году Тим Бернерс-Ли, работавший в CERN, предложил систему, чтобы исследователи из разных уголков мира могли легко обмениваться документами, и назвал ее World Wide Web. Три вещи, которыми мы пользуемся до сих пор, родились из этого предложения: язык, описывающий документ (HTML), структура, дающая документу адрес (URL), и протокол, переносящий документ (HTTP).
Когда в 1991 году открылся первый сайт, страница была полностью статичной. Не было ни взаимодействия, ни чего-либо персонального; все видели одно и то же содержимое. Сейчас, если задуматься, это кажется странным, ведь почти вся моя работа построена на взаимодействии. Но веб того времени, то, что позже назвали Web 1.0, был библиотекой, которую можно читать, но нельзя писать.
Дальше все понеслось быстро. В середине 2000-х блоги, социальные сети и пользовательский контент открыли эпоху Web 2.0; благодаря AJAX страницы начали подгружать данные без перезагрузки всей страницы целиком. Затем взорвался мобильный сегмент, и для таких, как я, адаптивный дизайн перестал быть выбором и стал обязанностью. А сегодня, с SSR, статической генерацией и edge-вычислениями, веб уже не просто отдает документы, а фактически исполняет приложения. На каждом этапе этого пути я вижу, как эти три базовые технологии росли вместе.
HTML: самый недооцененный слой
HTML - это скелет страницы. В первой версии Бернерса-Ли была лишь горстка тегов; сегодня мы работаем с сотнями семантических тегов.
На мой взгляд, самым важным моментом в истории HTML стал HTML5 в 2014 году.<header>,<nav>,<article>,<section>и другие семантические теги; не требующие плагинов<video>и<audio>; <canvas>для рисования...Все это не просто облегчило мою работу, но и сделало смысл страницы понятным для браузера и для ботов.
Мы постоянно забываем одну вещь: чистый, осмысленный HTML напрямую влияет на SEO. Краулер способен отделить основной контент страницы от меню и второстепенной информации только благодаря правильным тегам. Иными словами, выбор правильного элемента вместо нагромождения тегов div - это не эстетическое предпочтение, а решение в пользу обнаруживаемости.
CSS: слой, спасший веб от уродства
Первые страницы были некрасивыми, потому что HTML описывает структуру, а не внешний вид. CSS появился в 1996 году именно для того, чтобы закрыть этот пробел, и отделил содержимое от оформления.
Для меня CSS всегда обретал смысл через классические проблемы, которые он решал. Было время, когда вертикальное центрирование элемента само по себе было целой задачей; Flexbox превратил это в обыденную операцию. А Grid, появившийся в 2017 году, принес настоящую двумерную систему разметки. Сложные макеты, которые раньше мы с трудом собирали с помощью таблиц или float, теперь умещаются в несколько строк кода.
Сегодня, благодаря custom properties, гибкой типографике на основе clamp( ) и container query, CSS стал куда мощнее, чем раньше. Но, опираясь на опыт, могу спокойно сказать: настоящая разница исходит не от отдельных хитростей, а от последовательной design system и дисциплинированной архитектуры CSS.
JavaScript: язык, превративший страницу в приложение
Язык сценариев, который Брендан Айк написал в Netscape в 1995 году (по легенде, за десять дней), навсегда изменил веб. Сначала он назывался Mocha, затем LiveScript, а в итоге, из-за маркетинга, стал JavaScript. Несмотря на название, он не имеет никакого отношения к Java.
Настоящая революция произошла позже. AJAX сделал возможным получение данных без перезагрузки всей страницы. В 2009 году Node.js вынес JavaScript за пределы браузера, на сервер; теперь можно было писать и frontend, и backend на одном языке. А ES2015 (ES6) придал языку его нынешний вид: let/const, стрелочные функции, классы, модули, promise... Большая часть кода, который я пишу, до сих пор опирается на эту версию.
Я каждый день ощущаю результат этой эволюции. В центре современного frontend находится React; а в проектах промышленного масштаба Next.js, дополняющий React возможностями SSR, маршрутизации и производительности, стал моим выбором по умолчанию. По мере роста кодовой базы типобезопасность становится обязательной, поэтому я больше не представляю себе серьезный проект без TypeScript. Основа стека, который мы выстраиваем в Detartech, - это именно эта тройка технологий.
Войны браузеров: на самом деле это были и наши войны тоже
Чтобы понять веб-разработку, нужно понимать историю браузеров; ведь то, что поддерживает браузер, напрямую определяет то, что я могу использовать.
Дело стало достоянием публики с выходом Mosaic в 1993 году - это был первый популярный браузер, показывавший изображения на одной странице с текстом. Затем разразилась первая война браузеров между Netscape Navigator и Internet Explorer. Обе стороны добавляли нестандартные, собственные теги, и это на долгие годы создало кошмар совместимости. Как человек, до сих пор встречающий следы той эпохи в старом коде, скажу так: счет за ту войну мы, разработчики, оплачивали очень долго.
В 2004 году Firefox немного оживил обстановку, а в 2008 году Chrome с его быстрым движком V8 восстановил баланс. Сегодня на сцене три движка рендеринга: Blink, лежащий в основе Chrome и Edge, WebKit от Safari и Gecko от Firefox. После перехода Edge на Chromium в 2020 году стандарты во многом сошлись в одной точке. Для меня это стало серьезным облегчением: я уже не борюсь с межбраузерными несоответствиями так, как раньше, и вместо этого могу присматриваться к новым вещам вроде WebAssembly, PWA и WebGPU.
Современный стек: больше, чем кажется на первый взгляд
Сегодня серьезное веб-приложение - это не только frontend; это единое целое, в котором вместе работают frontend, backend, база данных и инфраструктура. Если я строю frontend на React, Next.js и TypeScript, то за ним стоит структура, которая исполняет бизнес-логику на Node.js, подключается к базе данных и масштабируется с помощью контейнеров.
Правильный выбор этих слоев с самого начала определяет производительность проекта и его способность к росту. Именно поэтому мы в Detartech выстраиваем этот стек из одних рук, от начала до конца: когда части не соединены между собой правильно, рушится даже лучший frontend. Для тех, кому интересны все инструменты, которые мы используем, мы собрали наш технологический стек на отдельной странице; а те, кто хочет построить с нами всю систему целиком, могут ознакомиться с нашей услугой веб-разработки.
Поисковые системы и SEO: если контент никто не может найти, существует ли он?
По мере роста веба возникла новая проблема: как найти то, что ищешь, среди миллионов страниц? В 90-х этим занялись такие имена, как AltaVista и Yahoo, но в 1998 году правила игры изменил Google. PageRank Ларри Пейджа и Сергея Брина учитывал не только содержание страницы, но и авторитетность ссылок, ведущих на нее. Эта идея, рассматривающая ссылку как своего рода "голос", до сих пор лежит в основе современного SEO.
Я рассматриваю SEO как неотъемлемую часть своей работы, потому что приложение, которое никто не может найти, бесполезно, каким бы хорошим ни был его код. Я думаю об этом примерно в трех категориях: technical SEO, обеспечивающий беспрепятственное сканирование и индексацию сайта краулером (скорость сайта, Core Web Vitals, структурированные данные); on-page SEO, охватывающий заголовки, семантическую иерархию и качество контента; и off-page SEO, формируемый ссылками из надежных источников. Из них быстрый и технически надежный сайт закрывает половину работы по technical SEO еще на этапе написания кода.
В последнее время суть работы тоже изменилась. Поиск теперь это не просто "десять синих ссылок"; такие инструменты, как ChatGPT, Perplexity и Google AI Overviews, дают прямой ответ на вопрос и указывают источники. Эту новую эпоху называют GEO (Generative Engine Optimization); цель - чтобы бренд упоминался как источник в ответах ИИ. Добавлю, что это отдельная специализация, где technical SEO, архитектура контента и работа над авторитетностью должны рассматриваться вместе; мы ведем это как отдельную услугу SEO.
Так какой же урок я вынес из всего этого?
Глядя на тридцатилетнюю историю веба, я вижу следующее: каждый новый слой появлялся, чтобы закрыть пробел предыдущего. HTML заложил структуру, CSS добавил внешний вид, JavaScript принес взаимодействие; браузеры довели это до зрелости, соревнуясь друг с другом, а поисковые системы заново определили обнаруживаемость.
Как разработчику, самый большой урок, который я вынес, - основы не меняются. Инструменты меняются каждый год, фреймворки приходят и уходят; но осмысленный HTML, дисциплинированный CSS, по-настоящему понятый JavaScript и продуманный с самого начала подход к SEO по-прежнему остаются основой хорошего веб-продукта. Когда я начинаю новый проект, вопрос, который я задаю себе, звучит не "какой фреймворк?", а "действительно ли я понимаю эту систему?".
Если у вас на уме проект производительного, SEO-совместимого и масштабируемого веб-приложения, и вы хотите воплотить его в жизнь при полном техническом сопровождении от начала до конца, вы можете запросить предварительную встречу с нами.
