Front Back для маленьких.
Frontend-разработка и Backend-разработка отвечают за то, с чем мы взаимодействуем каждый день, на просторах интернета.
Frontend - интерфейс, который включает в себя все, что пользователи видят и с чем взаимодействуют непосредственно в браузере или приложении;
Backend - часть веб-сайта/приложения, которую пользователь не видит и фокусируется на серверной логике, интеграциях, взаимодействие с базами данных и гарантирует, что приложение будет функционировать.
Если копнуть глубже, то страница этого сайта была создана с использованием Frontend-разработки. Слова, которые вы читаете - HTML. Интервалы и цвета - CSS. Интерактивная графика является - JavaScript.
Итак, что такое разработка Frontend и Backend?
Первый веб-сайт, созданный Тимом Бернесом-Ли, состоял из простого текста и ссылок. Он был доступен по адресу info.cern.ch и размещал информацию о том, как пользоваться интернетом и создавать веб-страницы, а также ссылки на другие исследования, связанные с World Wide Web.
В дизайне первого сайта использовался простой белый фон и синие ссылки для выделения текста, по которым можно было производить клики. В качестве шрифтов применялись шрифты без засечек, такие как Arial или Helvetica, поскольку они считались более читабельными на экране компьютера, особенно при отображении небольшого текста.
Первые веб-сайты значительно отличались от современных внешним видом: не было красивых картинок, удобного дизайна, всплывающих окон, вкладок в одном окне. Самой красочной частью были гиперссылки, подчёркиваемые линией и выделенные синим цветом, остальное - просто текст.
Тогда Frontend еще не требовался, но язык и протокол, которые и послужили основой для более наполненных веб-сайтов, уже существовали.
В начале 1990-х годов таблицы HTML стали революционным шагом в организации контента на веб-сайтах, а графика добавила визуальной привлекательности, тем не менее, веб-сайты все еще были неуклюжими и не интуитивными по сегодняшним меркам.
С появлением JavaScript в 1995 году и Flash в 1996 году разработка интерфейсов начала процветать. К 1998 году были созданы каскадные таблицы стилей (CSS), и все инструменты, необходимые веб-разработчику для создания современных сайтов, стали доступны.
Со временем популярность разработки Flash пошла на убыль в пользу HTML, JavaScript привнес интерактивность в интернет, программисты разработали фреймворки для упрощения процессов.
Фреймворки JavaScript, такие как React, теперь используются для быстрой и эффективной разработки пользовательских интерфейсов, Redux - еще один фреймворк JavaScript, обычно используемый с React или Angular, который позволяет разработчикам создавать одностраничные, понятные для пользователя и легко тестируемые приложения, jQuery упрощает задачи, а AJAX добавляет XML (язык разметки) в JavaScript, чтобы сайты могли обновляться без дополнительных запросов. Фреймворков существует великое множество.
За последние 20 лет разработка веб-сайтов значительно изменилась. Например, Mozilla использует великолепный визуальный образ трехслойного торта, чтобы описать, как работают языки вместе. HTML находится внизу, CSS в середине, а JavaScript наверху.
HTML определяет структуру веб-сайта и основные элементы того, как должен выглядеть сайт, его можно использовать для того, чтобы сделать символы жирными или курсивными, или выделить абзацем, но что, если Вы хотите изменить цвет фона?
Вот тут-то и появляется CSS. CSS — это язык, который определяет, как должна выглядеть страница. Используя CSS, разработчики Frontend могут кодировать все стилистические изменения в одном месте, не повторяя эту команду каждый раз. Например, требуется всего несколько строк CSS, чтобы сделать все наши заголовки синими.
JavaScript - последний слой торта, который превращает статический веб-сайт в динамический. Если вы имели возможность поработать в интернете в середине 1990-х г - то скорее всего вы помните раздражение, которое нарастало с ожиданием загрузки страницы. Теперь разработчики Frontend могут манипулировать веб-элементами, не дожидаясь загрузки сайта (представьте, что вы ждете загрузки ВКонтакте каждый раз, когда обновляете свою ленту.) Теперь нам больше не нужно ждать, за это спасибо JavaScript.
HTML и JavaScript входят в число самых простых для понимания языков и находятся в верхней части любого рейтинга популярных языков программирования. JavaScript считается более гибким, а HTML в свою очередь считается самым креативным языком программирования.
Вернемся к Frontend-разработке
Разработчик интерфейсных веб-приложений, он же Frontend, создает визуальные эффекты - визуальное представление запроса пользователя в браузере.
Небольшой список типовых задач Frontend-разработчика:
· Создание страниц с помощью HTML
· Стилизация элементов с помощью CSS
· Оптимизация страниц для поисковой оптимизации (SEO)
· Добавление изображений и кнопок на страницы
· Разработка единого пользовательского интерфейса
· Наблюдение за тем, как пользователи взаимодействуют с пользовательским интерфейсом, и улучшение общего опыта
· Подключение API для отправки и получения информации
Все, что делает разработчик Frontend - это обеспечивает понятный пользовательский путь. Все аккуратные завитушки или плавная загрузка страниц — результат его работы. Но, хоть разработчик и заботится о внешнем виде сайта, его работа в первую очередь касается производительности. Веб-разработчик не создает графику или элементы дизайна, он воплощает в жизнь творение дизайнера с помощью различных макетов и фреймворков, а также создает интерфейс и различные динамические элементы для создания иммерсивного пути.
Также, примером работы фронтэнда может служить то, как выглядит сайт на десктопе или смартфоне. Сайты должны быть адаптивными, поскольку пользователь может зайти с разных устройств. Хороший веб-сайт адаптирует пользовательский путь для наилучшего соответствия дисплею устройства, и задача разработчика Frontend — реализовать этот дизайн.
Frontend должен обладать как техническими, так и творческими навыками в рамках своих ежедневных рабочих задач, очень не помешает воображение, чтобы понимать, как будет выглядеть веб-сайт, и при этом технические знания, чтобы превратить видение в реальность. Также разработчик корректирует отзывчивость сайта, поскольку мир становится все более мобильным.
Frontend-разработчик жизненно важен для разработки приложений. Фронт работает чтобы пользователю было комфортно и приятно пользоваться интернетом.
Кто такой Backend-разработчик?
В то время как Frontend создает пользовательский путь в браузере, Backend-разработчик создает логику, которая делает эти запросы реальностью. В некотором смысле Backend создает мозг веб-сайта.
Разработчики Backend должны быть технически подкованы и организованы, они также являются частью команды, как и Frontend-разработчики, обладают пониманием, какую логику создать, как она должна работать, какие запросы выполнять, к каким базам данных обращаться, как извлечь или наоборот добавить информацию в базу данных.
Бэк отвечает за поддержание системы, работает с базами данных, серверами, интерфейсом прикладного программирования (API), который создает структуру для взаимодействия компонентов и интеграции всех этих процессов.
Пользователь получает все, что создал Frontend-разработчик, наслаждаясь преимуществами быстрого поиска информации с использованием логики, созданной Backend-разработчиком.
Если пользователь нажимает кнопку, чтобы перейти на новую страницу, или если на веб-сайте есть функция пагинации, Backend-разработчик несет ответственность за то, чтобы пользователь попал на нужную страницу.
Небольшой список типовых задач Backend-разработчика:
· Обеспечение безопасности приложения
· Реализация бизнес-логики приложения
· Создание серверных приложений
· Организация работы баз данных
· Интеграция с внешними и внутренними сервисами
Backend-разработчик разрабатывает и поддерживает серверную логику.
Frontend нуждается в Backend, иначе это будут строки неактивного кода. У каждого веб-сайта есть сервер, база данных и другие приложения, которые взаимодействуют с Frontend через код, созданный Backend разработчиком.
Хороший пример разработки в действии – всем известный фиолетовый маркетплейс:
- Вы заходите в приложение и ищете, например, кроссовки.
- Разработчик Backend использует серверный язык для извлечения всей информации о кроссовках из базы данных.
- Информация обрабатывается в приложении и возвращается пользователю через Frontend.
- Вы получаете подборку из множества кроссовок, и если вы отфильтруете полученный результат по размеру или фирме производителя, то процесс повторится.
Backend-разработчики используют языки программирования, такие как Python, Java, GO, C++, C# и пр., а также инструменты управления данными, такие как SQL. Пользователь вводит поисковый запрос, который затем приводит к тысячам результатов менее чем за секунду.
Python, C++, C, Java входят в топ самых популярных языков программирования. Существуют и другие языки программирования, наряду с языками управления базами данных, такими как SQL.
Python - объектно-ориентированный язык программирования общего назначения. Python используется для кодирования серверной логики, и многие популярные веб-сайты построены на Python. Язык легко масштабируется с помощью фреймворков, таких как Django. Python становится все более популярным благодаря своим приложениям в машинном обучении и науке о данных.
С++ — один из самых популярных языков программирования. Он регулярно входит в ТОПы популярности programming language разных аналитических агентств. Он был разработан в 80-х годах прошлого века как расширение языка C. Этот язык отличается от С тем, что имеет больший набор возможностей, включая объектно-ориентированное программирование и шаблоны. Используется для разработки компьютерных игр и их движков, для разработки системного программного обеспечения, таких известных компаний, как Adobe, Microsoft и пр.
SQL - язык структурированных запросов, используется для управления данными, найденными в базе данных. MySQL — это система управления данными(СУБД), которая широко используется в разработке.
Языки и разработка Backend используются для выполнения запросов, сделанных с Front’а. Но не будем забывать и про межсервисное взаимодействие, где Frontend не участвует
Frontend и Backend в чем же отличие. Они используют разные языки программирования и имеют разные обязанности. Но разработчики Frontend и Backend работают над одной и той же целью. В конечном итоге они работают вместе, чтобы решить потребности пользователя.
Разработчик Frontend использует свои навыки и инструменты для создания интуитивно понятного и отзывчивого веб-сайта. Разработчик Backend использует имеющиеся у него ресурсы для поддержки этих потребностей и создает логику для этого.
Frontend и Backend — это две стороны одной медали. Они работают вместе, чтобы выполнить запрос пользователя и удовлетворить более крупные потребности компании.