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

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

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

• Структура React приложения
• Архитектура современного React приложения

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

Как обстоят дела в React

Рассмотрим проблему на более высоком уровне. Если вы внимательно посмотрите на React и согласитесь, что он отвечает только за визуальную часть нашего приложения, многие проблемы будут решены автоматически. Независимо от того, используем ли мы традиционные шаблоны MVC/MVP или их вариант MVVM, если React — это V, очевидно, нам нужно что-то еще, чтобы заполнить роль M или VM в приложении. Среди многих проектов я также обнаружил, что многие хорошие практики, которые мы используем в бэкенде, не признаны в мире фронтенда, такие как слоеная структура, паттерны проектирования и т. д. Одна из возможных причин заключается в том, что фронтенд относительно молодой и ему нужно некоторое время, чтобы наверстать упущенное. Например, в типичном приложении Spring MVC у нас были бы controller, service и repository, и каждый разработчик принимает причину такого разделения: controller не содержит бизнес-логики, service не знает, как модель отображается или сериализуется для пользователей, а repository работает только о доступом к данным. Однако во фронтенд-приложениях на React из-за отсутствия встроенной поддержки (например, отсутствия контроллеров или слоя репозитория) мы вместо этого пишем этот код в компоненты. И это приведет к тому, что бизнес-логика будет повсюду. Итерации станут медленными, а качество кода низким.

Утечка бизнес-логики

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

• Использование преобразователей данных
• x.y.z
• Защитное программирование

Использование преобразователей данных

Эту паттерн легко обнаружить: если вы делаете map для преобразования данных, вы, вероятно, пересекаете два ограниченных контекста (что может привести к утечке логики). Мы все видели или, возможно, писали такой код, как:

fetch(`https://example.com/api/addresses`)
.then((r) => r.json())
.then((data) => {
    const addresses = data.map((item: RemoteAddress) => ({
        street: item.streetName,
        address: item.streetAddress,
        postcode: item.postCode
    }))
    setAddresses(addresses)
});

В приведенном выше фрагменте то, что возвращает бэкэнд, не совсем соответствует тому, что потребляет UI, поэтому нам нужно преобразовать полученные данные. Мы можем использовать сервис, разработанный другой командой, или использовать сторонний сервис (например, Google Search API). Таким образом, казалось бы, безобидный код нарушил здесь несколько принципов:

• Компонент должен знать тип RemoteAddress
• Компоненту необходимо определить новый тип Address (setAddresses)
• data.map выполняет низкоуровневое сопоставление

Симптом x.y.z (нарушение закона Деметры)

Если вы используете более одного оператора точки ., вероятно, это означает, что отсутствуют некоторые концепции. person.deliveryAddress лучше, чем person.primaryAddress.street.streetNumber + person.primaryAddress.suburb так как первый вариант правильно скрывает детали. Приведенный ниже код показывает, что ProductDialog слишком много знает о product, и как только структура product изменится, нам придется менять множество мест (тесты и компоненты)

const ProductDialog = (props) => {
  const { product } = props;
  if(product.item.type === 'Portion') {
    //do something
  }
}

Здесь мы имеем дело с данными, а не с моделью. Таким образом, product.isPortion() будет более значимым, чем проверка необработанных данных.

Защитное программирование

Во многих проектах люди склонны делать слишком много в компоненте, и это создает много шума в коде. Например:

const ProductDetails = (props) => {
  const { product } = props
  const { item } = product
  const { media } = item as MenuItem
  
  const title = (media && media.name) || ''
  const description = (media && media.description) || ''
  return (
    <div>
      {/* product details */}
    </div>
  )
}

Обратите внимание, что мы проверяем на null и предоставляем запасное значение в компоненте. Однако мы должны выполнять этот тип логики в специально отведенном месте.

Как решить проблему?

На практике мы можем попробовать двухэтапный подход к решению проблемы.

1. Регулярный рефакторинг
2. Создание моделей

Регулярный рефакторинг

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

• Использования преобразователей данных
• x.y.z
• Защитного программирования

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

const transformAddress: Address = (address: RemoteAddress) => {
    return ({
        street: datum.streetName,
        address: datum.streetAddress,
        postcode: datum.postCode
    })
}
//...
const addresses = data.map(transformAddress)

Также иногда бывает нужно преобразовать аббревиатуры в текст такие как VIC или NSW, но нам нужно показать их в полном тексте на странице как Victoria или New South Wales.

const states = {
  vic: "Victoria",
  nsw: "New South Wales",
  //...
};

const transformAddress: Address = (address: RemoteAddress) => {
  return {
    street: address.streetName,
    address: address.streetAddress,
    postcode: address.postCode,
    state: states[address.state.toLowerCase()]
  };
};

Точно так же мы можем использовать функцию, для проверки title и description и вывода запасного значения:

const getTitle = (media) => (media && media.name) || ''
const getDescription = (media) => (media && media.description) || ''

По мере добавления все больше и больше логики, такой transformAddress и getTitle, они будут перемещаться в helpers.ts, в конечном итоге у нас будет огромный файл. Это означает, что он станет нечитаемым и будет иметь высокие затраты на обслуживание. Мы можем разделить файл на модули, но связи между этими функциями могут затруднить их понимание. Это похоже на проблему, с которой мы сталкивались до объектно-ориентированного программирования - у нас слишком много модулей и функций в каждом модуле, и слишком сложно ориентироваться в них. Другими словами, нам нужен лучший способ организации этих вспомогательных функций. К счастью, нам не нужно изобретать велосипеды. Нам может помочь объектно-ориентированное программирование. Просто используя классы и инкапсуляцию в ООП, мы можем легко сгруппировать эти функции и сделать код намного более читабельным. Чтобы сгруппировать код создадим модели.

Создание моделей

Короче говоря, создание моделей — это объединение данных и поведения, сокрытие деталей и обеспечение общего API для потребителей. Например, мы не должны использовать product.item.type === 'Portion', вместо этого мы должны создать класс Product, и у него есть isPortion для их потребителей. Это очень распространено в бэкенд-сервисах, но не получило широкого распространения в мире фронтенда. Причина в том, что, как упоминалось выше, люди упускают из виду, что React отвечает только за визуализацию. И здоровое фронтенд-приложение должно иметь и другие части. Ему нужны модели и логика для взаимодействия с серверной частью, даже для ведения логирования. Возвращаясь к приведенному выше примеру, определив класс Address для замены анонимной функции внутри data.map, мы получим:

class Address {
  constructor(private addr: RemoteAddress) {}
  get street() {
    return this.addr.streetAddress;
  }
  get postcode() {
    return this.addr.postcode;
  }
}

Нет никакой разницы в использовании:

const AddressLine = ({ address }: { address: Address }) => (
  <li>
    <div className="result">{address.street}</div>
  </li>
);

Единственное, что нужно изменить, это заменить transformAddress на new Address:

const addresses = data.map((addr: RemoteAddress) => new Address(addr))

И для частного члена/функции для перевода названия штата:

private readonly states = {
  vic: "Victoria",
  nsw: "New South Wales",
  //...
};

get state() {
  return this.states[this.addr.state.toLowerCase()];
}

Структура теперь намного точнее. states теперь является приватным членом класса Address. Класс хорош тем, что он объединяет всю связанную логику в одну часть, что делает его изолированным и простым в обслуживании. Размещение всей связанной логики в одном месте имеет и другие преимущества. Во-первых, такое разделение делает тестирование простым и надежным, поскольку компоненты зависят от модели (а не от исходных данных). Нам не нужно готовить данные с нулевым значением или значения вне границ предусмотренных значений для тестов компонентов. Точно так же модель тестирования больше фокусируется на данных и логике (пустое значение, проверка и запасное значение). Во-вторых, согласованность повышает вероятность его повторного использования в других сценариях. Наконец, если нам нужно переключиться на другую стороннюю службу, нам нужно только изменить модели, и представления могут остаться нетронутыми. По мере того, как создается все больше и больше моделей, нам может понадобиться целый слой для них. Эта часть кода не знает о существовании компонентов пользовательского интерфейса и связана исключительно с бизнес-логикой.

Итоги

Инкапсуляция бизнес-логики, даже в контексте тонких клиентов, является относительно большой темой. В этой статье мы рассмотрели несколько симптомов утечки бизнес-логики и то, как с ними бороться. Проводя регулярный рефакторинг, мы можем гарантировать, что компоненты отвечают только за рендеринг данных и не должны выполнять какие-либо вычисления или сопоставление данных. Мы должны разделить эту логику на чистые файлы JavaScript (а не jsx/tsx). И с помощью создания моделей мы можем использовать объекты только для того, чтобы скрыть детали доступа к данным. Преимущества этого подхода заключаются в том, что тестирование как модели, так и представлений значительно упрощается, легче отслеживать изменения бизнес-требований и гораздо более простой код в представлениях (поскольку большая часть этого делается в моделях).