Реальное сравнение интерфейсных фреймворков с тестами (обновление 2018)

1656648129 realnoe sravnenie interfejsnyh frejmvorkov s testami obnovlenie 2018

Ятек Шае

r9O4YQjMJqVVOqb6HTxy7OSOAsvaamCHc25d

Эта статья является обновлением Сравнение в реальном мире интерфейсных фреймворков с тестами за декабрь 2017 года.

В этом сравнении мы покажем, как разные реализации почти идентичных примеров приложений RealWorld сопоставляются друг с другом.

Пример программы RealWorld дает нам:

  1. Реальный мир приложение — Что-то большее, чем «задача». Обычно «задания» не передают достаточно знаний и перспектив, чтобы действительно строить настоящий программы.
  2. Стандартизированный — Проект, отвечающий определенным правилам. Предоставляет внутренний API, статическую разметку, стили и спецификации.
  3. Написан или проверен экспертом — Последовательный реальный проект, который в идеале создал или проверил эксперт в этой технологии.

Критика по последней версии (декабрь 2017)

✅️ Angular не был в производстве. Демо-приложение, указанное в репозитории RealWorld, использовало версию для разработки, но благодаря Джонатану Фейрклоту оно теперь в рабочей версии!

✅ Vue не было указано в репозитории реального мира, поэтому не было включено. Как вы можете представить себе, в мире интерфейса это вызвало много жары. Почему вы не добавили Vue? Что с тобой не так ли? В этот раз Vue.js доступен! Спасибо Эммануэль Вильсболу.

Какие библиотеки/фреймворки мы сравниваем?

Как и в статье с декабря 2017 года, мы включили все реализации, перечисленные в репозитории RealWorld. Неважно, есть ли у него большое количество последователей или нет. Единственное требование состоит в том, что он отображается на странице репо RealWorld.

fe6a0GVWKWXwg0Q4XKm4JoFTKWvvAJEGFUFW
Интерфейсы на (апрель 2018)

Какие показатели мы рассматриваем?

  1. Производительность: Сколько времени нужно, чтобы это приложение отобразило содержимое и стало пригодным для использования?
  2. размер: Насколько велико приложение? Мы только сравним размер скомпилированных файлов JavaScript. CSS является общим для всех вариантов и загружается из CDN (сети доставки содержимого). HTML также является общим для всех вариантов. Все технологии компилируются или транспилируются в JavaScript, поэтому мы изменяем размер этих файлов.
  3. Строки кода: Сколько строк кода понадобилось автору, чтобы создать программу RealWorld на основе спецификации? Честно говоря, некоторые программы имеют немного больше преимуществ, но это не должно оказывать значительного влияния. Единственная папка, которую мы количественно определяем src/ в каждом приложении.

Показатель №1: Производительность

Ознакомьтесь с первым значимым тестом краски с помощью Lighthouse Audit, поставляемого с Chrome.

Чем раньше вы рисуете, тем лучше будет опыт для человека, использующего приложение. Lighthouse также измеряет First interactive, но это было почти идентично большинству программ, и это бета-версия.

n28etYksl006tP2qpK4DU1jbAPzxNrNVsfjp
Первая значимая краска (мс) – меньше, тем лучше

Вероятно, вы не увидите большой разницы, когда речь идет о производительности.

Показатель №2: Размер

Размер передачи определяется на вкладке Chrome. Заголовки ответа GZIP плюс тело ответа, предоставляемые сервером.

Чем меньше файл, тем быстрее загрузка (и меньше нужно анализировать).

Это зависит от размера вашего фреймворка, а также от любых дополнительных зависимостей, которые вы добавили, и от того, насколько хорошо ваш инструмент сборки может создать небольшой пакет.

hKcfeFe6Y00GCEP93hzNHwDgGmxIt-eLeOLu
Размер передачи (КБ) – меньше, тем лучше

Вы видите, что Svelte, Dojo 2 и AppRun справляются со своей работой достаточно хорошо. Я не могу сказать достаточно о Elm, особенно если вы посмотрите на следующий график. Я хотел бы увидеть сравнение Hyperapp… возможно, в следующий раз, Хорхе Букаран?

Показатель №3: Строки кода

Используя cloc, мы подсчитываем строчки кода в папке src каждого хранилища. Пустые и комментарии нет часть этого расчета Почему это имеет значение?

Если отладка – это процесс устранения программных ошибок, то программирование должно быть процессом их размещения – Эдсгер Дейкстра.

5o3DrlKWd-5ntxqFg9cTiLL1tKKdlogLzAwl
строк кода — меньше, тем лучше

Чем меньше строк кода, тем меньше вероятность найти ошибку. У вас также есть меньшая базовая база для поддержки.

В заключение

Я хотел бы сказать большое спасибо Эрику Симонсу за создание RealWorld Applications repo, а также многочисленным участникам, написавшим разные реализации.

Обновление: Спасибо Джонатану Ферклоту за предоставление рабочей версии Angular.

И если эта статья показалась вам интересной, следите за мной в Twitter и Medium.

Добавить комментарий

Ваш адрес email не будет опубликован.