Сегодня почти половина приложений React используют Redux. Вопрос в том, почему Redux набирает обороты? И становится ли React более популярным благодаря Redux?
В MasterBorn мы делаем ставку на качество, а не на количество. Подход «меньше значит больше» хорошо работает для нас, и мы применяем его как к людям, которых мы нанимаем, так и к технологиям, которые мы добавляем в наш стек. Интересный факт: в прошлом году мы приняли на работу 0,70% кандидатов, обратившихся к нам (всего 3576!). И мы подходим к нашему стеку технологий аналогичным образом. Возьмем в качестве примера фронтенд-разработку. Сегодня наш технологический стек JavaScript выглядит так:
Технический стек JavaScript: React и Node.js
Такая узкая специализация позволяет нам работать на глобальном уровне, объединяя опытных старших разработчиков, знающих свою технологию вдоль и поперек. Мы всегда заняты расширением наших знаний, чтобы достичь мастерства в JavaScript. И мы применяем этот опыт в решениях, которые мы создаем для наших клиентов, балансируя и оптимизируя их стоимость и производительность.
Node.js — это технология разработки бэкэнда. Серверная часть веб-приложения — это место, где его данные хранятся и обслуживаются.
React, с другой стороны, является одним из самых популярных вариантов для фронтенд-разработки. Внешний интерфейс веб-приложения — это часть, которую пользователи видят и с которой взаимодействуют, когда загружают его на настольный компьютер, ноутбук или мобильное устройство. Внешний и внутренний интерфейс взаимодействуют с помощью API или библиотеки. В этой статье мы сосредоточимся на двух интерфейсных технологиях — React и другой библиотеке Javascript, Redux.
Сегодня почти половина приложений React используют Redux. Вопрос в том, почему Redux набирает обороты? И становится ли React более популярным благодаря Redux? Продолжайте читать, чтобы лучше понять эти два фронтенд-инструмента и узнать, как технологические гиганты и стартапы извлекают из них выгоду в веб-разработке.
Что такое Реакт?
React — это библиотека JavaScript, которую инженеры используют для создания пользовательских интерфейсов и компонентов для веб-приложений. Сегодня React является популярным выбором среди компаний, которые хотят создавать сложные веб-страницы, а также их макеты и контент.
React был разработан Джорданом Уоке из Facebook и первоначально использовался для создания ленты Facebook в 2011 году. Позже разработчики Facebook использовали его для разработки Instagram в 2012 году. В 2013 году React стал библиотекой с открытым исходным кодом, и сегодня он поддерживается сообществом. с помощью фейсбука.
React и React Native — в чем разница?
Название React может навести на мысль о другой технологии — React Native. Не путайте эти два, потому что они служат совершенно разным целям.
В то время как React — это библиотека для веб-разработки, React Native — это фреймворк на основе React, используемый для создания кроссплатформенных мобильных приложений. React Native также был разработан Facebook, и сегодня он используется в качестве одного из основных кроссплатформенных инструментов для создания нативных мобильных приложений для iOS и Android.
Что такое Редукс?
Redux — это библиотека JavaScript с открытым исходным кодом, написанная на самом JavaScript. Первоначально он был выпущен в 2015 году Дэном Абрамовым и Эндрю Кларком.
Ключевое преимущество Redux заключается в его совместимости с другими библиотеками JavaScript, такими как React, Ember и Angular. Вы можете использовать Redux для улучшения вашего сложного приложения JavaScript. Инженеры также любят Redux за его отладчик с перемещением во времени, который позволяет редактировать код в реальном времени.
React и Redux — в чем разница?
Чтобы объяснить разницу между React и Redux, нам нужно сосредоточиться на одной ключевой детали — состояниях. Каждому приложению нужен метод управления состоянием.
Состояние React хранится локально внутри компонента. Когда состояние необходимо разделить с другими компонентами, оно просто передается через свойства. Что это значит для вашего приложения? Что его самый верхний компонент, которому требуется доступ к изменяемому значению, будет удерживать это значение в своем состоянии.
С другой стороны, в Redux состояние хранится глобально в хранилище Redux. Любой компонент, которому требуется доступ к значению, может подписаться на хранилище и легко получить доступ к значению.
Redux помогает централизовать все данные, позволяя компонентам получать необходимое им состояние — без ведома других компонентов. Эти две технологии часто используются вместе — как вы увидите в следующих примерах довольно впечатляющих приложений.
Зачем использовать React?
Почему React стал таким популярным?
Реакция является декларативной
Это означает, что инженеры-программисты могут легко создавать интерактивные пользовательские интерфейсы. Это также делает код приложения более предсказуемым и упрощает отладку.
Мягкая кривая обучения
По сравнению с другими популярными фреймворками на основе JavaScript, такими как Angular, React прост в изучении и использовании.
React основан на компонентах
Компоненты — это в основном строительные блоки страниц React, и хорошая новость заключается в том, что их можно использовать повторно. Это ускоряет процесс разработки.
Массивное сообщество
React окружен большим сообществом разработчиков, которые делятся своими знаниями и рады помочь друг другу. Это означает, что найти квалифицированных программистов для вашего проекта стало проще.
React поддерживает мобильную разработку
React Native быстро развивается и становится ключевой технологией для разработки нативных мобильных приложений.
Зачем использовать React и Redux?
Пусть успешные примеры приложений React и React & Redux станут вашим ответом. Готовый? Реагируй, ты первый. Покажи нам, что у тебя есть!
5 примеров успешных веб-приложений, созданных с помощью React
Приложение React № 1: Netflix
Местонахождение: Лос-Гатос, Калифорния
Дата основания: 1997 г.
Финансирование: 3,2 млрд долларов
Доход: 24,99 млрд долларов (в 2020 г.)
Пользователи: 203,66 млн
Команда Netflix использовала React для разработки самого популярного веб-приложения для потоковой передачи видео в Интернете. Они даже опубликовали сообщение в блоге, в котором объясняется, как React помогает им увеличить скорость запуска, оптимизировать производительность во время выполнения и улучшить многие другие вещи.
Как говорят инженеры пользовательского интерфейса Netflix:
«На наше решение внедрить React повлиял ряд факторов, в первую очередь: 1) скорость запуска, 2) производительность во время выполнения и 3) модульность».
Приложение React № 2: Dropbox
Местонахождение: Сан-Франциско, Калифорния
Дата основания: 2007 г.
Финансирование: 1,7 млрд долларов США Доход: 0,504 млрд долларов США (4 кв. 2020 г.)
Пользователи: 600 млн пользователей (3 кв. 2019 г.)
Dropbox перешел на React с CoffeeScript некоторое время назад, как раз тогда, когда эта технология набирала обороты среди веб-разработчиков. Dropbox использует React для обработки огромного трафика и потоков данных, с которыми сталкивается платформа. Таким образом, будет справедливо сказать, что библиотека является серьезным фактором успеха службы облачного хранения.
Приложение React № 3: WhatsApp
Местонахождение: Санта-Клара, Калифорния
Основана: 2009 г.
Финансирование: 60,3 млн долларов (приобретена Facebook в 2014 г. за 19 млрд долларов)
Доход: оценки варьируются от 5 до 15 млрд долларов. »
Пользователи: 2 миллиарда
Хотя мы видели несколько бета-версий WhatsApp до его официального запуска, новое веб-приложение WhatsApp использует React для создания пользовательского интерфейса в тандеме с другими библиотеками и фреймворками JavaScript, такими как Underscore.js и Velocity.js.
Приложение React № 4: Академия Хана
Местоположение: Пало-Альто, Калифорния
Год основания: 2006
Финансирование: $16,2 млн
Доход: $16,8 млн
Пользователи: 6,54 млн (подписчики на канале YouTube)
Многие части Khan Academy основаны на React. Один из инженеров поделился личным опытом работы с библиотекой и показал, чем она отличается от скрипта Backbone, который они использовали ранее. Переход на React выглядит как серьезное обновление — взгляните на его статью, чтобы узнать больше о наиболее важных функциях, созданных с помощью React, и о преимуществах, которые он принес в Khan Academy.
Приложение React № 5: DineSafe
Расположение: Хартфорд, Коннектикут
Дата основания: 2020 г.
Пользователи: рестораны Коннектикута, 150+ закусочных на базе Коннектикута
Этот стартап из Коннектикута создал веб-платформу, которая предлагает пользователям уверенность в том, что ресторан, в котором они едят, соблюдает надлежащие санитарные нормы и протоколы. DineSafe недавно получил огромный импульс, когда Google согласился сделать сертификацию DineSafe видимой, когда кто-то ищет ресторан. Вся платформа была разработана с использованием React, что свидетельствует о популярности этой технологии среди начинающих стартапов.
Хорошо, пришло время посмотреть, чего React может достичь вместе с Redux. Вот 5 решений, созданных с помощью этого главного дуэта.
5 примеров успешных веб-приложений, созданных с помощью React и Redux
Приложение React и Redux №1: Instagram
Местонахождение: Менло-Парк, Калифорния
Дата основания: 2010 г.
Финансирование: 57,5 млн долларов (приобретена Facebook в 2012 г. за 1 млрд долларов)
Доход: оценочный доход от рекламы в 20 млрд долларов в 2019 г. (Bloomberg )
Пользователи: 1 миллиард активных пользователей в месяц
Instagram использует React во многих частях своего приложения — от геолокации и API Google Maps до невероятной точности поисковых систем и тегов. Благодаря React фанаты могут получить доступ ко многим удивительным функциям. И, согласно Stackshare, Instagram также использует Redux.
Приложение React и Redux № 2: Amazon
Местонахождение: Сиэтл, штат Вашингтон
Основана: 1994 г.
Финансирование: 108 млн долларов
Доход: 125,555 млрд долларов (4 квартал 2020 г., рост на 43,59% в годовом исчислении)
Глобальный магнат электронной коммерции и поставщик облачных услуг использует React для страниц брендов, которые поставщики могут настроить для создания уникального опыта на сайте Amazon. На недавнем хакатоне под названием 5-дневный вызов React Challenge участники создали Клон Amazon, используя — сюрприз, сюрприз — React.
Приложение React и Redux № 3: Revolut
Местонахождение: Лондон, Англия
Дата основания: 2014 г.
Финансирование: 905,5 млн долларов
Доход: 160 млн фунтов стерлингов (2019 г.)
Пользователи: 12 млн (июнь 2020 г.)
Revolut — это платформа финансовых услуг, которая специализируется на мобильном банкинге, карточных платежах и обмене иностранной валюты. Пользователи могут воспользоваться множеством различных продуктов, от предоплаченных дебетовых карт и обмена валюты до одноранговых платежей. Чтобы создавать свои финансовые решения без трения, Revolut использует React с Redux.
Приложение React и Redux № 4: BlaBlaCar
Местонахождение: Париж, Франция
Дата основания: 2006 г.
Финансирование: 448,5 млн долларов
Пользователи: 87 млн
Французский стартап BlaBlaCar не только занимается райдшерингом — недавно он диверсифицировал свою деятельность, занявшись автобусными поездками и продажей автобусных билетов. Предлагая услуги в 400 городах Европы, BlaBlaCar, безусловно, является одним из самых впечатляющих технологических стартапов в Европе. И, по данным Stackshare, одной из технологий, лежащих в основе его успеха, является сочетание React с Redux.
Приложение React и Redux № 5: Trustpilot
Местонахождение: Копенгаген, Дания
Год основания: 2007
Финансирование: 199,7 млн долларов
Доход: 100 млн долларов (3 кв. 2020)
В прошлом году пользователи написали более 38 миллионов отзывов на Trustpilot. Этот удобный бесплатный веб-сервис позволяет любому пользователю просматривать услуги компании под настоящим именем или псевдонимом. Идея заключалась в том, чтобы дать пользователям возможность получить независимую оценку услуг компании без риска получения фальшивых и мошеннических отзывов. Компания сообщила об успешном решении этой задачи — и ее впечатляющий интерфейс скрывает эту сложность благодаря React и Redux.
Приложения, созданные с помощью React и Redux — заключительные мысли
React предлагает революционный подход к созданию интерфейсов и мобильных приложений. Он быстро стал популярным инструментом для многих разработчиков JavaScript, и, похоже, никуда не денется. Сочетание Redux и React добавляет дополнительную силу и помогает разработчикам быстрее создавать приложения.
Нам очень нравится использовать их при создании продуктов для наших клиентов, и мы обязательно продолжим это делать еще долгие годы. Если вы все еще колеблетесь между React, React и Redux и другими фреймворками или библиотеками, просто напишите нам по адресу [email protected], и мы позаботимся о том, чтобы React появился как можно быстрее.
