Эволюция интерфейсов за 20 лет
При первом же взгляде на архивные снимки экрана легко заметить, как сильно изменились сетевые ресурсы за минувшую пару десятилетий. Сайты теперь явно содержат больше функционала, загружаются быстрее, выглядят более привлекательно. Но для удобства пользователей, обретения возможности свободно открывать любые ресурсы в сети с разных гаджетов и девайсов каким угодно браузерами, заказывать товары и услуги парой кликов мышью понадобился нелегкий эволюционный путь разных технологий.
Шли годы, доступный веб-разработчикам арсенал сильно эволюционировал, а параллельно совершенствовались интерфейсы. В основу этой статьи легли рассказы компетентного специалиста – Сергея Бережного, одного из директоров Яндекса и заведующего соответствующей Школой в Академии Яндекса.
Как это было на переходе в наше тысячелетие
Последние 1990-е и первые 2000-е гг. остались в памяти с широко известной иллюстрацией – статичными страницами, где присутствовали только кросс-ссылки. С тех времен у нас по сей день имеется «динозавр»: Википедия, где часто попадаются тексты со вставками – ссылками на другие тексты. Какие-либо изображения тогда попадались редко, интерактив присутствовал крайне примитивный: форма обратной связи появилась как раз в то время.
Переход по ссылке либо отправка формы по умолчанию сопровождалась полной перезагрузкой сайта. Про скорость Интернета стыдно упоминать, глядя на доступные сегодня цифры. Кстати, т.н. безлимит тогда уже появился, но был практически элитарным, поскольку буквально пожирал трафик. Это и обуславливало скудный контент: у подавляющего большинства пользователей вся графика и обновления страниц забивали практически весь трафик.
С другой стороны, делать сайты тогда было сильно проще технически. Хотя и компетенция пользователей оставляла желать лучшего. Типичные задачи тех лет решались с FTP-доступом на сервер, а основным инструментом служил текстовый редактор. Занимались этим веб-мастера минимального уровня, по сегодняшним меркам. Что интересно: впервые CMS появились в 1995 г., но активно распространились только с появлением WordPress (в 2003-2006 гг.). И по сей день свыше 40% действующих сайтов создано как раз на этой системе.
Первые инструменты в целом решили основной спектр прикладных задач – к примеру, владельцы сайтов и даже руководители фирм без курсов программирования освоили простые действия: добавление сведений в базы данных, пополнение ассортимента каталогов, замена реквизитов, загрузка разных материалов.
По воспоминаниям Сергея Бережного, тогда он трудился в крохотной веб-студии, вместе с коллегами создавая систему управления сайтами. Эту систему и продавали клиентам как готовый прикладной продукт, что сразу повышало цену сетевых ресурсов. А владельцы сайтов экономили на услугах по обновлению сведений.
Появление JavaScript
Этот язык программирования изначально был создан как набор инструментов для «штамповки» интерактивных сетевых ресурсов. Но с момента появления в 1995 г. до массового использования прошло почти десять лет. Технически ряд поздних решений можно было реализовать и в 1995 г., но тогда это не было актуально: более активное взаимодействие сайта и пользователей потребовалось позже.
Реакция на клики мышкой, нажатие кнопок или простое наведение курсора дождалась своего расцвета не сразу – оживление веб-страниц со вставкой в код любых тегов и проектированием интерфейса под реакцию на деятельность пользователей стартовало с анимации меню. К ним быстро добавились всплывающие окна и прочие видеоэффекты.
А следом пришел AJAX – это 2006/2007 гг. Ассортимент вариантов получения данных от сервера сильно вырос, появилась возможность делать это асинхронно и перезагружать лишь часть страницы сайта. Так экономился трафик, а сетевые ресурсы начали загружаться быстрее. Яркий пример – чаты: необходимость перезагрузки отпала, общение ускорилось, а у пользователей появилась опция просмотра только новых сообщений, почти синхронно с отправлениями.
Первые интерактивные страницы стали приятной новинкой – сама идея с асинхронной дозагрузкой с сервера и показов частями в динамике стала ассоциироваться с «АЯКСом».
Появление блогов и соцсетей
Примерно между 1999 и 2009 гг. появились контентные доски, платформы для блогеров – некоторые дожили до сего времени: LiveJournal, Tumblr. Их функционал позволил апробировать массу интерактива и лучшие образцы позаимствовали создатели сайтов – интерфейсы продуктовых ресурсов и основа широко известных соцсетей сформировались как раз благодаря этому обстоятельству.
Например, Яндекс в 2007 г. сделал платформу Я.ру (ya.ru), наподобие ЖЖ, но с рядом новых технических решений. Для Сергея Бережного именно этот проект стал первым большим опытом в Яндексе. Это была серия экспериментов, знакомство с новыми форматами и функционалом, но аудитория вскоре разбрелась по крупным соцсетям (Вконтакте, Одноклассники) и в 2014 г. Яндекс свою платформу закрыл.
DevTools – предвестник «Браузерных войн»
Этот арсенал разработчика, встроенный в браузер, позволил увидеть базовый код сетевых ресурсов, выяснять детали запросов, оперативно корректировать HTML, JavaScript и CSS. В 2000-е гг. на пике популярности был Internet Explorer, занимавший до 90% рынка только благодаря пакетному предложению Windows, но уже тогда ему пеняли на недостатки: сайты грузились медленно, интерфейс был откровенно архаичным, случались конфликты плагинов. И веб-стандарты IE не выдерживал – например, поддержки SVG и адекватной обработки CSS не было в принципе.
И в 2004 г. появился Firefox, с целым букетом встроенных приложений бесплатно. К примеру, солидный пакет FireBug с версией и для IE для правки кода в браузере, просмотра заголовков и запросов. До того основной дебаг JavaScript происходил методом «a->alert(…);», с выводом значения в окно и прерыванием в браузере. В то же время дебаг CSS делался по алгоритму «b->border:1px solid red;» - чтобы понять реакцию браузера на элементы HTML. Позже прибавился метод «b->background-color:pink;».
За 4 года «Огнелис» обрел немало дополнительных опций, но сбавил скорость – и многие пользователи с энтузиазмом познакомились с Google Chrome. Соперник оказался проворнее даже на слабых девайсах, во многом из-за принципиально другого движка, позже ставшего основой Node.js.
Гордость Яндекса – БЭМ
Это аббревиатура, образованная сокращением формулы «блок-элемент-модификатор». Прямо сейчас этим инструментом пользуются многие веб-разработчики в мире, а началось все в 2006 г. – Сергей Бережной с коллегами столкнулись с проблемами кода: было сложно править одну страницу, не трогая другую, а найти оригинальные названия для множества элементов интерфейса вообще не представлялось реалистичным.
Выходом стала методика идентификации частей интерфейсов – БЭМ. Суть ее в разделении на компоненты, в виде автономных блоков. И каждый такой блок можно использовать снова, а название блока имеет прямой смысл: к примеру, Contacts, Promo, Menu и др. Элементами выступают части блока; модификатором служит вид, состояние или деятельность блока. Причем и блоки, и элементы, и модификаторы присутствуют во всех технологиях программирования интерфейсов. Как результат – имеем не папки CSS и JS, с единственным или несколькими внушительными файлами на весь проект или его страницу, а массив папок с разными элементами, блоками, модификаторами. И в каждой папочке имеется только небольшой кусочек кода (CSS и JavaScript). Демонстрация пользователям сайта полноценных страниц обеспечивается сборкой только нужных файлов из массива кусочков.
Вот так сборка и компиляция сетевых разработок вошли в работу специалистов Яндекса. Хотя коллеги долго допытывались, что это за компиляция интерпретируемых языков.
Решение проблем кроссбраузерности
Примерно с 2010-х гг. верстка интерфейсов стала эволюционировать быстрее: внедрялись новые стандарты сетевых технологий, это напрямую касалось и браузеров. Так, CSS-модуль «Огнелиса» размещал элементы по вертикали и горизонтали, более гибко, чем ранее – с таблицами или блоками. Но прогресс вскоре столкнулся с усилением проблем кроссбраузерности: нельзя один раз написать универсальный код, чтобы в разных браузерах все работало примерно одинаково. Даже для выборки самых распространенных браузеров это нереально. А уже найденных способов обхода ограничений движков не хватило.
Команды разработчиков продолжали совершенствовать доступные на рынке продукты и приложения, расширяя функционал автономно – предсказуемо, совместимость продолжала снижаться. И тогда программисты в командах создателей браузеров придумали префиксы для дополнительных CSS-свойств, чтобы разработчики сайтов могли писать код для конкретных браузеров.
Но и это не решило проблему: код прибавлялся, арсенал расширялся. разработчики браузеров внедрили возможность вставки префиксов в процессе сборки и компиляции CSS. Собственно, именно тогда многочисленные сторонние веб-мастера на практике обнаружили, что CSS, отдаваемый браузеру, совсем необязательно кодировать вручную.
Интерфейсные фреймворки как итоговое решение
С 2006 г., когда появилась библиотека jQuery, у веб-разработчиков стал популярен лозунг «Писать меньше, делать больше»(с). Появление возможности настройки HTML и JavaScript, упрощение доступа к элементам DOM, удобство API для AJAX – вот что сгладило проблемы совместимости браузеров. Неудивительно, что jQuery востребована по сей день, хотя и уступила первенство другим фреймворкам (React, Vue, Angular).
Самым актуальным сейчас считается React, улучшивший взаимодействие с DOM и упростивший дробление кода на части. Хотя сначала все складывалось не гладко: производительность солидных приложений хромала, браузер блокировался при перерендеринге частей интерфейса, были и другие ошибки. Кстати, поэтому React долго не использовался во всех проектах Яндекса по умолчанию. Но постепенно основные проблемы были устранены и теперь команда Яндекса открыто ставит на React.
Развитие технологий на удивление быстро меняет мир. Всего полтора десятка лет тому назад смартфоны только начинали конкурентную борьбу, а сегодня безраздельно господствуют на рынке. Самая востребованная связь – через мобильный Интернет, что угодно заказать с доставкой можно парой кликов на дисплее. Но это требует от современных программистов и тех, кто мечтает начать работать в IT, непрерывного совершенствования: приходится постоянно осваивать новинки, следить за достижениями прогресса. Как в известном произведении Льюиса Кэрролла – бежать изо всех сил, чтобы только не отстать, а для движения вперед мчаться еще быстрее.
