Как фреймворки изменили программирование?

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

Фронтенд (frontend) – клиентская часть программно-аппаратного сервиса. Более простыми словами, frontend является пользовательским интерфейсом веб-приложения. Данная часть приложения не связана с логикой работы функционала. Основой этой стороны веб-приложения являются три основные компонента: HTML, CSS и Java Script.

Рисунок 1 – Визуализация ролей HTML, CSS и Java Script в разработке интерфейса

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

С какими проблемами сталкивались программисты до появления первых фреймворков? Первая проблема, которая приходит в голову – это отображение тех или иных элементов в разных браузерах. Это одна из сильнейших головных болей программистов. В интернете можно найти множество примеров на эту тему. 

Рисунок 2 – Пример отображения элементов в разных браузерах

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

Одной из попыток упростить разработку стало появление JQuery. Он появился еще в 2006 году и стал быстро очень популярен. jQuery — набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

Этот фреймворк упростил взаимодействие между JS и HTML, благодаря чему, стало проще обращаться к тому или иному элементу. В коде библиотеки можно найти различные методы адаптации элементов под разные браузеры. А также методы JQuery упрощали написание некоторых функций. К примеру, можно сравнить два скрипта выполняющих одну и ту же роль, но написанных нативным JS и с использованием JQuery. Вот так он выглядит на JS: 

var t;

function scrolltop() {

  var top =

    Math.max(document.body.scrollTop, document.documentElement.scrollTop);

  if (top > 0) {

    window.scrollTo(0, Math.floor(top / 1.5));

    t = setTimeout("scrolltop()", 30);

  }

  else {

    clearTimeout(t);

  }

  return false;

}

А вот так на JQuery:

$("html,body").animate({scrollTop:0},500);

Нельзя и забывать то, что фреймворк имеет собственное JQuery UI, что тоже можно отнести к преимуществу. 

Однако, позднее на смену JQuery пришло множество различных фреймворков. Одним из наиболее популярных является React. Возможности такого фреймворка помогают программистам забыть о сложностях взаимодействия HTML и JS благодаря JSX. JSX (JavaScript XML) – своя структура построения документа, в которой используется практически тот же HTML, но под управлением JS. Для подробного описания стоит рассмотреть простой компонент реакта.

Рисунок 3 – Пример React-компонента

В скобках оператора return как раз-таки используется JSX-компонент. А над ним может быть прописана логика данного компонента. Фреймворк имеет различные методы, чтобы работать с отображаемыми элементами. Один такой пользовательский компонент может содержать в себе другие пользовательские компоненты, они могут обмениваться данными и динамически влиять на друг друга.

При этом в реакте отсутствуют какие-либо селекторы и необходимость писать код поиска элемента, чтобы работать с ним. Можно прямо в компоненте в фигурных скобках вставить переменную или даже функцию, обработка которой происходит над оператором return.

Фреймворки практически избавили разработчиков от необходимости переживать с браузерной совместимостью, необходимости верстать целые HTML-страницы, назначать элементам идентификаторы, чтобы потом в скрипте обратиться к ним. Теперь стало проще работать с элементами DOM, получать и передавать им данные.