Back end и front end: что это такое и как они взаимодействуют

Содержание

что это такое и как они взаимодействуют

Рассказывает Хьюго Ди Францеско, веб-разработчик


Вы наверняка уже слышали эти модные в сфере программирования слова «фронтенд» и «бэкенд», но что за ними стоит? Предлагаю в этом разобраться.

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

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

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

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

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

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

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

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

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

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

В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

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

Связь с использованием AJAX

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

Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.

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

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

В этом случае для связи фронтенда с бэкендом приложение использует и AJAX, и обрабатываемый на сервере HTML.

Вне фронтенда и бэкенда

Автономный фронтенд

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

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

Легкий бэкенд

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

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

Размытые границы

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

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

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

Перевод статьи «In simple terms: backend code, frontend code and how they interact»

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

Взгляд на расширяющиеся границы веб-разработки. Изначально этот пост был ответом на 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.

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

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

Оригинал

Фронтенд и бэкенд: о самом главном

Освоить основы фронтенда за 12 часов: большая видеоподборка

Frontend– и backend–разработчик: разбор профессий, поиск призвания

Встречают по одежке — провожают по уму. В жизни эта аксиома работает как: надеть модный костюм, чтобы привлечь внимание; прочесть умную книгу, чтобы произвести впечатление и не тормозить. В сети — тот же принцип.

На страже красоты и разума фронтенд и бэкенд воины. Кто эти люди? Разбираемся вместе.

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

С английского «front» — лицевая сторона, фасад. Это и есть основа трудов frontend разработчика — создание функционального интерфейса вебресурса или приложения, максимально «правильного», привлекательного, удобного для пользователя. Не путать с web–дизайнером, верстальщиком и прочими млекопитающими! Общее — чувство прекрасного, но, выбрав профессию фронтендщика, готовьтесь стать бойцом более широкого профиля. 

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

Frontend разработчик реализует визуал очередного проекта, с помощью следующих базовых навыков:

  • Создание годной структуры вебстраницы. Здесь неотъемлемы знания HTMLразметки, умение выделять логические блоки, структурировать разделы, заголовки, ссылки.
  • Для доработки созданного ранее каркаса и внешнего вида страницы в целом применяется язык стилей CSS: задаем фоновый цвет, окрашиваем элементы, регулируем шрифты и размеры полей. Связкой HTML+CSS давно никого не удивишь, поскольку это основа для работы преимущественного числа современных интернетсайтов. 
  • Интерактив на базе языка программирования JavaScript, как вишенка на торте. Некий этап волшебства фронтенд разработки.Оживление элементов статичной страницы: танцующие картинки, выпадающее меню, всплывающие окнаподсказки, изменение цветовых решений форм — все, что душе заказчика угодно.

Что такое бэкенд?

Говоря «back» (с английского), подразумеваем то, что находится в фоновом режиме и скрыто от глаз аудитории. Это отнюдь не указывает на малозначимость понятия, совсем наоборот — «начинка» решает. Алгоритмы, логика, функции и возможности веб-площадки ложатся на плечи backend разработчика. Он запускает «сердце» программного продукта, отвечая за жизненно важные механизмы. 

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

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

Какие знания, являются ключевыми для backend разработчика?

  • PHP, Ruby, Python, Perl, Java. Изучение хотя бы одного серверного языка — проходной билет для успешного старта в вебпрограммировании.
  • Без понимания СУБД (системы управления базами данных) не обойтись: Oracle, MySQL, Ms SQL Server. Начав обучение с одной, проблем с переходом на другую не возникнет, в связи со схожестью языка запросов в основе баз данных.
  • Фреймворк — набор библиотек для упрощения и ускорения процесса разработки веб-сайта: Django, Kohana, Symfony, Yii и другие. 
  • Технологии frontend разработки — для слаженной работы криэйторов.
  • Безусловным козырем будет знание английского языка с техническим уклоном на уровне не ниже intermediate (как, впрочем, и для коллегифронтендера).

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

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

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

Frontend или backend: что выбрать?

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

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

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

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

Чувствуете в себе потенциал «работать за двоих»? Ваша стезя — fullstack — проработка двух направлений одним специалистом. Универсальность всегда в цене и почете, а это неоспоримое преимущество перед узкопрофильными соратниками. 

Не знаешь, какой курс выбрать?

Запишись на бесплатную консультацию и мы поможем в выборе правильного направления

Как стать фронтенд разработчиком и где учиться бэкендингу?

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

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

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

Ваша цель — обучиться качественно и быстро под патронажем опытного сэнсэя? Выбирайте курсы. Если душа просит frontend, стартовать поможет «Курс верстки (HTML5+CSS3+JS)» от Wezom Academy:

  • 32 часа = 16 занятий брейнсторма нон-стоп;
  • почва для дальнейшего изучения программирования и выбора направления «по душе»;
  • практические отработки.

Выбирая место в ITиндустрии, оценивайте как востребованность профессии, так и личные интуитивные предпочтения, способ мышления. Если, дочитав до этого места, вы определились — мишн комплит, как говорится.

Еще думаете? Стучитесь в окно обратной связи за экстренной помощью и просто поговорить о погоде. 

 

Фронтенд и Бэкенд: Что Лучше Выбрать?

Введение

Ни для кого не секрет, что веб-разработка является одной из самых востребованных профессий в мире на данный момент. Однако проблема для многих состоит в том, что веб-разработчики делятся на две специализации: Фронтенд и Бэкенд. Какая из них подходит вам лучше всего?

В этом руководстве вы узнаете всё, чтобы принять решение и встать на путь становления профессионалом в этом деле; освоив необходимый уровень для начала работы в этой сфере. Мы поговорим о технологиях, обсудим тип работы, а также рассмотрим различные задачи, которые выполняют два типа веб-разработчиков: Front end и Back end.

Самые Полюбившиеся Статьи

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

Различные Сферы Влияния: Фронтенд и Бэкенд

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

Итак, frontend backend разработчики и их обязанности, давайте начинать!

Для начала давайте сравним то, чем Фронтенд и Бэкенд разработчики занимаются. Это не очень сложная тема, так как отличия весьма разительные, несмотря на одну сферу деятельности.

Как Работают Сайты?

Чтобы объяснить работу сайта, давайте используем в качестве примера один из самых популярных. Amazon.com должен стать отличным примером для этого.

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

Затем, вы нажимаете на товар, который вы хотите, открываете страницу товара, нажимаете купить, вводите данные, выбираете способ доставки и вот ваша книга уже в пути.

Это звучит довольно просто, не так ли? Хотя на самом деле процесс намного более сложный, чем вам кажется.

Какую часть делал Фронтенд и Бэкенд разработчик в этом случае?

Всё, что вы видите на сайте Amazon было создано фронтенд разработчиками. Кнопки, список товаров, страница товаров, страница оплаты, практически всё.

Но.

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

Если вы хотите создать сайт, то это не front end vs back end. Это front end и back end вместе.

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

День Из Жизни Фронтенд Разработчика

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

Давайте представим, что вы фронтенд разработчик в компании X, которая имеет свой собственный интернет-магазин скейтбордов.

Эта компания имеет команды UI/UX дизайнеров, фронтенд и бэкенд разработчиков, а также системных администраторов.

Если бы вы были на месте фронтенд разработчика, то ваш день начинался бы примерно в 9 утра (если повезёт). Вы придёте на работу, возьмёте чашку кофе и пойдёте обсуждать с веб-дизайнерами новую идею об улучшении внешнего вида сайта компании.

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

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

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

День Из Жизни Бэкенд Разработчика

Теперь, давайте решим спор “front end vs. back end”, взглянув на него с другой стороны. Ваш день начинается почти так же, и вы отправляетесь на встречу с техническим директором вашей компании.

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

Теперь, настанет время вернуться в вашу пещеру и начать работу. Это явно будет нелегко, но вы настроены решительно. Вам будет тяжело искать решение проблемы, которая настолько критична для компании. Однако вы любите их решать.

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

Технологии, Которые Вам Нужно Будет Знать

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

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

Набор Инструментов Front End

Давайте определим frontend backend инструменты. Хлебом и маслом фронтенд разработчиков являются HTML, CSS и JavaScript. HTML — это гипертекстовый язык разметки, который используется для создания основы сайта. CSS — это способ сказать браузеру, как всё должно выглядеть, стилизуя контент. JavaScript используется для добавления анимаций, переходов и функций для элементов.

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

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

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

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

Учитывая сказанное, интернет-магазин компании X будет иметь невероятный дизайн, но он может потребовать скриптов, которые должны работать слаженно. В качестве опытного фронтенд разработчика вы должны ценить своё время и использовать библиотеки, вроде React.js и фреймворки, вроде Angular.js только в подходящих случаях.

Набор Инструментов Back End

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

Языки программирования серверной части

Выбор языков программирования зависит от предпочтений, нужд проекта и ваших знаний. Существует несколько популярных языков программирования серверной части, вроде PHP, JavaScript (используемых в среде Node.js с фреймворком Express), Python, Ruby, C#, Java и другие.

Используемые технологии также могут определить язык, которые вы собираетесь использовать. Например, если ваш сайт создан на Symfony или Laravel, то вам придётся использовать PHP. Для фреймворка Django более предпочтительным станет Python, тогда как работа с фреймворком Express потребует от вас знаний Node.js.

База данных

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

Существует несколько популярных систем баз данных, вроде MongoDB, MySQL, Oracle, Redis и другие.

Итак, front end и back end инструменты мы рассмотрели, давайте перейдём к следующей теме.

Разная Специализация Для Различных Интересов

Помимо используемых технологий (frontend backend) и различных обязанностей, ваш выбор Фронтенд и Бэкенд может зависеть от вашей личности.

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

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

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

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

Возможно, сейчас вы подумали, что бэкенд гораздо важнее, да?

Однако это вовсе не так. Эти две специализации равны, хотя требует различных наборов навыков и знаний.

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

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

Какая Зарплата у Веб-Разработчика?

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

Давайте взглянем на цифры и подведём некий итог в споре “front end vs back end”, что позволит вам принять взвешенное решение. Эти данные будут представлены в качестве сравнения.

Зарплата Фронтенд

По данным glassdoor.com средняя зарплата фронтенд разработчика в городе Нью Йорк равна $111,728, что на 20% выше чем национальный уровень по стране. Это может быть объяснено тем, что крупные города имеют высокие расходы на проживания и более развитую экосистему бизнеса.

В Лондоне, Великобритания, средняя годовая зарплата для фронтенд разработчика составляет около $52,000, что 22% выше национального среднего уровня, по данным glassdoor. com. Как вы заметили, зарплата серьёзно отличается, но общий уровень относительно других зарплат в стране остаётся практически таким же.

В Индии среднегодовая зарплата для фронтенд разработчика составляет порядка $5,000. Это может показаться очень низким уровнем по сравнению с другими данными, но вы должны учитывать общий уровень жизни и зарплат в стране!

Зарплата Бэкенд

В Нью Йорке средняя зарплата бэкенд разработчика будет равна $133,182, что на 17% выше национального среднего уровня зарплат. Как вы наверное заметили, то разнится с другими странами и города также высока.

В Лондоне средняя зарплата бэкенд разработчика является уже более высокой и равна $74,000, на 32% выше средней. В Индии фронтенд и бэкенд разработчики получают одинаковую заработную плату.

Самые Популярные Статьи

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

Вердикт

Если дело касается зарплаты, то front end и back end разработчики не сильно разнятся, но бэкенд специалист может рассчитывать на большее.

Почему?

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

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

Заключение

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

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

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

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

Фронтенд и Бэкенд. Выбор за вами?

Оставьте ваше честное мнение

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

Организация backend и frontend в Yii framework

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

Здесь представлен сокращенный вариант статьи из-за ограничений cms livestreet на количество символов в публикации

Задача организации backend/frontend будет также актуальной и для многих других фреймворков, чья архитектура так или иначе похожа на Yii. Кстати рассматриваемая версия Yii framework не принципиальна, но большая часть приводимых мной примеров в данной статье будет актуальна для Yii 1.1.

Общее видение

Если говорить вцелом, то существует два способа разделения backend/frontend, в зависимости от количества точек входа, или другими словами от количества приложений, где с одной стороны разделение происходит внутри одного приложения, а с другой реализация представлена в виде нескольких приложений.

При создании собственной реализации или выборе готового решения рекомендую учесть одновременно несколько моментов:

  • Степень связности backend и frontend. Она не только отразится на архитектуре твоего проекта, но и на том, как будет расти код, откуда также станет видно насколько дорого тебе обойдется поддержка и развитие проекта в будущем, ведь любая ошибка в проектирование возрастет впоследствии в несколько раз.
  • Трудность реализации. Проблема вытекающая из первой. Если имеет место ограничения по времени, или скажем ты не уверен, что хорошо разобрался с фреймворком, чтобы грамотно собрать свой проект, то лучше заручится уже существующими реализациями.
  • Масштаб проекта. Громадная архитектура — громадному проекту, тут все логично и просто. Не следует использовать монстрообразные сборки для реализации своего приложения, как например блога или несложного сервиса для хранения изображений.
  • Веб-сервер. Реализация должны быть такой, чтобы при смене хостинг площадки, количество манипуляций с настройками сервера было минимальным.

Разделение backend/frontend в Yii

Что касается Yii framework, здесь могу выделить следующие способы разделения, которые мне довелось встретить и реализовывать в какой-то мере:

Все реализации заслуживают отдельного внимания, но тем не менее постараюсь вкратце рассказать о каждой из них.

Итак, давай по порядку.

Backend и frontend — как два приложения

Разделение на два приложение — это наверно первое, что могло придти тебе в голову. Идея довольно-таки простая на первый взгляд, каждое приложение содержит в себе свои файлы, а пересекающиеся части выносятся в отдельную общую (common) директорию. На практике приходилось встречаться с двумя вариациями разделения, где в первом случае проект выполнен в виде нескольких приложений (end'ов), а во втором одно приложение вложено в другое. Оба варианта отличаются простой реализацией. Также после краткого изучения поведений (behaviors) в Yii к этим двум способам разделения backend/frontend в твоем наборе решений добавить еще одна реализация.

Разделение на уровне end'ов

В wiki-статье The directory structure of the Yii project site от Qiang (одного из core-разработчиков), показывается пример, подобного разделения на несколько приложений (end'ов), структура директорий выглядит следующим образом:

backend/
    common/
        components/
        config/
            params.php
            params-local.php *
        lib/
            Pear/
            yii/
            Zend/
        migrations/
        models/
            Comment.php
            Extension.php
            ...
    console/
        commands/
            SitemapCommand.php
            ...
        config/
            main.php
            main-local.php *
            params. php
            params-local.php *
        runtime/
        yiic.php *
    frontend/
        components/
        config/
            main.php
            main-local.php *
            params.php
            params-local.php *
        controllers/
            SiteController.php
            ...
        lib/
        models/ 
            ContactForm.php
            SearchForm.php      
        runtime/
        views/
            layouts/
            site/
        www/
            assets/
            css/
            js/
            index.php *
    yiic
    yiic.bat

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

Одно приложение вложено в другое

Organize directories for applications with front-end and back-end, предлагает следующее расположение директорий:

wwwroot/
    index. php
    backend.php
    assets/
    images/
    js/
    protected/
        config/
            main.php
        components/
        controllers/
        models/
        views/
        runtime/
        backend/
            config/
                main.php
            components/
            controllers/
            models/
            views/
            runtime/

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

Backend и frontend на основе поведений

Organize directories for applications with front-end and back-end using WebApplicationEnd behavior, идея заключается в расширение CWebApplication дополнительным методом через поведение, которое в свою очередь определяет новые пути для папкок с контроллерами и представлениями в зависимости от имени end'а.

В результате выполнения инструкций приводимых в wiki-статье структура директорий будет выглядеть так:

webroot/
    index.php
    backend.php
    protected/
        components/
            Controller.php
            UserIdentity.php
        controllers/
            /front
                SiteController.php
            /back
                SiteController.php
        views/
            /front
                /layouts
                    column1.php
                    column2.php
                    main.php
                /site
                   /pages
                       about.php
                   contact.php
                   error.php
                   index.php
                   login.php
            /back
                /layouts
                    main.php
                /site
                    error. php
                    index.php
                    login.php

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

Общие моменты при использовании нескольких приложений

Несколько приложений — несколько точек входа, здесь всем вышеуказанным реализациям свойственно:

  • Авторизация пользователя. Авторизация распространяется только на один end', авторизовавшись в одном приложении, вы будете по прежнему гостем в другом;
  • Марштрутизация. Чтобы сделать красивый URL для backend.php придется несколько поиграть с .htaccess и/или правилами в UrlManager или придумать что-то другое;
  • Модульность. В случае с поведениями происходит отказ от использования стандартных модулей.
  • Слабая связь между end'ами. Нужно помнить, что каждого end' свои файлы: ресурсы, компоненты, модули и т. п, а если и есть общая часть то скорее она вынесена, чтобы не происходило дублирования, функционально она не создает какой-то зависимости между end'ами, и хотя в большинстве такой задачи не возникает, но тем не менее нельзя сделать ссылку из backend во frontend (и наоборот), тебе придется что-нибудь придумать на этот счет.

Backend и frontend — одно приложение

Одно приложение, одна связка файлов конфигураций, одна точка входа. В рамках одного приложения backend и frontend Минус один — это лишь модуль приложения, и придётся мириться с тем, что все assets, runtime, css, images и прочее нужно либо делить с «родителем», либо прилагать какие-то усилия, что отделить их от front'а.

Backend и frontend контроллеры

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

Структура директорий будет выглядеть так:

webroot/
    protected/
        components/
            ControllerBackend. php
            ControllerFrontend.php
            UserIdentity.php
        controllers/
            BackendSiteController.php
            SiteController.php
        models/
        views/
            /layouts
                column1.php
                column2.php
                main.php
            /site
                /pages
                   about.php
                contact.php
                error.php
                index.php
                login.php

Такая организация уместна в большинстве для малых проектов.

Backend в виде модуля

После того как количество контроллеров увеличится появится необходимость вынесения их в отдельный модуль:

webroot/
    protected/
        components/
            Controller.php
            UserIdentity.php
        controllers/
            SiteController.php
        models/
        modules/
            admin/
                components/
                    ControllerBackend. php
                controllers/
                    SiteController.php
                views/
                    layouts/
                    default/
        views/
            /layouts
                column1.php
                column2.php
                main.php
            /site
                /pages
                   about.php
                contact.php
                error.php
                index.php
                login.php

Реализации backend в смежных модулях в существующих реализациях

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

Open Real Estate


Сборка от студии Monoray. Бесплатное программное обеспечение для создания сайта агентства недвижимости, разработанное на Yii CMF.

Модуль в момент выполнени

<code>init()</code>

импортирует файлы компонентов и моделей. Также в составе модуля присутствуют хелперы (helpers), но импортируемые вручную. Для реализации backend/frontend контроллеров создано два класса, находящихся в компонентах — Controller и ModuleAdminController, устанавливающие свои права доступа, layouts, некоторые вспомогательные методы. Структура модуля выглядит следующим образом:

\modules
    \apartments
        \components
        \controllers
            \backend
                \MainController.php
            \MainController.php
        \helpers
        \models
        \views
             \backend
        \ApartmentsModule.php

Для запуска backend-контроллеров в правилах машрутизации установлено:

'/backend//' => '/backend//',
Yupe

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

Структура дополнительного модуля:

\modules
    \catalog
        \controllers
            \CatalogController.php
            \DefaultController.php
        \models
        \views
             \default
        \CatalogModule.php

Дополнительный модуль в основном классе содержит настройки. Что касается контроллеров, то как ни странно в вышеприведенном примере DefaultController.php является backend-контроллером, а CatalogController.php frontend-контроллером.

Замечания при использовании одного приложения


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

Итог


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

Поэтому Yii framework предоставляет тебе свободу в данном выборе.

Несокращенный оригинал статьи: Организация backend и frontend в Yii framework

gsv.ru - Что такое frontend и backend

Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях


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

 

Клиент-серверная архитектура интернета

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

Интернет построен по клиент-серверной архитектуре, давайте рассмотрим следующие понятия:

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

Клиентом называют Ваш компьютер, который подключен к глобальной сети интернет. На данном компьютере установлено клиентское программное обеспечение, необходимое для связи с сервером, оно называется браузер. Браузером (веб-обозревателем) - называется программа с помощью которой пользователи просматривают веб-сайты.

Одна из главных задач веб-сервера принимать запросы от пользователей (клиентов), обрабатывать их и выдавать ответы. Эти ответы представляют из себя HTML-страницы с стилями оформления, анимацией, изображениями, медиа, flash объектами, javascript скриптами и т.д. Это и есть frontend.

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

Таким образов, можно сделать вывод:

frontend (фронтенд) — все что видит клиент, это публичная часть сайта, с которой непосредственно контактирует пользователь.

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

 

frontend и backend разработчики

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

frontend и backend разработчики

 

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

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

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

 

Термины frontend и backend по отношению к веб-сайтам

При разработке сайтов происходит разделение процесса его создания на две части:

  • frontend - разработка пользовательского интерфеса
  • backend - его административная часть

 

 

 

Определить языкАзербайджанскийАлбанскийАнглийскийАрабскийАрмянскийАфрикаансБаскскийБелорусскийБенгальскийБирманскийБолгарскийБоснийскийВаллийскийВенгерскийВьетнамскийГалисийскийГреческийГрузинскийГуджаратиДатскийЗулуИвритИгбоИдишИндонезийскийИрландскийИсландскийИспанскийИтальянскийЙорубаКазахскийКаннадаКаталанскийКитайский (Упр)Китайский (Трад)КорейскийКреольский (Гаити)КхмерскийЛаосскийЛатинскийЛатышскийЛитовскийМакедонскийМалагасийскийМалайскийМалайяламМальтийскийМаориМаратхиМонгольскийНемецкийНепалиНидерландскийНорвежскийПанджабиПерсидскийПольскийПортугальскийРумынскийРусскийСебуанскийСербскийСесотоСингальскийСловацкийСловенскийСомалиСуахилиСуданскийТагальскийТаджикскийТайскийТамильскийТелугуТурецкийУзбекскийУкраинскийУрдуФинскийФранцузскийХаусаХиндиХмонгХорватскийЧеваЧешскийШведскийЭсперантоЭстонскийЯванскийЯпонский

 

АзербайджанскийАлбанскийАнглийскийАрабскийАрмянскийАфрикаансБаскскийБелорусскийБенгальскийБирманскийБолгарскийБоснийскийВаллийскийВенгерскийВьетнамскийГалисийскийГреческийГрузинскийГуджаратиДатскийЗулуИвритИгбоИдишИндонезийскийИрландскийИсландскийИспанскийИтальянскийЙорубаКазахскийКаннадаКаталанскийКитайский (Упр)Китайский (Трад)КорейскийКреольский (Гаити)КхмерскийЛаосскийЛатинскийЛатышскийЛитовскийМакедонскийМалагасийскийМалайскийМалайяламМальтийскийМаориМаратхиМонгольскийНемецкийНепалиНидерландскийНорвежскийПанджабиПерсидскийПольскийПортугальскийРумынскийРусскийСебуанскийСербскийСесотоСингальскийСловацкийСловенскийСомалиСуахилиСуданскийТагальскийТаджикскийТайскийТамильскийТелугуТурецкийУзбекскийУкраинскийУрдуФинскийФранцузскийХаусаХиндиХмонгХорватскийЧеваЧешскийШведскийЭсперантоЭстонскийЯванскийЯпонский

 

 

 

 

 

 

 

 

 

Звуковая функция ограничена 200 символами

Как легко и автоматически интегрировать front-end и back-end



Поскольку разработка веб-приложения обычно делится на front-end разработку и back-end разработку, но некоторые коды в front-end обычно будут одинаковыми в back-end (ASP, PHP, JSP или другие серверные шаблонизаторы содержат много HTML, написанных front-end разработчиками), то back-end разработчикам нужно объединить код HTML в свои ASP, PHP, JSP или другие серверные шаблоны.

Если разработка front-end начинается раньше разработки back-end, то она работает нормально. Но когда front-end и back-end разрабатываются одновременно (всегда так), возникает проблема. Back-end разработчик должен постоянно менять свои коды шаблонов при изменении front-end.

Итак, мой вопрос заключается в том, есть ли какой-либо способ объединить код HTML в шаблон back-end автоматически, чтобы интеграция front-end и back-end была более плавной и простой.

continuous-integration frontend backend
Поделиться Источник Wenhao Ji     16 марта 2013 в 07:28

2 ответа


  • Терминология Front-end и back-end

    При разработке веб-приложения в ASP.Net я обычно разделяю проект на 2 части: бэк-энд (административная часть) и фронт-энд (часть visitors/SEO). Допустим, мои посетители могут войти на сайт и будут выполнять множество задач, таких как заполнение профиля, отправка сообщений и т. д. Эта часть...

  • Java back-end и JavaScript front-end, как присоединиться?

    Я новичок в создании веб-приложения с Java back-end и JavaScript, HTML 5 front-end. Как мне передать контент между ними?



3

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

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

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

Поделиться ziGi     02 июня 2014 в 08:44



1

ладно я укушу

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

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

Я использовал этот подход с сервером на базе python, управляющим клиентом fat javascript, с тестами, написанными в jsunit на конце javascript.

Надеюсь, это поможет

Поделиться Vorsprung     16 марта 2013 в 07:42


Похожие вопросы:


Какие front-end и back-end технологии используют Google и Facebook?

Какие технологии Google и Facebook используют для своих back-end и front-end? Каковы их Технологии баз данных и языки, которые они используют для обработки внутренних данных.


MVC .Net Front End и Back End

Я очень новичок в .Net и MVC конкретно. Я создаю сайт, который будет нуждаться в интерфейсе и бэк-энде (админ-сайт). Я создал проект и разрабатываю front end, теперь как мне начать back end для...


Каков ваш рабочий процесс между front-end и back-end в команде?

Какова ваша лучшая практика (в пределах MVC) с тем, как вы работаете с front-end-developers и back-end-developers? Возьмем такой пример: команда из 3 человек (1 front-end и 3 back-end) имеет 10...


Терминология Front-end и back-end

При разработке веб-приложения в ASP.Net я обычно разделяю проект на 2 части: бэк-энд (административная часть) и фронт-энд (часть visitors/SEO). Допустим, мои посетители могут войти на сайт и будут...


Java back-end и JavaScript front-end, как присоединиться?

Я новичок в создании веб-приложения с Java back-end и JavaScript, HTML 5 front-end. Как мне передать контент между ними?


Front-end и back-end

Может ли кто-нибудь объяснить мне, как встречаются front-end и back-end разработки или, скажем, состоят в мире веб-разработки? Является ли C++ достаточным языком для бэк-энда, или мне все равно. ..


Как четко разделить front-end и back-end логику

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


Разделение серверов back end и front end в Rails

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


Линия между Back-end и Front-end в разработке веб-приложений

Я уже некоторое время изучаю веб-разработку полного стека. Но мне трудно понять, где бы работа back-end разработчика заканчивалась, а front-end начинался, когда работа разделялась. Я понимаю, что...


интеграция back end и front end кода, работающего на разных серверах

У меня есть веб-приложение, в котором для front end я использую java script, html, css помещаю его на сервер xampp, а для back end я использую фреймворк spring boot, и он работает как API, который. ..

В чем разница между Front-End и Back-End разработкой? Software Engineering

Первоначально опубликовано 9 февраля 2017 г., обновлено 27 февраля 2019 г.

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

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

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

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

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

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

Пользователь вводит запрос через интерфейс.

Затем он проверяется и передается на сервер, который извлекает необходимые данные из базы данных и отправляет их обратно пользователю.

Рассмотрим подробнее разницу между интерфейсной и внутренней разработкой.

Что такое Front-End разработка?

Внешний интерфейс построен с использованием комбинации таких технологий, как язык гипертекстовой разметки (HTML), JavaScript и каскадные таблицы стилей (CSS).

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

HTML

Hypertext Markup Language - это ядро ​​веб-сайта, обеспечивающее общий дизайн и функциональность.

Самая последняя версия была выпущена в конце 2017 года и известна как HTML5.2.

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

CSS

Каскадные таблицы стилей предоставляют разработчикам гибкий и точный способ создания привлекательных интерактивных дизайнов веб-сайтов.

JavaScript

Этот язык, основанный на событиях, полезен для создания динамических элементов на статических веб-страницах HTML.

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

Интерфейсные фреймворки, такие как Angular, Ember, Backbone и React, также популярны.

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

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

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

Все становится еще сложнее, когда речь идет об Интернете вещей (IoT).

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

Что такое внутренняя разработка?

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

Например, когда покупатель просматривает обувь на веб-сайте, он взаимодействует с клиентской частью.

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

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

Внутренние инструменты

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

Многие из них используют надежные базы данных корпоративного уровня, такие как Oracle, Teradata, Microsoft SQL Server, IBM DB2, EnterpriseDB и SAP Sybase ASE.

Существует также ряд других популярных баз данных, включая MySQL, NoSQL и PostgreSQL.

Существует множество платформ и языков, используемых для кодирования приложения, например Ruby on Rails, Java, C ++ / C / C #, Python и PHP.

За последние несколько лет Backend-as-a-Service (BaaS) провайдеров превратились в жизнеспособную альтернативу.

Они особенно полезны при разработке мобильных приложений и работе в плотном графике.

Что такое разработка полного стека?

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

Как правило, разработка полного стека одним программистом не является практическим решением.

Тем не менее, иногда в компании по разработке программного обеспечения на заказ будут разработчики, которые хорошо разбираются в обеих сторонах, известных как разработчик полного стека .

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

Чтобы узнать, какую базу данных и фреймворк использовать в вашем следующем проекте, прочитайте нашу статью «Какая лучшая комбинация Front-End / Back-End для корпоративного приложения».

Если вы готовы увидеть, как мы можем применить наши знания на практике, запишитесь на бесплатную консультацию сегодня!

Front-End и Back-End веб-разработка

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

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

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

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

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

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

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

Необходимо знать фронтенд-разработчикам:
  • HTML5
  • CSS
  • JavaScript
  • Ajax

Back-end разработчики должны знать:
  • JavaScript
  • SQL
  • Ява ​​
  • C #
  • Питон
  • PHP

Front-end и back-end разработчики имеют разные обязанности в организации. Из-за этого эти должности требуют разных навыков, обязанностей и заработной платы.Вот краткое изложение позиций внешнего разработчика и внутреннего разработчика:

Интерфейсный веб-разработчик

Описание : интерфейсный веб-разработчик (иногда называемый веб-дизайнером) ориентирован на архитектуру веб-приложений, ориентированных на клиента.
Обязанности:
  • Разработка новых пользовательских функций в веб-браузерах
  • Разработка и реализация интерфейса для веб-сайтов сложных веб-приложений с использованием современных JS и CSS-фреймворков Создание повторно используемого кода и библиотек для будущего использования
  • Оптимизация интерфейсных приложений для максимальной скорости и масштабируемости
  • Код для современных передовых практик REST или GraphQL
Заработная плата:
Навыки:
  • Владеет HTML, CSS и JavaScript
  • Понимает клиентские сценарии и фреймворки JavaScript, такие как jQuery
  • .
  • Понимает принципы веб-дизайна
  • Имеет базовые знания о графическом редакторе, таком как Photoshop
  • .

Серверный веб-разработчик

Описание: внутренний разработчик ориентирован на серверную архитектуру веб-приложений.
Обязанности:
  • Разработка и реализация серверной веб-архитектуры, такой как серверы, базы данных, операционные системы и API
  • Интеграция элементов, обращенных к пользователю, с логикой на стороне сервера
  • Создание повторно используемого кода и библиотек для будущего использования
  • Оптимизация серверных приложений для максимальной скорости и масштабируемости
  • Реализовать решения для защиты данных
Заработная плата:
Навыки
  • Владеет такими языками, как JavaScript (NodeJS), Ruby, Java, SQL и C #
  • Имеет практические знания PHP, Ruby, Python и.Нетто
  • Имеет практические знания о серверных препроцессорах CSS, таких как LESS и SASS.
  • Понимает специальные возможности и соответствие требованиям безопасности
  • Может выполнять аутентификацию и авторизацию между системами и серверами
  • Может интегрировать несколько источников данных в единую систему
  • Может управлять средой хоста
  • Понимает, как масштабировать приложения
  • Понимает, как переносить, создавать сценарии и преобразовывать данные
  • Может создавать и поддерживать резервное копирование
  • Понимает управление версиями и бизнес-логику
  • Понимает управление сеансами

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

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

[cta vid = "0"]

Внешняя разработка и внутренняя разработка: Где

Автор: Лорен Стюарт

Последнее обновление: 12 августа 2020 г.

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


Совместите с учебными курсами , которые обучают программированию переднего и заднего плана!


Front End Web Development
Что такое Front End Development?
Определение: Front end разработка управляет всем, что пользователи сначала видят в браузере или приложении.Разработчики внешнего интерфейса несут ответственность за внешний вид сайта.

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

Языки программирования переднего плана

Языки внешнего интерфейса включают HTML, CSS и Javascript. В то время как JQuery выходит из моды (современные браузеры теперь могут выполнять ту же работу, но гораздо быстрее, чем jQuery), многие устаревшие проекты по-прежнему используют библиотеку JavaScript, поэтому не удивляйтесь, увидев ее в учебной программе учебного лагеря. Вы также узнаете много нового об адаптивном дизайне, а также о типографике, макете, системе сеток и теории цвета. Предвидя типы проектов, над которыми вы будете работать как фронтенд-разработчик, подумайте о создании и перепроектировании веб-сайтов.Чтобы быть фронтенд-разработчиком (иногда даже называемым Javascript-разработчиком), вам не нужны навыки бэкэнд-разработки. Сайты, созданные интерфейсными разработчиками, не будут взаимодействовать с информацией, хранящейся в базе данных, чтобы быть функциональными. Контент будет «фиксированным», что означает, что большие фрагменты новых данных не будут загружаться постоянно. У владельцев малого бизнеса и ресторанов обычно есть отличные примеры статичных сайтов.

Задание внешнего программирования

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

  • Front End Developer
  • Web Designer - еще одно распространенное название.
  • UI / UX-дизайнеры - это фронтенд-разработчики, которые сосредоточены на пользовательском интерфейсе и пользовательском опыте соответственно.Дизайнеры пользовательского интерфейса оттачивают визуальные аспекты дизайна сайта, в то время как дизайнеры UX проводят тестирование нескольких пользователей, чтобы убедиться, что сайт хорошо работает с предпочтительными пользователями. (Узнайте об опыте UX-дизайна одного выпускника GA.)

По данным PayScale, средняя начальная зарплата фронтенд-разработчиков по стране составляет около 67 тысяч долларов. Заработная плата варьируется от 42 до 108 тысяч долларов в зависимости от опыта, местоположения и отрасли. В Нью-Йорке стартовая зарплата составляет около 78 тысяч долларов с приблизительным диапазоном до 115 тысяч долларов.Не слишком потрепанный.

Курсы внешнего программирования

Думаете о разработке интерфейса для карьеры? Обратите внимание на эти школы (в нашем каталоге их более 100, которые преподают интерфейсную разработку!), У которых есть отличные отзывы о своих курсах по разработке интерфейса:

Back End Разработка
Что такое серверная разработка?
Определение: Внутренняя разработка относится к серверной части приложения и всему, что обменивается данными между базой данных и браузером.

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

Языки программирования серверной части

Многие разработчики серверной части знают языки интерфейса, такие как HTML и CSS, но им необходимо использовать такие языки, как Java, PHP, Ruby on Rails, Python и .Net, чтобы выполнять работу серверной части. Back-end-разработчики больше всего сосредоточены на быстродействии и быстродействии сайта. Эти языки используются для создания динамических сайтов, которые отличаются от статических сайтов тем, что на этих типах сайтов хранится информация из базы данных.Контент на сайте постоянно меняется и обновляется. Примеры динамических сайтов включают Facebook, Twitter и Google Maps.

Задания по программированию серверной части

По данным PayScale, средняя начальная зарплата серверных разработчиков по стране составляет около 70 тысяч долларов. Заработная плата варьируется от 38 до 117 тысяч долларов в зависимости от опыта, местоположения и отрасли. По данным SimplyHired, в Нью-Йорке стартовая зарплата составляет около 87 тысяч долларов с приблизительным диапазоном до 120 тысяч долларов. Опять же, не так уж и плохо.

Мы надеемся, что это руководство по разработке и руководство по разработке было полезным!

Следующие шаги: Вы когда-нибудь задумывались о разработке полного стека?

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

И используйте наш инструмент подбора Bootcamp Matching Tool, чтобы найти лучшую школу для вас!

Больше чтения:
Об авторе

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

Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.

Frontend и Backend-разработчики: в чем разница?

При обучении программированию новички часто сталкиваются с двумя путями: фронтенд И бэкэнд. Что вы выберете? Вы можете сделать и то и другое? Сколько зарабатывает на работе тот, кто кодирует HTML и CSS? В этом посте мы рассмотрим различия каждого из них с точки зрения описания, навыков, языков программирования и доходов.

Фронтенд и бэкэнд-разработчики

  • Frontend-разработчики создают внешний вид веб-сайта .
  • Backend разработчики создают, как работает веб-сайт

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

Фронтенд и бэкэнд-разработчики (инфографика)

Языки программирования

Frontend-разработчики в основном используют три языка: HTML, CSS, Javascript. За последние несколько лет роль разработчика внешнего интерфейса изменилась, и поэтому профессиональные разработчики внешнего интерфейса могут также захотеть рассмотреть возможность развития некоторых более промежуточных и продвинутых навыков JavaScript, а также накопления опыта с использованием инструментов командной строки и таких фреймворков, как Реагировать.

Backend-разработчики должны хорошо владеть языками программирования, которые отображаются на стороне сервера веб-сайта или приложения.Самыми популярными языками внутреннего программирования являются PHP, Ruby, Python, Node.js и Java. Обычно хороший backend-разработчик владеет одним из этих языков, но достаточно хорошо знаком, чтобы программировать на 2-м или 3-м языке программирования. Backend-разработчики также должны иметь опыт работы с такими базами данных, как MySQL, Oracle и SQL Server.

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

Навыки

Итак, какие навыки нужны фронтенд-разработчику по сравнению с бэкэнд-разработчиком?

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

Backend-разработчики , с другой стороны, должны обладать навыками критического мышления.Бэкэнд-разработчик часто занимается отладкой кода, а также разрабатывает системы, определяющие, как пользователь будет взаимодействовать с веб-сайтом. Вопросы, на которые должен уметь ответить серверный разработчик: Где хранятся данные? Это надежно хранится? Если трафик сайта увеличится в 100 раз за ночь, сможет ли сайт масштабироваться без сбоев? Как я могу добавить на сайт новую функцию, не нарушая при этом текущую функциональность? Как я могу протестировать веб-сайт (часто на промежуточной платформе и / или запускать тесты с использованием Test-Driven Development ), чтобы конечный пользователь столкнулся с как можно меньшим количеством ошибок и ошибок?

Образование

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

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

Заработная плата

Frontend : 70 000 долларов США (средняя базовая зарплата по данным Glassdoor) в диапазоне от 56 000 до 111 000 долларов. И почасовая ставка около 50 долларов в час.

Backend dev : 117 000 долларов США (средняя базовая зарплата по данным Glassdoor). В диапазоне от 100 до 140 тысяч долларов. И почасовая ставка около 65 долларов в час.

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

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

Стоимость найма разработчиков

Разработчик может взимать разные суммы в зависимости от множества факторов. Вот несколько основных причин:

  • Независимо от того, являетесь ли вы разработчиком-фрилансером, подрядчиком, сотрудником с частичной или полной занятостью.
  • Ваша специализация как разработчика - языки программирования, которыми вы владеете больше всего, инструменты, с которыми вы наиболее знакомы, и т. Д.
  • Умеете ли вы напрямую взаимодействовать с клиентом, обладаете ли навыками управления проектами и способны ли управлять командой.
  • Если вы внештатный разработчик или подрядчик, сеть, через которую вы предлагаете свои услуги.
  • Где вы живете и где работаете (удаленная работа или работа на дому).
  • Сколько у вас образования по специальности.
  • Количество опыта работы в своей области.
  • Как долго вы проработали в определенной компании в качестве сотрудника, занятого неполный или полный рабочий день.

Что такое Full-Stack Developer?

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

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

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

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

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

Front-of-the-front и back-of-the-front-end веб-разработка

Великое разделение реально, и я рад, что термины «передняя часть передней части» и «задняя часть передней части» приобрели популярность с тех пор, как я пошутил о них в Магазине. Ток-шоу.Некоторые из моих клиентов фактически отошли от культуры «мы нанимаем только разработчиков полного стека» и вместо этого приняли ярлыки «front-of-the-front-end» и «back-of-the-front-end». », Чтобы помочь им лучше организовать свои команды и улучшить методы найма. Это делает меня невероятно счастливым, поскольку эти ярлыки обеспечивают столь необходимое различие между типами веб-разработки, которые необходимы для создания успешных веб-вещей.

Я кратко сформулировал разделение так: разработчик переднего плана определяет внешний вид кнопки , , в то время как разработчик задней части интерфейса определяет, что происходит. при нажатии этой кнопки .

Я писал о своем опыте работы в качестве фронтенд-разработчика, но подумал, что было бы полезно создать отдельный пост, в котором излагались бы роли и обязанности как фронтенд-разработчиков. end и back-of-the-front-end разработчики.

Front-of-the-front-end разработчик

Определение: Front-of-the-front-end разработчик - это веб-разработчик, который специализируется на написании кода HTML, CSS и презентационного кода JavaScript.

В их обязанности могут входить:

  • Создание семантической разметки HTML с упором на доступность, чтобы обеспечить удобство работы с браузерами, вспомогательными технологиями, поисковыми системами и другими средами, которые могут использовать HTML.
  • Создание кода CSS , который управляет внешним видом веб-интерфейса, цветовыми решениями, типографикой, адаптивным макетом, анимацией и любыми другими визуальными аспектами пользовательского интерфейса. Внешние дизайнеры создают устойчивый код CSS с упором на модульность, гибкость, совместимость и расширяемость.
  • Создание сценария JavaScript, который в основном управляет объектами в DOM , например, открывает или закрывает панель аккордеона при щелчке заголовка аккордеона или закрывает модальное окно.
  • Тестирование в браузерах и устройствах , чтобы убедиться, что пользовательский интерфейс функционален и красив на бесконечном потоке настольных компьютеров, мобильных телефонов, планшетов и всевозможных других устройств с доступом в Интернет (и даже ожидаемых тех, у которых нет Это еще не изобретено!)
  • Оптимизация производительности внешнего кода для создания легких, быстро загружаемых, быстрых и беспроблемных приложений.
  • Работа с дизайнерами для обеспечения того, чтобы бренд, видение дизайна и лучшие практики UX были должным образом переведены в браузер, который, напоминаю вам, является тем местом, где реальные люди пойдут использовать реальный продукт.
  • Работа с разработчиками внешнего интерфейса для обеспечения совместимости внешнего кода с внутренним кодом, службами, API-интерфейсами и другой технологической архитектурой.
  • Создание библиотеки презентационных компонентов пользовательского интерфейса , написанных на языке шаблонов, упакованы для использования другими разработчиками.
  • Создание и документирование надежного, интуитивно понятного API компонента для каждого презентационного компонента , чтобы разработчики, использующие компонент, могли легко подключить к нему все, что им нужно.
  • Написание модульных тестов для презентационной библиотеки компонентов пользовательского интерфейса кода, чтобы убедиться, что компоненты выглядят и функционируют должным образом.
  • Создание архитектуры гибкости / компоновки библиотеки компонентов , работа с разработчиками, чтобы понять, насколько открытым / компонуемым или жестким / заблокированным должен быть каждый компонент.
  • Поддержание презентационных компонентов как продукта, означает управление версиями, развертывание, управление, примечания к выпуску и все операционные материалы, которые входят в сопровождение программного продукта.

Исторически разделение между «интерфейсом» и «сервером» было очевидным: разработчики внешнего интерфейса писали HTML, CSS и JavaScript, а разработчики внутреннего интерфейса писали PHP, Python, ASP.NET или какой-то другой серверный язык. Но теперь, когда «JavaScript набрал популярность», большая часть этого кода, который исторически был написан на другом языке, теперь написан на JavaScript, стирая границы между front-of-the-front-end и back-of-the-front. -end разработчиков, а также разработчиков back-of-the-front и традиционных back-end разработчиков.Так что стоит определить, что именно делает разработчик back-of-the-front.


Back-of-the-front-end разработчики

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

В их обязанности могут входить:

  • Написание бизнес-логики приложения для обработки таких вещей, как CRUD , а также для управления состоянием приложения, маршрутизацией, кешем, аутентификацией и т. Д.Короче говоря, разработчики внешнего интерфейса пишут код, необходимый для правильной работы приложения.
  • Подключение, интеграция и даже создание источников данных, служб и API . Это может включать в себя такие вещи, как получение, манипулирование и отображение контента из CMS или отправку данных в соответствующую службу, когда пользователь отправляет форму.
  • Использование кода пользовательского интерфейса , созданного разработчиками фронт-энда, для создания экранов и подключения реальных функциональных данных и сервисов.
  • Оптимизация производительности кода JavaScript для создания быстрого и отзывчивого приложения, которое быстро извлекает и отправляет / отправляет данные.
  • Написание сквозных, интеграционных и других тестов для обеспечения правильной работы приложения.
  • Создание архитектуры и управление инфраструктурой на основе JavaScript , такой как структуры узлов, инструменты и службы.
  • Управление компонентами DevOps , такими как сборщики JavaScript, инструменты развертывания, компоненты CI / CD и т. Д.
  • Работа с разработчиками внешнего интерфейса для обеспечения того, чтобы библиотека компонентов пользовательского интерфейса содержала все компоненты , варианты и перехватчики API, необходимые для создания приложения и всех его состояний.
  • Работа с командой разработчиков продукта для обеспечения точного представления всех состояний продукта в живом, дышащем приложении
  • Работа с другими внутренними разработчиками и ИТ-отделом для обеспечения наличия необходимой технической инфраструктуры и возможности приложения правильно интегрировать / взаимодействовать с внутренним кодом, отличным от JavaScript.

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

Некоторые соображения

  • Граница между front-of-the-end и back-of-the-end может быть нечеткой и сильно варьируется от разработчика к разработчику . Вполне возможно, что один разработчик сможет выполнять множество задач во всем спектре интерфейса. Но также стоит отметить, что это не очень распространено.
  • Эти роли и обязанности постоянно меняются , но общее разделение на «внешний вид» и «функциональность» по-прежнему является достойным разграничением.
  • Непосредственно потребляемая библиотека компонентов пользовательского интерфейса может служить в качестве здорового рукопожатия между интерфейсными разработчиками и разработчиками, выполняющими заднюю часть интерфейса, поскольку это создает четкое разделение между различными типами кода .

Вот и все! Это область, которой я увлекаюсь в течение долгого времени, поэтому я хотел бы услышать о вашем опыте плавания в этих водах. Вы разочарованный разработчик с полным стеком? Сдвинулась ли ваша организация в сторону разделения «передняя часть-передняя часть / задняя часть-передняя часть»? Не стесняйтесь обращаться к нам.

Frontend vs Backend

# В двух словах

На самом деле это не просто веб-приложения - при создании любого приложения вы будете иметь дело с частью этого приложения frontend и частью backend .

Но что это за детали? А зачем они нам?

Вкратце, это очень просто: интерфейс - это то, что видит пользователь (например, код HTML + CSS + JS, работающий в браузере), бэкэнд отвечает за тяжелую работу за кулисами .

Конечно, фронтенд и бэкэнд «разговаривают друг с другом» . Запросы Http отправляются из интерфейса в серверную часть для передачи данных, введенных пользователем, или получения данных из базы данных. Подробнее об этом через секунду!

Важно: серверная часть называется так, потому что работает не на устройстве пользователя (т.е. НЕ на мобильном телефоне или компьютере пользователя), а на каком-то удаленном сервере . Это означает: на сервере, принадлежащем вам, разработчику / поставщику веб-приложения.

Таким образом, мы могли бы также перевести интерфейс-бэкэнд на клиент-сервер .

TL; DR;

Фронтенд - это то, что видит пользователь, бэкэнд - это тяжелая работа и хранение данных на сервере.

Вы можете узнать все о бэкэнд-разработке в нашем курсе Node.js, фронтенд-разработка состоит из нескольких частей и языков программирования. Взгляните на наши CSS, JavaScript, а затем, в качестве следующего шага после JavaScript, Angular, React и Vue.js курсы!

Все эти курсы включены в наше членство Pro, начиная с всего за 19 долларов в месяц .

# Что где происходит? И почему?

У нас есть эти два конца, потому что ни один из них не может делать все самостоятельно.

Рассмотрим простой интернет-магазин, например Amazon.

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

Но как насчет всех данных, с которыми вы взаимодействуете? А как насчет продуктов, которые вы просматриваете?

Эти данные хранятся в вашем браузере или на вашем компьютере?

Это не так!

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

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

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

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

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

Конечно, как упоминалось ранее, в связке с бэкэндом.

Фронтенд и бэкэнд взаимодействуют друг с другом - через HTTP-запросы.

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

# Дело не только в хранении данных!

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

Это не так!

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

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

Вот несколько примеров бэкэнд-логики:

  • Длительные операции , которые замедляют UI
  • Взаимодействие с файловой системой - доступ к ней не предоставляется в браузере, например,
  • Сервер - проверка ввода на стороне - поскольку код на стороне клиента можно просматривать и редактировать
  • По той же причине: любой код, который взаимодействует с базой данных или использует учетные данные / ключи , которые не должны быть открыты посетителям веб-сайта (также см. статья и видео)

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

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

# Чему следует учиться?

Frontend-разработка состоит из нескольких частей и языков программирования.

Для сети вы создаете веб-сайты, которые загружаются и отображаются в браузере с помощью:

Это основные языки, которые вам нужны.

Но вы редко создадите большие клиентские приложения, используя только эти основы.

На самом деле вы также собираетесь выбрать фреймворк внешнего интерфейса - популярные варианты:

Если вы создаете мобильное приложение , вы собираетесь использовать либо Java, либо Kotlin для Android, либо Swift или ObjectiveC для разработки под iOS.

OR просто исследуйте альтернативы, такие как Flutter, React Native или Ionic (с Angular, с React), чтобы создавать настоящие мобильные приложения для обеих платформ с помощью всего одного языка программирования и одной базы кода!

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

Популярные варианты:

# Существуют ли веб-приложения с одним концом?

В большинстве веб-сайтов и веб-приложений вы работаете с обоих концов. Кстати, то же самое и с мобильными приложениями.

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

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

Подумайте о страницах портфолио, где вы просто описываете свои услуги (например,грамм. вы работаете консультантом). Или блоги, где вы просто пишете все статьи, используя только HTML + CSS + JS. В этом случае вам не нужна база данных.

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

Что такое только для бэкэнда ?

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

Это правда, но не все приложения, которые вы создаете, предназначены для использования конечными пользователями.

Возможно, вы создаете простой (REST) ​​API , который может использоваться другими разработчиками / предприятиями.

Возьмем для примера API Google Places: он позволяет преобразовывать адреса в координаты и наоборот (и многое другое).

Этот API предназначен для обмена данными.

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

# А как насчет полного стека?

Если вы занимаетесь веб-разработкой, возможно, вы слышали и о «полной» разработке.

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

Это, конечно, может быть большим преимуществом для фрилансера или небольшого стартапа / компании!

Что такое Front-end и back-end

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

Что означают термины «интерфейс» и «бэкэнд»?


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

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

Front-end и back-end подразумевают разные вещи в разных типах приложений. Давайте рассмотрим наиболее распространенные и поймем, что эти термины означают для каждого типа: веб-приложения, мобильные приложения и расширения веб-браузера.

1. Веб-приложение

В разработке веб-приложений может быть несколько подходов, которые сильно зависят от используемого технологического стека. Вот наш выбор технологий для разработки веб-приложений: для внутренней (серверной) разработки мы используем язык Python и веб-фреймворк с открытым исходным кодом Django. Для построения реляционных баз данных мы используем систему управления базами данных с открытым исходным кодом PostgreSQL или Oracle RDBMS. Для нереляционных баз данных - MongoDB. Для крупномасштабной обработки данных мы используем Hadoop.Для интерфейсной разработки мы используем HTML, CSS, JavaScript, TypeScript вместе с фреймворками с открытым исходным кодом на основе JavaScript, такими как AngularJS и React.

Вот как выглядит структура типичного веб-приложения на основе Python:

Веб-приложение состоит из двух отдельных частей: внешней и внутренней. Внутренний программный код генерирует HTTP-ответ, обычно текстовый документ в формате HTML, загружаемый веб-браузером. Сам ответ содержит интерфейсный код, который выполняется на пользовательском устройстве в веб-браузере: в соответствии с разметкой HTML и стилями CSS страница визуализируется на дисплее, поведение страницы (например,g., перетаскивание, переходы в другие состояния, проверка пользовательского ввода и т. д.) кодируется на языке программирования JavaScript. Типичный веб-сервер имеет программное обеспечение веб-сервера, такое как Nginx или Apache (мы предпочитаем первый), программное обеспечение сервера приложений, которое выполняет программный код (наш выбор - uWSGI) и программное обеспечение для хранения данных - базы данных.


2. Мобильное приложение

Как уже следует из названия, мобильные приложения разработаны для работы на мобильных устройствах и планшетах.В настоящее время большинство мобильных приложений разработано для операционных систем Android и iOS.

Есть два подхода к разработке таких приложений. При первом подходе для конкретной платформы разрабатываются два отдельных приложения с использованием языков программирования и сред разработки, предоставленных разработчиками платформы (например, iOS использует язык программирования Swift, а для Android - Kotlin). Такие приложения называются «собственными приложениями». При втором подходе пишется одно приложение, которое можно использовать на обеих платформах (Android и iOS).Такие приложения называются «гибридными» или «кроссплатформенными». Такие приложения представляют собой просто веб-приложения, завернутые в нативную оболочку, при этом они выглядят и ощущаются как нативные. Преимущество гибридных приложений - меньшее время разработки и меньшие затраты (в зависимости от функциональности время разработки двух собственных приложений по сравнению с одним гибридным приложением может быть на 30-40 процентов больше). Преимущество нативных приложений заключается в их собственном пользовательском интерфейсе и улучшенном пользовательском интерфейсе, а также в доступе к аппаратному / программному обеспечению устройства (GPS, местоположение, встряхивание, календарь и т. Д.).

Для простых мобильных приложений (где нет взаимодействия с сервером) роль back-end и front-end разработчиков выполняет один человек, разработчик Android или iOS.

Примером такого простого приложения может быть калькулятор, фонарик или будильник, которые можно найти на любом телефоне.

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


3. Расширение веб-браузера

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

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

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