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

Как выглядели интерфейсы в нулевых: малая скорость загрузки и статичные страницы

В конце 1990-х и начале 2000-х веб-сайты были составлены из статичных веб-страниц с перекрестными ссылками. Примером такого сайта в наши дни является Википедия. Термин “гипертекст” в акрониме HTML означает именно это – текст, ссылки на исходный текст. Визуальные элементы, такие как картинки, на таких сайтах были редкостью. Взаимодействие с пользователями осуществлялось с использованием простых форматов, например, форм обратной связи. Каждый переход по ссылке и отправка сообщений вызывают полную перезагрузку страниц. Интернет был медленным, а принцип “безлимит” был доступен только небольшому количеству счастливчиков, поэтому графические элементы интерфейса и обновление страницы жадно потребляли ограниченный трафик пользователей.

Создание таких сайтов было одновременно и простым, и сложным. С технологической точки зрения они были значительно проще, чем сегодняшние, а пользователи были менее требовательными, поэтому для решения задач того времени достаточно было иметь обычный текстовый редактор и FTP-доступ на сервер. С другой стороны, только специалисты, как минимум немного погруженные в тему, могли создавать такие сайты (например, веб-мастера). Впрочем, первые системы управления (CMS) появились еще в 1995 году, но они получили широкое распространение только около 2003-2006 годов, когда на рынке появилась WordPress — система, на которой построено более 40% всех современных сайтов. Эти инструменты позволили владельцам веб-ресурсов (например, руководителям торговых компаний) самостоятельно добавлять нужную информацию, такую как товары, адреса офисов и полезные материалы, даже без навыков программирования. Стоимость разработки сайтов на CMS была выше, но впоследствии можно было экономить на последующих обращениях к разработчикам для внесения контента на ресурс.

JavaScript – всплывающие окна, чаты, асинхронные запросы

JavaScript появился в 1995 году и первоначально был создан для того, чтобы сделать веб-страницы более интерактивными. Но изначально он не был широко принят, и многие разработчики продолжали использовать статичные веб-страницы, как это было принято в конце 1990-х годов. Тем не менее, к началу 2000-х годов JavaScript начал получать большую популярность и стал неотъемлемой частью веб-разработки, позволяя создавать более интерактивные и динамичные пользовательские интерфейсы.

Да, это было время, когда динамичность сайтов стала одним из главных трендов в веб-разработке, и JavaScript сыграл в этом ключевую роль. Разработчики начали использовать JavaScript для создания различных анимаций, слайдеров, аккордеонов, табов и других интерактивных элементов интерфейса. Кроме того, появилась возможность отправлять формы без перезагрузки страниц, а также использовать структуру AJAX для динамической загрузки данных без перезагрузки всей страницы. Все это имеет большое значение для повышения функциональности сайтов.

Блоги и соцсети

В период с 1999 по 2009 год появилось множество контентных досок и платформ для блоггинга. Среди них был Dirty.ru, который позже стал известен как “Лепрозорий”, а также популярные LiveJournal и Tumblr. 

Блог-платформы стали своеобразным полигоном для тестирования интерактивных функций, и лучшие из них позднее были использованы в интерфейсах продуктовых сайтов, а также легли в основу популярных социальных сетей.

DevTools: новые инструменты и изменение веб-ресурсов в браузере

Инструменты разработчика или DevTools, представляющие собой встроенный в браузер функционал для просмотра исходного кода веб-страницы, анализа сетевых запросов и внесения изменений в режиме реального времени, существовали не всегда.

В нулевые годы самым распространенным браузером был Internet Explorer от Microsoft, который занимал почти 90% рынка, благодаря тому, что он был включен в установочный пакет популярной операционной системы Windows. Однако почти сразу на профессиональных форумах начали обсуждать его недостатки: медленная загрузка страниц, проблемы с установкой плагинов, неудобный и ограниченный интерфейс – все это не позволяло назвать его лучшим выбором для своего времени. Кроме того, Internet Explorer не полностью соответствовал веб-стандартам, установленным Консорциумом Всемирной паутины (W3C): он не поддерживал SVG и инструменты для правильной обработки CSS, что могло приводить к непредсказуемому отображению элементов страницы на экране.

Однако главной причиной, по которой Internet Explorer по итогу уступил Firefox, стали множество бесплатных встроенных расширений в последнем. Например, Firefox предлагал мощный девелоперский пакет FireBug, который позволял править код прямо в браузере и просматривать HTTP-заголовки, в том числе и AJAX-запросов. Версия FireBug для Internet Explorer также существовала, но она работала гораздо медленнее и имела сильно урезанную функциональность.

К 2008 году Firefox стал настоящим мультитулом, однако его функциональность сказалась на скорости работы, и многие пользователи перешли на новый браузер от Google. Chrome оказался быстрым и быстро загружался даже на слабых компьютерах. Быстродействия удалось достичь, в том числе, благодаря использованию нового движка JavaScript, который затем стал основой для среды Node.js.

Кроссбраузерность

В начале 2010-х годов подход к созданию интерфейсов в веб-разработке начал быстро меняться. Появлялись все новые возможности, предоставляемые стандартами веб-технологий, которые внедрялись в браузерах. Например, CSS-модуль Flexbox позволил гибко располагать элементы на странице, как горизонтально, так и вертикально, в отличие от использования таблиц или плавающих блоков, что делало процесс верстки более гибким и удобным.

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

Для решения проблемы кроссбраузерности начали разрабатывать различные инструменты и технологии, которые позволяют унифицировать работу с разными браузерами. Одним из таких инструментов стал jQuery — библиотека JavaScript, которая упрощает взаимодействие с DOM и предоставляет удобные методы для работы с AJAX-запросами и анимациями. Еще одним примером такой технологии является CSS-препроцессоры, такие как Sass и Less, которые позволяют использовать более удобный и выразительный синтаксис при написании CSS, а затем транслируют его в обычный CSS, понятный браузерам.

Интерфейсные фреймворки

В 2006 году веб-разработчики провозгласили девиз “Писать меньше, делать больше”. Это произошло благодаря появлению JavaScript-библиотеки jQuery. С помощью этой библиотеки интерфейсные разработчики могли упростить взаимодействие между HTML и JavaScript и легко получать доступ к элементам DOM. Кроме того, jQuery предоставила удобное API для работы с AJAX. Это было оберткой, которая позволяла не обращать внимание на особенности браузеров. Сегодня jQuery по-прежнему остается популярным, но с появлением “большой тройки” интерфейсных фреймворков (React, Vue и Angular) он отошел на второй план при создании новых сайтов.

На сегодняшний день наиболее обсуждаемым фреймворком является React. Он предоставляет возможность более декларативного взаимодействия с DOM и более естественного обращения к разделению кода на части, которые стали популярными после применения методологии БЭМ.

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