Профессия frontend-разработчик

Вместо заключения

А что дальше? Дальше учиться. Фреймворков и технологий куда больше, чем описано в этой статье.

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

Хотя нет, это еще не все. Я совсем забыл рассказать о soft skills (гибких навыках) в IT-сфере, а без них сейчас никуда. О значимости и типах софт-скиллов вы можете почитать в статье «Что такое soft skills и как их развить» – изложенная в ней информация обязательно пригодится вам при первом трудоустройстве в IT-компанию. 

История

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

Свой аналог Spotify

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

• Верстаем динамический сайт с философией mobile-first.

• Изучаем, как работают элементы управления медиаконтентом (создание объектов Audio()).

Чтобы усложнить себе задачу, можно увеличить базу аудиофайлов с одного до нескольких десятков, чтобы в сервисе была хотя бы пара «альбомов». Еще более высокий уровень сложности – подключить API Spotify к своему проигрывателю. 

• Учимся работать со сложными API от разработчиков Spotify или Apple Music.
• Практикуем использованием Media API.

Можно сделать приложение функциональнее, добавив другие виды контента. Получится не аналог Spotify, а гибрид музыкального сервиса с копией YouTube. Для него тоже нужно будет сделать кастомные элементы управления.

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

Путь обучения

Время изучения: 1–2 часа

Необходимые условия

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

Как понять, что я могу двигаться дальше?

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

Основные руководства

• Установка базового программного обеспечения— базовая настройка инструмента (15 минут чтения)
• История всемирной сети и веб-стандартов (45 минут чтения)
• Обучение и получение помощи (45 минут чтения)

Время завершения: 35–50 часов

Необходимые условия

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

Как понять, что я могу двигаться дальше?

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

Основные модули

• Введение в HTML (15–20 часов чтения/упражнений)
• Мультимедиа и встраивание (15–20 часов чтения/упражнений)
• HTML таблицы (5–10 часов чтения/упражнений)

Время завершения: 90–120 часов

Необходимые условия

Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить Введение в HTML.

Как понять, что я могу двигаться дальше?

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

Основные модули

• Первые шаги в CSS (10–15 часов чтения/упражнений)
• Структурные элементы CSS (35–45 часов чтения/упражнений)
• Стилизирование текста (15–20 часов чтения/упражнений)
• CSS разметка (30–40 часов чтения/упражнений)

Книга рецептов CSS

Время завершения: 135–185 часов

Необходимые условия

Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить Введение в HTML.

Как понять, что я могу двигаться дальше?

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

Основные модули

• Первые шаги в JavaScript (30–40 часов чтения/упражнений)
• Структурные элементы Javascript (25–35 часов чтения/упражнений)
• Клиентский веб API (30–40 часов чтения/упражнений)
• Введение в объекты Javascript (25–35 часов чтения/упражнений)
• Асинхронный Javascript (25–35 часов чтения/упражнений)

Время завершения: 40–50 часов

Необходимые условия

Для эффективного использования форм требуется знание HTML, CSS и JavaScript. Они сложны и поэтому рассматриваются отдельно.

Как понять, что я могу двигаться дальше?

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

Основные модули

Веб формы (40–50 часов)

Время завершения: 60–75 часов

Необходимые условия

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

Как понять, что я могу двигаться дальше?

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

Основные модули

• Кросс-браузерное тестирование (25–30 часов чтения/упражнений)
• Доступность (20–25 часов чтения/упражнений)

Время завершения: 55–90 часов

Необходимые условия

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

Как понять, что я могу двигаться дальше?

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

Основные модули

• Git и Github (5 часов чтения)
• Понимание инструментов на стороне клиента (20–25 часов чтения/упражнений)

• Понимание JavaScript-фреймворков для фронтенда (30-60 часов чтения/упражнений)

Приложение с прогнозом погоды

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

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

• Осваиваем API для поиска стран и городов.

• Настраиваем API для извлечения информации о погоде.

• Обретаем навыки по работе с REST API.

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

• Делаем понятную и не слишком запутанную структуру switch.

• Создаем анимации при помощи @keyframes.

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

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

• Учимся работать с GEOLocation API.

• Учимся работать с Notification API.

Для разработки подойдет и React.js, и его аналоги. 

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

Frontend — это разработка интерфейса, с которым взаимодействуют пользователи. Называется она так, потому что это создание наружной части сайта или приложения, а значит, находится снаружи/спереди (front).

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

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

Главные инструменты в этой сфере — языки веб-разметки (HTML, CSS) и программирования (JavaScript):

• JavaScript используется для создания UI (user interface — интерфейс пользователя) с нуля;
• На HTML производится основная верстка, где интерфейс переводится на язык, понятный современным браузерам;
• Через CSS прикрепляются стили к структурированным документам (в случае с frontend это прикрепление стилей к документам HTML).

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

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

Отличие frontend от backend

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

За все обработки и действия, которые производятся на серверах, отвечает другой специалист — бэкенд-разработчик. Так как это разные профессии, в backend используется другой инструментал, включающий языки программирования PHP, Perl, Java, Python, Ruby, фреймворки и SQL для работы с данными. Кстати, на нашем сайте есть обзор профессии PHP-программиста.

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

Достоинства и недостатки

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

Перечень плюсов:

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

Список минусов:

• Во многих вакансиях по этой специальности есть требования, касающиеся бэкенда;
• Обязательно взаимодействие с другими сотрудниками (далеко не для всех это минус);
• Хоть JavaScript и не такой сложный и требовательный, как, например, C++, для того чтобы им уверенно владеть, нужно иметь начальные знания алгебры.

Что должен знать и уметь разработчик фронтенда?

Если говорить об освоении данной профессии с нуля, то потребуется изучить следующие технологии:
1. HTML и CSS. Как известно, HTML – это язык разметки документов на сайтах. А CSS – это каскадные таблицы стилей, которые управляют оформлением разных элементов на веб-страницах (например, размером и типом шрифтов). И освоить эти инструменты нужно в первую очередь.
2. JavaScript. По сути, основной язык программирования, который должен знать front-end-программист. При этом есть разные библиотеки готовых скриптов, написанных на JavaScript. И их тоже желательно изучить, так как их применение упрощает и ускоряет работу. Одна из таких библиотек – jQuery.
3. Методология верстки. Подойдёт тот же БЭМ от Яндекса. Это методология «Блок-Элемент-Модификатор», которая помогает создавать web-приложения по определенным принципам. Так называемый компонентный подход в вёрстке, который упрощает поддержку структуры кода при росте проекта, позволяет использовать код повторно и вносить в него точечные изменения с минимальными затратами, добавляя функциональные элементы либо обновляя дизайн.
4. Фреймворки. Пригодится, в частности, Bootstrap. А вообще, фреймворк – это набор готовых решений и на их базе можно создавать сайты гораздо быстрее, чем если бы вы делали всё с нуля.
5. Кроссбраузерная вёрстка. Разумеется, нужно уметь создавать веб-страницы таким образом, чтобы они одинаково выглядели во всех браузерах, но это ведь очевидно, не правда ли?
6. Адаптивный дизайн. Речь идёт о дизайне, который может подстраиваться под размеры экрана пользователя. В результате сайт будет оптимально выглядеть и на персональном компьютере, и на планшете, и на смартфоне.
7. Язык серверного программирования. Рекомендуется хотя бы на базовом уровне знать, например, один из самых популярных языков в среде web. Как вы уже, наверное, догадались, мы говорим о PHP.
8. Git. Ну, без знания системы контроля версий сегодня никак, сами понимаете.

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

Менеджер задач

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

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

• Верстаем страницу, используя flex или grid.

• Задействуем базовые методы массивов для структурированного добавления данных в базу.

• Добавляем drag&drop-функциональность.

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

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

• Работаем с реляционными базами данных.

• Используем методы массивов filter и includes для создания алгоритма поиска. 

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

Soft Skills и Hard Skills фронтендера

Условно знания можно разделить на Soft Skills и Hard Skills. Они могут отличаться не только по навыкам, но и итоговой зарплате. Программист фронтенд должен понимать различия:

Soft Skills. Личностные качества, необходимые для карьерного роста. Сюда условно относят:

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

Hard Skills. Базовые навыки, которые прописываются в должностных инструкциях. Начальные и основные профессиональные умения. Ими обязан обладать даже junior frontend разработчик.

Основное программное обеспечение или что должен знать frontend и использовать в работе:

• HTML;
• CSS;
• JavaScript;
• jQuery;
• Photoshop;
• Шаблонизаторы.

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

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

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

Фронт + бэк = фулстэк

Если в двух словах, то фронтенд (Front-end) — это сцена, бэкенд (Back-end) — закулисье, а фулстек (Full Stack) — их совокупность, то есть вся подготовительная работа к спектаклю и сам спектакль.

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

• Превращает макет дизайнера в код. Щелкните правой кнопкой мыши прямо сейчас, выберите «Исходный код страницы» — его написал фронтендер.

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

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

• Готовит данные к отправке на сервер или в сторонние приложения.

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

Бэкенд-разработчик отвечает за то, что скрыто от глаз пользователя, происходит вне его компьютера или другого устройства. Например, когда вы вводите запрос в поисковой строке Google или Яндекс, вы имеете дело с фронтендом, как только вы нажимаете Enter, в игру вступает бэкенд. Запрос уходит на сервер поисковика, распознается там и возвращается в виде понятного ответа. В выдаче появляется список сайтов — это снова фронтенд.

Коды для фронта и бэка пишутся на разных языках. Для первого наиболее актуальны HTML, CSS, JavaScript, для второго — Ruby, PHP, Python, Java.

Фулстэк-разработчик владеет сразу несколькими языками, отвечает и за «темную» серверную сторону, и за «светлую» пользовательскую. Иногда он также обладает компетенциями UI/UX-дизайнера. В общем, универсал.

Варианты взаимодействия frontend и backend

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

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

2. Есть еще инструментарий под названием AJAX. В таком случае запрос отправляется при помощи JavaScript, который подключен в веб-обозревателе. Ответ возвращается в XML или JSON, а с чтением этих форматов отлично справляется JS.

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

4. Подключаемые библиотеки Ember или React предназначены для использования приложения одновременно на сервере и в клиентской части. Две рассматриваемые сферы связываются через AJAX и HTML-код с обработкой на сервере.

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

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

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

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

Вместе с требованиями к веб-приложениям выросли и требования к обязанностям современного фронтенд-разработчика. Сейчас его работа может включать практически всё: и вёрстка, и настраивание процессов развёртывания и тестирования приложения, и написание unit и end-to-end тестов, поддержка accessibility для людей с ограничениями, а иногда и сам UX/UI дизайн. 

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

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

Взаимодействие frontend и backend происходит по кругу:

• frontend отправляет пользовательскую информацию в backend;
• информация обрабатывается;
• и возвращается обратно, приняв понятную форму.

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

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

Существует несколько вариантов взаимодействия frontend и backend:

• HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы.
• Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON.
• Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember.
• Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

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

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

Что нужно знать фронтенд-разработчику:

• Языки: HTML, CSS, JavaScript, всё чаще требуется TypeScript.
• Фреймворки: React, Vue или Angular. Нужно уметь работать с одним из них.
• Дополнительные инструменты: работа с внешними расширениями через NPM или Yarn, настройка сборки фронтенда (например, Webpack).

Рассмотрим типичную задачу младшего фронтенд-разработчика.

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

‘primary’ — основной цвет,

‘secondary’ — вспомогательный цвет,

‘error’ — цвет в случае ошибки,

‘success’ — цвет в случае успешной операции.

Все цвета заданы в дизайн-системе. Связь названий и цветов описана в файле utils.ts. Выглядит он примерно так:

 // utils.ts

type TIconTypes = 'secondary' | 'primary' | 'error' | 'success';

export type TIconProps = { type: TIconTypes, onClick?:() => void; };
export const getIconColor = (type: TIconTypes) => {

  return `${
    type === 'secondary'
      ? '#8585AD'
      : type === 'error'
      ? '#E52B1A'
      : type === 'success'
      ? '#00CCCC'
      : '#F2F2F3'
  }`;
};

 

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

 // icon.tsx

import React from 'react';
import { getIconColor, TIconProps } from './utils';

export const Icon = ({ type }: TIconProps) => {
  return (
    <svg
      xmlns="<http://www.w3.org/2000/svg>"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill={getIconColor(type)}
    >
      <path d="/* здесь будет длинный набор чисел, описывающих svg-изображение */"/>
    </svg>
  );
};
 

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

Это лишь небольшой пример задачи, но он наглядно демонстрирует необходимость понимания дополнительных технологий помимо HTML, CSS и JavaScript: например, React и TypeScript. То, какие технологии потребуются на конкретном проекте, определяет стек, принятый внутри команды или компании. Его нужно либо знать, либо быть готовым быстро в него погрузиться.

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

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

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

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

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

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

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

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

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

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

1. REST.
2. SOAP.

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

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

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