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

год назад·4 мин. на чтение

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 обычно работают с пользовательской частью сайта или веб-приложения.

20 советов для улучшения качества кода в React проекте

10 месяцев назад·5 мин. на чтение

React очень гибок и не строг к структуре компонентов. Именно поэтому мы несем ответственность за поддержание чистоты и поддерживаемости наших проектов.

В этой статье рассмотрим некоторые рекомендации по улучшению качества приложения на 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" />