Фронтенд и бэкенд на простом языке. Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют

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

Фронтненд - браузер, бекенд - сервер

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

В Web-разработке, например, в качестве фронтенда выступают HTML-вёрстка, стили CSS и JavaScript, а в качестве бекенда - серверная часть, которую обычно программируют на PHP или ASP.net. Грубо говоря, всё то, что исполняется на стороне клиента - front-end , а то, что на стороне сервера – back-end . Кстати, поскольку пользователи не видят бекенд, то программисты могут поменять его «втихую». Twitter, например, в качестве бекенда некоторое время использовал Ruby on Rails, но в 2011 году перешел на Java. Готов поспорить, большинство даже и не заметило этого!

Фронтненд - статика, бекенд - программный код

В среде разработчиков высоконагруженных систем (highload-разработчиков) термином front-end называют ту программную часть, которая непосредственно «отдаёт» контент. Например, на больших проектах часто программную серверную часть представляют 2 веб-сервера - Apache и nginx. Nginx принимает запросы и, в случае статического файла, (изображение, файл css, js или xml) сразу же отдаёт его содержимое, а в случае PHP-скрипта, отправляет его к серверу Apache, который уже умеет обрабатывать PHP. Тут nginx - это фронтенд , а Apache - бекенд . Конечно, высоконагруженные системы имеют сложную инфраструктуру, и порой представляют собой много серверов, разнесённых по разным континентам, но общую суть вы уловили.

Фронтненд - открытые данные, бекенд - админка

Также, когда говорят об CMS, административную часть называют back-end , а «лицевую» часть сайта - front-end . С такой трактовкой термина я сталкивался реже всего, однако многие его применяют повсеместно.

Так что же такое фронтенд и бекенд?

Если вы не лишены логического мышления, то поймёте в чём нюанс: в одной сфере один и тот же термин имеет 3 (!) различных значения:

• Браузерная / серверная часть (самый популярный вариант);
• Серверная часть, отдающая статику / серверная часть, выполняющая код (highload);
• Часть сайта для пользователей / часть сайта для администраторов и модераторов.

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

Чем отличается backend разработка

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

Виды backend разработки

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

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

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

Что нужно знать backend разработчику?

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

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

Для создания серверной части разработчик должен владеть такими backend языками программирования:

• javascript;
• java;
• python.

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

Среди backend фреймворков наиболее популярны следующие:

• yii2;
• node js.

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

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

Современный front-end developer должен легко владеть html5 , css3 , JavaScript (и как минимум JQuery). У каждого front-end специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными framework-ами, такими как: Twitter, Bootstrap, Foundation 3, Compass.

Что необходимо знать frond-end разработчику:

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

Вот основные базовые навыки:

• JavaScript

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

• Система управления версиями файлов GIT

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

• Модульный принцип организации, управление зависимостями и тестовые сборки

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

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

Если же код пишется на чистом CSS — то есть не используется препроцессор вроде Sass или Stylus — RequireJS также поможет организовать необходимые CSS файлы по модульному принципу. Просто необходимо использовать @import в основном файле, чтобы загрузить зависимости для разработки и затем запустить средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.

• Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались. Если научиться ими правильно пользоваться, то они могут существенно улучшить опыт разработки. Стоит выбрать один браузер, чьи инструменты разработчика будут использоваться на постоянной основе, но не надо отказываться полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости USB-подключения, а также возможность сохранять и использовать пользовательские цветовые палитры.

• Командная строка

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

1. ssh для подключения к другой машине или серверу
2. scp для копирования файлов на другую машину или сервер
3. ack или grep для поиска файлов в проекте по строке или шаблону
4. find для обнаружения файлов, чьи названия совпадают с данным шаблоном
5. git для выполнения хотя бы базовых действий вроде add, commit, status и pull
6. brew для использования Homebrew для установки пакетов
7. npm для установки пакетов Node
8. gem для установки пакетов Ruby

Тестирование

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

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

Автоматизация процесса

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

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

Для начала давайте разберёмся, что же означает термин «фронтэнд», и кто такой фронтэнд-разработчик?

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

Приведу краткий список наиболее часто ассоциируемых с фронтэнд-разработкой понятий и технологий:
HTML , CSS , JavaScript , jQuery , Node.js , AJAX , SPA …

Разберём по полочкам, чем занимается типичный фронтэнд-разработчик.

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

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

Хотите поставить на главную страницу своего сайта красивую галерею «как вот на том сайтике»? Спросите фронтэнд-разработчика! Он без раздумий назовёт вам дюжину готовых решений, предложит варианты кастомизации стандартных плагинов, и всё это сразу с учётом совместимости с вашей CMS и поддерживаемых устройств/браузеров.

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

Внимание к мелочам и чувство прекрасного — отличительные черты фронтэнд-разработчика.

На этом месте давайте обозначим грань, разделяющую верстальщика и фронтэнд-разработчика. Не будем вдаваться в подробности работы верстальщика. Основная его задача — нарезать макет. Если далее он предпочитает брать на себя часть бекэнд-разработки (PHP, Python...), то он развивается в сторону бекэнд-программиста. Если он больше уделяет внимание программированию клиентской части (JS), то, возможно, это будущий фронтэнд-разработчик. Может случиться и так, что верстальщик уйдёт в сторону дизайна, что тоже весьма неплохо — практические навыки вёрстки станут его весомым преимуществом относительно классических дизайнеров «по призванию».

Вторая важная обязанность фронтэнд-разработчика — обеспечение должного уровня юзабилити и опыта взаимодействия (UI и UX). Безусловно, об этих вещах должен в первую очередь думать дизайнер. Но в одиночку дизайнер не всегда может спроектировать такой интерфейс, который будет понятен в использовании и прост в реализации, по всё той же причине незнания технической части. Хороший фронтэнд-разработчик обладает навыками дизайнера и UX-специалиста . Другими словами, он знает как сделать красивый и удобный пользовательский интерфейс. Но ни в коем случае не отнимает хлеб у дизайнеров и UX-специалистов. А в случае отсутствия в команде любого из них — может их частично заменять.

Приведу жизненный пример.
Дизайнер больше не занимается проектом, а заказчик решил переделать внешний вид и логику работы какой-либо части своего интернет-магазина на Битриксе.
1. Менеджер проекта идет к программисту.
2. Программист говорит «нужна вёрстка, ТЗ и платное решение из Маркетплейса, потому что это нестандартный функционал для магазина» и отправляет менеджера к верстальщику.
3. Верстальщик говорит «нужен макет и нестандартный плагин для такой галереи, потому что этого нет в нашем готовом решении».
Менеджер оказывается в сложной ситуации. Клиент ждет результат, бюджет минимальный, рисовать некому. Как показывает практика, если доверить спасение подобной ситуации бекэнд-программисту, то на выходе клиент получит нечто, вроде бы работающее, но ужасное настолько, что дизайнер побелел бы, увидев такое, а пользователь ушел бы с сайта, приняв это за один большой баг. Верстальщик не справился бы с задачей однозначно. Малой кровью спасти ситуацию может только опытный фронтэнд-разработчик. Без лишней суеты он перепишет похожий компонент под поставленную задачу, переверстает стандартную галерею и добавит элементы интерактивности так, что решение задачи устроит клиента и понравится пользователям, а менеджер в очередной раз выдохнет с облегчением.

Наш герой — специалист широкого профиля. Ему интересен весь спектр веб-технологий. Не обходит вниманием он и серверную разработку . Помимо родного JS фронтэнд-разработчик знает на среднем уровне хотя бы один серверный язык программирования, может выполнять значительную часть задач, которые обычно выполняет бекэнд-программист. Знает как обращаться с таким зверем, как командная строка (консоль, терминал), и даже может настроить веб-сервер. Серверная разработка на платформе Node.js — не экзотика, а, как минимум, повод ответить всем «пэхэпэшникам» и «питонщикам» мол мы тоже не лыком шиты.

Одна из основных задач фронтэнд-разработчика — это, конечно, разработка на JavaScript , начиная от мини-плагинов для галереи, заканчивая полноценными веб-сервисами. Здесь вновь стоит упомянуть Node.js, в последние годы играющий огромную роль как в разработке клиентской части веб-приложений, так и серверной. Сотни клиентских фреймворков и библиотек, таких как, jQuery, Angular, Backbone, Knockout, Ember и др. — бескрайний простор для развития техник построения архитектуры приложений, улучшения качества и расширения спектра решаемых приложениями задач.

С развитием платформы Node.js стало популярно понятие «full-stack developer» — в нашем случае это JS-разработчик, использующий в своих проектах JavaScript для всех возможных целей. Сервер, база данных, клиентские шаблоны — всё это работает с данными в формате JSON, что весьма выгодно смотрится на фоне того же PHP, где «матёрые программисты» пишут кашу из PHP/Smarty/JS/CSS, которую бывает не под силу расхлебать уже через месяц после сдачи проекта.

Инструменты фронтэнд-разработчика — так же отдельная тема для разговора. Для Node.js было написано множество замечательных утилит, работающих в духе «одна программа — одна задача». Автоматизация рутинных задач с помощью Grunt стала неотъемлемой частью работы. Проверка кода, запуск тестов, автоматический деплой, обфускация и минификация, препроцессинг CSS и многие другие задачи решаются «на ура» всего в несколько кликов.

Chrome Dev Tools и Firebug — вне конкуренции среди инструментов для клиентской разработки. В умелых руках нашего героя эти штуки позволяют творить чудеса. Ваш сайт глючит и медленно загружается, из-за чего подвергается пессимизации в поисковиках? Хороший фронтэнд-разработчик с помощью Firebug за пару минут найдет все тонкие места в производительности сайта. К слову, и про SEO-оптимизацию наш герой не забывает. Случалось так, что товарищи по цеху в лице верстальщика и программиста наставили в коде страницы прекрасных тегов

, а все картинки имели атрибут alt="image001.jpg" . Они, безусловно, получат втык и под чутким надзором будут исправлять это.

Вывод

Кратко перечислим по порядку изложенные выше навыки хорошего фронтэнд-разработчика:

1. Валидная pixel-perfect вёрстка
2. Проектирование интерфейсов
3. Работа с серверными технологиями
4. JavaScript во всех ипостасях
5. Оптимизация веб-приложений

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

Современное IT приобрело своё лицо с момента появления жесткой конкуренции в интернете. Если раньше в приличную студию набирали людей, которые имеют знания в каждой сфере: будь это html и css (создание макета сайта) или php (программирование, создание баз данных). Сейчас же все изменилось. Начинают цениться узконаправленные специалисты. Один занимается только дизайном, другой только программист…

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

Когда вы попадаете на сайт, на качественной сделанный сайт, что вы видите в первую очередь? Правильно: красивый дизайн, удобную навигацию (меню), читабельный и уникальный текст, адаптацию под мобильные устройства, в конце концов!

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

Все фронтенды придерживаются правил UX дизайна. На английском языке — Users experience, на русском — «опыт пользователя». Если сказать «что это» и подытожить вышесказанное: фрондент-специалист разрабатывает пользовательский интерфейс, не просто красивый дизайн, но и функциональный. Это и есть UX дизайн.

Бекэнд

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

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

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

Full stack

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

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

C уважением, Ваша Суть!