Что такое Фронтенд?

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

Определение

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

Что представляет собой фронтенд?

Фронтенд — это графический пользовательский интерфейс для управления веб-сайтом или приложением. Интерфейс основан на потребностях и ожиданиях людей. Поэтому основное внимание уделяется привлекательному представлению информации и понятному структурированию взаимодействия. Дизайн внешнего интерфейса направлен на обеспечение хорошего пользовательского опыта (UX).

Интерфейс — это программный уровень, который работает на клиенте. Интерфейсная часть скрывает сложность, поскольку фактическая обработка информации происходит на внутренней стороне. За кулисами интерфейс взаимодействует с сервером для согласования данных и отражения изменений. Как правило, используются программные интерфейсы, известные как API.

Следуя принципу разработки «Разделение задач», фронтенд и бэкенд реализованы как независимые уровни. Оба уровня всегда необходимы для полнофункционального программного обеспечения. Фронтенд без бэкенда — это как фасад, за которым ничего нет.

Кто работает на фронтенде?

По сути, над фронтендом работают две совершенно разные группы пользователей:

1. Пользователи, работающие с фронтендом.
2. Фронтенд-разработчики, которые создают и поддерживают фронтенды.

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

Как пользователи работают с интерфейсом?

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

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

Как разработчики работают с фронтендом?

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

Чем именно вы занимаетесь фронтенд-разработкой? Давайте посмотрим на пример из экосистемы WordPress. Разработчики внешнего интерфейса создают виджеты WordPress и темы WordPress, которые придают веб-сайту WordPress привлекательный вид.

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

Разработчики внешнего интерфейса создают целевые страницы и используют элементы призыва к действию (CTA), чтобы направлять посетителей по сайту. Адаптивный дизайн особенно важен.

Каковы основные интерфейсные фреймворки?

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

Веб-интерфейсы включают код на веб-языках HTML, CSS и JavaScript. Они соответствуют трем фундаментальным задачам веб-программирования :

concern	Language
structure	HTML
presentation	CSS
Behave	JavaScript

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

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

Новые фреймворки, такие как React и Vue, в большей степени полагаются на реактивность; Изменения данных немедленно отражаются во внешнем интерфейсе. Более того, эти структуры закрепляют компоненты как центральную концепцию. Это автономные, многократно используемые блоки реактивных элементов пользовательского интерфейса.

В зависимости от используемого подхода существуют интерфейсные фреймворки на чистом CSS или JavaScript. Также проводится различие между веб- и кросс-платформенными интерфейсными средами.

Разрабатывайте интерфейсы на основе компонентов с помощью Reactive Frameworks.

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

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

Есть интересная новая разработка с фреймворком Svelte. Потому что Svelte идет по принципиально иному пути, чем React и компания. Вместо того, чтобы изобретать новые структуры в JavaScript, Svelte занимается компилятором. Это позволяет вам писать простой код Svelte, который компилятор преобразует в более сложный код JavaScript.

Большинство реактивных интерфейсных фреймворков также упрощают работу с глобальными данными. «Хранилище состояний» используется для инкапсуляции данных состояния.

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

Интерфейсные фреймворки смешанного назначения: старая гвардия

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

Общим для этих фреймворков является то, что они включают в себя как код JavaScript, так и код CSS. Компактный фреймворк пользовательского интерфейса ZURB Foundation был ориентирован больше на адаптивность для профессиональных приложений. В «jQuery UI» также использовался минималистский подход в сочетании с популярной платформой JavaScript.

Преимущество этих интерфейсных фреймворков в том, что они чрезвычайно просты в использовании. Обычно достаточно включить файл CSS и/или JavaScript. Ситуация другая, если вы хотите внести коррективы и оптимизации, тогда все быстро усложняется. Опыт показал, что объединение частей этих рамок также весьма проблематично.

Специализированные интерфейсные платформы: специалисты по бережливому производству

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

То, что Tailwind предлагает для отображения, — это тонкая интерфейсная платформа Alpine JS с точки зрения поведения и реактивности. Вместо CSS используются готовые фрагменты JavaScript. Alpine позиционирует себя как «jQuery для современного Интернета» и, таким образом, завершает циклический аргумент, чтобы стать классической средой JavaScript.

Ключевым преимуществом специализированных интерфейсных фреймворков является их простота. Как правило, можно ограничить объем используемого кода тем, что действительно требуется. Для этого может потребоваться отдельный процесс сборки. Более того, части этих структур можно легко комбинировать друг с другом. Популярная комбинация — Tailwind CSS + Alpine JS.

Создайте несколько внешних интерфейсов на основе общей базы с помощью кроссплатформенных фреймворков

Все рассмотренные до сих пор интерфейсные платформы предназначены для отображения в веб-браузере. Кроме того, существуют так называемые кроссплатформенные интерфейсные фреймворки, генерирующие код для нативных приложений. Нативные приложения не требуют браузера, а запускаются непосредственно в операционной системе, например Windows, macOS, Android или iOS.

Хорошо известным кроссплатформенным интерфейсным фреймворком является Flutter, основанный на собственном языке программирования Google Dart. Пользовательский интерфейс, встроенный во Flutter, служит общей основой, на основе которой можно создать несколько собственных и веб-интерфейсов.

Похожий подход можно найти в чисто встроенном интерфейсном фреймворке GTK. Фронтенды для Linux, Windows и macOS могут создаваться на общей основе. В отличие от Flutter, GTK не основан на веб-технологиях. Имеются подключения к большому выбору языков программирования, с которых можно работать с GTK.