Профессия: фронтенд-разработчик

Frontend developer – кто это

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

В работе необходимо использовать:

• JavaScript (Джава или Ява);
• HTML;
• CSS.

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

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

Встречаются вакансии frontend junior, middle и senior. Чем больше знаний и опыта, тем выше level и заработная плата. Чаще компании ищут junior frontend developer, специалиста с базовыми знаниями обучают под себя, дают навыки создания дизайна. Нередко джуны, получив основы в компании, уходят в «свободное плавание».

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

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

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

1. Разработка HTML-страницы сайта. Проводится с использованием как готовых макетов, так и по лично разработанным дизайн-макетам.
2. Верстка как самих сайтов разной сложности и вложенности, так и работа с шаблонами. Необходимо знание популярных CMS.
3. Разработка и установка скриптов для интерфейса. Настройка и визуализация анимации страниц, переходов, баннеров.
4. Создание пользовательского интерфейса для положительного опыта взаимодействия юзеров с сайтом.

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

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

Кто такой backend-разработчик

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

Еще они отвечают за:

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

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

Более 100 крутых уроков, тестов и тренажеров для развития мозга

Начать развиваться

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

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

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

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

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

Может, труд бэкенд-разработчика и незаметен, но без него будет бесполезна и работа фронтенд-специалиста – ничего попросту не будет функционировать.

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

Где обучиться профессии с нуля?

Существуют курсы, на которых можно учиться через интернет. Они позволяют с нуля освоить теорию и получить практику, необходимую для начала карьеры. Если вы хотите работать back end разработчиком, можно записаться в Skillbox или Нетологию:

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

Какой вы программист?

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

Чтобы выбор был еще проще, пройдите бесплатный тренажер «

Инструменты

Теперь вы знаете, что за пользовательскую часть сайта отвечает frontend-разработка. Главная задача разработчика — создать понятный интерфейс, с которым будет легко взаимодействовать. Frontend — это не только дизайн, но и код, который помогает взаимодействовать с пользователем.

Какие инструменты нужны, чтобы создать клиентскую часть сайта?

HTML — содержание сайта

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

 CSS — оформление сайта

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

JavaScript — интерактивность сайта

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

jQuery — фреймворк языка JavaScript

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

Чем занимаются бэкенд-разработчики

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

Сформировать единые требования к знаниям бэкендера сложнее, ведь бэкенд может быть написан на разных языках. Самые распространённые — Python, Java, Go, Rust, C++, Ruby, PHP, JavaScript и TypeScript (технология NodeJS).

Для каждого из языков есть свои фреймворки: в Python это Django, в Java — Spring, в Ruby — Ruby on Rails, а в JavaScript — Express. Их тоже нужно знать. Кроме того, специалисту нужен опыт работы как минимум с одной реляционной (Postgress, MySQL) и с одной нереляционной базой данных (MongoDB, Redis). 

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

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

На практике для работы с базами данных используют специальные инструменты: ORM для реляционных БД и ODM — для нереляционных. Они позволяют обрабатывать  информацию в формате привычных для разработчиков объектов — например, списков. Кроме того, у таких инструментов есть удобный интерфейс для базовых операций: создания, чтения, обновления и удаления данных.

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

from django.db import models

# Категории статей 

class ArticleCategory(models.Model): 
  category = models.CharField(max_length=255, verbose_name='Категория') 
  class Meta: 
    verbose_name = 'Категория статей' 
    verbose_name_plural = 'Категории статей' 
 
  def __str__(self): 
    return self.category 

# Сама статья 

class Article(models.Model): 
  link_category = models.ForeignKey('ArticleCategory', on_delete=models.CASCADE,   verbose_name='Категория') 
  title = models.CharField(max_length=255, blank=True, verbose_name='Заголовок') 
  text = models.TextField(blank=True, verbose_name='Текст') 
  date = models.DateField(blank=True, null=True, verbose_name='Дата публикации') 
  authors = models.CharField(max_length=500, blank=True, null=True, verbose_name='Авторы') 

  class Meta: 
    verbose_name = 'Статья' 
    verbose_name_plural = 'Статьи' 

  def __str__(self): 
    return self.title

Чтобы решить эту задачу, в файле models.ру мы создаём модели данных для категорий статей и самих материалов. Сначала описываем встроенными инструментам Django, какие поля будут в каждой модели. Затем через ForeignKey выстраиваем связь между статьями и категориями. Также задаем вспомогательные настройки: максимальную длину строк, обязательность или необязательность полей, описываем, как эта конструкция будет отображаться на русском языке в админке.

Где работает и сколько получает, карьерный рост

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

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

Сеньор – опытный разработчик, знающий разработку проектов на различных уровнях. Senior frontend developer одна из самых высокооплачиваемых стадий вакансии frontend разработки.

Зарплата фронтенд разработчика колеблется от 40 000 рублей и практически не имеет потолка. Напрямую зависит от умений и навыков специалиста.

Средняя зарплата через год работы для juniors, которые обладают качественным portfolio колеблется от 70 000 рублей. Большинство вакансий предполагают работу из дома. Средний потолок 250 000 рублей, но при работе на фрилансе уровень верхней границы отсутствует.

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

• предприятия, создающие софт для бизнеса;
• IT-компании;
• веб-студии;
• стартапы;
• агентства аутсорсинга.

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

1. Вертикальный. Получение новой должности, стандартное продвижение по карьерной лестнице.
2. Горизонтальный. Постоянное развитие навыков, повышение от джуна до сеньора. Чем выше статус, тем выше оплата за услуги.
3. Диверсификационный. Обретение новых навыков в смежной специальности с последующей переквалификацией.

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

Поэтому важно постоянно совершенствоваться и развивать свои навыки, расти как в плане личностных качеств, так и в освоении нового софта

Front-end, внешний интерфейс

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

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

Фронтенд-программирование

Чтобы быть разработчиком UI-дизайна, вам не нужны навыки внутренней разработки. Сайты, созданные разработчиками внешних интерфейсов, не будут взаимодействовать с информацией, хранящейся в базе данных, для обеспечения их работоспособности. Содержимое будет фиксированным: большие фрагменты новых данных не будут загружаться постоянно. Фронтенд-программирование включает в себя HTML, CSS и Javascript. Хотя jQuery выходит из моды (современные браузеры теперь могут выполнять ту же работу, но гораздо быстрее, чем jQuery), многие проекты все еще используют библиотеку JavaScript.

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

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

Предыстория

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

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

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

Как строится работа над проектом

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

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

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

Например, ускорять его», — говорит Алексей Шаграев из Яндекс.Поиска.

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

«Могу рассказать на примере команды Яндекс.Практикума. Я как заказчик для бэкенда говорю: «Нам нужно, чтобы платформа умела делать то-то и то-то. Например, чтобы я вводила код в окошко, а платформа мне что-то отвечала». Дальше мы садимся с бэкендом и обсуждаем задачу: что нужно сделать, как это реализовать, какие есть ограничения. Мы можем выбирать решение вместе, потому что я и моя команда понимаем в разработке. Иначе у бэкендеров была бы дополнительная задача — объяснить нам как заказчикам особенности каждого решения», — рассказывает София Техажева.

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

Если проект начинают с нуля, то шаги для бэкендера будут такими:

• Выбрать язык. Python, C++, Java, PHP — это основные языки, на которых пишут бэкенд. Так, на Java написано большинство банковских систем — этот язык используют в Райффайзенбанке и Сбербанке. На PHP создана сеть Badoo и часть сервиса ВКонтакте. Чаще всего это исторически обусловленные решения. Когда в компании уже пять лет пишут на Java, сложно переводить огромный массив кода на другой язык.
• Выбрать инструменты. Например, базу данных или фреймворк. Набор этих инструментов плюс языки, которые бэкендер выбирает, чтобы строить свой двигатель, все вместе называются стек технологий. Стеки бывают разные, в зависимости от задач и традиций компании.
• Написать код. Здесь бэкендер пользуется инструментами для создания версий, тестирования и хранения данных.

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

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

«В больших компаниях бэкендер растет так: вначале он действует как механик — что-то чинит, вставляет новые части. А обучение и опыт приводят к тому, что он начинает проектировать новые структуры самостоятельно», — объясняет София Техажева.

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

Что нужно для старта

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

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

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

Важно, насколько человек готов не сдаваться и разбираться, когда что-то не получается», — говорит София Техажева про задачи факультета бэкенд-разработки Яндекс.Практикума

«Я не думаю, что разработка требует какого-то особого строения интеллекта. Такое мнение было распространено в прошлом, но сейчас его уже практически никто не разделяет», — считает Алексей Шаграев.

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

Кто такой бэкендер?

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

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

Работа фронтенда и бэкенда видна в любых взаимодействиях с приложением или сайтом. Например, вы подписываетесь на рассылку. «Фронтенд отвечает за то, что берет адрес, который пользователь ввел, и отправляет его на сервер. А сервер принимает адрес, парсит его (изучает и понимает, какой это провайдер), обращается к почтовому провайдеру (провайдер отвечает, что такой адрес существует) и формирует сообщение, с помощью которого провайдер скажет уже другой системе, что на этот адрес нужно отправить письма. Бэкендер отвечает за всё, что происходит после того, как пользователь ввел адрес в строку и данные ушли на сервер», — объясняет Виктор Мамлютов, системный аналитик компании Норбит.

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

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

«Бэкенд — это та часть, которая на вопрос «А можно ли сделать вот так?» отвечает: «Можно сделать всё что угодно, просто на это уйдет разное количество временны́х или человеческих ресурсов»»,  — Виктор Мамлютов, системный аналитик, компании Норбит.

Кто это?

• обеспечение корректной работы всех функций сайта и его вычислительной логики;
• организация и работа с базами данных посредством СУБД;
• разработка базовой логики и алгоритмов работы приложения;
• API;
• необходимые интеграции с внешними сервисами;
• тестирование и отладка приложения и отдельных компонентов.

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

Как стать back end разработчиком? Что нужно знать и уметь?

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

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

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

1. Языки программирования, например, PHP, Ruby, Python, Java, JavaScript / Node.js. PHP – самый популярный язык серверного программирования.

2. Технологию AJAX, позволяющую обновлять данные в браузере без перезагрузки страницы.

3. Базы данных MySQL, PostgreSQL, MongoDB и другие.

4. Принципы работы UNIX-систем.

5. Принципы ООП (объектно-ориентированное программирование).

6. Фреймворки – наборы скриптов, ускоряющих разработку веб-сайтов.

7. Работу с системами контроля версий Git.

Лучшие книги и средства обучения

• Стив Макконнелл «Совершенный код». Просто читайте эту книгу и впитывайте то, что там написано. Вы сразу (нет, не сразу) поймёте, что такое грамотная разработка, и чем она отличается от говнокода.
• htmlbook.ru — просто добавьте этот сайт в закладки, закреплённое и в своё сердце. Это великолепная энциклопедия веб-разработчика на русском языке с адекватной и удобной структурой. 
• Книги Кайла Симпсона — ищите то, что вам нужно и то что актуальной даты издания. Он очень круто пишет и структурирует информацию о JavaScript.
• Хавербеке Марейн «Выразительный JavaScript. Современное веб-программирование» — практически ценная книга от настоящего профессионала. Если не ошибаюсь, у «Питера» пережила издание в 2019 году, свежак.
• webref.ru — очень классный сайт для разработчиков веба, разбирайтесь, обучайтесь. 
• Книги по вашей технологии — переводные или в оригинале (ищите O’Reilly).
• codecademy.com — люблю этот сайт и иногда использую для поддержания мозгов в порядке. Интерактивный сайт для обучения разработке на разных языках программирования на английском, с самого низкого, нулевого, уровня. Есть базовый бесплатный курс, есть платный — 15$ в месяц. Нравится общая интерактивность, значки, ачивки и постепенное нарастание сложности задач. 
• htmlacademy.ru — есть бесплатные курсы, части курсов и блог. Берите все знания, что сможете унести.
• Бесплатные курсы и видео, которых бесконечно много на Youtube на русском и английском языках. Просто слушайте, повторяйте, систематизируйте знания. Для начала подойдут любые, очень скоро вы научитесь отличать крутые вещи от дилетантских. 
• Ну и конечно — не бойтесь и не стесняйтесь коммитить в open source проекты (начните с небольших, а там и до библиотек, и до фреймворков дойдёте), ковыряйте чужой код, изучайте принципы и алгоритмы.
• Хорошая статья с очень простым английским и подсказками для начинающих свой путь в JavaScript.
• Конечно же Хабр. Одна команда RUVDS сколько крутого по JavaScript и фронтенду перевела!

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

Frontend для тех, кто хочет работать с общедоступной видимой стороной сайта — делать так, чтобы макеты веб-дизайнеров «оживали». Результат их труда — то, что мы видим в браузерах, например:

Пример работы специалиста по frontend

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

API

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

Цели для нового API сформировались из ежедневных трудностей в реализации новых продуктовых и дизайнерских идей. Нам были нужны:

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

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

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

Другим распространённым решением является GraphQL. Он тоже не идеален, но в отличие от REST, GraphQL API — это не просто описательная модель, а настоящие правила.

Выше я говорил про систему, которая должна была согласовывать работу фронтенда и бэкенда. Прослойка (interlayer) — это именно тот промежуточный уровень. Рассмотрев возможные варианты работы с сервером, мы остановились на GraphQL в качестве API для фронтенда. Но, так как бэкенд написан на C++, то реализация GraphQL-сервера оказалась нетривиальной задачей. Не буду здесь описывать все возникшие сложности и ухищрения, на которые мы шли, чтобы их преодолеть, реального результата это не принесло. Посмотрели на проблему с другой стороны и решили, что простота — залог успеха. Поэтому остановились на проверенных решениях: отдельный Node.js сервер с Express.js и Apollo Server.

Далее нужно было решить, как обращаться к API бэкенда. Сначала смотрели в сторону поднятия REST API, потом пробовали использовать аддоны на C++ для Node.js. В итоге поняли, что это всё нам не подходит, и после подробного анализа для бэкенда выбрали API на базе gRPC-сервисов.

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

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

Общая схема работы после изменения архитектуры

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

Про общение клиентов и серверов, или Как это работает на языке компьютера

Есть несколько клиентов — ими могут быть обычные браузеры на ПК или мобильном устройстве. Один из клиентов — браузер вашего компьютера. Вы хотите получить информацию из интернета. Делаете запрос — вводите фразу в поисковик Yandex или Google. Сразу же открывается страница с необходимой вам информацией.

Как это работает на самом деле? Ваш клиент, он же браузер, отправляет запрос на сервер. Сначала на сервер пользователя — frontend. Frontend-сервер (компьютер) обрабатывает запрос, выбирает backend-сервер, который в данный момент свободен, и отправляет ему запрос из браузера. Backend-сервер обрабатывает запрос, обращается к базе данных и посылает ответ обратно frontend-серверу. А frontend, так как он отвечает за удобство пользователя, уже отображает ответ на запрос в виде HTML-страницы.

Передача данных

Какой вы программист?

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

Чтобы выбор был еще проще, пройдите бесплатный тренажер «