Веб-разработка на React: руководство для тех.директоров
Подберём лучших IT-специалистов
Оставьте свои контакты,
и мы обсудим детали поиска

    Ваше имя
    Номер телефона:

    cceptance-929 default:on ] Я согласен на обработку персональных данных [/acceptance]

    Узнайте стоимость подбора вашего персонала
    Оставьте телефон, мы свяжемся
    с вами и проконсультируем

      Ваше имя
      Номер телефона:
      Подберём лучших IT-специалистов
      Оставьте свои контакты,
      и мы обсудим детали поиска

        Ваше имя
        Номер телефона:
        Главная Блог Веб-разработка на React: практическое руководство для технических директоров
        Данил Ильин Данил Ильин
        22 июля
        619 просмотров

        Веб-разработка на React: практическое руководство для технических директоров

        Практическое руководство по веб-разработке React для CTO и тимлидов.

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

        Настоящая сила React заключается в том, как он заставляет вас писать код. Код React дает вам уверенность и надежность. Библиотека не навязывает какие-либо шаблоны кода или решения технического стека. Но, конечно, это не идеально подходит для каждого проекта и каждой команды. Тем не менее, эта статья должна дать вам ответ, идеально ли это для вас.

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

        Что нужно знать о веб-разработке на React

        React.js — это библиотека JavaScript, используемая для обработки уровня представления веб-приложений. Это дает полную гибкость с точки зрения инструментов и архитектуры. Отличное сообщество и поддержка крупных игроков делают React надежным. Frontend-разработчикам легко изучить React и работать с ним.

        Код React написан на JavaScript и JSX. Но важно то, что код написан декларативно. То есть вы описываете результат, а не способ его достижения. Основным строительным блоком в React является компонент. Это то, что позволяет разработчикам повторно использовать код, упрощает тестирование, масштабирование и поддержку приложения. Соответственно, декларативный код и компоненты — это самое главное в React.

        Безопасность, масштабируемость, обслуживание и производительность React

        Масштабируемость и ремонтопригодность являются одними из наиболее важных бизнес-аспектов при выборе технологии. Конечно, React подходит для сложных приложений, что было протестировано крупнейшими игроками, такими как Bloomberg, Airbnb или Codecademy. Благодаря компонентной архитектуре разработчики могут легко вносить изменения и обновления, которые повлияют не на все приложение, а только на один модуль.

        Теперь расскажем немного подробнее об архитектуре React

        Основные строительные блоки = компоненты React

        Создатели React сделали компоненты React основными строительными блоками и основным способом повторного использования кода в приложениях. Обязанности разделены компонентами, видимыми на экране, а не такими технологиями, как HTML, CSS и JavaScript. React предполагает, что вещи, которые меняются вместе, должны храниться вместе. Разметка, данные, логика и иногда стили обычно хранятся вместе в одном файле, потому что они изменяются вместе. Сама разметка представляет собой не только HTML, но и JSX, синтаксический сахар, построенный поверх API React, который значительно улучшает HTML и позволяет разработчикам использовать JavaScript вместо другого языка шаблонов. 

        Еще одно полезное качество компонентов React — четко определенный интерфейс.

        Все компоненты React:

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

        Эти четыре компонента помогут добиться низкой связи между компонентами — еще одно качество программного обеспечения, которое необходимо как компаниям, так и разработчикам, поскольку оно значительно упрощает написание нового кода и рефакторинг. Понятный интерфейс позволяет разработчикам тратить больше времени на разработку функций, а не на выяснение деталей реализации компонентов.

        Еще с React удобно знакомить новых разработчиков с командой. Благодаря модульности разработчики могут просто извлечь отдельный модуль и делегировать рабочую нагрузку новому члену команды. Кроме того, React очень быстр благодаря Virtual DOM. В отличие от реального DOM, он полностью существует в памяти, разумно определяя, какие изменения нужно внести. Библиотека также легкая, что еще больше повышает производительность.

        Вторичные строительные блоки React

        Независимо от выбранной вами технологии пользовательского интерфейса разработчикам может потребоваться отделить часть логики для ее повторного использования. Именно здесь React представляет вторичные строительные блоки и другие способы повторного использования кода. В React разработчики могут использовать компоненты высшего порядка (HoC), хуки, реквизиты рендеринга или контекст, чтобы перемещать общие или повторно используемые части кода в отдельное место. Например, HoC хорошо работает с такими вещами, как регистратор для всего приложения, интеграция с Google Maps API может быть реализована как хук или реквизит рендеринга, а глобальное состояние, необходимое для совместного использования между различными компонентами, может быть перемещено в значение глобального контекста.

        Масштабируемость и обслуживание

        В Brainhub мы рассматриваем фреймворки и библиотеки как инструменты, которые мы можем использовать для решения бизнес-задач. То же самое и с React. Одним из наиболее важных аспектов для многих предприятий является масштабируемость и ремонтопригодность.

        Здесь мы думаем о таких вещах, как:

        • легкость добавления нового кода, изменения старого и исправления ошибок,
        • насколько легко добавлять в проект новых людей (даже если они не знают React),
        • и, наконец, подходит ли React для больших и сложных приложений.

        На последний вопрос ответить проще всего.  У нас есть несколько примеров больших приложений, которые используют React и работают очень хорошо — Facebook, Instagram и Netflix. Asana перешла с Luna на React, когда у них начались проблемы, особенно с масштабированием. Среди компаний, использующих React, вы также найдете:

        • Khan Academy,
        • Yahoo Mail,
        • Paypal,
        • Atlassian,
        • New York Times.

        Для каких приложений лучше всего подходит React?

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

        • Крупномасштабные приложения

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

        • Приложения Real-Time 

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

        Чем React отличается от других альтернатив?

        Angular, React и Vue — это фреймворки/библиотеки JavaScript, которые некоторое время присутствуют на рынке. Чаще всего, когда техническим лидерам нужно выбрать фреймворк для нового проекта, битва происходит между этими тремя.

        • Angular или React

        Angular и React похожи больше, чем вы думаете. Это потому, что команда Angular отлично справилась с модернизацией фреймворка и уменьшением количества пакетов кода. Их отличает то, что Angular — это большая экосистема, которая реализует шаблоны кода и использование определенных инструментов, а React — это библиотека для создания пользовательских интерфейсов, поддерживающих гибкость с точки зрения инструментов и шаблонов кода. У Angular другая модель мышления, которая ближе к backend-языкам. Вот почему бэкенд-разработчикам легко понять его и написать с ним код. Кривая обучения React более пологая для фронтенд-разработчиков.

        • Vue или React

        Обе платформы являются современными, беспристрастными и поддерживают создание приложений с помощью компонентов. Они также используют виртуальный DOM, который повышает производительность. Что отличает React и Vue, так это то, что у React есть отличное сообщество, которое поддерживает разработчиков. Участники React уже создали множество полезных решений, ускоряющих и облегчающих разработку. Так как Vue еще довольно новый, сообщество небольшое и готовых решений не так много.

        React и React Native — как они связаны?

        React Native — это фреймворк на основе React.js для написания мультиплатформенных приложений для Android и iOS. Приложения написаны с использованием JavaScript и JSX. Затем под капотом мост вызывает собственный API рендеринга в Objective-C и Java. Таким образом, приложение отображается с использованием реальных компонентов мобильного пользовательского интерфейса, а не веб-представлений. Благодаря этому оно выглядит и ощущается как любое другое мобильное приложение. Если вы планируете разрабатывать веб-приложение и мобильное приложение, использование React и React Native — идеальное решение. Большая часть кода может быть разделена между этими двумя, и разработчики React быстро догонят React Native.

        React веб-разработка с различными бэкендами

        React является гибким с точки зрения внутреннего стека. Вы можете выбрать технологию, которая подходит вашему проекту или, например, местоположению (возможно, в вашем регионе много разработчиков Node.js и нет разработчиков Golang). Node.js кажется наиболее удобным выбором для серверной разработки, потому что ваша команда может поделиться некоторым кодом JavaScript. Тогда может быть достаточно нанять полноценных разработчиков JavaScript, которые позаботятся о внешнем и внутреннем интерфейсе.

        Фронтенды React можно сочетать с такими бэкендами, как:

        • Node.js
        • Laravel
        • Ruby on Rails
        • Django

        Переход на React с других технологий

        Когда устаревшее приложение становится проблемой, React — это решение. Он современный, он постоянно совершенствуется и может сочетаться с любым набором технологий. Процесс миграции прост, и благодаря компонентам его можно выполнять постепенно. Поэтому даже масштабные приложения можно легко перенести на React. Единственная загвоздка безболезненной миграции заключается в том, чтобы выполнять ее шаг за шагом, по одному компоненту за раз. Тщательное планирование и стратегия делают процесс проще, эффективнее и предотвращают сбои в работе вашего приложения.

        Технологии, которые компании часто выбирают для перехода на React, включают:

        • PHP
        • Python
        • Angular

        Как справиться с распространенными проблемами React JS

        • Реагировать на проблемы с производительностью

        Начнем с того, что Virtual DOM уже решает многие распространенные проблемы с производительностью. Однако повторяющаяся проблема с производительностью в ReactJS связана со сложным длинным списком элементов. К счастью, это довольно легко исправить — с помощью виртуализированных списков. Однако, прежде чем выбрать React, вы должны знать, что добавление его поверх существующего приложения не сделает его быстрее или легче. Наоборот. Вашей команде необходимо заменить часть кодовой базы внешнего интерфейса на React — тогда вы увидите ожидаемые результаты. 

        • Проблемы с индексацией поисковыми системами

        Типичные приложения React, одностраничные приложения работают гладко, но не оптимизированы для SEO. Если мы хотим, чтобы наше приложение индексировалось Google, нам нужен рендеринг на стороне сервера. Лучший инструмент для этого — Next.js. При рендеринге на стороне сервера мы предварительно рендерим HTML на нашем сервере. Затем сканирующий бот правильно индексирует наш сайт, а мы сохраняем скорость и быструю загрузку для наших посетителей.

        Расширение приложений React

        Большим преимуществом React является то, что вы можете начать с малого и добавлять к нему дополнительные инструменты, когда они вам понадобятся. React безболезненно расширяется и не заставляет разработчиков использовать какие-то конкретные решения. Кроме того, сообщество React создало множество решений, которые подходят для типичных вариантов использования, таких как стилизация, маршрутизация или управление состоянием.

        Сторонние инструменты, которые идеально подходят для React:

        • Redux для управления состоянием
        • Socket.io для использования веб-сокетов
        • Next.js для рендеринга на стороне сервера
        • Gatsby для создания статических веб-сайтов

        Библиотеки React

        Эти библиотеки помогут вам расширить ваше приложение React.

        • Create React App — интерфейс командной строки для простого создания проекта React.
        • Material UI — пакет пользовательского интерфейса.
        • Styled Components — помогают создавать небольшие повторно используемые компоненты, отвечающие за внешний вид приложения.
        • MobX — библиотека для управления состоянием.
        • Enzyme — библиотека для тестирования компонентов React, созданная AirBnB.
        • React Virtualized — помогает повысить эффективность рендеринга больших списков и табличных данных.

        6 причин всё-таки выбрать React

        Давайте выделим 6 основных причин, по которым команды разработчиков выбирают React для фронтенд-разработки:

        • легко научиться, особенно для фронтенд-разработчиков,
        • можно создавать богатые, высококачественные пользовательские интерфейсы,
        • React повышает продуктивность разработчиков и ускоряет разработку,
        • React поддерживают многие крупные компании, такие как Facebook и Uber,
        • React популярен, поэтому его сообщество большое и активное.
        Данил Ильин
        Руководитель агентства
        Закажите консультацию Мы свяжемся с вами в ближайшее время
        Данил Ильин
        Данил Ильин
        Основатель
        Поделиться в соцсетях:
        Рекомендуем

        Цифровая трансформация: компании, которые сделали это правильно

        Правильно выполненная цифровая трансформация выводит бизнес на новый уровень роста. Узнайте, как...

        12 августа
        94 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        Как пригласить кандидата на собеседование

        Даже на «горячем» рынке труда найм на открытую вакансию может занять много времени. Среднее время...

        10 августа
        370 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        Кто такой Data Engineer? Путеводитель по востребованной профессии

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

        9 августа
        378 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        11 ключевых KPI рекрутера и способы расчета эффективности

        Понимание того, как рассчитать KPI рекрутинга или ключевые показатели эффективности, может помочь...

        4 августа
        536 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        В чем разница между HR и рекрутером?

        Эйчары из отдела кадров и рекрутеры это одно и то же?  Обычно нет. Однако мы наткнулись на...

        3 августа
        249 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        7 основ управления it-персоналом, которые должен знать каждый HR-специалист

        Рассказываем, о чем важно помнить HR, которым нужно управлять людьми в IT-компании. В статье есть...

        2 августа
        614 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        Как повышать зарплату разработчику

        В IT принято принимать решения быстро: нашел классного разработчика — увеличил зарплату. Кажется,...

        1 августа
        205 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        Управление IT персоналом

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

        29 июля
        534 просмотров
        Аватар
        admin

        10 вещей о процессе разработки программного обеспечения для каждого CEO

        Разработка программного обеспечения — непростая задача.  Но иногда наблюдать за его созданием со...

        27 июля
        310 просмотров
        Данил Ильин
        Данил Ильин
        Основатель

        Причины эмоционального выгорания разработчика

        С эмоциональным выгоранием сталкивается каждый второй сотрудник — разработчики не исключение. Что к...

        25 июля
        526 просмотров
        Данил Ильин
        Данил Ильин
        Основатель
        Соц.сети