Как разделить фронтенд и бэкенд, сохранив взаимопонимание

Где работает и какие задачи решает frontend-разработчик?

Он работает везде, где требуется создание сайта, приложения или любой другой программы, у которой есть интерфейс. Знание JavaScript (основного языка frontend-разработчика) не ограничивает программиста веб-разработкой. Язык используется и для создания десктопных приложений, например офисных пакетов Microsoft и OpenOffice или приложений Adobe, и в программировании оборудования и бытовой техники (платежных терминалов, телевизионных приставок и т.д.).

Помимо студий веб-разработки, для frontend-разработчика есть масса вариантов трудоустройства:

• IT-департаменты компаний. Ритейлеры и маркетплейсы, сотовые операторы и банки, соцсети и стриминговые платформы совершенствуют свои сервисы. Крупнейшие из них сами задают тренды во frontend-разработке. Например фреймворк React создан программистом из Facebook. Работать можно как внутри компании, так и в агентстве, которое специализируется на аутсорс-разработке.
• Разработчики корпоративного софта. Тут нужно будет создавать сервисы управления проектами, CRM и другие веб-приложения для бизнеса. Такое ПО часто имеет сложные интерфейсы и нуждается в регулярной поддержке.
• Государственные организации. Такие сервисы, как «Госуслуги», «Налог.ру», городские информационные порталы постоянно растут и совершенствуются, вовлекая в свою работу в том числе этих специалистов.

Курс 

Frontend-разработчик

Научитесь разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML и получите востребованную IT-профессию. Дополнительная скидка 5% по промокоду BLOG.

Узнать больше

Backend-разработчик

Чем занимается?

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

Технический стек

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

Рабочий день

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

Тоже интересно: Чем занимается backend-разработчик в компании, которая делает игры?

Карьерный рост

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

Дальнейший рост может быть разным, как ветки прокачки в компьютерных играх: если вы прокачиваете технические навыки (hard skills), можно вырасти до уровня архитектора. Если вы чувствуете тягу к построению процессов, можно освоить методологии управления Scrum или Agile и обучать команды. Если есть уклон в классический менеджмент, можно вырасти до тимлидов и CTO (Chief Technical Officer, технический директор): в этой области нужно уметь организовывать и строить процессы, а также не бояться общаться с заказчиками.

Личные качества

Ответственность: на плечах такого специалиста лежит очень многое. Но самое главное качество программиста — научиться думать абстракциями. Если человек не может перейти с материального уровня на уровень функций, объектов, паттернов, то ему будет сложновато.

Александр Пряхин, работает в IT-менеджменте, до этого — backend-разработчик на PHP и Java: «Моя профессия нравится мне динамикой. То, что вчера казалось фантастикой, сегодня – реальность. Посмотрите, как Тони Старк в фильме „Железный человек“ 2010 года с телефона показывает видео на телевизоре. Сейчас это обыденность. Программисты создают экосистемы, цифровые миры, высокопроизводительные системы. Разве это не круто?»

Курс

Backend-разработчик

Освойте с нуля программирование на Go и бэкенд-разработку высоконагруженных приложений и станьте незаменимым специалистом. Дополнительная скидка 5% по промокоду BLOG.

Узнать больше

Кросс-доменные запросы

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

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

Решения:

• Указание одного домена в файле и разграничивание фронтенда и бекенда с помощью nginx*.
• Включить кроcс-доменные запросы на сервере в зависимости от переменной среды, если production то false, если development то true.
• Включить домен с которого ведется разработка в белый список исключений.

Межсайтовая подделка запросов(CSRF) — так называется атака, которая делает несанкционированный запрос от пользователя инициированный с другого сайта.

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

Бэкенд-разработчик — «боец невидимого фронта»

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

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

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

• языки PHP, Python, Ruby, Java, C#, Node.js (программная платформа);
• дополнительно к Node.js полезно изучить Express (библиотека для взаимодействия платформы Node.js с сервером) и Mongo DB (базу данных для получения и хранения информации);
• в качестве дополнительных средств применяются фреймворки Laravel, Symfony, CodeIgniter, Django, Flask, Ruby on Rails, Spring, Express.
• для хранения данных используются MySQL, PostgreSQL, SQLite. 

Что такое back-end разработчик

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

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

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

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

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

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

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

Ключевые навыки backend-разработчика

Хотя backend – это работа с серверной частью, специалисту в своей работе нужно изучить основы HTML и CSS и уже после этого изучать серверные языки программирования и налаживать работу с БД.

Итак, в своей работе этот специалист должен знать и уметь:

1. Такие языки программирования как PHP (наиболее популярный из всех), Ruby, Python, Java, JavaScript / Node.js.
2. AJAX-технологию для обновления данных в браузере без перезагрузки страницы.
3. Такие БД как  MySQL, PostgreSQL, MongoDB и т.п.
4. Принципы работы UNIX-подобных систем.
5. Основы объектно-ориентированное программирования.
6. Работа с наборами скриптов, ускоряющих разработку веб-сайтов.
7. Работа с Git.

Веб-сервер

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

1. Поставить «чистые» PHP, Apache и MySQL самостоятельно с нуля или применить готовые пакеты — Xampp, Denwer и другие.

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

2. Воспользоваться Vagrant.

Это виртуальная машина с широкими возможностями. Физически Vagrant находится на компьютере, но воспринимается не как локальный сервер. Разработчик подключается к нему не по localhost, а по другому IP, который он сам и прописывает.

3. Использовать Docker.

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

Общий монорепозиторий. Hold

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

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

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

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

Что нужно знать и уметь

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

Стандартный список требований к бэкенд-программисту включает в себя:

1. Знание серверных языков программирования.
2. Понимание принципов работы серверов и интернет-ресурсов.
3. Навыки юнит-тестирования.
4. Основы сетевой безопасности и ее инструментов.
5. Знание веб-фреймворков.
6. Умение работать и проектировать базы данных.
7. Понимание основ деятельности фронтенд-разработчика и верстальщика.
8. Администрирование UNIX-подобных систем.
9. Знание API.
10. Умение правильно составить техническое задание (ТЗ).
11. Знание основ объектно-ориентированного программирования.
12. Умение писать код быстро и правильно, а также ориентироваться и исправлять чужой код.
13. Знание принципов объектно-ориентированного программирования.
14. Понимание систем контроля Git.
15. Владение английским языком.

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

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

К личностным качествам же относятся:

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

Основные инструменты для работы

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

Серверные языки программирования: PHP, Java, Ruby, Python, Perl.

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

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

Основные базы данных, с которыми работает бэкенд-разработчик:

• MySQL,
• SQLite,
• PostgreSQL,
• MongoDB.

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

Фреймворки:

1. Zend Framework.
2. Symfony.
3. Yii.
4. Codeigniter.
5. Kohana и др.

Они могут использоваться как дополнительные средства. Эти инструменты определяют структуру интернет-ресурса и позволяют создавать API-интерфейсы.

Как стать бэкенд-программистом

Есть несколько путей в профессию: ВУЗ, курсы, самообучение и получение образования на предприятии, на практике.

Высшее образование

Сейчас в ВУЗах нет такой специальности, как backend-программист. Однако больше половины необходимых навыков, а также теоретических знаний можно получить, если пройти обучение по любому из IT-направлений. Ближе всего к разработке специальности «прикладная информатика» и «программирование». Здесь студенты осваивают несколько языков программирования, изучают API, учатся работать с базами данных. Потом останется только ознакомиться со специфическими для веба деталями: работой с фреймворками, взаимодействие с фронтендом и пр. Но профессия на ¾ уже будет изучена, также будет базовое понимание общих принципов работы. Таких специалистов охотно берут стажерами даже в крупные компании.

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

Курсы

Если нет времени и/или сил, денег, желания получать полноценное высшее образование, а потом строить карьеру с нуля, то можно обратить внимание на курсы. Конкретно back-end здесь изучают редко, а берут более обширный пласт: в целом веб-разработку, fullstack-разработку или PHP-технологии

Специализироваться на чем-либо или оставаться универсальным бойцом – студент потом решит сам.

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

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

7 лучших курсов для backend разработчика

1. Профессия Веб разработчик от SkillBox;
2. Факультет Веб разработки от GeekBrains;
3. Backend — разработчик на Go от SkillFactory:
4. Backend-разработка на Node.js от Нетологии;
5. Профессия Fullstack-разработчик на JavaScript от SkillBox;
6. Профессия Fullstack-разработчик на Python от Skillbox;
7. Профессия Fullstack-разработчик на PHP от Skillbox;

Самообразование

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

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

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

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

Dependency Injection. Adopt

Мы рекомендуем использовать паттерн DI и вместе с ним IoC-контейнеры. Кажется, что DI не сильно распространен во фронтенд-разработке за пределами Angular, но у нас в компании этот паттерн получил широкий охват, в том числе на проектах с React, где мы используем собственный фреймворк Tramvai.js, который построен на DI.

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

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

Наш коллега Сергей Нестеров сделал доклад Dependency injection в React-приложении — советуем посмотреть.

Где учиться на бэкенд-разработчика

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

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

Зарплаты

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

Фронтенд

В среднем по данным hh.ru на рынке труда здесь такие цифры:

• Junior — от 20 000 (в регионах) до 70 000 рублей
• Middle — от 50 000 до 300 000 рублей
• Senior — от 100 000 рублей до 550 000 рублей

Бэкенд

Среди самого бэка у PHP-разработчиков статистически чуть-чуть ниже зарплата. Но в целом цифры такие:

• Junior — от 40 000 до 100 000 рублей
• Middle — от 60 000 до 350 000 рублей
• Senior — от 120 000 до 600 000 рублей

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

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

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

Frontend

В QIWI я с конца 2014 года, начинал работать как разработчик iOS–приложений, и, в принципе, пару лет занимался разработкой QIWI-кошелька. При этом не могу сказать, что было скучно – задачи были довольно разные и в рамках одного приложения: мы занимались интеграцией кошелька с другими нашими сервисами, чинили баги, подтягивали анимацию. Кроме этого, был занятный опыт по созданию приложения для Apple Watch. Потом немного расширил фокус и поработал еще и над iOS-приложением для «Совести».

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

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

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

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

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

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

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

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

• Языки: 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. И улыбнуться при этом))

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