Что такое backend и frontend разработчики. 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 настроить проект со встроенной поддержкой модульного тестирования — это один из примеров автоматизации процессов. Реальность фронт-енд-разработки такова, что разработчику приходится выполнять множество повторяющихся действий, но, как говорится: хороший разработчик — ленивый разработчик. Если какое-либо действие выполняется больше трёх раз, пора его автоматизировать.

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

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

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

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

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

Теперь когда мой интерес вам понятен, надеюсь у нас сложился некоторый уровень доверия. Давайте перейдем к фактам и цифрам, где я попробую объяснить почему цифры именно такие и что же такое front-end в конце концов.

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

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

Эти строчки говорят нам что front-end тоже самое что и верстка, но тем не менее у нас есть верстальщик, а есть фронтендщик, и разница зарплат колоссальна.

В принципе нам неважно что по научному правильно «front-end», нам важно понять за что платят большую зарплату,

Небольшая выборка по требованиям к вакансиям
Сводная таблица самых свежих вакансий с work.ua в одной таблице, вакансии до года опыта.

Навык	Встречается в вакансиях верстальщик?	Встречается в вакансиях фронтэндщик?
WordPress и прочие CMS	1	1
Дизайн	1	0
Photoshop	3	0
Html/css	5	4
JavaScript(jQuery)	3	4
PURE JavaScript(Prototype and etc)	0	4
Angular.js, React.js, Ember.js and ec	0	5
Node.js	0	2
Bootstrap	2	2
SASS / LESS	0	2
Git	0	2

В среднем, по просмотренным вакансиям, зп в гривневом эквиваленте
верстальщика от 5 тыс грв
фронтэндщика от 12 тыс грв

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

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

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

А вот знания PURE JavaScript от таких кандидатов не требуют(вообще ни разу), максимум jQuery или пишут что-то вроде «JS на уровне подключить», прошу обратить внимание на это.

Фронтендщик
На всех вакансиях, тут встречаются почти те же навыки, что и для верстальщика, но посмотрите сколько всего появилось связанного с JavaScript.

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

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

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

PURE JavaScript, PURE значит чистый, это не какой-то там особый JS, это просто значит что вы должны писать простые вещи на JS без применения библиотек.

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

SASS/LESS, Git и прочие штуковины, опять же не встречались в вакансиях верстальщика.

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

1. все тоже что и верстальщик
2. посреди ночи разбуженным, отвечать на любые простые вопросы по PURE JavaScript
3. знать любой из распространенных JS фреймворков (не jQuery)
4. очень желательно знать Git, SASS/LESS, вещи не сложные, но очень распостраненные.
5. Node.js тоже будет плюсом, но еще не так много студий научились с ним работать, не каждая студия посчитает его весомым бонусом, потому желательно на нем научится делать к примеру мобильные приложения или браузерные игры, таким образом вы откроете фирме сразу новую нишу и они с радостью возьмут вас.

А вот чему учат курсы с первой страницы гугла по «курсы front-end киев»

Навык	Количество вхождений в программы курсов
HTML\CSS	9
bootstrap	4
jQuery	7
PURE JavaScript (основы)	6
PURE JavaScript (продвинуто, ооп и все такое)	2
PURE JavaScript (всякие крутые штуки, т. е. супер продвинуто)	1
Angular.js, React.js, Ember.js	3
SASS / LESS	3
Git	2

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

В среднем все курсы с неплохой программой длятся около 6 месяцев.
- Никто не забыл включить в курс HTML, кроме одной компании, они на курсе Front-end, с какого-то перепугу учат Node.js, минуя браузерный JavaScript.
- Многие учат jQuery, не забывая добавить в программу Git, зато только треть курсов включили в программу фреймворк из списка Angular\React\Ember.
- Ни одна программа не имела полный список навыков, из тех что мы видели в вакансиях.
- Почти все курсы называли программу «курс Front-end» или похожее сочетание со словом «Front-end», но только половина имели в программе JS, в нескольких случаях JS предлагались как «некий продвинутый курс Front-end для гуру», то есть, базовые навыки маскировались под продвинутые. Кстати, 30% курсов не предлагали ничего кроме HTML\CSS, то есть не было даже jQuery.

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

Кстати кому интересны конкретные курсы, шлите ссылку в скайп, проанализирую, опубликую краткое резюме по их программе.

«Трудоустраиваем», серьезно? =)

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

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

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

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

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

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

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

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

Давайте еще немного посчитаем, представьте что таких курсов больше 20 в одном только Киеве, и все обещают трудоустроить. 400 человек трудоустроить на хотя бы 500 долл, это 200 тыс. долл. в месяц минимум, и каждые 3 месяца сума растет еще на 200 тыс долл. Минимум. В год выйдет 15 600 000 долларов, а на следующий год уже будет около 600 000 000 долларов, так как прогрессия геометрическая.

Представили? Теперь скажите насколько это реально может быть правдой, ни насколько, это просто обман.

Как тогда так выходит?
Даже на плохих курсах, всегда в группе есть 1-2 человека что занимались сами, выучились что называется не благодаря а вопреки, трудоустроились, за счет навыков. Заключив договор с курсами, они разрешили написать курсам что этих 2 человека выучились благодаря им, хотя это и обман.

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

У вас тоже трудоустраивают?
Кто-то зоркий явно заметит что при нашей веб студии тоже есть курсы, но как же тогда трудоустройство? Объясняю, наши курсы при веб студии, мы готовим специалистов для себя а не на общий рынок трудоустройства. Это выгодно так как даже опытного специалиста приходится доучивать\переучивать под особенности работы конкретных веб студий.

Практика распространенная, вы можете найти много таких студий с курсами , на правах рекламы я тут размещу и курсы при нашей студии , сайт доделывают, но самое главное - программы курсов, там есть. Вернемся к теме, собственно низкая квалификация от типовых курсов и заставляет создавать веб студиям свои курсы, но в рекламу сильно возможности вкладываться у таких курсов нет. Почему? Вот например, вступительный курс стоит 1800 в месяц, максимально 15 человек, итого 22500 в месяц, деньжищи! =D шучу. Только зарплата преподавателя это 7200, аренда 32 тысячи(для курсов пришлось расширить офис до 200 квадратов), амортизация, бесплатный коворкинг для студентов, с рекламой иногда идет в минус даже, и деньги берутся уже с бюджета студии а не курсов.

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

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

В двух словах - Дефицит кадров.

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

А теперь JS. Так сложилась судьба, что JS был создан за 10 дней.

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

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

Давайте посмотрите на графики развития популярности JS

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

Почему? В целом кучу народу среди программистов с наскоку пытались изучить JS, у них ничего не выходило, потому что как говорил ранее, они пытались его изучить с наскоку, как очередной C даже не читая документацию. Они использовали те же приемы что в других языках, те же операторы и конечно у них это все не работало вообще или работало но не так как хотелось бы. Не разобравшись, эти люди считали JS некой эзотерической штукой, а все баги списывали на производителей браузеров, а вот открыли документацию единицы, ведь не нубы, опытные программисты, можно не читать, ведь на первый взгляд, все так похоже на то что они учили раньше.

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

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

Но маркетинг развивался и требовал нового! То здесь, то там, проскакивали разные классные штуки сделанные на JS и бизнес начал давить на программистов, ответы вроде «нормально сделать нельзя» встречали достойные «а вон там сделали, и говорят за 15 минут, без багов». В целом с 2011 года примерно, интерес к JS начал расти в геометрической прогрессии, а все потому что некоторых программистов таки заставили почитать документацию, они прочитали, прониклись и обалдели. Кстати я был среди них.

Итак, изучение JS остается сложной задачей для любого уже состоявшегося программиста, по прежнему существует мнение «JS баганутая, эзотерическая штука», и около 15 лет новые специалисты по JS появлялись очень редко, что у нас в результате? Кадровый голод.

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

Верстальщик и программист, художник и инженер в одном лице. В данном посте я поведаю миру о герое меча и магии стилей и кода, делающем веб красивее и быстрее — фронтэнд-разработчике. Пост будет интересен, в первую очередь, всем тем, кто хочет понять, чем фронтэнд-разработчики отличаются от верстальщиков, бекэнд-разработчиков, 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. Оптимизация веб-приложений

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

Сегодня я хотел бы рассказать, что такое “фронтенд" и "бэкэнд” в маркетинге и продажах.

Правильно писать «front-end», «back-end», но мы, русскоговорящие люди, уже привыкли писать по-русски: фронт-энд, или фронтенд, и бэкэнд, или бэкенд.

Так что такое front-end и back-end?

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

Итак, фронтенд — это такой продукт, которому присущи следующие качества:

1. Низкая цена, либо он бесплатен (сейчас бесплатный фронтенд чаще называют «лид-магнит» или лидмагнит — об этом ниже).
2. Высокая востребованность на рынке. Иными словами, данный продукт должен быть либо либо не товаром из ассортимента компании, а специально созданным продуктом, привлекающим внимание целевой аудитории.
3. Встроенность в цепочку продаж.

С этим пунктом немного сложнее, сейчас объясню.

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

Почему?

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

Да, чуть не забыл.

Основной товар называется «бэкенд», back-end . Понятие фронтенд имеет смысл рассматривать только в сочетании с понятием бэкенд.

В идеале всё происходит следующим образом: люди покупают фронтенд и оказываются втянуты в своеобразный конвейер продаж. А там – как говорит Андрей Парабеллум – «бэкенд бэкендом погоняет». СтОит коготку у птички увязнуть…

Понятно, каков алгоритм работы успешного бизнеса?

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

Стал уже классикой пример с McDonald’s.

McDonald’s продает гамбургеры по себестоимости, а покупатели приобретают массу других лакомств по цене с хорошей наценкой. Тот же чай – ему красная цена несколько копеек, а сколько он стоит в McDonald’s?

Еще один пример — это продажа автомобилей в автосалоне. Не столь велика наценка на автомобиль (фронтенд), сколь велика наценка на сервисные услуги и комплектующие.

Таких примеров можно привезти массу.

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

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

Пару слов о том, что такое лид-магнит.

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

Чтобы долго не объяснять, посмотрите ниже и вправо.

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

Ниже — предложение скачать чек-лист оценки бизнеса.

Кстати, а какие лид-магниты встроены в вашем бизнесе?

______________________________________________

Некоторое время назад в нашем городе прошла «Кузбасская ярмарка» — крупнейший предпринимательский форум Кемеровской области.

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

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

Результаты обескуражили.

Из 87 компаний лишь 3 (а это 3,4%) ответили положительно на все вопросы.

96,6% — недотягивают либо в выполнении современных требований, либо собственники вообще не понимают, о чём их спрашивают.

Получается, минимум 84 компании в Кемеровской области работают, проваливаясь по ряду видимых, измеримых параметров!

И почему-то мне кажется, что эти 3 «положительные» анкеты были заполнены людьми, которые не хотели показывать истинное положение дел в фирме. Типа, «у нас всё хорошо».

А ведь вопросы-то о том , как должен работать среднестатистический бизнес в 21 веке.

Обычный, а не инопланетный.

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

А почему бы и нет? Вопросов всего 9. Ответить на них не займёт много времени.

Ну что, проверите себя?

Ниже я расскажу, чем отличается этот тест от тысяч других.

Чем необычен этот тест?

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

Не хотите — можете просто поотвечать на вопросы.

Что получат те , кто вышлет мне заполненную анкету?

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

По скайпу или лично.

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

Часто мне приходилось слышать оба этих термина, причём люди, которые ими оперировали, порой даже близко не понимали их сути. 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);
• Часть сайта для пользователей / часть сайта для администраторов и модераторов.