Я подумал, что было бы интересно быстро сравнить, как сделать небольшую часть пользовательского интерфейса на двух совершенно разных языках, которые оба используются для Интернета, а не типичную битву JS framework v JS framework, которая повторяется и бушует из года в год. После этого мы рассмотрим несколько плюсов и минусов каждого из них.

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

Что такое Elm и что такое Vue?

Между Vue и Elm есть резкий контраст. Во-первых, это фреймворк JavaScript, а другой, Elm, сам по себе функциональный язык. Elm в конечном итоге компилируется в JavaScript, поскольку это то, что понимает браузер. И Elm, и Vue используются для создания пользовательского интерфейса в Интернете.

Может быть, вы уже использовали Elm или Vue раньше, но если нет, давайте посмотрим на быстрый пример того, как мы могли бы создать простой пользовательский интерфейс, используя и то, и другое. Мы не будем увязать в инициализации приложения, в том, как добавить его на страницу и т. Д., Вместо этого мы просто рассмотрим файл Elm и Vue как единый компонент.

Пример

Покажем что-нибудь предельно простое. Мы создадим разметку для нижеприведенного на Vue и Elm.

Теперь приготовьтесь к дампу кода Elm и Vue ...

Сравнения

Написание HTML

В Vue разметка выглядит как простой старый HTML, хотя вы можете использовать другой синтаксис шаблонов для своих компонентов Vue, если хотите, например HAML, PUG, JADE и т. Д.

В Elm HTML совсем не похож на HTML, и для фронтенд-разработчиков это пугает. Комбинация различных уровней div с отступом и квадратных скобок может показаться немного беспорядочной ... и это так. Вот почему использование пакета elm-format в вашем редакторе очень важно, иначе вы будете тратить большую часть своего времени на создание отступов. Этот пакет форматирует Elm в соответствии со стандартом компилятора при сохранении (или при каждом нажатии клавиши, если вы маньяк).

Длина линии

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

Хранение данных и управление просмотром

Файлы Elm и Vue имеют одинаковый метод хранения данных; «модель данных», которая используется как источник истины для пользовательского интерфейса. И Elm, и Vue могут использовать эту модель данных, чтобы определять представление и динамически обновлять его при изменении данных. Это называется реактивностью данных.

Модель данных в Elm определяется как:

Модель данных во Vue определяется как:

Объектная модель документа (DOM), реагирующая на изменения JavaScript (или изменения модели), и JavaScript, реагирующий на изменения DOM, называется двусторонней привязкой данных. Это отдельная тема, в которую я пока не буду вдаваться, но определенно стоит прочитать терминологию и ее значение!

Представление

Я не буду проводить типичное сравнение производительности, отчасти из-за лени и того факта, что на этом этапе ваше внимание быстро исчезает. Что вам действительно нужно знать, так это то, что и Elm, и Vue используют виртуальную модель DOM для эффективного пакетного обновления DOM, когда представление необходимо обновить на основе изменений в модели данных или наоборот. . Если вы обновляете DOM «способом вязания» или «способом Vue», то есть через привязку модели данных, то восприятие пользователем реакции вашего пользовательского интерфейса на изменения DOM не должно быть затруднено.

Ремонтопригодность

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

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

Масштабирование

На мой взгляд, Vue определенно справляется с этим лучше. Почему? Это каркас - это то, для чего он был создан. Elm - это намного более низкий уровень, и выполнение всего, что связано с созданием нескольких компонентов, которые взаимодействуют друг с другом, или созданием одностраничного приложения, является громоздким - громоздким, но безопасным.

Кривая обучения

Когда вы впервые прикоснетесь к Вязу, вы получите в лицо совершенно новый функциональный вычислительный словарь. Защитите себя от него »(на eBay есть Riot Shield). На самом деле, приготовьтесь к этому, если вы работаете с JavaScript без опыта функционального программирования. Как я.

В Vue терминология, которую вы использовали бы в JavaScript, во многом такая же. Тем не менее, вы получите некоторые новые принципы и определения, специфичные для фреймворка.

Документация и управление пакетами

Документация пакета Elm представляет собой интересную задачу для навигации. Я обнаружил, что поиск в Google часто может привести к неправильной версии документации для пакета Elm, который вы используете, и в этот момент вам нужно перейти к правильной версии внутри, что также может сбивать с толку.

Vue следует более традиционному пути и делегирует, как и где находится документация пакета и отображается авторам пакетов.

И основная документация по Elm, и по Vue хорошо организована и написана.

Заканчивать

Я не оставлю вас с выводом «используйте это, используйте это», но, надеюсь, некоторые личные мнения, приведенные выше на основе моего опыта, могут помочь в принятии решения или пробудить интерес к изучению Elm, Vue или оба! Повеселись!

Не стесняйтесь оставлять комментарии, если у вас есть вопросы!