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

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

1. Используйте короткую запись JSX

Попробуйте использовать сокращение JSX для передачи логических переменных. Допустим, вы хотите управлять видимостью заголовка компонента панели навигации.

Плохо

return (
  <Navbar showTitle={true} />
);

Хорошо

return(
  <Navbar showTitle />  
)

2. Используйте тернарные операторы

Допустим, вы хотите отобразить сведения о пользователе в зависимости от роли.

Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
} 

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

3. Воспользуйтесь преимуществами объектных литералов

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

Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Componenent />;

Теперь код выглядит намного лучше.

4. Используйте фрагменты

Всегда используйте Fragment вместо лишней обертки div. Это сохраняет код чистым, а также полезно для производительности, поскольку в виртуальной модели DOM создается на один узел меньше.

Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)

5. Не определяйте функцию внутри рендеринга

Не определяйте функцию внутри функции рендеринга. Постарайтесь свести логику рендеринга к абсолютному минимуму.

Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // здесь определена функция
      This is a bad example 
    </button>  
)

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)

6. Используйте React memo

React.PureComponent и Memo могут значительно повысить производительность вашего приложения. Они помогают нам избежать ненужного рендеринга.

Плохо

import React, { useState } from "react";

export const TestMemo = () => {
  const [userName, setUserName] = useState("faisal");
  const [count, setCount] = useState(0);

  const increment = () => setCount((count) => count + 1);

  return (
    <>
      <ChildrenComponent userName={userName} />
      <button onClick={increment}> Increment </button>
    </>
  );
};

const ChildrenComponent =({ userName }) => {
  console.log("rendered", userName);
  return <div> {userName} </div>;
};

Хотя дочерний компонент должен отображаться только один раз, так как значение count не имеет ничего общего с ChildComponent. Но он отображается рендерится каждый раз, когда вы нажимаете на кнопку.

Хорошо

Давайте отредактируем ChildrenComponent следующим образом:

import React, {useState} from "react";

const ChildrenComponent = React.memo(({userName}) => {
    console.log('rendered')
    return <div> {userName}</div>
})

Теперь, независимо от того, сколько раз вы нажмете на кнопку, она будет отображаться только тогда, когда это необходимо.

7. Поместите CSS в JavaScript

Избегайте сырого JavaScript при написании приложений React, потому что организовать CSS намного сложнее, чем организовать JS.

Плохо

// CSS FILE

.body {
  height: 10px;
}

//JSX

return <div className='body'>

</div>

Хорошо

const bodyStyle = {
  height: "10px"
}

return <div style={bodyStyle}>

</div>

8. Используйте деструктурирование объектов

Используйте деструктурирование объектов в своих интересах. Допустим, вам нужно показать данные пользователя.

Плохо

return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)

Хорошо

const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

9. Строковые пропсы можно передавать без фигурных скобок

При передаче строковых пропсов дочернему компоненту.

Плохо

return(
  <Navbar title={"My Special App"} />
)

Хорошо

return(
  <Navbar title="My Special App" />  
)

10. Удалить JS-код из JSX

Вынесите JS-код из JSX, если это не служит какой-либо цели рендеринга или функциональности пользовательского интерфейса.

Плохо

return (
  <ul>
    {posts.map((post) => (
      <li onClick={event => {
        console.log(event.target, 'clicked!'); // <- плохо
        }} key={post.id}>{post.title}
      </li>
    ))}
  </ul>
);

Хорошо

const onClickHandler = (event) => {
   console.log(event.target, 'clicked!'); 
}

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}>{post.title}</li>
    ))}
  </ul>
);

11. Используйте шаблонные литералы

Используйте шаблонные литералы для создания длинных строк. Избегайте использования конкатенации строк. Это будет выглядеть красиво и чисто.

Плохо

const userDetails = user.name + "'s profession is" + user.proffession

return (
  <div> {userDetails} </div>  
)

Хорошо

const userDetails = `${user.name}'s profession is ${user.proffession}`

return (
  <div> {userDetails} </div>  
)

12. Порядок импортов

Всегда старайтесь импортировать сущности в определенном порядке. Это улучшает читаемость кода.

Плохо

import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';

Хорошо

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

• Встроенные зависимости
• Внешние зависимости
• Внутренние зависимости

Итак, приведенный выше пример становится:

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

13. Используйте неявный возврат

Используйте функцию JavaScript с неявным возвратом результата при написании красивого кода. Допустим, ваша функция выполняет простое вычисление и возвращает результат.

Плохо

const add = (a, b) => {
  return a + b;
}

Хорошо

const add = (a, b) => a + b;

14. Именование компонентов

Всегда используйте PascalCase для компонентов и camelCase для экземпляров.

Плохо

import reservationCard from './ReservationCard';

const ReservationItem = <ReservationCard />;

Хорошо

import ReservationCard from './ReservationCard';

const reservationItem = <ReservationCard />;

15. Кавычки

Используйте двойные кавычки для атрибутов JSX и одинарные кавычки для всех остальных JS.

Плохо

<Foo bar='bar' />

<Foo style={{ left: "20px" }} />

Хорошо

<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

16. Именование пропсов

Всегда используйте camelCase для имен объектов или PascalCase, если значение объекта является компонентом React.

Плохо

<Component
  UserName="hello"
  phone_number={12345678}
/>

Хорошо

<MyComponent
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

17. JSX в круглых скобках

Если компонент занимает более одной строки, всегда заключайте его в круглые скобки.

Плохо

return <MyComponent variant="long">
           <MyChild />
         </MyComponent>;

Хорошо

return (
    <MyComponent variant="long">
      <MyChild />
    </MyComponent>
);

18. Самозакрывающиеся теги

Если компонент не имеет дочерних элементов, используйте самозакрывающиеся теги. Это улучшает читаемость.

Плохо

<SomeComponent variant="stuff"></SomeComponent>

Хорошо

<SomeComponent variant="stuff" />

19. Нижнее подчеркивание в названии метода

Не используйте символы подчеркивания ни в одном внутреннем методе React.

Плохо

const _onClickHandler = () => {
  // код
}

Хорошо

const onClickHandler = () => {
  // код
}

20. Проп alt

Всегда включайте проп alt в теги <img >. И не используйте picture или image в проп alt, потому что программы чтения с экрана уже объявляют элементы img изображениями.

Плохо

<img src="hello.jpg" />

<img src="hello.jpg" alt="Picture of me rowing a boat" />

Хорошо

<img src="hello.jpg" alt="Me waving hello" />