Сегодня мы будем сравнивать двух структур рендеринга компонентов, ELM и React. Для этого сравнения я построил тот же SPA (приложение для одной страницы) как в ELM, так и в Rection/JavaScript. Это не совсем реалистично, но для того, чтобы сделать честно, я ограничил приложение только к вещам, реагирующим и JavaScript можно делать без каких-либо других структурных или библиотек.
Мы собираемся посмотреть:
- Настройка и установка
- петля обратной связи во время разработки
- представление
- экосистемы пакетов
- Интеграция в существующие кодовые базы
Приложение, которое мы используем для сравнения, показывает сетку ресторанов и больше нагрузок, сколько вы прокручиваете. Когда вы нажимаете на один, он добавляется в список желаний. Это демонстрирует производительность рендеринга и как поток данных работает между несколькими компонентами. Было также достаточно большой, чтобы показать различия в петле обратной связи во время развития.
С кем легче начать?
Elm и реагировать оба дать вам возможность попробовать их в Браузер, так что вы можете узнать свой синтаксис и как они работают немедленно. Реактивная версия «попробуй ее» проще , в то время как версия ELM – это полноценный редактор кода, который имеет несколько примеров Демонстрируя синтаксис, как работать с кнопками, как сделать перетаскивание & падение, а некоторые основные примеры холста HTML5. Пока версия React делает Покажите скомпилированным кодом JavaScript, ELM получает точку в своей пользе Потому что примеры лучше, и редактор разрешает Free Form Код для написания. Есть также новый онлайн-редактор для ELM, называемых Элли, которая делает его еще проще попробовать прямо в веб-браузере.
И elm и React устанавливаются с использованием NPM, управляющий узел пакета. ELM – всемирно установлена и предоставляет свой собственный менеджер пакетов. Установка ELM по умолчанию включает в себя основные библиотеки, библиотеки HTML и виртуальный двигатель рендеринга DOM. Установка по умолчанию React включает в себя React и библиотеку RACT-DOM.
Учебник React предлагает установить Create-React-App , что является Способ начать реагировать и работать быстро. Он не включает WebPack или любой другой инструмент сборки, но он позволяет использовать синтаксис JSX, ES6 JavaScript и тип проверки потока. Проверка типа построена прямо в компилятор ELM.
ELM и React легко устанавливать, и оба приложили усилия, чтобы сохранить вещи максимально простыми. Реагирование получает точку здесь с его официально одобренным проектом Boeterplate Create-React-App (хотя есть бойтерные платы для Elm также).
Цикл обратной связи разработки
При разработке приложения я нашел Attact’s Starter Kit приятно работать, потому что он быстро сделал петлю обратной связи. Код JavaScript был перекомпилирован всякий раз, когда было сделано изменение, и браузер перезагрузил веб-страницу. Эквивалент ELM – это Elm-Reactor, который также наблюдает за файлами ELM, перекомпилирует и перезагружает веб-браузер.
Что дают ELM Edge Over React – это сообщения об ошибках компилятора. В то время как ELM имеет лучшую проверку типа, и React не имеет никакой встроенной проверки типа (помимо проверки типов элементарных компонентов), сравнение сообщений об ошибках – это другая часть контура обратной связи.
Производительность: ELM быстрее, чем реагировать?
Мы протестировали React и Elm с производительность ориентир что разработчики ELM использовали в статье Пылающий Быстрый HTML Отказ
Blazing Fast HTML ориентир
Мы провели тест с Reack 15.3.1, Angular 2 и Elm 0,17 выбраны.
Вот результаты:
Тестерольный ориентир – это веб-приложение для списка дел, где добавляются элементы, а затем удален в быстрой последовательности. Реагировать самый медленный из куч на 4,875 секунды; Angular 2 составляет 3,358 секунды, а Elm 0,17 синчны в в 2,964 секунды. Это оптимизированные версии для каждой библиотеки, и Вы можете сравнить код себя, чтобы увидеть, какие оптимизации были сделаны.
Пакеты и библиотеки
Другой момент сравнения – это количество пакетов и библиотек, доступных для ELM и реагировать. Мы также должны сделать сравнение некоторой документации и общего качества библиотек.
Реагировать
Реагируйте, будучи более популярным в настоящее время, имеет богатую пакеты и библиотеки. Это не соответствует количеству плагинов jQuery там, но он там попадает. Идея компонентов компонентов, имеющих односторонний поток данных, настолько интуитивно понятна, и реагировать настолько прост в наличии; Не усердно видеть, почему там так много новых библиотек, причем прохладный новый пользовательский интерфейс создается и выпущен ежедневно.
Эльма
Преимущество ELM прямо сейчас с точки зрения библиотек заключается в том, что люди, пишущие их, – это ранние усыновители, которые имеют опыт работы с функциональным программированием и проверкой типа. Используется для парадигмы, они могут писать более высокий код качества. Другое преимущество заключается в том, что количество вариантов, которые вы должны сделать, меньше.
Поскольку ELM позволяет типу объявлений, все пакеты поставляются с базовым набором документации API, основанные на всех объявлениях типа для типов, записей и функций.
Еще одним преимуществом является то, что некоторые из основных оперативных пакетов включены в ядро ELM; Такие как Redux, Flux, Icread.js и Immutable.js. Нет необходимости искать библиотеку реактивной библиотеки потока или неизменную библиотеку объектов, когда язык ELM включает в себя эти функции по умолчанию.
Тем не менее, когда мы делаем сравнение яблок к яблокам с реагированием, мы находим Elm падает коротко. Как правило, мы не должны судить о заслугах Язык или рамки на основе того, сколько пакетов и модулей есть, или основываясь на популярности, но простой факт – это реагировать это Популярные, И с большим количеством разработчиков есть более отчеты об ошибках и Исправляет пакеты и более импульс в движении разных модулей и библиотеки, которые будут разработаны.
Интеграция ELM или реагирования в существующий код
Реагировать
Реагирование имеет только один способ интегрирования в кодовую базу: он может только заменить узлы DOM. Это здорово, потому что он сохраняет вещи простыми, и когда вы работаете над интеграцией реагирования на существующую кодовую базу, все, что вам нужно беспокоиться о передаче данных из остальной части веб-приложения в компоненты реагирования.
Все остальные хорошие вещи о реакции, вроде с использованием Redux, Icrement.js, immuteable.js и Reactureter, могут быть интегрированы позже. Реагистрация является только одной частью структуры, и она может функционировать в качестве замены для рендеринга вида любой другой структуры. Вам даже не нужно использовать синтаксис JSX! Вы можете начать использование реагирования в существующем веб-приложении, включая сценарии React и Reactry и с несколькими строками JavaScript, вы можете определить и вставлять компонент реагирования на страницу.
Эльма
ELM имеет три разных способа встроить компоненты и приложения: полноэкранные, встроенные и работники. Полный экран заменяет страницу с приложением ELM, отлично подходит для написания веб-игр. Встроенный режим функционирует таким же образом, как и реагируют: он отображается в конкретный узел DOM. Работник позволяет использовать компонент ELM внутри веб-работника в качестве фонового процесса, который работает с остальной частью вашего приложения.
Чтобы взаимодействовать с кодом JavaScript, вы можете передать вещи в ELM с флагами для односторонней связи (аналогично прохождению свойств в компонент React), или вы можете использовать подписки для прослушивания событий из компонента ELM, такие как щелчки мыши или текст Входные изменения (аналогичные обратным вызовам события в реакции). Когда мы ограничиваем сравнение между ELM и реагируем на режим интеграции реагирования, ELM немного сложнее с точки зрения необходимости настроить флаги и подписки, но после того, как вы привыкнете к нему, это так же просто, как реагировать.
Что может дать элма-краю над реагированием – это компиляция и объединение. Вы можете компилировать несколько компонентов ELM в один пакет, а затем включите тег скрипта и скрипт инициализации, и VOILA: Теперь у вас есть доступ ко всем вашим компонентам ELM в хорошем удобном пакете. Поскольку он встроен в ELM, вам не нужно полагаться на Grunt, Gulp, WebPack, Systemjs или любой вкус модуля Bundler и System и System Propured, сегодня. Однако, поскольку вы также должны изучать ELM, это может быть трудно продать, чтобы интегрировать его в существующую базу кода.
Заключение: И победитель …
Вот как вяза и реагируют сравнить:
Настройка и установка: это галстук
- ELM может быть установлен с помощью NPM (управляющий узел пакета), и у него есть Его собственный менеджер пакета, чтобы сделать его простым, чтобы добавить больше пакетов. Для популярных текстовых редакторов и IDES есть Helm Syntax Syntax.
- Реагирование можно установить с помощью NPM, и ему ничего не нужно. Вы можете начать использовать его немедленно.
Цикл обратной связи разработки: ELM WINS
- ELM WINS из-за Elm-Reactor, встроенного способа создания и тестирования компонентов и приложений ELM быстро
- Реагистрационные теряющие, потому что он требует транспортировки для ES6, транспортеров для JSX, и он также требует, чтобы WebPack завязать все это все вместе, что много настроек, чтобы запустить цикл обратной связи разработки.
Пакеты и библиотеки: React Wins
- ELM не имеет столько же пакетов, как реагировать, и сам ELM не выпустил стабильную версию 1.0, основная архитектура библиотек может измениться с каждым новым выпуском.
- React Wins, потому что он имеет большое количество библиотек, и многие другие компоненты были написаны с ним из-за популярности Facebook.
Интеграция в существующий код: React Wins
- ELM почти выигрывает, потому что у него есть три разных способа интеграции компонентов, и все ваши компоненты могут быть скомпилированы в один JavaScript Bundle, облегчивая вас выращивать ваше веб-приложение ELM Внутри существующей кодовой базы.
- Реагируйте выигрывают, потому что очень легко добавить ссылку CDN для нагрузки реагирования и взаимодействия, затем представляют свой компонент; Вы даже можете использовать JSXTransformer в браузере. Кроме того, React – это просто простой JavaScript, облегчая для своих друзей, коллег и коллег и коллеги, чтобы забрать его и использовать его.
В конечном итоге оба рамки действительно полезны, но у них разные сильные стороны. Я надеюсь, что наше сравнение здесь может помочь вам выбрать, какой из них подходит для вас.