Фронтэнд и бэкэнд что это простыми словами

Чем frontend отличается от backend’а? Объясняем на мемах

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Большинство мемов про frontend и backend дают общее представление о специфике этих сфер: первые как правило изображаются красиво и гладко, вторые — запутанно и брутально. Но так ли все просто на самом деле? Чтобы объяснить разницу, мы разобрали факты о двух профессиях на мемах.

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

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Frontend — это клиентская часть продукта (интерфейс, с которым взаимодействует пользователь). В случае с сайтом, её формирует и выводит на экран браузер, который работает с HTML, CSS и JavaScript.

Backend — это внутренняя часть продукта, которая находится на сервере и скрыта от пользователей. Для её разработки могут использоваться самые разные языки, например, Python, PHP, Go, JavaScript, Java, С#.

Чем отличается frontend от backend’a?

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Чтобы понять, чем отличаются backend- и frontend-разработка, разберемся, за что они отвечают. Допустим, пользователь нажимает кнопку «Подробнее» на сайте музыкального фестиваля. Сразу после этого загружается новая страница, на которой в нужном порядке и с заданным дизайном отобразилась информация о программе мероприятия. Верстку и взаимодействие с backend настроил frontend-разработчик.

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

Какие языки используют frontend и backend?

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Фронтенды пользуются языком разметки HTML, который определяет расположение элементов на странице. CSS отвечает за внешний вид контента — шрифт, цвет и отступы. JavaScript — за динамические элементы: анимацию и взаимодействие с пользователем.

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

Go используют для разработки микросервисов и высоконагруженных проектов, где с продуктом взаимодействует одновременно большое количество пользователей. Для backend-разработки подходят также Java, C# и Python.

Освойте с нуля востребованную профессию и выучите Go — один из самых высокооплачиваемых языков программирования. После курса сможете претендовать на junior-позицию в backend-разработке. Скидка 5% по промокоду BLOG.

Как взаимодействуют backend и frontend?

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

500 Internal Server Error — распространенная ошибка, которая появляется из-за дисконнекта frontend и backend. Она означает, что сервер не может обработать запрос пользователя, а браузер не может сообщить, что именно пошло не так.

Причиной может быть ошибка в коде или скрипте сайта или элементарная нехватка оперативной памяти. Чтобы исправлять такие ситуации или совсем не допускать их, важно выстроить взаимодействие frontend- и backend-специалистов. Этим часто занимаются DevOps-инженеры (читайте наш гид об этой профессии).

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Когда frontend понимает, как работает серверная часть сайта и какие ошибки могут возникнуть, а backend имеет представление о работе интерфейса — это значительно упрощает работу в команде. Но это не значит, что они должны разбираться в деталях и выполнять обязанности друг друга (особенно если им за это не доплачивают).

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Frontend- и backend-разработчиков одинаково бесит, когда работодатели не различают их функционал. Эта проблема возникает из-за стереотипа «тыжпрограммист», когда backend-разработчика просят поправить кнопку на сайте, а frontend — разобраться с ошибкой на сервере. Избавиться от этой проблемы помогает грамотный проджект-менеджер, который точно знает зону ответственности каждого специалиста в команде и обращается с задачами к нужным людям.

Можно ли быть одновременно frontend и backend-разработчиком?

Да, это называется fullstack-разработкой (full stack = полный стек). Fullstack-разработчики бывают разные: некоторые совмещают frontend и backend и дополнительно занимаются мобильной разработкой. Другие могут совмещать разработку, например, с UI/UX-дизайном.

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

Fullstack-разработчик на Python

Вы начнете с программирования на Python и JavaScript, изучите фреймворки Django и React, познакомитесь с DevOps. Через год обучения сможете занять junior-позицию и параллельно продолжать усиливать компетенции. Скидка 5% по промокоду BLOG.

Источник

Что выбрать — frontend или backend

Веб-пространство – наиболее популярная часть IT-мира, поэтому нет ничего удивительного в том, что стать его частью хочет огромное количество людей. Если быть блогером или каким другим «гуманитарием» вам не по душе, а оставить свой след в вебе очень хочется — придётся разобраться в различиях фронтенда и бэкенда. Наш краткий обзор вам поможет.

Начнём с азов, то есть определений.

Чтобы вам было проще понять, проведём простую аналогию. Веб-страница – это симпатичная девушка (или парень, кому что ближе). Представьте ваше знакомство или свидание.

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

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

Что предстоит учить

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

Обязательный минимум фронтенд-разработчика

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

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

JavaScript — в отличие от предыдущих представителей, это полноценный язык программирования, формально относящийся к фронт-енду. Фактически возможности JS куда шире организации «внешности», на нём можно создавать многие «серверные» фичи. Лишь бы у разработчика была фантазия, а в браузере стоял интерпретатор.

На выбор для будущего бэкенд-разработчика

PHP — наиболее распространённый в России и в мире в целом язык серверной части. Отправить письмо, обработать запросы, да и вообще организовать любую активность в вебе — это к PHP в большинстве случаев.

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

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

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

Go — язык, в своё время специально разработанный корпорацией Google для высоконагруженных сервисов. Так как такую характеристику имеет большинство сервисов Google, и справляются они со своими задачами на отлично язык быстро ушел в народ.

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

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

Фреймворки front-end

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

React.js — данный фреймворк, как и многие другие фреймворки frontend, ориентирован на применение JavaScript. Чтобы в первом приближении оценить его, скажем одну вещь — он разрабатывается и активно применяется компанией Facebook Inc. Их социальная сеть и сервис Instagram — лучшая реклама React.js.

Angular — продукт другой корпорации, Google. Получил большую популярность благодаря удобству и инструментам по созданию material design – тренду, не теряющему популярность уже более 5 лет.

Vue.js — некое промежуточное звено между Angular и React как по популярности, так и по функциональности. Крупного покровителя не имеет, но обеспечивает такой уровень удобства, что на задачах начальной сложности вы будете считать его своей волшебной палочкой.

jQuery — один из старейших фреймворков для JavaScript, наиболее распространён в современном вебе. 74% из 10 миллионов самых популярных сайтов было создано с использованием jQuery. Простота библиотеки позволяет легко внедрить простые DOM и анимацию за минимальное время с минимальной угрозой негативных последствий.

Фреймворки back-end

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

Yii2 (PHP) — в бэкенде на каждый популярный язык есть свой фреймворк. Вот, к примеру, Yii2 помогает работать с PHP. Так что вы если в будущем хотите делать аппаратную часть на этом языке (а вопреки ожиданиям он всё ещё популярен), тогда познакомиться с Yii2 придётся.

Django (Python) – тот самый фреймворк, который позволяет использовать Python в мире веба на полную катушку. Популярность объясняется очень просто: возможности огромного числа разработчиков веба не дотягивают до PHP, C, Java и прочих языков, а желания творить — хоть отбавляй много. И вот как раз с Python и Django у них всё удачно складывается.

Ruby on Rails (Ruby) – чтобы понять прелесть RoR, надо понимать Ruby и его сообщество. Язык относительно сложный, а вот разработчики на нём добродушные (и любят делиться исходным кодом). Вот и получается, что, используя Ruby on Rails, возможно, будете долго запрягать, зато быстро поедете.

Прочее

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

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

Что читать для знакомства с фронтендом и бэкендом

Мы подобрали ряд книг, ознакомившись с которыми, вы сможете понять, что сложнее — frontend или backend — в вашем случае.

Front-end

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

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

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

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

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

В отличие от предыдущей книги, здесь практически отсутствует реальный код, зато есть огромное количество справочных данных.

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

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

Back-end

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby. Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Как и в прошлой книге, для чтения этой книги необходимо хотя бы на базовом уровне владеть связкой HTML-CSS-JavaScript и Python. Книга примечательна тем, что содержит минимум воды и большое разнообразие примеров.

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

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

Уровень зарплат

Фронтенд или бэкенд лучше с точки зрения зарплаты? Как и в любой IT-профессии, оценить объективно среднюю зарплату по России или даже Москве для фронтенд или бэкенд-разработчика очень сложно. Начать можно с общих цифр, фигурирующих в недавнем исследовании Хабр Карьеры за второе полугодие 2019 года.

Согласно приведённому графику, разброс зарплат в обоих направлениях веба отличается незначительно, и что важнее — он точно не меньше зарплат фулстек-разработчиков. Если оперировать фактическими цифрами – вход на профессиональный уровень (уверенный junior или начинающий middle) лежит в районе 60-70 тысяч, и далее уходит к средней в 110-120 тысяч рублей. Что ещё важнее, согласно данным Хабр Карьеры, зарплата в разработке выросла в среднем на 6% по сравнению со вторым полугодием.

Для сравнения возьмём ещё статистику с портала trud.com. Вот данные на конец 2019 года по фронтенду:

Для сравнения — заработок среднего PHP-разработчика за тот же период:

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

Но если говорить об опытном специалисте — во всяком случае в крупных городах — найти жирный контракт во frontend проще — из-за ряда стереотипов экспертное мнение в этой области ценится выше, чем в backend. При этом одновременно разработчик уровня senior во фронт-енде может вести куда больше проектов, чем в бэк-енде.

Мы постарались собрать в этой статье всё, чтобы вы смогли сделать выбор в мире веб-разработки. Теперь дело за вами — решиться и попробовать. Удачи!

Источник

Простыми словами: бэкенд, фронтенд и их взаимодействие

Взгляд на расширяющиеся границы веб-разработки. Изначально этот пост был ответом на Quora: Как взаимодействуют друг с другом фронтенд- и бэкенд-код?

Давайте начнем с определений.

Фронтенд

Все, что браузер способен воспринять, отобразить и/или запустить. То есть HTML, CSS и JavaScript.

HTML (Hypertext Markup Language, язык разметки гипертекста) говорит браузеру, что он должен отобразить, например, заголовок, абзац, список, элемент списка и так далее.

CSS (Cascading Style Sheets, каскадные таблицы стилей) отвечают за то, как выглядят элементы: «отступ после первого абзаца равен 20 пикселям», «весь текст в body должен быть темно-серым».

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

Бэкенд

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

Вы можете использовать для бэкенда любые инструменты, доступные на вашем сервере (который, по сути, может быть просто особым образом настроенным компьютером). Можно воспользоваться любым языком программирования общего назначения, таким как Ruby, PHP, Python, Java, JavaScript/Node, bash. Также у вас есть возможность развернуть сервер баз данных, например, MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

Точки соприкосновения

Рендеринг на стороне сервера

Система прямых HTTP-запросов к server-rendered приложению заключается в том, что браузер отправляет HTTP-запрос, а сервер отвечает HTML-страницей.

Между получением запроса и ответом на него, сервер обычно обращается к базе данных и генерирует страницу с помощью шаблонизатора (ERB, Blade, EJS, Handlebars). В открытой браузером странице HTML отвечает за то, что в ней содержится, CSS за то, как это выглядит, а JS — за взаимодействие пользователя с контентом.

Коммуникация с использованием AJAX

Аббревиатура AJAX расшифровывается как Asynchronous JavaScript and XML (асинхронный JavaScript и XML). Эта технология основывается на отправке HTTP-запросов JavaScript-кодом со страницы. Исторически ответ поступал в XML, сегодня же он преобразился в более удобный JSON.

AJAX подразумевает, что ваш сервер имеет некую конечную точку, отвечающую на запросы XML или JSON-ами. Два примера отвечающих за это протоколов — REST и SOAP.

Одностраничные приложения

Технология асинхронных запросов позволяет динамически изменять содержимое страницы без ее перезагрузки. Этот принцип достиг расцвета благодаря JS-фреймворкам вроде Angular и Ember. Такие приложения отправляются с сервера укомплектованными, а дальнейший рендеринг (при необходимости) производится на стороне клиента (то есть в браузере).

Универсальные/изоморфные приложения

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

Между фронтендом и бэкендом

Standalone фронтенд

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

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

Легковесный бэкенд

Параллельно бэкенд становится все более и более легким. Такие технологии как хранилища документов и графовые базы данных подразумевают довольно вялую активность повторной агрегации данных на стороне сервера. Ответственность за определение, какие данные требуются (графовые БД) и как вытащить все необходимые их фрагменты (REST API) ложится на клиентскую сторону.

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

Стирание границ

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

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

Источник

Что такое бэкенд и фронтенд, а также в чем между ними разница

Что же такое фронтенд (frontend) и бэкенд (backend)-разработка? Скорее всего, вы уже могли слышать данные термины от знакомых программистов, но до сих не знаете, что они означают. Предлагаем вам совместно разобраться что должен знать frontend-разработчик, какими компетенциями должен обладать backend и чем они отличаются друг от друга.

Frontend-разработчик — кто это

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

Frontend — что же это означает? Простыми словами, фронтенд (frontend) — это, та самая составляющая программирования, которую считывает система браузера, а также демонстрирует (запускает) на странице для просмотра пользователя. Другими словами, это CSS, HTML и JavaScript.

CSS (Cascading Style Sheets) дает команду браузеру, каким образом отражать все элементы, к примеру: диаметр отступов между блоками, цвет и размер шрифта или опять же блоков.

HTML (HyperText Markup Language) сигнализирует системе браузера о том, каким должно быть содержимое страницы в целом, то есть, в HTML вы создаете заголовки, параграфы, списки, элементы списков или пишите текст.

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

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

Теперь вы знаете, что такое фронтенд, давайте разберемся с тем, что такое бэкенд.

Backend-разработчик — кто это

Бэкенд (backend) — это, та часть работ, которая происходит за пределами досягаемости браузера, то есть на сервере.

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

Для бэкенда программисты могут пользоваться всеми средствами, которые доступны на сервере. Например, любой многофункциональный язык программирования:

Тоже самое относится и к системам управления базами данных:

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

Мы кратко разобрали что это такое frontend и backend. Теперь вы знаете, в чем между ними разница, давайте рассмотрим, как же связаны сферы фронтенд и бэкенд.

Структура взаимодействия фронтенд и бэкенд

На сегодняшний день есть ряд основополагающих ресурсов, которые формируют взаимодействие между frontend и backend.

Фронтэнд и бэкэнд что это простыми словами. Смотреть фото Фронтэнд и бэкэнд что это простыми словами. Смотреть картинку Фронтэнд и бэкэнд что это простыми словами. Картинка про Фронтэнд и бэкэнд что это простыми словами. Фото Фронтэнд и бэкэнд что это простыми словами

Взаимодействие между frontend и backend

Серверное приложение

Здесь HTTP-запросы передаются сразу-же на сервер самого приложения, а сервер, в свою очередь, выдает ответ в виде HTML-страницы. В процессе получения запроса и выдачи ответа, сервер производит поиск сведений по полученному запросу в базе данных и генерирует ее в шаблон (ERB, Blade, EJS, Handlebars).

После того, как страница загружена в браузер:

AJAX и аналогичные решения

Иной вид архитектуры применяет для коммуникации AJAX (Asynchronous JavaScript and XML). То есть JavaScript, загруженный в браузер, передает HTTP-запрос (XHR, XML HTTP Request) внутри страницы и в результате получает XML-ответ. Помимо этого, для ответов можно применять формат JSON. Более подробно про систему безопасности передачи сведений вы можете прочитать в статье о том, что такое HTTPS-протокол.

Другими словами, ваш сервер обязан иметь некую финальную ступень, которая будет отвечать на получаемые запросы через JSON или с помощью XML-кода. Существует 2 основополагающих протокола, которые используют для данной задачи:

Также AJAX дает вам возможность производить загрузку сведений при этом не обновляя страницу. Чаще всего, это требуется в таких программных платформах, как Angular и Ember. В последствии разработки, подобные приложения загружаются в браузер и все дальнейшие рендеринги реализуются на стороне пользователя, то есть в браузере. В этом случае, frontend-разработчик комуницируют с backend-разработчиком через HTTP, применяя JSON или XML-код.

Также существуют библиотеки и фреймворки, такие как: React и Ember, которые дают возможность реализовывать приложения как на сервере, так и «в клиенте». В данном случае для коммуникации frontend с backend, в приложении используется AJAX, обрабатываемый на сервере HTML.

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *