Эволюция веб-вёрстки
Представьте 1989 год. Тим Бернерс-Ли, физик из CERN, хотел просто организовать документы своего проекта, чтобы коллеги могли их найти. Он не знал, что это изменит мир. Первый браузер был чёрно-белым, текстовым, максимально простым. Никаких картинок, никаких сложных дизайнов. Просто текст, ссылки и всё.
Один из первых браузеров NCSA Mosaic / ncsa.illinois.edu / Ноябрь 2025
Вёрстка в те дни означала буквально одно: расставить текст и ссылки так, чтобы было удобно читать. Как в книге, но только в интернете. HTML, язык для разметки текста, был минималистичен. Теги были интуитивные, даже неопытный человек мог понять, что здесь происходит.
1. Info.cern.ch / Ноябрь 2025 2. Acme.com / Ноябрь 2025
Потом появилась проблема. Люди хотели красиво оформлять сайты. Цвета, расположение элементов, шрифты. Вместо того чтобы создать инструмент для дизайна, использовали то, что было под рукой. Таблицы, такие же, как в Excel. Картинки, текст и кнопки помещали в ячейки таблиц, чтобы получить нужное расположение. Это было неправильно, но это работало.
В 1996 году появился CSS, язык для оформления. Идея была простой: отделить содержимое от оформления. Это как если бы в тетради писали текст ручкой, а оформляли его маркерами. Но многие по привычке продолжали использовать таблицы.
Сайты того времени загружались долго. Люди открывали страницу, читали текст, кликали на ссылку, ждали загрузки следующей страницы. Никакой мгновенной реакции на действия, никакого живого интерфейса. Всё было медленно и спокойно.
1. Yahoo.com / Октябрь 1999 2. CNN.com / Июль 2000 3. Spacejam.com / Ноябрь 1996
Но была одна большая проблема. Если нужно было изменить цвет заголовков на всех 50 страницах сайта, приходилось открывать каждую страницу и менять вручную. Нет способа сказать «все заголовки должны быть синими». Нет переиспользования кода. Просто бесконечный копипейст.
Тем не менее, эта эпоха показала главное. Вёрстка не волшебство и не невозможная вещь. Это просто организация информации так, чтобы её удобно было читать и смотреть. Если знали несколько тегов HTML, уже могли создавать сайты. Это было доступно. Именно поэтому веб вырос так быстро.
Год 2005. Гугл запускает Gmail и делает что-то невероятное. Открываешь письмо, и оно загружается мгновенно, прямо на глазах. Никаких перезагрузок страницы, никакого ожидания. Почта просто работает как живая. Люди были шокированы. В интернете вообще такое возможно?
Но вот беда. JavaScript, язык, который всё это делает возможным, был написан в спешке Бренданом Айхом за 10 дней. Десять дней! Представьте, что можно было бы написать за десять дней, если бы попросили изобрести язык программирования. Наверное, что-то странное. И да, JavaScript был и остаётся странным. Но он работал, и люди начали его использовать везде.
Проблема только в одном. Firefox понимал JavaScript одним способом, Internet Explorer совсем другим, Safari третьим. Разработчик писал код для одного браузера, и в другом ничего не работало. Ужас. Буквально каждую строку кода нужно было переписывать под каждый браузер. На это тратились недели.
Один код в разных браузерах / Cnblogs.com / Ноябрь 2025
2006 год. Джон Рэсиг смотрит на этот хаос и думает: «Стоп, может быть, напишу библиотеку, которая будет переводить код на язык каждого браузера самостоятельно?» Так родилась jQuery с девизом «Write Less, Do More». Вдруг разработчики начали писать половину кода и получали в два раза больше результата. Это было волшебство.
Параллельно Гугл запускает Карты. Трогаешь карту пальцем, она скользит. Приближаешь, она зумится. Всё работает без лагов, без чёрных экранов загрузки. Это был мастер-класс по UX. Разработчики смотрели на Гугл Карты и понимали, что веб может быть красивым и быстрым одновременно.
Вёрстка в этот период превратилась во что-то совсем иное. Теперь недостаточно просто расставить элементы на странице. Нужно думать о поведении. Когда пользователь кликает на кнопку, страница должна как-то реагировать. Когда вводит текст в поле поиска, должны появиться подсказки. Верстальщик стал кем-то вроде кукловода, управляющего каждым движением на странице.
Это была эпоха, когда веб начал догонять компьютерные приложения. Сайты перестали быть просто местом, где читают информацию, и стали чем-то, с чем работают каждый день.
2010 год. Гугл выпускает AngularJS и говорит: «Слушайте, пора писать JavaScript как нормальный язык, а не как набор хаков». AngularJS принесла с собой два волшебных слова: «two-way data binding». Звучит сложно, но смысл простой. Меняешь данные на странице, и код автоматически обновляет все связанные элементы. И наоборот. Пользователь кликает кнопку, и код немедленно знает об этом. Это стало началом новой эпохи.
Angular.io / Ноябрь 2025
Но тут в 2013 году на сцену выходит молодой парень Джордан Уолк из Фейсбука. Он показывает что-то странное, называется React. Люди смотрят скептически. «Ещё один фреймворк?» Но потом он объясняет главную идею, и все понимают, что это не просто фреймворк, это совсем другой способ писать код.
React.dev / Ноябрь 2025
React говорит: давайте разбивать сайт на маленькие кусочки, которые называются компоненты. Кнопка это компонент. Форма это компонент. Каждый компонент знает, как себя нарисовать и как реагировать на действия пользователя. Вместо того чтобы думать о странице целиком, думаешь о каждом компоненте отдельно. Это было революционно.
Но вот загвоздка. React был для фанатиков. Нужно было понимать, как работает Virtual DOM (это такая копия интерфейса в памяти компьютера, которая помогает быстро обновлять сайт). Нужно было знать про state и props (данные компонента и данные, которые пришли из родительского компонента). Нужно было писать на JSX (странной смеси JavaScript и HTML). Новичкам это казалось пыткой.
И тут в 2014 году появляется Эван Ю с Vue.js. Он смотрит на React, смотрит на AngularJS и думает: «Ребята, почему всё так сложно?» Vue взял лучшее от обоих, но упростил всё в тысячу раз. На Vue писать было приятно. Синтаксис был понятен. Документация была хорошей. Люди начали переходить на Vue.
Vuejs.org / Ноябрь 2025
А ещё в это время Майкрософт выпускает TypeScript, который добавляет правила к JavaScript. JavaScript позволяет писать как угодно, и не знаешь, где ошибка, пока программа не упадёт. TypeScript говорит: «Эй, здесь написано число, но потом пытаешься его использовать как текст. Исправь». Это как автокорректор, но для кода.
Вёрстка в этот период стала почти неузнаваемой. Раньше писали HTML, потом CSS, потом JavaScript. Теперь всё смешалось в один компонент. Пишешь структуру, стили и логику в одном файле. Это звучит как беспорядок, но на самом деле это чистота. Компонент это самостоятельная единица, которая содержит всё необходимое. Код начал повторяться меньше. Раньше если нужна была кнопка в двух местах на сайте, писали код кнопки два раза. Теперь пишешь компонент кнопки один раз и используешь его везде. Меняешь цвет кнопки в одном месте, и она меняется везде на сайте. Эта эпоха показала, что веб-разработка не просто вёрстка. Это архитектура, организация кода, управление данными. Это стало работой, требующей реального инженерного мышления.
Июнь 2021 года. GitHub и OpenAI объявляют о Copilot, инструменте, который пишет код вместо программиста. Сначала никто не верит. «Как это может работать? ИИ не может писать сложный код!» Но потом разработчики открывают его и видят чудо. Начинаешь писать функцию, а Copilot предлагает закончить её за тебя. Часто правильно. Иногда идеально.
А потом в ноябре 2022 года на сцену выходит ChatGPT. Весь интернет теряет рассудок. «Это может делать что угодно!» Просишь: «Напиши мне функцию для проверки email». ChatGPT пишет её. Просишь: «Объясни мне, почему мой код не работает». ChatGPT объясняет. Просишь: «Напиши мне весь сайт». ChatGPT пишет его, хотя не всегда хорошо, но пишет.
Chat.openai.com / Ноябрь 2025
Это изменило всё. Разработчики вдруг стали быстрее. Тратили меньше времени на гугление и копирование кода со Stack Overflow. Тратили больше времени на обдумывание логики и дизайна. ИИ делал скучную работу, а люди делали интересную.
Но параллельно происходило ещё кое-что важное. Low-code и no-code платформы (Webflow, Bubble, Airtable, Zapier) начали расти невероятными темпами. Рынок low-code достиг $28,75 млрд в 2024 году и собирается взлететь до $264,40 млрд к 2032.
Главная идея low-code и no-code была революционна. Люди, которые не знают, как писать код, могут создавать приложения и сайты. Перетаскиваешь кнопку сюда, устанавливаешь её цвет туда, подключаешь базу данных вот там, и приложение работает.
Вёрстка в этот период вообще начала меняться. Раньше разработчик писал CSS для каждого пикселя. Теперь использует готовые компоненты и системы дизайна (Tailwind CSS, Material Design). Раньше думали о каждом HTML-теге. Теперь выбираешь компонент из библиотеки.
И AI начал помогать даже с вёрсткой. Описываешь, как должен выглядеть сайт, а AI генерирует CSS и HTML. Задача становится не «написать правильный код», а «проверить, что AI написал правильный код».
AI генерирует код, который работает. Только вот не понимаешь, почему он работает. Копируешь его, вставляешь в проект и надеешься, что ничего не сломается. А когда ломается, оказываешься беспомощен, потому что не знаешь, где искать ошибку. Low-code платформы быстро создают сайты, но стоит захотеть что-то нестандартное, и упираешься в стену их ограничений. Главное здесь вот что: люди перестали понимать, как всё работает под капотом.
Новичок заходит в веб-разработку и не знает, с чего начать. Учить код? Но ИИ напишет быстрее. Учиться работать с low-code платформами? Но они меняются каждый год, и знания устаревают вместе с ними. Получается замкнутый круг. Без понимания основ не увидишь, когда ИИ врёт. А без скорости не успеешь за современными требованиями.
Когда смотришь на траекторию развития веба, некоторые вещи становятся понятными. Но хочу сделать ремарку, что не претендую на правду в последней инстанции. Будущее это не про очередной инструмент или язык программирования. Это про возврат к основам, но с современными возможностями.
Компонентный подход станет нормой. Atomic Design, где интерфейс разбивается на атомы, молекулы и организмы, превратится из модной идеи в стандартную практику. Разработчик создаёт маленькие переиспользуемые блоки и собирает из них всю систему. Это структурировано, понятно и эффективно.
Atomic Design
WebAssembly (WASM) станет доступным для обычных проектов. Сейчас его используют для сложных приложений вроде Figma или браузерных игр, но скоро любой разработчик сможет применять его для ускорения критичных частей приложения. 3D-графика, обработка видео, совместная работа в реальном времени будут работать в браузере на уровне нативных приложений.
Доступность станет встроенным стандартом. WCAG 3.0 меняет подход так, что accessibility закладывается на этапе проектирования, а не добавляется в конце. ИИ будет автоматически проверять соответствие стандартам и предлагать исправления. Это перестанет быть опциональным требованием.
Обучение веб-разработке изменится. Вместо зубрёжки синтаксиса акцент сместится на понимание систем, архитектуры и организации кода. ИИ возьмёт на себя рутинную работу, а человек сосредоточится на логике и структуре.
Граница между кодом и конфигурацией размоется. Разработчик не будет выбирать между написанием кода вручную и использованием low-code инструментов. Будет комбинировать подходы в зависимости от задачи.
Это эпоха, где веб-разработчик ценится не за знание всех технологий, а за умение их грамотно соединять для решения задач.
