Кто такой 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. Что такое JSX?

• JSX — это расширение синтаксиса для JavaScript, обладающее всеми возможностями JavaScript.
• Вы можете внедрить любое выражение JavaScript в JSX, заключив его в фигурные скобки. После компиляции выражения JSX становятся обычными объектами JavaScript.
• Это означает, что вы можете использовать JSX внутри операторов if и циклов for, назначать его переменным, принимать в качестве аргументов и возвращать из функций.

2. Каков эквивалент следующего кода с использованием React.createElement?

const element = <h1 className="greeting">Hello, world!</h1>;

Эквивалент с использованием React.createElement будет выглядеть следующим образом:

const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);

3. Что такое Redux?

• Основная идея redux заключается в том, что все состояние приложения хранится в одном хранилище. Store (хранилище) - это просто JavaScript объект.
• Единственный способ изменить состояние — отправить действие (action) из вашего приложения, а затем написать редьюсеры для этих действий, которые изменяют состояние.
• Весь переход состояния хранится внутри редьюсеров и не должен иметь никаких побочных эффектов.

Подробнее о Redux можно узнать в бесплатном видео-курсе о Redux.

4. Что такое store в Redux?

Store — это JavaScript объект, который содержит состояние приложения. Наряду с этим он также имеет следующие обязанности:

• Разрешает доступ к состоянию через getState().
• Позволяет обновлять состояние с помощью отправки действия dispatch(action).
• Регистрирует слушателей через subscribe(listener).
• Обрабатывает отмену регистрации слушателей с помощью функции, возвращаемой из subscribe(listener).

5. Разница между action и reducer.

• Action (действие) — это простые JavaScript объекты.
• Они должны иметь тип, указывающий тип выполняемого действия.
• По сути, действия — это некоторые данные, которые отправляются из вашего приложения в хранилище.
• Редьюсер — это просто чистая функция, которая принимает предыдущее состояние и действие и возвращает обновленное состояние.

6. Для чего используется Redux Thunk?

• Redux Thunk — это промежуточное программное обеспечение (middleware), которое позволяет вам писать создателей действий (action creator), которые возвращают функцию вместо действия (action). Что такое action creators?
• Затем thunk можно использовать для задержки отправки действия, если выполняется определенное условие. Это позволяет вам обрабатывать асинхронную диспетчеризацию действий.
• Подробнее о Redux Thunk можно узнать в полном видео-курсе о Redux Thunk.

7. Напишите кастомный хук, который можно использовать для debounce’а ввода.

// Хук useDebounce

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timeout);
    };
  }, [value]);

  return debouncedValue;
};

// Использование

const Counter = () => {
  const [value, setValue] = useState(0);
  const lastValue = useDebounce(value, 1000);

  return (
    <div>
      <p>
        Current Value: {value} | Debounced Value: {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
};

8. Напишите кастомный хук для копирования текста в буфер обмена.

// Хук useCopyToClipboard

function useCopyToClipboard(content) {
  const [isCopied, setIsCopied] = useState(false);

  const copy = useCallback(() => {
    navigator.clipboard
      .writeText(content)
      .then(() => setIsCopied(true))
      .then(() => setTimeout(() => setIsCopied(false), 1250))
      .catch((err) => alert(err));
  }, [content]);
  return [isCopied, copy];
}

// Использование
export default function App() {
  const [isCopied, copy] = useCopyToClipboard("Text to copy!");
  return <button onClick={copy}>{isCopied ? "Copied!" : "Copy"}</button>;
}

9. Как использовать хук useId для создания уникальных идентификаторов?

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

// Использование

import { useId } from "react";

const App = () => {
  const id = useId();

  return (
    <form>
      <label htmlFor={`email-${id}`}>Email</label>
      <input type="text" id={`email-${id}`} name="email" />

      <label htmlFor={`password-${id}`}>Password</label>
      <input type="password" id={`password-${id}`} name="password" />
    </form>
  );
};

// Плохая практика - не стоит использовать в качестве key
const id = useId();

return posts.map((post) => <article key={id}>...</article>);

Подробности можно найти в статье Что за хук useId в React?.

10. Как проверить/валидировать пропсы в React?

Мы можем использовать пакет prop-types Раньше, до React v15.5, это было частью самого React.

import PropTypes from "prop-types";

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

MyComponent.propTypes = {
  name: PropTypes.string,
};

export default MyComponent;

Еще один вариант - это добавить к проекту TypeScript.

11. Приведите практический пример компонента высшего порядка в React.

• Напишем компонент высшего порядка (HOC) для отображения загрузки, пока компонент ожидает данные.
• Больше о компонентах высшего порядка можно узнать в видео Как использовать Компоненты высшего порядка React и Паттерн Render Props в ReactJS.

// Компонент высшего порядка
function WithLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return <Component {...props} />;
    return <p>Please wait, fetching your data in no time...</p>;
  };
}
export default WithLoading;

// Использование

import UserListComponent from "./UserListComponent.js"; // импорт компонента
import WithLoading from "./withLoading.js"; // импорт HOC

const ListWithLoading = WithLoading(UserListComponent); // обернем компонент в HOC

const App = () => {
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // запрос данных
    const dataFromApi = ["this is coming from API call", "don't show loader"];
    
    // в это время загрузчик будет показан в HOC
    // данные получены
    setUsers([...dataFromApi]);
    setLoading(false);
  }, []);

  return <ListWithLoading isLoading={loading} users={users} />;
};

12. Чем полезен хук useDeferredValue?

• useDeferredValue — это React хук, который позволяет вам отложить обновление части пользовательского интерфейса.
• По сути, это позволяет вам выполнять технику debounce с меньшим количеством кода.
• Подробный разбор хука useDeferredValue можно прочитать в статье Хуки useTransition и useDeferredValue в ReactJS 18.

// Использование

import { useState, useDeferredValue } from "react";
// Компонент userList получает searchText для запроса списка пользователей
import UserList from "./UserList.js";

export default function App() {
  const [searchText, setSearchText] = useState("");
  // отправить searchText по умолчанию
  const deferredQuery = useDeferredValue(searchText);

  return (
    <>
      <label>
        Search user:
        <input
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
        />
      </label>
      <div>
        <UserList searchText={deferredQuery} />
      </div>
    </>
  );
}

13. Как отследить клик за пределами компонента React?

export default function OutsideAlerter() {
  const clickMeDivRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!ref?.current?.contains(event.target)) {
        alert("You clicked outside of me!");
      }
    };

    // Добавим прослушивание событий
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      // Удалим прослушивание событий
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [clickMeDivRef]);

  return <div ref={clickMeDivRef}>Clicked me?</div>;
}

14. Почему имена компонентов React должны начинаться с заглавных букв?

В JSX имена тегов нижнего регистра считаются тегами HTML. Однако имена тегов в нижнем регистре с точкой (аксессор свойства) не являются таковыми.

• <person /> компилируется в React.createElement('person') (тег html)
• компилируется в React.createElement(Person)
• <obj.person /> компилируется в React.createElement(obj.person)

// Ошибка! Это компонент и должен начинаться с заглавной буквы
function person(props) {
  // Верно! Это использование <div> верно, т.к. div это валидный элемент
  return <div>{props.isLearning ? "Great!" : "Hello!"}</div>;
}

function App() {
  // Ошибка! React считает <person /> тэгом HTML, т.к. Не с заглавной буквы
  return <person isLearning={true} />;
}

// Верно! Это компонент и должен начинаться с заглавной буквы
function Person(props) {
  // Верно! Это использование <div> верно, т.к. div это валидный элемент
  return <div>{props.isLearning ? "Great!" : "Hello!"}</div>;
}

function App() {
  // Верно! React знает, что <Person /> - это компонент, с заглавной буквы
  return <Person isLearning={true} />;
}

15. В чем разница между npx и npm?

• npm — это менеджер пакетов, который можно использовать для установки пакетов node.js. npM - Manager.
• npx— это инструмент для выполнения пакетов node.js. npX - Execute.

Неважно, установили ли вы этот пакет глобально или локально. npx временно установит его и запустит. npm также может запускать пакеты, если вы настроите файл package.json. Поэтому, если вы хотите быстро проверить/запустить пакет без его установки - используйте npx. create-react-app — это npm пакет, который должен запускаться только один раз в жизненном цикле проекта. Следовательно, предпочтительнее использовать npx для установки и запуска за один шаг.

> npx create-react-app my-app

16. Как установить фокус на поле ввода после монтирования компонента в UI?

import React, { useEffect, useRef } from "react";

const SearchPage = () => {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, []);

  return (
    <div>
      <input ref={textInput} type="text" />
    </div>
  );
};

Еще больше вопросов с собеседований