Перевод статьи Михаэля Ванёйке «History of front-end frameworks».
Вы когда-нибудь пытались создать веб-интерфейс фронтенда с использованием только HTML5, CSS3 и JavaScript? Ну, в наше время это не так уж тяжело. Если требования не слишком сложные, маленький проект можно завершить относительно легко. Что касается средних и крупных проектов, то чтобы справиться со сложностями пользовательских требований, вам понадобится как минимум один фреймворк.
Сегодня начинающий разработчик может создавать более сложные фронтенд-интерфейсы гораздо быстрее, чем это было возможно 20 лет назад. В этой статье мы рассмотрим, как возникли современные фреймворки, обеспечивающие эту скорость работы.
История основных технологий
Давайте начнем с краткого обзора технологий, на которых держится web. История HTML, CSS и JavaScript очень богата, ее хватит на целую книгу. Я освещу лишь самые значимые события последних 30 лет.
Первая спецификация HTML была опубликована в конце 1991 года Тимом Бернерсом-Ли. В то время поддерживался только текст, а тегов было всего 18. Позже, в октябре 1994 года, Хокон Виум Ли предложил концепцию CSS.
Примерно два года спустя был опубликован HTML 4.0 – первая спецификация, поддерживающая CSS. Среди браузеров первым CSS стал поддерживать Internet Explorer 3. Это было еще до того, как World Wide Web Consortium начал рекомендовать CSS первого уровня.
В 1995 году Брендан Эйх всего за 10 дней создал новый браузерный скриптовый язык под названием Mocha. Затем этот язык был переименован в LiveScript, а несколько месяцев спустя – в JavaScript. Под этим названием он известен и сейчас. За разработку спецификаций JavaScript в настоящее время отвечает Ecma International. А спецификации HTML и CSS относятся к World Wide Web Consortium, также известному как W3C.
Сложности с CSS
Прежде чем мы погрузимся в фреймворки, хотелось бы остановиться на CSS.
Раньше большинство браузеров не соответствовали стандартизованным спецификациям CSS. Очень напрягали ситуации, когда создаешь сайт, который отлично смотрится в одном браузере, а он весь «ползет» в другом.
Поддержка нескольких браузеров была настоящим кошмаром. В то время самым популярным из них был Internet Explorer, но в нем были плохо реализованы некоторые функции CSS, такие как box model. Для решения разнообразных проблем в отдельных браузерах были созданы различные CSS-хаки.
Группа, известная как Web Standards Project, создала серию CSS-тестов под названием ACID-тесты. При корректной реализации CSS в браузере должна была появляться такая картинка:
Однако, в Internet Explorer 7 она отображалась вот так:
А насколько плохо она выглядела в предыдущих версиях, лучше не заглядывать. Эта проблема так или иначе затрагивала все основные браузеры. Благодаря усилиям Web Standards Project и онлайн-сообществ, львиная доля проблем с CSS в большинстве браузеров уже решена.
CSS уровня 2 был рекомендован W3C еще с 1998 года. А следующую версию, 2.1, начали рекомендовать только с апреля 2011 года. Такая задержка была вызвана тем, что несколько функций CSS не были завершены.
В CSS3 вся спецификация уровня 2.1 была разбита на модули. Каждый модуль теперь разрабатывается отдельно. Разделение спецификации чрезвычайно помогло разработчикам браузеров успевать за последними рекомендациями на модульном уровне.
Сегодня уже есть черновики некоторых модулей 4-го уровня. Остальные находятся на уровне 3. Если добавляются новые функции, они стартуют с первого уровня. Чтобы увидеть текущий статус каждого модуля, можно обратиться к рабочей странице W3C CSS. Также можно посетить css3test.com, чтобы проверить, насколько хорошо ваш браузер поддерживает различные CSS-модули.
Фреймворки CSS
Примерно в середине 2000-х начали появляться CSS-библиотеки и фреймворки. Они представляли grid-систему, которая должна была помочь дизайнерам разместить их контент. Эти фреймворки поддерживали большинство бразуеров (на одну причину головной боли меньше для дизайнеров). К самым ранним фреймворкам можно отнести Blueprint, 960, YUI Grids и YAML.
Когда производители мобильных телефонов начали поставлять свои девайсы с установленными веб-браузерами, не потребовалось много усилий, чтобы перепроектировать сайты для мобильных устройств. Мобильные браузеры умели самостоятельно переформатировать веб-страницы, чтобы они подходили для маленьких экранов.
С течением времени «железо» телефонов существенно улучшилось. В 2006 году Opera Mobile стал первым мобильным браузером, который прошел тест ACID2. А первым десктопным браузером, которому это удалось, был Safari.
В 2007 году Стив Джобс анонсировал первый iPhone. У него на тот момент был самый широкий экран. Вскоре появились и Android-устройства с таким же или даже большим размером экранов. Популярность смартфонов и мобильных браузеров привела к огромному подъему в использовании интернета. Вскоре компании начали понимать, насколько важно иметь дизайн сайта, приспособленный для экранов мобильных устройств.
В 2011 году Twitter выпустил CSS-фреймворк Bootstrap в качестве open source проекта. 2012 год ознаменовался выходом Bootstrap 2 с его 12-колоночной сеткой и прочим новым функционалом. Bootstrap 3, имевший философию дизайна mobile-first, вышел в 2013 году.
Четвертая версия Bootstrap, вышедшая в августе 2017 года, добавила поддержку Sass и Flexbox. В настоящее время Bootstrap это самый популярный CSS-фреймворк. Он пользуется особым спросом у разработчиков, которым нужно побыстрее создать прекрасно выглядящий прототип веб-интерфейса.
В октябре 2011 года ZURB открыл исходный код своего CSS-фреймворка и выпустил его под названием Foundation 2.0. Этот фреймворк предлагал адаптивную сетку и поддержку Sass. Также в нем был широкий перечень готовых UI-элементов. Foundation пользуется особым спросом у дизайнеров, которым нужен полный контроль над кастомизацией сайта. Этот фреймворк поставляется с шаблонами для электронных писем.
Есть много других прекрасных CSS-фреймворков. О каждом из них вы можете почитать, пройдя по ссылкам:
Фреймворки JavaScript
Подобно CSS, JavaScript пережил тяжелый период, когда совместимость в браузерах была проблемой. Нужны были дополнительные усилия, чтобы обеспечить корректную работу вашего JavaScript-кода во всех поддерживаемых вами браузерах. Также вам нужно было знать о некоторых причудах этого языка, особенно, если у вас в бэкграунде была работа со строго типизированными языками.
jQuery
Одной из первых библиотек, которые улучшили работу с JavaScript, была jQuery. Она вышла в августе 2006 года. С ее помощью разработчики могли писать JavaScript-код и не беспокоиться о браузерной совместимости. Библиотека содержала тысячи полезных функций, благодаря которым можно было гораздо легче сделать любой сайт интерактивным.
До этого была технология AJAX, появившаяся в 1996 году. Тогда она называлась по-другому и изначально была реализована Internet Explorer и Mozilla. Однако эта технология не особенно широко применялась. В 2004 году Google реализовал стандартизированную версию технологии AJAX в своих продуктах Gmail и Google Maps.
Вскоре после этого началась реализация этой технологии и в веб-приложениях Google. Фреймворки и библиотеки, подобные jQuery, начали добавлять поддержку AJAX.
Менеджмент пакетов
По мере роста числа фронтенд-фреймворков и библиотек возникла потребность в управлении зависимостями. В 2012 году Twitter запустил Bower, менеджер пакетов для фронтенд-зависимостей.
Bower использовался для обнаружения и скачивания зависимых пакетов, расположенных по всему интернету.
В 2014 году был создан центральный репозиторий для фронтенд-пакетов под названием npm registry. В настоящее время он содержит больше 350 тысяч пакетов.
Несмотря на то что jQuery была самой популярной JavaScript-библиотекой для веб-интерфейсов, ей не хватало возможностей последовательной обработки данных по разделяемым представлениям. Чтобы справиться с этой проблемой, было создано несколько фреймворков. Backbone, Knockout и Ember являются одними из первых подобных JavaScript-фреймворков. Они быстро стали популярными.
AngularJS и Angular 2
AngularJS вышел на рынок в октябре 2010 года. Он быстро стал самым популярным MVC-фреймворком JavaScript. Он предлагал двустороннее связывание данных, dependency injection, роутинг-пакет и многое другое.
AngularJS помог разработчикам решить множество проблем, с которыми они сталкивались при создании веб-проектов. Но сложность AngularJS все возрастала, и разработчики стали испытывать недовольство этим фреймворком.
Команда AngularJS решила полностью перепроектировать фреймворк и назвать его Angular 2.
К несчастью, эта новая версия была совершенно несовместима с AngularJS. Не предоставлялось никакого пути миграции. Это разозлило множество разработчиков, использовавших AngularJS, и побудило их полностью отказаться от этого фреймворка. С того времени Angular так и не вернул себе былые позиции.
React
В мае 2013 года на конференции по JavaScript в США была представлена новая библиотека, поменявшая правила игры на рынке, – React. Создал ее Джордан Волк (Jordan Walke), инженер из Facebook. Аудиторию восхитили многие инновационные функции React, такие как виртуальный DOM, односторонняя передача данных и Flux-шаблоны.
Члены команды React рассказали, как эта архитектура помогла им решить некоторые из самых больших проблем, с которыми они столкнулись, исправляя баги Facebook. Вскоре после этой конференции React приобрел большую популярность.
В 2015 году Дэн Абрамов и Эндрю Кларк создали библиотеку Redux. Это была революционная архитектура передачи данных, вдохновением для которой послужила архитектура Flux от Facebook.
Как вы , наверное, знаете, для React была создана богатая экосистема библиотек и инструментов. Даже уже существовавшие на тот момент CSS-фреймворки, такие как Bootstrap, создали версию для React. На сегодняшний день React это самая популярная JavaScript-технология. Если вы используете React, вам будет сложно не найти библиотеку, которая удовлетворяла бы требования вашего проекта.
Vue.js
Одновременно с падением AngularJS произошел подъем нового фреймворка, имеющего общие черты и с Angular, и с React. Эван Ю выпустил прогрессивный JavaScript-фреймворк Vue.js в феврале 2014 года.
До этого Эван Ю работал в Google и Meteor. В отличие от React с его гибкостью и Angular с его догматизмом, Vue пытается придерживаться золотой середины. Vue.js предоставляет легковесный фреймворк с экосистемой вокруг него, официально поддерживаемый командой Vue.
Краткий обзор по годам
Процесс стандартизации это своеобразный клей, соединяющий все слои. Без него фронтенд-технологии были бы более фрагментарными и непригодными для применения. Сегодня этот стек технологий сжимается. Чтобы увидеть картину крупным планом, давайте быстро повторим:
1990 – 1995: изобретены HTML, CSS и JavaScript.
1996 – 1999: начинаются попытки стандартизации. Браузерная совместимость ужасна. Войны браузеров в самом разгаре.
2000 – 2004: начинают появляться CSS-фреймворки. Рождается jQuery. Появляется менеджмент фронтенд-пакетов.
2005 – 2009: W3C осуществил согласование спецификаций. Браузер Chrome выбивается в лидеры. Появляется адаптивный дизайн и связанные с ним фреймворки.
2010 – 2015: появляются JavaScript-фреймворки, например Backbone, Ember, AngularJS, React, Angular, Vue. Анонсирован HTML5.
2010 – 2018: появляется GraphQL. Нативные HTML, CSS и JavaScript становятся более мощными. Возникают новые платформы, построенные на основе существующих фреймворков: StoryBook, Motion UI, Gatsby, Next.js.
Будущее
Я хотел бы завершить статью размышлениями о том, что ждет фронтенд-фреймворки. Что касается разработчиков будущего, то у них точно все будет хорошо, ведь им не придется работать в том хаосе, который существовал в последние десятилетия.
Большинство фронтенд-фреймворков сейчас стабильны. Их оптимизируют, чтобы улучшить производительность и сделать их более дружественными к разработчикам.
Генераторы статических сайтов становятся новым трендом. Статические сайты более SEO-дружественные и предлагают гораздо лучшую производительность, чем сайты с рендерингом на стороне сервера. Генерированные сайты проще кэшировать и распространять по CDN-сети. Сейчас у нас есть Next.js и Gatsby с использованием React. Среди других популярных генераторов сайтов можно назвать Nuxt, Jekyll и Hugo.
Текущие версии HTML, CSS и Javascript куда более развитые, чем десяток лет назад. Большинство браузеров теперь стремится к наибольшей совместимости, поэтому самые последние изменения разворачиваются быстрее. Высока вероятность того, что большая часть сложных задач, которые сейчас выполняются современными библиотеками, вскоре будет реализована нативно.
В результате будут разрабатываться новые легковесные фреймворки с высокой производительностью. Фреймворк Sapper, использующий Svelte, уже доступен широкой общественности. Angular Ivy и React Prepack все еще в разработке.
Платформа Node.js вскоре может быть заменена новой, под названием Deno. Над ней работает создатель Node.js – Райан Дал. На конференции JS он обратился к неустранимым проблемам с Node.js. Его новый проект призван решить эти проблемы.
Я очень надеюсь, что Deno вскоре будет готов и все сообщество быстро перейдет на него. Это сделает разработку гораздо более простой, дешевой и быстрой. Для этого, вероятно, понадобится переписать некоторые существующие фреймворки и библиотеки, для которых может не оказаться обратной совместимости. Несмотря на этот недостаток, я думаю, что общая экономия ресурсов, используемых во время разработки, будет огромной.
Наконец, я считаю, что Drag & Drop конструкторы, такие как Bootstrap Studio, могут вскоре стать мейнстримом, если станут open-source проектами. Это может произойти в следующую пятилетку. Они генерируют гораздо более чистый код, чем тот мусор, который генерировали WYSIWYG-редакторы десять лет назад. Скоро многие люди смогут начать создавать сайты, даже не имея значительного технического бэкграунда.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]