Бобби Шульц
Последние пары годы наблюдали огромное улучшение того, как УВ разрабатывается с использованием чисто функциональных представлений. В функциональном программировании «чистая функция» – это то, что при запуске, возвращает значение, но не изменяет ничего за пределами его объема (также известный как функция без бокового эффекта). Это значительно снижает когнитивную нагрузку и перестановки в приложениях, чтобы они оказывали огромное снижение ошибок ( См. Исследование CASE ), легко понять, сочинять вместе и невероятно стабильно.
Дэвид Нулен имеет одно из лучших объяснений для этого типа шаблона развития UI ƒ (d) = v . Это функция, которая принимает данные в качестве ввода и возвращает представление. Нет навещания, связывания, подкласса, внешний доступ к переменным или любые побочные эффекты. Это делает его очень предсказуемым с резким средством того, что в контексте работает чистый вид. В JavaScript World вы могли бы сказать, придано любой JSON, всегда создаст один и тот же HTML, CSS и слушатели событий.
Почему чистые виды разные, чем другие узоры пользовательских интерфейсов?
Чтобы полностью понять это, нам нужно понять, что мы неявно работали в течение многих лет в нашем коде. Код написан как серия сложных перестановок. Каждая функция, которую мы называем, меняет что-то вне личного объема. Затем мы называем еще одну функцию, которая меняет что-то еще. Если данные или порядок этих функций вызывают отклоняться любым образом, ошибки возникают в неожиданных способах. Подумайте о том времени, когда вы исправили ошибку, которая была вызвана чем-то, казалось бы, не связанным в другом классе или сервере где-то. Это большие проблемы перестановок.
Посмотрите на диаграмму ниже. Вот как мы внутренне думаем о наших приложениях.
Супер ясно, верно? Вызов `Логин ()`, затем `getUser ()` Затем `getcart ()` `. На самом деле наш поток приложений включает пути ошибок, неожиданные значения, операции сети и потока. Если они вернутся в немного разном порядке или данные немного разные или данные мутируются несколькими классами в наших приложениях, они приведут к ошибкам. Это более точная модель возможных ветвей:
Если ничего не путешествует на ожидаемом пути в ожидаемое время, мы получаем ошибки. OOP-классы предполагаются инкапсулированные данные, события и преобразования внутри своих границ, чтобы сделать эту работу без ошибок. Очевидно, у всех нас есть ошибки. Системы трудно, потому что они являются сложными, и эти сложности вызывают ошибки.
Просто сделано легко
Для тех, кто узнал о банде из четырех и объектно-ориентированных моделей, но не видел разговоры богатого Хикки «Простое сделано легко» Иди смотрите это сейчас Отказ Core Concept Hickey Talks о том, как слишком много внешних факторов является основной причиной, почему мы не полностью понимаем, что делает наш код, когда мы его читаем. Это не легко, потому что слишком много пластин вращаются сразу. Объектно-ориентированные языки имеют шаблоны, пытаются уменьшить эту сложность, будучи сильно взвешенными к использованию инкапсуляции. Функциональные языки, от обговора, сильно взвешены в направлении композиции в качестве ключевой функции для уменьшения сложности. Лучшая смесь обоих необходима, чтобы улучшить контроль над нашим UIS.
Чистые взгляды приносят некоторые преимущества функциональных языков в мир OO, большинство разработчиков живут в. На функциональных языках чистая функция делает только одно и не имеет побочных эффектов (побочный эффект означает, что он не может повлиять на что-то, только вернуть новое значение). Несколько простых функций могут быть созданы по-разному для получения многих типов выходов. Перефразировать богатый Хики; Простые средства делают одну вещь. Легко означает, что то, что мы можем понять в той степени. В случае чистого взгляда, глядя функцию рендера, мы должны быть в состоянии понять все потенциальные выходы. Это уменьшает необходимость понимать всю кодовую базу, чтобы узнать, как она может повлиять на одну функцию.
Это как функционал, чистый процесс просмотра будет работать:
Это невероятно мощная концепция. Вместо того, чтобы размножаться функциями, событиями и сетевыми стеками и мутациями повсюду, просто сделайте снимок данных и визуализируйте на вид. Вид будет иметь все макеты, обработчики событий и точки доступа для пользователя, чтобы взаимодействовать с базовыми данными. Это означает, что нужно добраться до любого местоположения в приложении, единственная зависимость является статической моделью данных. Как правило, эти чистые виды связаны с методами жизненного цикла, чтобы лучше понять, когда, почему и как данные изменения. Например, посмотрите на какой-то реальный код чистого представления:
createView({ getDefaultProps(){ return { selectedIds: [1, 10], banks: [/* bank data here */] }; } render(){ let selectedBanks = this.props.banks.filter(function(bank){ return this.props.selectedIds.indexOf(bank.id) > -1; }); let bankItems = []; for (let i=0; i < selectedBanks.length; i++){ bankItems.push( el("BankItem", {key:i, bank:selectedBanks[i]}) ); } return el("div", null, el("h1", null, "Selected Banks"), bankItems, el("a", {href:"/install", "Next") ); }})Эта точка зрения инкапсулирует свойства, которые передаются его родителем. Когда вызывается функция Render, она не требует ничего вне собственного объема вида. Все, что может повлиять на выход, все в одной функции. До тех пор, пока функция Render не закончится, реквизиты и состояние также не могут быть изменены. Это позволяет легко рассуждать о том, что произойдет на каждом запуске. Всякий раз, когда родитель отправляет его новые данные, он заставит функцию рендеринга снова запустить.
Расширение возможностей без добавления сложности
Поскольку чистые взгляды делают только одно и не влияют на их собственный объем, это делает его чрезвычайно гибким без внедрения дополнительных сложностей. Есть несколько случаев, которые действительно показывают мощность чистых видов.
Первый называется Замена горячего модуля Отказ Если вы думаете, что это так же, как живая перезагрузка в браузере, вы выходите. Мгновенное действие, которое вы сохраняете файл в своем редакторе, в ваше приложение можно отправить только обновленный код, заменяет старый код, функция рендеринга для этого просмотра выполняется и только HTML, который отличается, изменяется. Весь слой данных приложения не затронут. Это работает с макетами, просмотр иерархией и обработчиками событий. Данные в приложении не меняются, поэтому вы просматриваете обновляются в режиме реального времени. Есть библиотеки для поддержки этого в браузерах, IOS, Android, Windows и Mac App. Когда время итерации между изменением кода и видение вывода имеет около 0, он полностью изменяет ваш рабочий процесс кодирования.
Следующий это Время путешествия отладки Отказ Это действительно удивительно, как это звучит. Без чистого представления, хранение каждого распространения событий и его последствия на вид представляет собой невозможную нагрузку для большинства систем. С чистыми взглядами все, что необходимо, это иметь массив и выдвигать новую копию данных каждый раз, когда она изменяется. Если вы понимаете, насколько постоянные структуры данных работают, даже меньше работы, чтобы сохранить каждое изменение вашего приложения. При отладке, просто скраб назад и вперед, как VCR. (Технология интерфейса UI и уIE 80 и большинство пользовательских интерфейсов не имеет его в их отладочном инструменте Toolkit сегодня). Состояние приложения может даже быть сериализовано и сохранено на сервере в производстве, чтобы получить полные шаги REPO практически в каждой ошибке в вашем приложении.
Последние крупные возможности это Устойчивость по поводу жесткости Отказ Данные не привязаны к интерфейсу. Это четкое разделение опасений. Слой данных вашего приложения может сосредоточиться с точки зрения функций, трансформаций данных и кэширования без необходимости думать обо всех проблемах, которые могут иметь пользователя. На подавляющем большинстве проектов бизнес логика вряд ли меняется; Код для корзины Comm Cart в значительной степени имеет те же требования. Но на уровне просмотра дизайнеры всегда находят новые способы объяснения или уточнения интерфейса или увеличения продаж. Агрегаты и интеграционные тесты могут сосредоточиться на тестировании потока приложений в чистых, простых данных. Поскольку вид – это просто простое преобразование и отражение данных в любом данном состоянии, это гораздо менее восприимчив к сложности или ошибкам. Это также означает, когда дизайнер или бизнес-директор просит изменения в представлении, его можно сделать, не влияя на функциональность потока данных.
Вернуться к реальному миру
Движение чистых видов растет. Там мало, если любые преимущества традиционные просмотра слоев проходят через чистые виды. Framework, которые более открыты, как позвоночник, вы могли бы поменяться строковыми шаблонами для чистых видов. Все больше и больше основных авторов видят преимущества и переход к чистым видам. Несколько заметных структур, которые действительно чем отступают против этого подхода, являются вязками, Ember 2, OM Next, ReactJS.
Чтобы воспользоваться некоторыми из расширенных возможностей чистых просмотров, есть некоторые инструменты вне коробки, которые облегчают интеграцию. Для замены горячего модуля, WebPack и React имеют отличную настройку. Я поддерживаю стартовый комплект под названием Мегатома Это должно уволить вас и работать в новом проекте за 2 минуты. За время отладки путешествий Посмотрите на redux С является слой данных, созданный для работы с реакцией.
На последней ноте для всех тех, кто застрял, тщательный синтаксис (например, Lisp или JSX): не судите книгу по обложке. Если вы не выглядите глубже, вы можете полностью игнорировать возможности и власть, которые могут прийти от чего-то другого. Посмотрите еще раз в код выше для реального чистого вида выше. Всего действительный код без необходимости транспиляции, менеджеров пакетов или любых дополнительных шагов сборки. Единственное, что не хватает, это топ-3 строки:
let el = React.createElement;let createView = React.createClass;
Мой последний проект сложнее, чем кодирование. Мы делаем личные финансы не сосать. Посмотрите, как ваши трассы приводят к овладению вашего бюджета на getfiskal.com .
Оригинал: “https://www.freecodecamp.org/news/the-revolution-of-pure-views-aed339db7da4/”