В начале 1990-х интернет был совсем другим: не было соцсетей, динамичных интерфейсов или сложных веб-приложений. Сайты представляли собой простые текстовые страницы, связанные гиперссылками. Это была эпоха статического веба — эра, где каждое изменение требовало правки HTML-кода вручную.
В 1991 году Тим Бернерс-Ли, работавший в CERN, создал первый в мире сайт — info.cern.ch. Он был написан на HTML 1.0 — языке разметки, который позволял структурировать текст, добавлять заголовки, списки и ссылки. Не смотря на то, что это была прорывная технология, довольно быстро стало понятно, что тут не паханое поле для всяких новшеств и инноваций. И в эту гонку активно включились почти все, кто был хоть как-то причастен к этому. Так в чём же были основные недостатки и огранияения.
Нет интерактивности – формы обратной связи или регистрации требовали CGI-скриптов, которые писались на Perl и было это довольно сложно. Все обновления вручную – чтобы изменить текст, нужно было править HTML и заливать файл на сервер через FTP. И пожалуйс самое главное нет стилей – CSS появился только в 1996 году (HTML 3.2), до этого оформление делали тегами вроде <font>.
<font>
Теперь давайте немного приведём цифр, насколько стремительно интернет как явление набирал обороты. В 1993 год – в мире насчитывалось всего 130 сайтов (по данным CERN). За 2 года было создано 129 сайтов, не густо. Но уже к 1996 год сайтов стало около 100 000, включая первые коммерческие (Amazon, eBay). Но скорость загрузки оставляля желать лучшего. Даже простые страницы грузились 10–30 секунд (напомню, вс работало на модемах со скорость до 56k).
На данном этап статические сайты заложили основу веба: URL, гиперссылки, структура документов. Без них не было бы современных технологий. И именно большое и взрывное появление статических сайтов создало ажиотаж на рынке. Резко потребовались более соверешнные каналы связи и новые технологии.
Если в начале 1990-х была эпоха статических текстовых страниц, то конец XX века стал временем революции — сайты научились реагировать на пользователей. Появились первые формы обратной связи, гостевые книги, динамические страницы и даже подобие веб-приложений. Всё это стало возможным благодаря трем ключевым технологиям: CGI, PHP и JavaScript.
До середины 1990-х сайты были «мертвыми» — пользователь мог только читать текст и переходить по ссылкам. Всё изменилось с появлением Common Gateway Interface (CGI) — технологии, позволяющей серверу запускать программы и возвращать результат в браузер.
Как работало?Пользователь заполнял форму → данные отправлялись на сервер → CGI-скрипт (чаще всего на Perl) обрабатывал их → возвращал HTML-страницу с результатом. Наиболее яркими на тот момент примерами были Гостевые книги (ранние аналоги комментариев) и простые поисковики (например, Yahoo! в 1996). Но это же породило и новые проблемы.Каждое обращение создавало новый процесс, нагружая сервер и появилост такое понятие, как уязвимости, если скрипт плохо проверял ввод, можно было взломать сайт.
CGI был мощным, но сложным. В 1995 году Расмус Лердорф создал PHP (изначально назывался — «Personal Home Page Tools»), который превратил серверную разработку в нечто доступное даже новичкам. Так почему PHP стал популярен?
Всё просто он был встроен в HTML – не нужно писать отдельные скрипты, код встраивался прямо внутрь html кода страницы. Именно это и дало ему взрывной рост в создании сайтов. К тому же он обеспечивал все те базовые потребности, которые так были необходимы - работа с запросами и базой данных. Это и привело в появлению такого понятия как CMS.
К концу 20 века и в начале 21 стало понятно, что нужны более сложные и комплексные систему, которые давали бы готовую функциональность для непрограммистов. Именно в этот момент повявляюсят и активно развиваются такие системы, как WordPress (2003), которая начался как блог-платформа на PHP и Drupal, Joomla – корпоративные сайты без программистов.
Уже к 2000 году 78% сайтов с серверным кодом использовали PHP (по данным W3Techs). И что характерно на PHP до сих пор работает 76% всех сайтов, не смотря на то, что сейчас существует огромное количество альтернатив.
Теперь поговорим ещё об одном участнике революции. Если PHP и CGI работали на сервере, то JavaScript, который появился в 1995, добавил динамики прямо в браузере. Правда, первые 10 лет его возможности были скромными. Он тоже прошёл длииный и тернистый путь. В 1997 появляется DHTML – изменение страницы «на лету» (например, выпадающие меню). А в 2005 AJAX (2005) – фоновые запросы к серверу без перезагрузки страницы. Ярким примером можно считать Google Maps (2005), где карта подгружалась динамически.
К 2000 году в мире было уже 17 млн сайтов (по данным Netcraft) против 100 000 в 1996. Сайты стали интерактивными, появились формы, поиск, личные кабинеты. Также появились первые CMS давшие возможность создавать сайты даже не-программистам. И была заложена основа для Web 2.0 соцсети и веб-приложения и наступила эпоха Web 2.0, где пользователи сами стали создавать контент, а не только потреблять.
Если 1995–2005 годы подарили миру динамические сайты, то следующий период (2005–2010) кардинально изменил сам принцип взаимодействия с интернетом. Наступила эпоха Web 2.0, где пользователи перестали быть пассивными читателями — они начали создавать контент, общаться в соцсетях и формировать современный цифровой ландшафт.
До 2005 года большинство сайтов были «односторонними»: компания публиковала информацию, пользователи — потребляли. Всё изменилось с появлением платформ, где контент генерировали сами люди. Яркими представителями стали MySpace (2003) – первая массовая соцсеть с кастомизацией профилей (через HTML/CSS), Facebook* (2004) – изначально для студентов Гарварда, к 2006 году открыт для всех. YouTube (2005) – пользователи загружают видео вместо пассивного просмотра ТВ. Wikipedia (2001) – энциклопедия, которую редактируют добровольцы
До 2004 года любое действие на сайте (отправка формы, загрузка данных) требовало полной перезагрузки страницы. Технология AJAX (Asynchronous JavaScript and XML) изменила это. Браузер в фоне отправлял запросы к серверу и обновлял только часть страницы. Первый массовый пример — Gmail (2004). Письма загружались без перезагрузки и уведомления появлялись мгновенно. Вслед за техногигантами потянулись и соцсети, например Google Suggest – подсказки при поиске и Twitter (2006) – лента обновлялась без перезагрузки.
Если раньше создание сайта требовало знаний PHP/HTML, то в середине 2000-х появились CMS (Content Management Systems), позволившие управлять контентом без программирования. Так почем же WordPress стал лидером? Всё просто - простота установки («5-минутный setup»), огромное количество тем и плагинов и он подходил для блогов, визиток и даже корпоративных сайтов. На нём были сделаны такие крпные сайты как официальный блог The New York Times (2006) и первые версии TechCrunch.
В 2006 году JavaScript-разработка была кошмаро. Каждый браузер (IE6, Firefox, Safari) работал по-своему. Простые анимации требовали сотни строк кода. Решением стало jQuery появившийся в 2006. Он предлагал единый API для всех браузеров и у него были простые методы для анимаций, AJAX, работы с DOM деревом страницы.
Итогом этой эпохи стал WordPress, на котором к 2024 году работает 43% всех сайтов в мире (W3Techs). AJAX стал стандартом — без него не было бы SPA (React, Angular). Соцсети превратились в главные источники трафика. И в 2010-х наступила мобильная эра, и сайты пришлось адаптировать под смартфоны.
(Смена парадигмы: от десктопа к смартфонам)
В начале 2010-х мир столкнулся с неожиданной проблемой: сайты, которые прекрасно выглядели на компьютерах, разваливались на экранах iPhone и Android. Пользователи массово переходили на мобильные устройства, и веб-разработчикам пришлось срочно менять подход. Наступила эра mobile-first, адаптивного дизайна и фреймворков вроде Bootstrap.
Рост мобильного интернета и в 2007 год: анонс iPhone с мобильным браузером Safari сделали своё дело. Люди всё чаще стали выходить в интернет при помощи мобильных устройств. И уже с 2010 по 2015 проищошёл взрывной рост продаж смартфонов. В 2015 году он достиг 1.9 млрд пользователей. Проблемы в веб разработке стали очевидны. Сайты с фиксированной шириной, например 960px не помещались на экранах 320–480px. Это породило новую волну изменений и к концу 2010 года сложилось два подхода - отдельная мобильная версия, например, m.site.com и резиновый дизайн где были процентные ширины. У первого был минус двойная работа, проблемы с синхронизацией контента. А второй не учитывал различия экранов.
m.site.com
В 2010 году дизайнер Итан Маркотт предложил концепцию адаптивного дизайна (RWD), основанную на трех принципах:
Гибкая сетка (проценты вместо пикселей).
Медиазапросы (CSS-правила для разных экранов).
Гибкие изображения (масштабирование без потерь).
И с 2012 по 2017 активно внедряетются Flexbox и Grid. Flexbox дал выравнивание элементов без float и хаков, а CSS Grid сложные сетки с минимальным кодом.
float
В 2010-х появление стандарта HTML5 заменило устаревшие технологии. На смену Flash технологии пришли новые теги и стандарты. <video> и <audio> для воспроизведения видео и аудио контента, <canvas> для графики и анимации (например, игры), появилось локальное хранилище (localStorage), позволяющее хранить данные в браузере.
<video>
<audio>
<canvas>
localStorage
Появление всех этих нововведений породило техническую сложность при создании интерфейсов сайтов и чтобы не писать медиазапросы вручную, появились CSS-фреймворки, например Bootstrap и Foundation. Bootstrap (2011) давал готовую сетку из 12 колонок по которой можно было весртать и готовые компоненты, такие как кнопки, навбары, уведомления и т.п. Foundation (2011) был более гибкий, чем Bootstrap и у него был акцент на мобильную оптимизацию. Но Bootstrap победил. Всё было просто - он был прост для новичков и имел огромное сообщество.
К 2013 году стратегия «сначала мобильные» стала стандартом. Дизайнеры начинали с макетов для смартфонов и затем адаптировали их под планшеты и десктопы. Примерами успешного подхода mobile-first можно назвать Google в 2015 с отдельным мобильный индексом для поиска и Twitter с «упрощенной» версией для слабых соединений.
Теперь посмотрим на итоги этой эпохи. В 2015 год мобильный трафик впервые превысил десктопный (Statista), в этот момент доля мобильных пользователей стала 50%+ против 10% в 2010 и стандарт HTML5 окончательно убил Flash, кстати Apple отказалась от него в iOS еще в 2010, а весь остальной мир существенно позже. В 2015–2020 годах на смену адаптивности пришли PWA и SPA (React, Vue).
Традиционные сайты каждый раз загружали весь HTML при переходе между страницами, что вызывало медленную работу (повторная загрузка шапки, меню), нагружало сервер и вызывало пускай маленькое, но моргание экрана. Решением стало активное времение SPA (Single Page Application).
Какой у них принцип работы. Браузер загружает одну HTML-страницу и дальше всё обновляется через JavaScript (React/Vue/Angular), сами данные подгружаются из API (например, JSON). Примерами стали Facebook, в 2013 – переписан на React для скорости и например Gmail – работает как десктопное приложение.
JSON
Популярными фреймворки в этот период и по настоящее время становятся React, Angular и Vue.
На 2024 год 60% разработчиков используют React (State of JS, 2023) и SPA-сайты грузятся на 30% быстрее (Google Case Study).
Ещё одним этапом доступности веб-сайтов и приложений стало внедрение PWA. Сначала предпосылки и проблемы - мобильные сайты часто не работали без интернета и загружались медленнее, чем нативные приложения. Решением становится Progressive Web Apps (PWA). Это гибрид сайта и мобильного приложения. Технология даёт оффлайн-режим (через Service Workers) без потери функциональности, push-уведомления и возможность установки на на домашний экран.
Примерами успешных PWA приложений можно назвать Twitter Lite (2017) – сократил объем трафика на 70%, Pinterest – время загрузки упало с 23 сек до 5 сек и Starbucks – оффлайн-заказы через PWA.
Но даже повление таких мощных и прогрессивных технологий как SPA и PWA не покрывало всех потребностей пользователей в доступе к сайтам и контенту. Тут можно выделить основные проблема традиционных CMS. Динамические сайты (PHP/WordPress) требуют серверных мощностей и их медленная загрузка для широкой аудитории и больщого количества запросов к БД. Решением становится Jamstack (JavaScript + API + Markup). Как это работает:
Популярными инструментами становятся Gatsby, как генератор статичных React-сайтов, Netlify, как хостинг + автоматические сборки и Headless CMS (Sanity, Contentful), где контент получается через через API. Всё это дало скорость загрузки за 0.5 сек вместо 3+ сек у WordPress и безопасность, т.к. нет прямого доступа к серверу.
React используют 60% фронтенд-разработчиков (State of JS, 2023).
PWA ускоряют конверсию на 20-30% (Google).
Jamstack-сайты в 10 раз быстрее традиционных (Netlify).
В 2020-х на сцену вышла эра ИИ, где нейросети генерируют код, дизайн и контент.
(От автоматизации до генерации кода: как нейросети меняют создание сайтов)
Если 2010-е годы подарили нам SPA и PWA, то 2020-е стали временем, когда искусственный интеллект начал проектировать, программировать и тестировать сайты. Разберем ключевые изменения, которые ИИ привнес в веб-разработку.
ИИ-помощники для разработчиков появился в GitHub Copilot в 2021. Эта нейросеть предлагает код на основе контекста кода разработчика. Например появилось автоматическое дополнение React-компонентов. И в 2022 году появляется ChatGPT, который помимо генерации текста умеет генерировать HTML/CSS/JS по текстовому описанию. Это произвело следующу революцию. Благодаря этому повились низкодовые платформы с ИИ, такие как Framer в 2023 – дизайн + автоматическая верстка и Dora AI в 2024 – генерация сайта из скетча или текста. На конец 2023 года 41% разработчиков используют ИИ для написания кода (GitHub, 2023).
Помимо написания кода появляются и генеративные инструменты, например Figma AI создаёт UI-макеты по описанию, Adobe Firefly генерирует изображения для сайтов, а ChatGPT для копирайтинга, создавая тексты для лендингов за минуты. Но и у генеративных алгоритмов есть проблемы, например ИИ часто создает шаблонный дизайн/контент, которые требует существенной доработки.
Следующей сферой применения ИИ стало улучшение UX. Динамические рекомендации, например, Netflix-подобные подборки и анализ поведения пользователей – нейросети предсказывают, где повысить конверсию. Например Amazon использует ИИ для адаптации интерфейса под каждого посетителя.
Уже к концу 2025 году ожидается полностью автоматизированные сайты – от брифа до деплоя без участия человека, голосовые интерфейсы – управление через речь, например, для людей с ограниченными возможностями. Тут тоже есть риски от ротери уникальности дизайна до этических вопросов, например массовый плагиат контента.
Что же дальше? Планы можно строить какие угодно, многие уже пророчат Web3 с децентрализованными сайты на блокчейне и ИИ как стандарт, который встроен в браузерах.
Что же, подведём итоги. От появления Веба и ручного написания HTML-тегов до автономных ИИ-ассистентов – веб-разработка прошла огромный путь. И всё это за какие-то 30-35 лет. Никогда ещё прогресс не шёл такими семимильными шагами. Сегодня создать сайт может даже новичок, но креативность и понимание пользователя по-прежнему остаются главными конкурентными преимуществами. Создание полезных интерактивных сайтов, на мой взгляд, станут одним из трендов следующего поколения эволюции.
* Meta (Facebook) - признаны экстремисткими на территории России
Программы автоматизации позволяют снизить издержки в процессе работе и повысить продуктивность
© Хелперсофт | Helpersoft 2015 - 2026