Статьи

Блеф свой путь через реакцию на званый обед Dev

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

Немного сверхреакции-иона

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

Просто скажи мне, что такое React, пожалуйста

Бен Бэкбоун говорит: «Это просто V в MVC, так что он только на 1/3».

Вы говорите: «Я считаю, что сравнение с MVC бесполезно и интуитивно понятно, я играю с Lego и концентрируюсь на создании красивых блоков, которые могут поместиться где угодно».

Это строительный блок:

({ someText }) => <div>{ someText }</div>

React — это не фреймворк, это библиотека, которая позволяет вам составлять эти строительные блоки для создания поддерживаемых интерактивных интерфейсов.

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

Все, что я хочу для JSXmas, это ты

Алан Ангуляр говорит: «Вы помещаете HTML в свой JS и смешиваете проблемы».

Вы говорите: «Вы пьяны, Алан, идите домой… но также, это восхитительный способ выразить разметку, которая может быть перенесена на многие вещи, выглядит как HTML, так что нет нового DSL, который я должен изучать, и на самом деле моя единственная проблема — Представление просмотра моих данных ».

Да, JSX , вероятно, взял на себя всю тяжесть ненависти, но это то, что действительно отличает React от других и теперь принято другими библиотеками. Больше не нужно возиться с DOM на низком уровне, проверять атрибуты или беспокоиться о кросс-браузерных причудах. Я могу написать что-то похожее на HTML, но я также могу использовать старый добрый JS для манипулирования им .

Виртуальный ДОМ, DOM, DOM, ДОМ, ДОМ

Эдвард Эмбер говорит: «Перекрашивание движка Glimmer происходит намного быстрее, чем в Virtual DOM».

Вы говорите: «В то время как производительность — проблема для меня, я очень редко / никогда не создаю приложения, которые должны отображать 10 000 постоянно меняющихся элементов списка. Если технология привлекает внимание сообщества, стабильности, ремонтопригодности, тестируемости, это, вероятно, не слишком медленно ».

Взаимодействие с DOM сравнительно медленное, так как обычно оно занимает большую часть времени в данной операции по сравнению с JS в памяти. Команда React разработала Virtual DOM (VDOM), чтобы позволить им быстро сравнивать изменения состояния, чтобы минимизировать объем медленной работы, которую необходимо выполнить.

Я не знаю искусство, но я знаю, что мне нравится

Шарлотта CSS говорит: «Встроенные стили — это все, что не так с интернетом. No: before /: after, неоднозначная поддержка печати @media, un-DRY-код, проблемы с микшированием [Alan +1], дополнительные издержки для: hover и т. Д. Мне нужно продолжать? ».

Вы думаете: «Все это меркнет по сравнению с тем фактом, что они даже не работают со строгой политикой безопасности контента *, рад, что она этого не упомянула».

Вы говорите: «Это довольно много гипербол перед пустыней. В любом случае, псевдо-селекторы — это хак, я предпочитаю не использовать их, мне нравятся деревья, DRY — это то, что мне не нравится в вашем общем CSS, и еще раз, я просто заинтересован в использовании моего презентационного слоя по прямому назначению ».

Итак, вам не нужно использовать встроенные стили с React, вы можете быть менее смелыми и попробовать CSS-модули (если вам нравятся длинные имена классов в вашем HTML-коде), один из многих инструментов для CSS-вставки или просто использовать BEM .

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

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

Вы и я теку в одном направлении

Кевин Нокаут говорит: «Благодаря двустороннему связыванию данных вы получаете высокоинтерактивные интерфейсы с небольшим количеством стандартного кода».

Вы говорите: «Однонаправленный поток данных — это наполовину головная боль, отладка и тестирование в одном направлении гораздо приятнее, особенно с чистыми функциями, которые не имеют побочных эффектов».

Итак, у нас есть наши строительные блоки, написанные в виде, похожем на HTML, со своими собственными защищенными стилями, и они будут обновлять DOM только тогда, когда они должны … но как вы заставляете их показывать вещи? При использовании идемпотентных функций рендеринга с прозрачностью ссылок, которые, конечно, так же чисты, как и безугольный снег 😉

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

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

Сбитый с толку Redux

Джереми jQuery говорит: «Проблема с React в том, что вам нужно три дня, чтобы опробовать пятнадцать реализаций Flux, чтобы прийти к выводу, что вы не знаете, какая из них лучше. Вы идете с одним, и требуется еще один день, чтобы написать то, что я сделал за 10 минут ».

Вы говорите: «Да, это было что-то вроде жемчужины от Facebook (FB), и я полностью согласен, что сообщество оставило на размышление смутную философию. Хотя теперь у меня есть реализация Flux, мой код легко рассуждать, тестировать и масштабировать ».

Прелесть сообщества открытого исходного кода (OSC) состоит в том, что в конечном итоге будет найдено оптимальное решение, поэтому предложение философии OSC не является плохой вещью. Сами FB делают Flux по-разному, так что же это?

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

В начале этого года дерзкий парень по имени Дэн собрал что-то для разговора. Людям это нравилось, на GitHub было больше звезд, чем на Млечном Пути, и он работал над этим все время. Он называется Redux, и я рекомендую эту реализацию. Это не совсем Flux, но инструментальные средства разработки являются исключительными с перемещением во времени и отменой / повторением и т. Д. Из коробки благодаря обновлениям магазина только через чистые редукторы .

Я никогда не изменится для тебя

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

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

С редукторами Redux вы получаете эту концепцию из коробки, вы берете предыдущее состояние и создаете совершенно новое состояние на основе полезной нагрузки действия. Это второе преимущество неизменности и повторяющаяся тема; это делает ваше приложение предсказуемым. Никаких ошибок, потому что что-то случайно изменило что-то другое, к чему оно не предназначалось или имело дело.

Скажи мне, куда идти

Эдвард Эмбер говорит: «Я могу подготовить свой проект за пару минут и получить абсолютно все, что мне нужно, я считаю React слишком легковесным».

Вы говорите: «Для меня использование большого количества библиотек / строительных блоков, каждый из которых хорошо выполняет свою задачу (микросервисы пользовательского интерфейса), очень легко обслуживается и легко проверяется на будущее».

Так что React не поставляется с маршрутизатором, но Майкл Джексон делает. Это де-факто способ маршрутизации в React и виртуальное требование для любого одностраничного приложения (SPA). Теперь у нас есть Promises, API выборки, сервисные работники, веб-работники, локальное хранилище, JWT , intl и т. Д. И т. Д. Вы можете создать собственный SPA с минимальной потребностью в больших инфраструктурах *, за исключением нескольких полифилов.

* не то, что рамки плохие сами по себе

Возьми эту дубинку

Вы говорите: «У меня есть все, что мне нужно для этого СПА, моя кружка пуста, эта статья слишком длинная, без заметного, доктор, я собираюсь разобраться с химчисткой до субботы».

Я говорю: «Я говорю вам, что сказать, а не наоборот, но… есть еще один последний необязательный кусок, а затем нам нужно поговорить о том, как вы собираетесь собрать все это воедино».

Redux делает все возможное, чтобы объяснить, как выполнять асинхронные действия и заполнить ваше приложение данными с помощью различных средств, включая промежуточное ПО . Нил Netflix выскакивает и говорит: «Давайте расслабимся и посмотрим на Falcor » , вы говорите: «На самом деле это звучит довольно неплохо, но я собираюсь сначала немного рассказать о Relay и GraphQL » .

У FB возникла проблема, когда они создавали мобильные нативные приложения, мобильные веб-приложения и другие наборы веб-продуктов. Как вы можете координировать невероятно сложную синхронизацию данных на этих платформах и использовать один и тот же язык, когда REST не сокращает его? Таким образом, у нас есть GraphQL (не имеющий ничего общего с базами данных Graph), который во многом похож на Flux — это просто концепция с несколькими реализациями ( включая JS ).

GraphQL — это язык, который позволяет внешнему разработчику контролировать свои требования к данным. Нет настраиваемых конечных точек REST, не надо беспокоить различные бэкэнд-команды для отправки дополнительного поля, просто запросите фрагмент данных с необязательными параметрами, и он будет вам возвращен.

Затем Relay подключает ваши компоненты React с помощью контейнеров и маршрутов к конечной точке GraphQL. Этот довольно сложный брак приводит к оптимистичным обновлениям, пакетным запросам и счастливой синхронизации данных из коробки … при условии, что у вас есть сервер GraphQL … и схема … и возможность разбираться с мутациями Relay и прикольным языком запросов …

Прошлой ночью мелкий рендеринг изменил мою жизнь

Роберто Реакто говорит: «Facebook использует Jest для тестирования своих компонентов, и вот что я использую».

Вы говорите: «Это очень медленно, это слишком сложно. Он действительно любит издеваться над всем. Мелкий рендеринг и тестирование всех вещей ».

Если FB действительно использует Jest, я могу только поблагодарить их за терпение, но вы редко увидите это упоминание в конференции. Когда я прочитал это , у меня было прозрение, а остальное уже история.

Это лучший способ проверить интерфейс. Нет DOM, очень мало зависимостей, просто взломайте Mocha и Assert, и у вас будут отличные , супер быстрые юнит-тесты, на которые вы можете положиться. Вы пройдете долгий путь, протестировав различные движущиеся части, что просто оставляет легкое функциональное тестирование дыма для подтверждения взаимодействия, приятно.

Построй его и они придут

Грэм Грант глотает после выпаса на холодном кусочке брокколи и говорит: «Как вы строите свое приложение без инструментов для сборки?».

Вы говорите: «С помощью узлов, скриптов npm и загрузчика модулей мой рабочий процесс значительно сокращен, но невероятно мощный».

Еще одна важная тема для меня — это то , что я использую webpack в качестве своего предпочтительного оружия, но jspm и Browserify — идеальные альтернативы, или все, что дает вам:

  • Горячая перезагрузка: потому что мы супер ленивые разработчики и время это деньги
  • Вавилонская интеграция: по причинам, на которые мы пойдем
  • Минимизация, управление активами / поставщиками, хеширование ресурсов: потому что вы хотите, чтобы один крошечный кусок JS-кэша был запущен для запуска вашего прекрасного приложения

Я хочу, чтобы B-abel использовал ES2015

Oscar Old-School говорит: «Я использую ES5 с 2009 года, старые браузеры не поддерживают ES2015, классы в JS !? Спецификация меняется ежегодно, поэтапные предложения, такие как Object.observe, теряются во время их использования, Babel прекращает поддержку хорошо используемых функций и что с тремя точками …? ».

Вы говорите: «Для кого-то такой старой школы вы замечательно знакомы со всеми этими вещами и делаете некоторые хорошие замечания. Как вы упомянули Babel, вы знаете, что мы можем перейти к ES5, который работает во всех современных браузерах. Вам не нужно использовать каждую функцию в ES2015, и если вы используете предложенные функции, вы напрашиваетесь на неприятности. Три точки тоже потрясающие, распространяют любовь ».

Так, когда-то с 6 до 5 славы, когда он был написан ребенком на уроке истории (пока он не узнал, что Долли работала на три часа меньше), Бабель — это переход на JS, если вы не предпочитаете более галльские инструменты .

Это не является обязательным требованием (как, например, TypeScript не для Angular 2 ;-)), но написание всего вашего кода на ES2015 (сценические предложения для сторонних проектов) просто сделает ваш день намного лучше. Как только вы начнете разрушать, вы никогда не захотите останавливаться.

И да, в принципе лучше избегать классов, предпочтительнее составлять над наследованием, но … если вы расширяете только один раз и это делает ваши компоненты React более читабельными, используя идиоматический нативный код … возможно, мы просто пойдем с этим …

Изоморфная серверная часть предоставила универсальный JavaScript

Элли Андерсон говорит: «JavaScript — это все, что не так с интернетом. Эти динамические сайты не оптимизированы для SEO и сколько вложенных элементов вы хотите !? ».

Вы говорите: «Да, JS не должен использоваться для всего, но то, что я создаю, требует взаимодействия и хорошего UX, я все еще беспокоюсь о постепенном ухудшении и прогрессивном улучшении. Вот почему я рендую столько контента, сколько могу на стороне сервера, с семантическими элементами и постами форм, что дает мне SEO бесплатно ».

Обычно, когда люди используют изоморфный и универсальный рендеринг, они подразумевают рендеринг на стороне сервера, на который нацелен React, отделяя его основной движок от response-dom и response-dom / server.

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

Ха, у меня есть код в моем коде … ох и немного жевательной резинки

Нет необходимости спорить вокруг этого, есть общий консенсус за столом и много кивок (даже от Алана), обязательна связь для совместной работы на основе общего кода. Не следует тратить время на проверку кода на точки с запятой и отступы; они должны быть о намерениях и архитектуре.

Теперь существует разница между качеством кода и стилем кода, качеством, ориентированным на лучшие практики кода, и стилем, сосредоточенным на… стилизации кода с помощью точек с запятой и тому подобного. Например, вы можете разделить эти задания с помощью JSCS и JSHint, но в настоящее время дорогой мир линтингаESLint .

Для React я использую конфигурацию Airbnb, которая использует это для своих бит Reacty. Вставьте это в свой сценарий пост-теста и объединяйте PR, как будто они выходят из моды.

Используемый случай

Sally Static говорит: «Я бы не использовал React для статического сайта, реального взаимодействия нет, и я получаю все, что мне нужно, от Jekyll ».

Вы говорите: «Вы пробовали Гэтсби ? Вы уверены, что не хотите перезарядки в своей жизни? ».

Можно утверждать, что использование React для всего является излишним, если вам не нужно взаимодействие и VDOM через 42 КБ JS, вы не должны его использовать. Однако… React — это не только VDOM, но и тестируемые кирпичи Lego. Если вы делаете что-то немного более простое, и вы не против написать JS, я бы рекомендовал использовать React *.

* или любая другая библиотека с философией компонентов, но эта статья о достоинствах React 😉

Конец начала

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

React захватил мир 1 , WordPress соберет весь React 2 , вы должны использовать React 3 . Если вы ищете надежную библиотеку компонентов, которая не справляется с какой-либо задачей, то, надеюсь, эта статья предоставила вам достаточно ссылок и слов для google / sitepoint на следующий месяц.

Это похоже на кодирование в 90-х годах с целыми обновлениями страницы (хотя и оптимизированными на стороне клиента), встроенными стилями (хотя и не обязательно) и встроенными событиями (хотя и одним корневым событием )… и «HTML в вашем JS», но в этом нет ничего плохого 4

  1. это не имеет
  2. это не … пока
  3. нет, но это хорошая идея 😉
  4. в 90-х много чего не так, в этом выводе используется либеральная креативная лицензия