Фронтэнд что такое: Что такое фронтенд и бэкенд и чем они различаются

Содержание

что такое фронтенд-разработка, на чем программируется

#Разработка

Frontend (фронтенд) представляет собой публичную часть сайта (веб-приложения), которая обеспечивает прямое взаимодействие пользователя с веб-ресурсом. В понятие frontend входит:

вывод на сайте интерфейса пользователя;
выполнение функциональных задач;
обработка определенных запросов посетителей и т. д.

Фронтенд — это буквально все, что видит посетитель сайта, открывая любую его страницу.

Что такое веб-приложение

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

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

Web-приложение — видимая для посетителя часть сайта, на которой можно выполнять определенные действия при каждом подключении к сети и открытии веб-ресурса через интернет-браузер.

Что такое фронтенд-разработка

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

Frontend-разработчик трудится над тем, чтобы на сайте работали все кнопки, иконки, формы связи и подписки, правильно отображались тексты и графические элементы, чтобы все они «стояли на своих местах» и выполняли те задачи, которые перед ними были поставлены (например, чтобы при клиенте по кнопке «заказать» открывалась форма для оформления покупки, а при нажатии на кнопку «play» включалось видео и т. д.).

Чтобы конечный продукт frontend-разработчика был качественный, востребованный среди пользователей и отвечал поставленным перед ним требованиям, необходимо обеспечить грамотное взаимодействие этого разработчика со всеми остальными специалистами, которые работают над задачей: веб-дизайнерами, маркетологами, SMM-щиками, аналитиками и т. д.

С какими языками работает фронтенд-разработчик

Фронтенд-разработчик работает со следующими компонентами:

Фреймворки (React.js, AngularJS, Vue.js, Ember.js и т. д.). Платформы, дающие фронтенд-разработчику основу для создания веб-приложений. В них присутствуют уже определенные и реализованные функции с классами. Также в фреймворках можно добавлять свой код к уже предложенному.
Cascading Style Sheets (CSS). Язык стилизации внешнего вида веб-страницы. При помощи CSS клиент (браузер) «понимает», каким именно образом нужно отображать графические элементы на сайте. При помощи CSS задаются цвета, шрифты, расположения блоков и т. д. CSS-код помогает адаптировать веб-приложение, чтобы оно одинаково отображалось на разных устройствах.
HyperText Markup Language (HTML). Язык разметки всех элементов страницы, позволяющий также прописать особенности их взаимодействия друг с другом.
JavaScript. Язык, способный «оживить» веб-страницы. Цели создания таких скриптов — отклики на действия посетителей, обработка перемещения курсора мыши, нажатий на клавиши, отправленных запросов, загрузки данных без перезагрузки самой страницы и т. д.
Сопутствующие системы. Понимание работы инструментов для контроля версий (GitHub, Git, CVS и т. д.), минимальное владение графическими редакторами по типу Photoshop, Illustrator, знание английского языка.

Что такое backend и frontend?

В этой статье поговорим, что такое backend- и frontend-разработка, чем они различаются, какие технологии могут в себя включать.

Что такое frontend?

Фронтендом (англ. front-end) называют клиентскую сторону пользовательского интерфейса по отношению к программно-аппаратной части сервиса.

Говоря простым языком, frontend — это разработка функциональности и пользовательского интерфейса, работающих на клиентской стороне приложения или веб-сайта. Сюда относят всё, что пользователь видит, открывая веб-страницу. Для создания удобного и востребованного продукта фронтенд-разработчики сотрудничают с программистами, дизайнерами, UX-аналитиками.

Откройте страницу любого веб-сайта и вы увидите перед собой его интерфейс. А потом щёлкните правой кнопкой мыши и нажмите «Посмотреть код страницы». Этот код и будет примером фронтенда. Он описывает всё, что вы видите, начиная от вёрстки и всей палитры цветов, заканчивая шрифтами, графическими элементами и т. п.

Вот, взгляните:

К frontend-разработке относят: • HTML — язык разметки документов, посредством которого формируют структуру веб-страницы: заголовки, списки, абзацы и т. п.; • CSS — язык для стилизации внешнего вида документа, его описания. Благодаря CSS-коду браузер понимает, как отображать элементы. С помощью CSS задаются цвета и параметры шрифтов, определяется расположение блоков веб-сайта и т. п. Также он даёт возможность выводить один и тот же документ в нескольких стилях, например, для печати и т. д.; • JavaScript — язык, в буквальном смысле оживляющий веб-страницы. Он обеспечивает реагирование интерфейса на действия пользователя, обрабатывает клики мышкой, нажатия клавиш, перемещения курсора.

Также посылает запросы на сервер, загружает данные, позволяет вводить сообщения и много чего ещё.

Что такое backend?

Бэкенд (англ. back-end) — это программно-аппаратная часть сервиса. Это набор средств, с помощью которых происходит реализация логики веб-сайта. Это то, что скрыто от наших глаз, т. е. происходит вне компьютера и браузера.

Как только вы введёте запрос на странице поисковика и нажмёте клавишу «Ввод», frontend закончится и начнётся backend. Ваш запрос отправится на сервер Яндекса или Google, т. е. по месту расположения алгоритмов поиска. Именно там и происходит вся «магия». Но вот, на мониторе появляются данные, которые вы запрашивали, — это происходит возвращение во frontend.

Также можно сказать, что backend — это процесс объединения пользователя с сервером.

Что касается backend-разработчика, то он использует любые инструменты, которые доступны на его сервере. На практике программисты применяют любой из универсальных языков: PHP, Ruby, Python, Java. Кроме того, при backend-разработке задействуются СУБД (MySQL, PostgreSQL, SQLite, MongoDB и пр.).

В зависимости от особенностей продукта меняются и обязанности backend-разработчика.

И что в итоге?

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

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

Ну и, разумеется, последняя картинка, которая позволит вам окончательно понять разницу между frontend и backend.

И улыбнуться при этом))

Кстати, если хотите узнать о том, как происходит взаимодействие между фронтендом и бэкендом, вам сюда.

Что такое Front-End Developer

❮ Предыдущая Далее ❯

Front-End Developer

Front-End Developer — это тот, кто создает веб-сайты и веб-приложения.

Разница между Front-End и Back-End заключается в том, что Front-End относится к тому, как выглядит веб-страница, а back-end — к тому, как она работает.

Вы можете представить Front-End как на стороне клиента , а Back-End как на стороне сервера .

Основными языками для разработки интерфейсов являются HTML, CSS и JavaScript.

Основные обязанности

Основной обязанностью Front-End разработчика является Пользовательский интерфейс .

Проще говоря, создавать то, что видит пользователь.

Совет: Если вам интересно, как стать фронтенд-разработчиком, вы можете прочитать нашу Как стать фронтенд-разработчиком.

Клиентское ПО (Front-End)

Основные языки Front-End разработки:

HTML
КСС
JavaScript

Популярные фреймворки и библиотеки JavaScript и CSS:

Bootstrap
W3.CSS
HTML ДОМ
JSON

XML
jQuery
Угловой
Реагировать

Знание того, как обращаться с API:

REST
GraphQL

Форматы данных:

JSON
XML

Инструменты:

Гит

W3Schools Spaces

W3Spaces

Начните создавать с помощью HTML, CSS и JavaScript.

Начните бесплатно

❮ Назад Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.

CSS Tutorial
Bootstrap Tutorial

PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Что такое внешний интерфейс (на веб-сайте)

Что такое внешний интерфейс (на веб-сайте)?

💬

Определение внешнего интерфейса (на веб-сайте)

Внешний интерфейс веб-сайта — это все, что пользователь либо видит, либо с чем взаимодействует при посещении веб-сайта. Он отвечает за общий внешний вид онлайн-опыта.

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

Проще говоря, интерфейс представляет собой комбинацию двух разных элементов: графического дизайна (внешний вид) и пользовательского интерфейса (ощущение) . Каждый из них создается независимо, при этом большая часть технической работы выполняется в пользовательском интерфейсе с использованием веб-языков, таких как HTML, CSS и JavaScript.

Электронная книга

Дорожная карта от А до Я

Прочитать

Как разрабатывается интерфейс?

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

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

Пользовательский интерфейс обычно проходит несколько этапов разработки, включая создание макетов (приблизительные схемы пользовательского потока), прототипов (рабочие примеры сайта) и, наконец, пользовательское тестирование.

Что такое серверная часть?

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

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

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

Разработчики серверной части занимаются всем, что не связано с предоставлением пользовательского интерфейса. Это может включать в себя написание API, создание библиотек и утилит. Они упрощают взаимодействие уровня представления и бизнес-уровня. По сравнению с интерфейсными веб-дизайнерами, они играют ключевую роль в веб-разработке и активно участвуют в совместной работе.

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

Фронтенд и бэкенд: чем они отличаются?

Несмотря на то, что они очень разные, интерфейс и серверная часть объединены для создания функционального веб-сайта.

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