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

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

Что делает фронтенд разработчик

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

Общие задачи фронтенд разработчика

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

• Оптимизация пользовательского опыта
• Использование HTML, JavaScript и CSS для воплощения концепций в жизнь
• Разработка и поддержка пользовательского интерфейса
• Реализация дизайна на мобильных сайтах
• Создание инструментов, улучшающих взаимодействие с сайтом независимо от браузера
• Управление рабочим процессом программного обеспечения
• Следование лучшим практикам SEO
• Исправление ошибок и тестирование на удобство использования

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

Большинство фронтенд разработчиков проводят большую часть своего времени, работая с HTML, CSS, JavaScript (или TypeScript), поэтому владение каждым из этих языков является залогом успеха.

Как разработчики используют каждый язык программирования

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

Библиотеки и фреймворки

Фронтенд разработчики также обычно используют библиотеки, созданные на основе этих языков программирования, такие как React, Vue, Angular, jQuery и Svelte; и фреймворки для UI компонентов, такие как Bootstrap. Расширения CSS, такие как Sass, обеспечивают улучшенную модульность и удобство работы.

Дополнительные языки фронтенд разработки

Хотя они менее распространены, фронтенд разработчики могут также использовать Python, Ruby или PHP.

Общие инструменты, используемые при разработке фронтенда

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

Инструменты графического дизайна

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

Инструменты редактирования кода (IDE)

Инструмент редактирования кода - это просто программа, которую фронтенд использует для написания кода своего сайта. Некоторые разработчики предпочитают использовать легкий редактор типа Notepad, в то время как другие выбирают что-то более функциональное, например, Visual Studio, Visual Studio Code или PhpStorm. Прежде чем выбрать редактор кода, попробуйте несколько разных, чтобы понять, с каким из них вам удобнее работать.

Дополнительные навыки для фронтенд разработки

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

Использование препроцессоров CSS

Большинство frontend разработчиков используют CSS-препроцессоры для добавления функциональности в CSS-код, делая его более масштабируемым и удобным для взаимодействия. Перед публикацией кода на сайте препроцессоры CSS преобразуют его в хорошо отформатированный CSS, который работает в различных браузерах, наиболее востребованными из которых являются Less и Sass.

Использование API и RESTful Services

фронтенд разработчик также будет взаимодействовать и использовать API и RESTful-сервисы. REST (Representational State Transfer) - это легкая архитектура, которая упрощает сетевые коммуникации, а API и RESTful-сервисы следуют этой архитектуре.

Создание и поддержание мобильного и отзывчивого дизайна

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

Разработка для разных браузеров

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

• Вопросы и ответы ReactJS собеседования 2023 - Часть 1 (эта статья)
• Вопросы и ответы ReactJS собеседования 2023 - Часть 2
• Вопросы и ответы ReactJS собеседования 2023 - Часть 3

1. Как работает React?

React создает виртуальный DOM. Когда состояние компонента изменяется, он сначала запускает алгоритм сравнения, который идентифицирует, что изменилось в виртуальном DOM. Второй шаг — согласование (reconciliation), при котором DOM обновляется результатами из сравнения.

2 Каковы достоинства использования React?

• Легко узнать, как визуализируется компонент, вам просто нужно взглянуть на функцию рендеринга.
• JSX упрощает чтение кода ваших компонентов. Также очень легко увидеть макет или то, как компоненты подключены/объединены.
• Вы можете рендерить React на стороне сервера. Это улучшает SEO и производительность.
• Легко тестировать.

3. В чем разница между презентационным компонентом и компонентом-контейнером?

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

4. Каковы различия между компонентом класса и функциональным компонентом?

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

5. В чем разница между состоянием и пропсами?

Состояние — это структура данных, которая начинается со значения по умолчанию при монтировании компонента. Он может видоизменяться со временем, в основном в результате пользовательских событий. Пропсы (сокращение от properties, props) — это конфигурация компонента. Они получены сверху из компонента родителя и неизменяемы (иммутабельны). Компонент не может изменять свои пропсы. Функции обратного вызова также можно передавать в качестве пропсов.

6. Какие существуют методы жизненного цикла?

• componentWillMount (устаревший) — чаще всего используется для настройки приложения в корневом компоненте.
• componentDidMount — здесь вы можете сделать всю настройку, которую вы не смогли бы сделать без DOM, и начать получать все необходимые вам данные. Кроме того, если вы хотите настроить прослушиватели событий и т. д., этот хук жизненного цикла — хорошее место для этого.
• componentWillReceiveProps (устаревший) — этот жизненный цикл действует на определенные изменения пропсов, чтобы вызвать переходы состояний.
• shouldComponentUpdate — если вы беспокоитесь о потраченных впустую рендерах, shouldComponentUpdate — отличное место для повышения производительности, поскольку оно позволяет предотвратить повторный рендеринг, если компонент получает новый проп. shouldComponentUpdate всегда должен возвращать логическое значение, и на его основе будет определяться, будет ли компонент перерисован или нет.
• componentWillUpdate (устаревший) — используется редко. Его можно использовать вместо componentWillReceiveProps для компонента, у которого также есть shouldComponentUpdate (но нет доступа к предыдущим значениям пропсов).
• componentDidUpdate — также обычно используется для обновления DOM в ответ на изменение пропсов или состояния.
• componentWillUnmount — позволяет отменить любые исходящие сетевые запросы или удалить все прослушиватели событий, связанные с компонентом. Вызывается перед размонтированием компонента.

7. Что такое хуки в React?

Хуки позволяют вам использовать больше функций React без использования классов. Первый хук, с которым вы, скорее всего, столкнетесь, это useState. useState — это хук, который позволяет добавлять состояние React к компонентам-функциям. Он возвращает массив с геттером и сеттером. Синтаксис выглядит так:

const [count, setCount] = React.useState(0);

<button onClick={() => setCount(count + 1)}>Increase Count</button>;

Эквивалентом при использовании компонента класса будет.

this.state = {
  count: 0,
};

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Increase Count
</button>;

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

useEffect(() => {
  // делаем что-то, когда компонент монтируется
}, []);

Подробнее о хуках:

• useId
• useContext
• useMemo, useCallback
• useMemo, useCallback (видео)
• useTransition и useDeferredValue
• useImperativehandle (видео)
• useLayoutEffect (видео)
• useReducer (видео)
• Все хуки ReactJS до версии React 18 (видео)

8. Где стоит выполнять AJAX/API запрос в классовом React компоненте?

componentDidMount — это место, где должен быть сделан запрос AJAX в компоненте React. Этот метод будет выполнен, когда компонент монтируется (добавляется в DOM) в первый раз. Этот метод выполняется только один раз в течение жизненного цикла компонента.

9. Что такое управляемые компоненты?

В HTML элементы формы, такие как <input>, <textarea> и <select>, обычно поддерживают свое собственное состояние и обновляют его на основе ввода пользователя. Когда пользователь отправляет форму, значения из упомянутых элементов отправляются вместе с формой. С React это работает иначе. Компонент, содержащий форму, будет отслеживать значение ввода в своем состоянии и будет повторно отображать компонент каждый раз, когда запускается функция обратного вызова, например, onChange, когда состояние будет обновлено. Элемент формы ввода, значение которого управляется React таким образом, называется управляемым компонентом. Видео про управляемые компоненты.

10. Для чего в React используются рефы?

Рефы используются для получения ссылки на DOM узел или экземпляр компонента в React. Хорошими примерами использования ссылок являются управление фокусом/выбором текста, запуск императивной анимации или интеграция со сторонними DOM библиотеками.

11. Что такое компоненты высшего порядка?

Компонент высшего порядка (Higher Order Component, HOC) — это компонент, который принимает компонент и возвращает новый компонент. HOC позволяют повторно использовать код и инициализировать компонент. Наиболее популярным HOC является функция connect из Redux. Помимо простого совместного использования библиотек и простой композиции, HOC — лучший способ хранить общее поведение между React компонентами. Если вы обнаружите, что пишете много кода в разных местах, который делает одно и то же, вы можете реорганизовать этот код в многоразовый HOC. Видео по теме:

• Компоненты высшего порядка ReactJS
• Как использовать Компоненты высшего порядка ReactJS

12. Какие преимущества дает использование стрелочных функций?

• Безопасность области действия: до появления стрелочных функций каждая новая функция определяла собственное значение this (новый объект в случае конструктора, undefined в вызовах функций в строгом режиме или базовый объект, если функция вызывается как «метод объекта» и т. д.). Стрелочная функция не создает собственного this, используется значение this окружающего контекста выполнения.
• Компактность: стрелочные функции легче читать и писать.
• В классовых React компонентах стрелочные функции удобнее использовать для того чтобы избежать байндинга методов при передаче их в качестве функций обратного вызова.

13. Как бы вы предотвратили рендеринг классового компонента?

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

shouldComponentUpdate(nextProps, nextState){
  const allowRender = true;
  // Делаем здесь некоторую проверку и назначаем решение в allowRender
  return allowRender
}

Или использовать React.PureComponent вместо React.Component. React.PureComponent реализует shouldComponentUpdate() с поверхностным сравнением пропсов и состояний. Это позволяет избежать повторного рендеринга компонента со значениями просов и состояний, которые не поменялись.

14. Что такое key при рендеринге списка и для чего он нужен?

Key помогают React определить, какие элементы были изменены, добавлены или удалены. Ключи должны быть даны элементам внутри массива, чтобы однозначно идентифицировать элементы. Лучший способ выбрать ключ — использовать строку, которая однозначно идентифицирует элемент списка среди его соседей, например, id. Чаще всего вы будете использовать идентификаторы из ваших данных в качестве ключей. Если у вас нет стабильных идентификаторов для отображаемых элементов, вы в крайнем случае можете использовать индекс элемента в качестве ключа. Не рекомендуется использовать индексы для ключей, т.к. это может привести к неверному отображению элементов в случае их удаления или изменения порядка. Также key можно использовать для пересоздания компонентов.

15. Для чего нужно вызывать super(props)?

Конструктор дочернего класса не может использовать this до тех пор, пока не будет вызвана функция super(). Кроме того, конструкторы классов ES2015 должны вызывать super(), если они являются подклассами. Причина передачи пропса в super() заключается в том, чтобы вы могли получить доступ к this.props в конструкторе. Хочешь узнать больше? Еще вопросы с собеседований.