От «газетных страниц» до крипто-разработки: как менялась всемирная паутина и фронтенд с 1990-х до 2024

Рассказываем и показываем, как менялся облик Интернета и какие технологии за этим стоят.

Первые сайты выглядели весьма скучно. HTML поддерживал всего 16 цветов, разработчики писали страницы в простых текстовых редакторах, а первые браузеры нормально реализующие возможности HTML появились в 1993 г. (Mosaic) и 1994 г. (NatScape). Тогда же как явление появилась табличная верстка, позволяющая более-менее выравнивать контент.

Основа основ фронтенд разработки – JavaScript, фактически был рожден вместе с первым серверным скриптовым языком PHP в 1995 году, однако, это был далеко не тот JavaScript, каким мы его знаем сейчас.

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

Во-вторых, JavaScript того времени был сильно ограничен в возможностях – сайты были статичными, мертвыми, и больше напоминали книги:

В те времена веб-дизайн выглядел как набор ярких пятен на однотонном фоне.

Логотип, несколько ссылок и текст, оформленный в кислотных цветах, были верхом дизайнерской мысли, но все изменили две технологии, gif и…

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

Такое положение вещей не могло быть не замечено бизнесом. Многие предприниматели поняли, что трафик на веб-сайтах – это деньги. Аналитики по всему миру восторженно кричали: «Интернет — новая золотая жила!» Будет кощунством не упомянуть, что в то же время родился CSS, однако он не оставил сильно большого влияния из-за ограниченности его возможностей.

Компании начали выходить в сеть, а наличие собственного домена стало символом статуса и респектабельности. Веб-дизайн стал настоящим искусством, и интернет заполнился разнообразными сайтами с бешенной скоростью.

На фоне этой истерии происходил бум развития технологий:

В 2000 году стало ясно, что рынок интернет-компаний переоценен примерно на 80%, и не приносит ожидаемого дохода.

Компании начали уходить из веба, опасаясь в дальнейшем соприкасаться с этой темой. Студии разработки закрывались сотнями, а интернет опустел на 50% меньше чем за полгода.

Иметь свой сайт – уже казалось чем-то ненужным и слишком затратным. Однако, веб не умер.

Период с 2001 по 2006 не просто так называется «Золотой эрой» веб-дизайна. Выжили те компании, которые поняли, что нужно не просто привлечь пользователей, но и научиться разрабатывать прибыльные бизнес–модели.

Google научился зарабатывать на рекламе, Amazon – на продажах, а все остальные начали думать, как сделать интернет не просто модным, а прибыльным. С каждым годом бизнес в сети становился более взрослым и стабильным.

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

В это же время браузеры вели настоящую войну: Internet Explorer был на коне, но пришел Firefox с его расширениями и хорошей поддержкой стандартов, и моментально влюбил в себя разработчиков порядком уставших от неподатливости IЕ.

Еще одним приятным моментом стало рождение технологии AJAX, которая позволила нам загружать данные без перезагрузки страницы.

С началом эпохи Web 2.0 разработчики начали делать куда более интерактивные сайты. Социальные сети и медиа захватили мир.

В 2007 стартовала мобильная революция. Постепенно все начали понимать, что сайты должны быть адаптивными. Responsive design стал новой мантрой веб-разработчиков. В арсенале теперь уже фронтенд-разработчиков были Prototype и JQuery, что значительно упростило и ускорило разработку относительно чистого JS.

Однако разработчики все еще ломали кости в попытках заставить IE работать идеально и красиво, а для тру-кодеров на горизонте замаячил серьезный конкурент – CMS (content management system).

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

Если взглянуть на статистику, в 2010 WordPress занял более 60% рынка CMS и более 40% всех сайтов в интернете были построены на нем.

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

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

И так в 2012 на свет появился TypeScript – надмножество над языком JavaScript, которое не только добавило желаемую статическую типизацию, но и предложило множество других полезных функций. Следом за ним из языка разработки Dot.net к нам пришел RxJS (Reactive Extensions Library for JavaScript), который заставил разработчиков заново осмыслить асинхронное выполнение кода в браузере. RxJS быстро завоевал популярность и стал незаменимым инструментом в арсенале современного фронтенд-разработчика.

В 2013-2014 годах были разработаны сразу два реальных конкурента первой версии Angular, по многим показателям превосходившие ее.

Это React и Vue.js. В результате значительная часть программистов перешла на новые платформы, что вынудило Google выпустить новую версию продукта.

15 сентября 2016 года вышел релиз Angular 2. Фреймворк значительно отличался от первой версии и даже не поддерживал ее. Он стоял на семи столпах:

TypeScript теперь использовался в качестве основного языка, но для олдфагов предоставлялась версия с Dart и ECMAScript6.

Начался бум Single Page Aplication, приложений, которые запрашивают лишь один стартовый HTML с сервера, а далее всю работу выполняет JS в браузере, обращаясь к серверу лишь за новыми порциями данных и для отправки готовых форм.

Однако разработчики быстро поняли, что машины клиентов не масштабируются, и стали двигаться к балансу между обработкой данных на сервере и «на клиенте».

Немного смуты в жизнь фронтов также внесло появление технологии Progressive Web Apps (PWA).

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

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

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

Следом за развитием и обкаткой микросервисной архитектуры на бэкенде, стартовал бум микрофронтендов.

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

Правда бытует мнение, что крипто-стартапы на данный момент переоценены даже больше, чем Dot.com в 2000 году, и этот пузырь скоро тоже лопнет, но мы не беремся это прогнозировать. Так же как не можем прогнозировать – захватят ли мир микрофронтенды, станут ли сигналы (совсем новая и от того пока еще не отлаженная технология) заменой RxJS и еще много чего, что пытаются прогнозировать оракулы фронтенд.

Но одно предсказать можно точно: в мире фронтенд-разработки всегда будет куда расти, что изучать, о чем спорить, и чему удивляться.