Недавно у нас появилась возможность принять участие в потрясающей конференции React под названием ReactFoo, которая прошла в Дели, Индия, 18 августа 2018 года. SimbaQuartz спонсировал нашу поездку, чтобы мы могли лучше взглянуть на мир React вне нашей организации (большинство наших проектов основаны на реакции) и изучить несколько новых приемов, чтобы расширить нашу базу знаний и применить их к проектам наших клиентов.
Если вы знакомы с фронтенд-инжинирингом, эта статья изменит Как реакция меняет мир фронтенд-разработки и структурирования Dev-Ops. Как было раньше и где сейчас!
В этой статье мы обсудим Power of React в различных аспектах.
Что такое React?
Библиотека java-скриптов для создания пользовательских интерфейсов, обеспечивающая декларативную структуру, архитектуру на основе компонентов с философией «научись один раз писать где угодно». За последние несколько лет React набрал огромные обороты и теперь принимается в качестве стандартной среды разработки интерфейса.
Мировой интерес к React за последние 5 лет. Кредиты Google Trends
Наш опыт был далек от хорошего, это действительно было потрясающе. В мире столько всего происходило. С FAST PACE мир фронтенд-инжиниринга меняется.
Если мы вернемся в мир, когда мы проектировали целые страницы в HTML и CSS, и мы использовали восхитительный Vanilla-JS и jQuery для поддержки Front End Engineering, никогда не было такой крутой кривой в простоте обработки данных. flow и управление состоянием, пока не вступила в игру библиотека ReactJS. ReactJS дал нам много возможностей думать по-другому.
ReactJS расширил использование декларативного программирования. Неважно, если вы не знаете, как будет выглядеть код, вы просто держите цель в уме и, следовательно, наслаждаетесь плодами в конце. РЕАКТ ДЕЛАЕТ ВСЕ. Нам не нужно держать след на средних ступенях. React заставляет нас быть больше декларативным программистом, чем императивным программистом.
Поток данных пользовательского интерфейса в React так же прост, как и концепция Y = f (x, y, …… .., n). Нам просто нужно объявить что-то под названием Component, которое может быть компонентами на основе функций или компонентов на основе классов. Каждый из них имеет Props в качестве функциональных параметров (x, y, …… .., n), мы можем многократно изменять и использовать их столько раз, сколько захотим. КЛАСС, правда?
Это был всего лишь краткий обзор React.
Давайте копать глубже.
Вот тут-то и происходит интересное.
Компоненты в react могут быть представлены терминологией Element, где elements описывает Компонент.
Давайте возьмем пример нашей Вселенной (не будучи перфекционистом). Нашу вселенную можно описать как родительский элемент. Теперь у нас есть много галактик, которые населяют нашу Вселенную. Галактики - еще один элемент здесь. Кроме того, существуют другие галактики. Следовательно, у нас есть Звезды в качестве дополнительных элементов. Потом планеты, потом атомы и оооооооооооо.
Это можно представить как
А теперь подумайте, если наша Галактика изменится с Млечного Пути на другую, то изменятся все дети, а не родители. Изменение деревьев решается алгоритмами сравнения, которые обнаруживают разницу между двумя деревьями, а затем визуализируют и согласовывают новое дерево элементов для проекции данных, а затем рисуются в браузере.
Теперь мы лично встретили г-на Вайбхава Лоханде, менеджера проекта Shaadi.com. Он говорил об уверенном развертывании React.
Он сыграл основную роль в переводе 80% общего трафика Shaadi.com, который был полностью основан на php, на серверы ReactJS, которые были разработаны в течение 4 месяцев с неопытным персоналом. Он рассказал о разработке через тестирование, которая сыграла важную роль в переходе от PhP к ReactJS.
Вы не можете писать производственный код, пока не напишете неудачный тест.
Чтобы написать тест для компонента, например ‹Lion›, react предоставляет красивые функции API для работы с ними. Enzyme - это утилита для тестирования JavaScript для React, которая упрощает утверждение, управление и просмотр выходных данных компонентов React. Таким образом, мы также можем использовать библиотеку CHAI, которая используется API тестирования почтальона, которая может использоваться для проверки определенных данных, которые должны присутствовать в компоненте.
Ниже приведен пример тестового примера для ‹Lion›.
Теперь выше простой компонент льва с некоторым встроенным стилем.
Чтобы проверить, отображается ли div или нет, мы проверим их в реакции.
В test.jsx
Это всего лишь простой тестовый пример. Если его можно вызвать где угодно, и вывод будет отображаться только в терминале.
Это был пример тестирования кода.
Для тестирования автоматизации мы всегда можем обратиться к платформе тестирования автоматизации, такой как Selenium или Nightwatch.
Было время, когда виртуальная реальность и дополненная реальность ворвались на рынок и до сих пор потрясали игровое общество. К сожалению, для их работы требовались игровые движки, такие как Unity или Unreal. Для веб-разработчиков использование WebVR / WebAR стало облегчением, и с ним можно поиграть. Это дает нам возможность отображать виртуальную реальность с помощью сторонних движков, основанных на webGL, например, BabylonJS. Круто, не правда ли? Затем Facebook представил свою библиотеку ReactVR. С React VR вы можете использовать React Libraries для компоновки сцен в 3D, комбинируя панорамы 360. Он также предоставляет возможности аудио и видео и позволяет в полной мере использовать пространство вокруг вас с помощью 3D-моделей. Если вы уже являетесь разработчиком React, вы можете легко перейти к созданию контента 360 и VR! Как бы просто это ни было, когда на рынок вышел React Native. Опрос по просьбе докладчика.
В: Насколько легко импортировать 3D-модели и текстуры и кодировать в них физику в ReactVR? О: React принимает модели и текстуры, инкапсулированные в формате * .obj. Следовательно, очень легко импортировать модели из 3D-редакторов, таких как blender и Maya.
Таким образом, для работы моделей нет необходимости в каком-либо внешнем двигателе. WebVR делает все это.
React Canvas:
React canvas, также известная как react-canvas, - это библиотека реагирования с открытым исходным кодом, управляемая Flipboard, которая добавляет возможность компонентам React отрисовывать в ‹canvas›, а не в DOM.
Почему React Canvas?
Основная причина использования React Canvas заключается в том, что он отображает компоненты быстрее, чем DOM. Он может обеспечить частоту кадров 60 кадров в секунду в мобильном веб-просмотре, что действительно является признаком плавной работы, обеспечивая бюджет времени в 16,7 мс для всех обновлений, необходимых в ответ на какое-либо событие.
Где использовать React Canvas?
React Canvas считается лучше DOM, когда речь идет о тех компонентах, которые отрисовывают в мобильном веб-приложении те компоненты, которые имеют решающее значение для производительности рендеринга, особенно в части прокрутки. Тем не менее, он не может полностью заменить DOM, поскольку он не предназначен для выполнения всех функций, поскольку он не имеет состояния. Поэтому этого следует избегать в тех случаях, когда рендеринг не является проблемой. Предлагается одновременно использовать холст (для прокручиваемых / перетаскиваемых компонентов) и DOM (для других вещей), чтобы добиться лучших результатов.
Загрузите свою собственную таблицу стилей для реагирования на родной язык:
Написание стилей для любого компонента в react native - утомительная задача. Стилизация в react native приводит к длинному синтаксису и большому количеству файлов стилей, что еще больше затрудняет сопровождение кода. Но стиль - неизбежное зло, будь то веб-приложение или мобильное приложение, потому что они говорят, что первое впечатление - это последнее впечатление. Итак, есть несколько уловок, которые помогают нам писать стили для более эффективного реагирования на нативные компоненты.
Есть три способа стилизовать компонент:
- Встроенный стиль:
2. Используя таблицу стилей в том же файле:
3. Используя таблицу стилей в другом файле:
Но иногда такие стили написания могут стать для нас неприятными, что приводит к:
- Большая кодовая база:
2) Большие файлы стилей:
Если мы используем Style-Sheet в самом файле компонента, это увеличит строку кода в этом файле. Если мы создадим таблицу стилей в отдельном файле и создадим style.js для каждого компонента отдельно, это увеличит количество файлов в базе кода и увеличит переключение файлов.
Поэтому, чтобы этого избежать, мы можем использовать встроенные стили, как в HTML. Подожди! Вы можете подумать, как это может быть лучше? Но приведенный ниже фрагмент развеет все ваши сомнения:
Для этого мы объявим Global-Styles в style.js, и, следовательно, мы можем использовать объявленные стили как встроенный стиль в любом месте кода.
Мы можем объявить глобальные стили с помощью функции prepareStyle, которую мы только что создали. Наши глобальные стили будут выглядеть так:
Теперь мы создали глобальные стили и можем использовать их в любом месте нашего кода, например:
После удивительной поездки на ReactFOO 2018, Дели, соавторами этой статьи стали Манджот Калси и Анш Гуджрал, чтобы поделиться своим опытом.
Посетите Манджот Сингх и Анш Гуджрал.
Для получения дополнительной информации обратитесь к ReactFOO Delhi
Посетите нас в SimbaQuartz
