Кто такой frontend разработчик? Полное руководство

Основная цель разработки любого веб-сайта - обеспечить, чтобы пользователи могли видеть необходимую информацию в удобном для чтения формате. Но эта простая цель сложна в реализации, поскольку посетители используют различные типы устройств с разными размерами и разрешениями экрана. Также необходимо обеспечить корректное открытие сайта в различных браузерах и различных операционных системах (кроссплатформенность). Это заставляет frontend разработчика тестировать свой дизайн на нескольких вариантах ОС, браузеров и устройств, что усложняет его работу. Frontend разработчики используют HTML, JavaScript и CSS (каскадные таблицы стилей) для обеспечения привлекательного внешнего вида и правильной работы сайта. Это также позволяет пользователям свободно и комфортно взаимодействовать с веб-сайтом.

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

Вот некоторые важные роли, которые играют фронтенд-разработчики:

• Фронтенд-разработчик должен уметь определять компоненты на веб-странице с помощью HTML.
• Уметь повышать производительность с помощью JavaScript-фреймворков.
• Фронтенд-разработчик выполняет различные задачи, такие как управление контентом, изменение веб-дизайна, анализ взаимодействия, отладка и т.д.
• Анализирует производительность веб-страницы на стороне клиента, чтобы лучше понять пользовательский опыт и взаимодействие пользователей.
• Фронтенд-разработчик работает с веб-дизайнерами и UX-специалистами, чтобы создать наилучший опыт для посетителей.

Важные навыки для frontend разработчиков

Вот важные навыки для frontend разработчиков:

• Умение создавать отзывчивый дизайн веб-сайта.
• Хорошее знание HTML (язык разметки гипертекста) для определения компонентов на веб-странице.
• Знание JavaScript для повышения интерактивности сайта.
• Умение анализировать производительность веб-страницы на стороне клиента для лучшего понимания пользовательского опыта.
• Разработчики фронтенда оптимизируют веб-сайты для улучшения пользовательского опыта.
• Разработка и поддержка пользовательского интерфейса.
• Реализация дизайна веб-сайта для мобильных устройств.
• Управление рабочим процессом программного обеспечения.
• Должны быть знакомы с современными лучшими практиками SEO.
• Исправление ошибок и тестирование веб-сайтов на удобство использования.

Какое программное обеспечение и инструменты использует фронтенд разработчик?

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

Ниже приведены некоторые технические знания, которые ожидаются от Frontend разработчиков: 1. Технологии фронтенда: Фронтенд-разработчики должны хорошо разбираться в основных фронтенд-веб-технологиях, таких как HTML, CSS и JavaScript. Эти специалисты также должны знать сторонние библиотеки, такие как React , Vue, Angula и другие. 2. Языки разработки: Front-end разработчики должны знать основы таких языков программирования, как TypeScript, и по необходимости Python, Java, Ruby и др. 3. TypeScript: TypeScript - это чистый объектно-ориентированный язык программирования с классами, статически типизированным кодом, интерфейсами, как C# или Java. 4. База данных и кэш: Front-end разработчики должны знать различные технологии СУБД, такие как MySQL, MongoDB, Oracle и SQLServer, которые широко используются для этих целей. 5. Отзывчивый и мобильный дизайн: Чтобы стать успешным frontend разработчиком, знание дизайна является обязательным условием. Более того, frontend разработчик должен обладать навыками отзывчивого и мобильного дизайна, которые важны для работодателей. Отзывчивый дизайн означает, что макет сайта меняется в зависимости от размера экрана и устройства, которым пользуется пользователь. Фронтенд разработчики должны убедиться, что сайт доступен для всех пользователей и остается отзывчивым для всех мобильных, планшетных компьютеров, ноутбуков, ПК и других устройств. 6. Сервер: Front-end разработчик должен работать с такими серверами, как Apache или Nginx, и должен хорошо разбираться в Linux и администрировании серверов. 7. Система контроля версий (VCS): Система контроля версий помогает Front-end разработчикам отслеживать все изменения, вносимые в их код. Git широко используется в этих системах контроля версий, которые могут быть установлены с помощью командной строки. Знание Git помогает разработчикам разобраться в последнем коде, обновить определенные части кода и внести изменения в код других разработчиков. 8. Работа с API (REST и SOAP): Знание API и веб-сервисов также является плюсом для frontend разработчиков. Желательно знакомство с созданием и использованием сервисов REST и SOAP. 9. Системы управления контентом и платформы электронной коммерции: Frontend разработчик должен знать о различных системах управления контентом и платформах электронной коммерции (особый тип CMS). Самой популярной CMS, используемой во всем мире, является WordPress. Некоторые другие популярные CMS включают Magento, Joomla и Drupal. 10. Кросс-браузерная разработка: Современные браузеры очень хорошо справляются с отображением веб-сайтов. Однако все еще существуют различия в том, как они интерпретируют внутренний код. Знание того, как заставить ваш сайт работать так, как вы хотите, в каждом браузере, также очень важно.

В чем разница между Frontend и Backend разработчиком?

Frontend разработчики, как правило, работают над пользовательской частью веб-сайта или веб-приложения.

• Frontend веб-разработчик должен быть знаком с HTML, CSS и JavaScript.
• Frontend разработчик работает вместе с дизайнером, принимая вводные данные пользователей и изменяя их путем тестирования.

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

• Backend разработчики используют Python, Go, Java, PHP, .Net, СУБД, сервер, API и т.д.
• Backend разработчики разрабатывают приложение, которое поддерживает фронтенд. Они также обеспечивают поддержку, безопасность и управление контентом.

Итоги

• Фронтенд разработчики - это профессионалы, которые отвечают за эффективную реализацию визуальных компонентов на сайте.
• Фронтенд разработчик определяет компоненты на веб-странице с помощью HTML.
• Разработка фронтенд-стека используется для проектирования той части веб-сайта, которую видит пользователь.
• Frontend разработчики должны знать: 1) Frontend технологии, 2) языки веб-разработки, 3) TypeScript, 4) базы данных и кэш, 5) отзывчивый и мобильный дизайн, 6) сервер, 7) систему контроля версий, 8) работу с API, 9) функциональное тестирование и модульное тестирование, 10) кросс-браузерную разработку.
• Backend разработчики обычно работают с технологиями на стороне сервера, которые обеспечивают функциональность сайта. В отличие от них, разработчики Frontend обычно работают с пользовательской частью сайта или веб-приложения.

• Вопросы и ответы 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 в конструкторе. Хочешь узнать больше? Еще вопросы с собеседований.