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

Проще говоря, фронтенд разработчики сосредоточены на аспектах сайта, обращенных к посетителям, в отличие от 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. Что такое 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>
  );
};

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