Чем frontend отличается от backend’а? объясняем на мемах

Начните создавать реальные проекты

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

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

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

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

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

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

Inner source. Assess

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

Inner Source — это как Open Source, только внутри компании, который позволяет уменьшить зависимость от смежных команд разработки, что должно привести к ускорению выполнения задач.

Разберем на примере. Допустим, у вас есть две команды и первая команда хочет доработку от второй. Команда 1 приходит к команде 2, добавляет свою задачу в очередь бэклога и получает блокирующую зависимость в исполнении своего проекта. В случае с Inner Source все репозитории открыты внутрь компании. В таком подходе команда 1 может сделать pull request в целевую систему, а владелец системы — команда 2 — эти изменения проверит и вольет в основную ветку. Выходит, что первая команда получит свою доработку быстрее за счет использования собственного ресурса, чем если бы ждала, своей очереди в бэклоге другой команды.

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

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

Подробней ознакомиться с Inner Source можно на сайте комьюнити Inner Source.

Инспектор

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

Тут есть инструкция по использованию инструментов разработчика в Chrome. Если вы предпочитаете Firefox, то вот ссылка для вас.

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

Отрабатываем основы

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

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

Надпись на листе: Ошибка 500 (внутренняя ошибка сервера). Источник

500 Internal Server Error — распространенная ошибка, которая появляется из-за дисконнекта frontend и backend. Она означает, что сервер не может обработать запрос пользователя, а браузер не может сообщить, что именно пошло не так.

Причиной может быть ошибка в коде или скрипте сайта или элементарная нехватка оперативной памяти

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

Перевод: я в backend: завершил работу над backend всего за один день / Я работаю во frontend: как, черт возьми, выровнять эту кнопку по центру? Источник

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

Перевод: Когда в твоей компании нет frontend-разработчика и тебя просят писать на CSS (язык разметки для frontend) / У меня есть вопрос. К богу. ЗА ЧТО? Источник

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

MVC предков — Первоисточник

Отделение данных от представления является основной темой графических пользовательских интерфейсов (как веб-ориентированных, так и настольных). С MVC — Model View Controller, отделение представления (View) от доменной области (Model) было основной мотивацией проектирования. И, без сомнения, MVC была плодотворной работой, которая повлияла на будущие поколения.

MVC был представлен для Smalltalk-80. В MVC объект View отображает данные, хранящиеся в объекте Model. Прежде чем мы сможем полностью изучить потоки данных в MVC, мы должны понять среды прикладных программ того времени (около 1970-х годов):

• Этот MVC был предназначен только для настольных приложений. Веб еще не родился. Мы говорим о десятилетии до этого.
• Забудьте о Web. Сложных операционных систем с графическим интерфейсом не существует.
• Это означает, что прикладное программное обеспечение было очень близко «железу» систем.

Эти ограничения имели важные последствия для MVC. Обязанностью объекта Controller стало реагирование на пользовательские вводы, такие как клавиатура или мышь, и их преобразование в действия над моделью. Кроме того, отсутствие графических элементов в операционных системах означает, что Представление (View) не соответствует тому, что на экране.

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

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

С точки зрения связей:

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

2. Модель реализует шаблон Observer, и на него подписывается один или несколько объектов View. Когда Model изменяется, она вызывает событие, и View обновляется после реакции на событие.

В MVC есть два разных потока данных. Во View-потоке Model не участвует. Это только изменение пользовательского интерфейса. Показ эффекта нажатия кнопки или реакция на событие прокрутки мыши — пример View-потока.

Сегодня мы больше не используем этот MVC и поэтому иногда его называют классическим MVC или MVC предков (father’s MVC).

Общие сведения о профессии

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

Основные требования к специалисту можно разбить на две группы:

• Знание языков программирования. Минимум для разработчика – три сферы. HTML и CSS – базовый язык верстки, который обязан знать и понимать любой веб-разработчик. Специальное дополнение к основному языку верстки, которое позволяет делать красивое оформление сайта без ущерба скорости загрузки страницы. JavaScript – язык программирования, отвечающий за разные активные элементы на сайте. Он позволяет расширить функционал площадки. Дополнительно может потребоваться знание программных сред: Sass/SCSS, LESS, Bootstrap, Webpack, React, jQuery и прочие.
• Умение работать на разных уровнях с людьми. Специалист должен понимать, как взаимодействовать с дизайнером и другими разработчиками, чтобы проект не стоял на месте. В круг его обязанностей может входить анализ юзабилити сайта – он должен уметь анализировать и собирать информацию от конечного пользователя ресурса и прочих ответственных лиц.

Обязанности фронтенд-разработчика в современном веб-программировании:

• Создание полноценной рабочей HTML-страницы на основе уже имеющихся шаблонов или дизайн-макетов на HTML и CSS.
• Подключение активных скриптов (Java), которые добавляют функционал и анимации на сайте.
• Поддержание нужного уровня пользовательского интерфейса UI, а также опыта взаимодействия UX.
• Написание одностраничных приложений на известных библиотеках: React, Angular или Vue.js.

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

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

1. Освоить HTML и CSS. HTML – это язык разметки веб-документов. CSS – каскадные таблицы стилей. Они управляют оформлением различных элементов на страницах (например, размером шрифтов).
2. Изучить JavaScript – основной язык, который нужно знать frontend-программисту. Существуют различные библиотеки готовых скриптов, написанных на JavaScript. Их тоже лучше изучить, чтобы пользоваться ими и ускорять свою работу. Пример такой библиотеки – jQuery.
3. Изучить методологию верстки, например, БЭМ от Яндекса. Методология помогает создавать веб-приложения по определенным принципам, которые помогают разбираться в чужом коде и в своем тоже по прошествии какого-то времени.
4. Изучить фреймворки, в частности, Bootstrap. Фреймворк – это набор неких готовых решений, на базе которых можно создавать веб-сайты быстрее, чем при написании кода с нуля.
5. Освоить кроссбраузерную верстку и научиться создавать страницы, которые одинаково выглядят в разных браузерах.
6. Изучить адаптивный дизайн, т.е. дизайн, который подстраивается под размеры экрана пользователя. Таким образом сайт приемлемо выглядит на разных устройствах (компьютер, планшет, смартфон).
7. Не лишним будет освоить языки серверного программирования на базовом уровне. Например, язык PHP – один из самых популярных в среде веб.

8. Изучить Git и научиться работать с системами контроля версий.

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

Trunk based development (TBD). Assess

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

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

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

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

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

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

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

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

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

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

Какие направления существуют в веб-разработке

Веб-разработку принято делить на две составляющие: фронтенд (front-end) и бэкенд (back-end).  Фронтенд-разработчики занимаются разработкой графического интерфейса — той части приложений, которую видит пользователь. Они превращают макет, созданный веб-дизайнером, в функциональный и удобный пользовательский интерфейс. Корректное отображение полей и блоков, работающие кнопки и формы для ввода данных — всё, с чем сталкивается пользователь в браузере, находится в зоне ответственности фронтендеров.

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

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

Универсальные знания, которыми должен обладать любой веб-разработчик — это Git и работа с Linux-окружением

Также ему важно понимать общие принципы работы интернета. Кроме того, есть много специфических инструментов, которые нужно освоить в зависимости от специализации, — о них мы расскажем ниже

Будущее бэкендера

• Стандартный путь внутри своего стека: junior с односложными задачами и запросами, middle с глубокими навыками программирования и отличным владением стеком, senior с проектированием, архитектурами, высокими нагрузками и прочим кубернетесом, team lead с управленческими навыками т.д. Это хороший корпоративный путь, внутри которого можно менять компании, проекты, отрасли, расти и быть востребованным.
• Переход на другой стек и выход из веба: нередко именно бэкенд-разработчики осваивают Java, С/С++ и уходят в «кровавый энтерпрайз», десктопные приложения, разработку средств разработки, нейросети, компьютерное зрение и т.д. Действительно, бэкендеру проще осваивать эти трудные технологии и ЯП.
• Переход в фуллстек-разработку: бэкендер ближе к фуллстеку и совершить такую трансформацию можно совершенно незаметно.
• Переход в DevOps, DevSecOps, информационную безопасность — когда знаешь веб-приложения изнутри как свои пять пальцев, этот путь оказывается логичным и весьма доходным.
• Переход на менеджерские позиции, если есть желание и склонность к управленческим задачам. 
• Фриланс и своё программное агентство — для смелых и в меру азартных ребят. Можно неплохо зарабатывать на аутсорс-разработке (особенно если идти в сторону фуллстек-разработки).

React + Flux

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

JavaScript-библиотека для построения интерфейсов

Facebook создал React и Flux для решения некоторых недостатков MVC и проблем с масштабированием. Посмотрите их широко известную презентацию Hacker Way: Rethinking Web App Development at Facebook. В ней говорится о происхождении и особенностях Flux.

Чтоб начать работу с React и Flux, сперва изучите React. Хорошим учебником для начинающих будет документация React. После этого переходите к React.js Introduction For People Who Know Just Enough jQuery To Get By, чтобы помочь себе отойти от jQuery-мышления.

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

Практика с фреймворками

Теперь вы имеете общие знания о JavaScript-фреймворках и архитектурных шаблонах и настало время применить их на практике

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

Сколько зарабатывает frontend-разработчик и где найти работу?

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

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

В среднем по России уровень дохода фронтенд-разработчика с опытом от 3 лет составляет 50 – 100 тысяч рублей в месяц, в Москве – доходит до 200 тысяч рублей и выше. Доход новичков может составлять около 30-40 тысяч рублей (стажировка не оплачивается).

Как и во многих других интернет-профессиях доход специалиста напрямую зависит от его мастерства и загруженности (может вести одновременно несколько проектов).

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.

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

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

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

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

Что должен знать Frontend-разработчик

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

Язык CSS. Практически на всех курсах CSS преподается вместе с HTML. CSS – это система стилей, за счет которых сайты смотрятся красиво.

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

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

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

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

Frontend frameworks

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

• AngularJS: эта структура и несколько других инфраструктур JS, таких как Backbone.js, которые используют возможности JavaScript.
• JQuery: Быстрая, маленькая, объектная библиотека JS, упрощает управление JavaScript в разных браузерах.
• Bootstrap: эта лидирующая платформа для мобильных устройств; объединяет HTML, CSS и JavaScript, чтобы упростить развивающуюся разработку приложений. С Bootstrap ваш сайт совместим со всеми современными браузерами и отлично смотрится на экране любого размера: от телефонов до планшетов и ноутбуков.
• Foundation: Созданный ZURB, эта ориентированная на бизнес, отзывчивая внешняя инфраструктура. На данный момент она используется такими сайтами, как Facebook, Yahoo !, и eBay.
• Семантический UI (интерфейс): эта интерфейсная среда пользователя ориентирована на читаемость кода, чистую логику и структуру и имеет множество функций.
• Pure.css: Созданный Yahoo !, эта легкая, небольшая структура представляет собой набор гибких модулей CSS, которые помогут упростить разработку мобильных сайтов. Когда вам не нужна тонна функций, расположенных в вашей структуре, Pure предлагает только основы.
• Skeleton.css: Еще одна отзывчивая структура CSS, которая быстро распространяется. Skeleton — это базовый, без излишеств фундамент — скелет — для сайта.

#development
#html
#css
#javascript
#разработка
#frontend
#программирование

@ivashkevich

22.08.2017 в 17:51

10596

+55

Создание общего модуля типов

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