RealWorld Сравнение интерфейсных фреймворков 2020
Мы делаем это снова. Это 2020 год, есть еще 2019, 2018 и 2017.
Позвольте мне начать с этого - это ни в коем случае не сравнение того, каким должен быть ваш следующий выбор для Front-End. Это небольшое, относительно простое сравнение трех вещей: производительности, размера и строк кода очень похожего приложения.
Имея это в виду, вот как это работает:
Мы сравниваем приложение RealWorld с чем-то большим, чем просто приложение для работы. Обычно «задачи» не передают достаточно знаний и перспектив для создания реальных приложений.
Это как-то стандартизовано - проект, который соответствует определенным правилам - есть спецификация. Предоставляет внутренний API, статическую разметку и стили.
Написано или рассмотрено экспертом - последовательный, реальный проект, который в идеале мог бы создать или проанализировать эксперт в этой технологии.
Какие библиотеки / фреймворки мы сравниваем?
На момент написания в репозитории RealWorld находится 24 реализации Conduit. Неважно, у него много подписчиков или нет. Единственная оговорка - она появляется на странице Репо RealWorld.
На какие показатели мы смотрим?
Производительность - сколько времени нужно, чтобы это приложение показало контент и стало пригодным для использования?
Размер: насколько велико приложение? Мы будем сравнивать только размер скомпилированного файла (ов) JavaScript. HTML и CSS являются общими для всех вариантов и загружаются из CDN (сети доставки контента). Все технологии компилируются или транслируются в JavaScript, поэтому мы изменяем размер только этого файла (ов).
Строки кода - сколько строк кода понадобилось автору для создания приложения RealWorld на основе спецификации? Честно говоря, в некоторых приложениях немного больше наворотов, но это не должно иметь значительного влияния. Единственная папка, которую мы определяем количественно, - это src/ в каждом приложении. Не имеет значения, был он создан автоматически или нет - вам все равно нужно поддерживать его.
Показатель № 1: Производительность
Мы проверим оценку производительности из Lighthouse Audit, поставляемого с Chrome. Lighthouse возвращает оценку производительности от 0 до 100. 0 - это минимально возможная оценка. Подробнее см. Руководство по подсчету очков Lighthouse.
Настройки аудита
Обоснование
Чем раньше вы начнете рисовать и чем раньше кто-то сможет что-то сделать, тем лучше будет опыт для человека, использующего приложение.
Замечания
Примечание. PureScript был пропущен из-за отсутствия демонстрационного приложения.
Заключение
Lighthouse Audit не спит. В этом году вы можете увидеть, что приложения, которые не обслуживаются / не обновляются, падают с обрыва 90. Если ваше приложение наберет ›90, это, вероятно, не будет иметь большого значения. При этом AppRun, Elm и Svelte действительно впечатляют.
Показатель № 2: Размер
Размер передачи указан на вкладке сети Chrome. Заголовки ответа в формате GZIP плюс тело ответа, доставленное сервером.
Это зависит от размера фреймворка, а также от любых добавленных дополнительных зависимостей. Также насколько хорошо инструмент сборки может исключить неиспользуемый код из пакета.
Обоснование
Чем меньше размер файла, тем быстрее загрузка и меньше времени для анализа.
Замечания
PureScript был пропущен из-за отсутствия демонстрационного приложения.
Angular + ngrx + nx, пожалуйста, не обвиняйте меня в Angular + ngrx + nx - проверьте вкладку Chrome Dev Tools Network и, если я ошибся, дайте мне знать.
Rust + Yew + WebAssembly включает также файлы .wasm
Заключение
Потрясающая работа сообщества Svelte и Stencil, размер которой составляет менее 20 КБ, действительно является достижением.
Показатель № 3: Строки кода
Используя cloc, мы подсчитываем строки кода в папке src каждого репо. Пустые строки и строки с комментариями не участвуют в этом расчете. Почему это важно?
Если отладка - это процесс устранения ошибок программного обеспечения, тогда программирование должно быть процессом их внесения - Эдсгер Дейкстра
Обоснование
Это показывает, насколько лаконична данная библиотека / фреймворк / язык. Сколько строк кода вам нужно, чтобы реализовать почти одно и то же приложение (в некоторых из них немного больше поясов и свистков) в соответствии со спецификацией.
Замечания
Svelte был добавлен после публикации статьи - спасибо Svelte master.
riotjs -ffector-universal-hot был пропущен из-за того, что cloc не может обрабатывать .riot файлы.
Angular + ngrx: Расчет LoC выполняется с папкой /libs, включая файлы .ts и .html. Если вы считаете, что это неверно, дайте мне знать, какое число правильное и как вы его вычислили.
Заключение
Только Imba и ClojureScript с re-frame могут реализовать приложение под 1000LoC. Clojure известен своей необычайной выразительностью. Имба здесь впервые (в прошлом году cloc, не знала формат файла .imba), и похоже, что он здесь надолго. Если вы заботитесь о себе, LoC, вы знаете, что делать.
Резюме
Имейте в виду, что это не совсем сравнение яблок с яблоками. Некоторые реализации используют разделение кода, а некоторые - нет. Некоторые из них размещены на GitHub, некоторые - на Now, а некоторые - на Netlify. Вы все еще хотите знать, какой из них лучший? Я оставляю это на ваше усмотрение.
часто задаваемые вопросы
# 1 Почему рамки X, Y и Z не были включены в это сравнение?
Потому что на RealWorld repo реализация не завершена. Рассмотрите возможность участия! Внедрите решение в вашу любимую библиотеку / фреймворк, и мы включим его в следующий раз!
# 2 Почему вы называете это реальным миром?
Потому что это нечто большее, чем просто приложение To-Do. Под RealWorld мы не имеем в виду, что мы будем сравнивать зарплаты, техническое обслуживание, производительность, кривые обучения и т. Д. Существуют другие опросы, которые дают ответы на некоторые из этих вопросов. Под RealWorld мы подразумеваем приложение, которое подключается к серверу, проверяет подлинность и позволяет пользователям использовать CRUD - точно так же, как это делает реальное приложение.
# 3 Почему вы не включили мой любимый фреймворк?
Пожалуйста, смотрите №1 выше, но на всякий случай, здесь снова: потому что реализация не завершена на RealWorld repo. Я не занимаюсь всеми реализациями - это усилия сообщества. Рассмотрите возможность участия, если хотите увидеть свою структуру в сравнении.
# 4 Какую версию библиотеки / фреймворка вы включили?
Тот, который доступен на момент написания (март 2020 г.). Информация взята из репо RealWorld. Я уверен, что вы можете узнать это из репозитория GitHub.
# 5 Почему вы забыли включить фреймворк, который более популярен, чем сравниваемый?
Опять же, см. №1 и №3. Внедрение на RealWorld repo не завершено; это так просто.
Если вам понравилась эта статья, вы должны подписаться на меня в Twitter. Я пишу / пишу только о программировании и технологиях.
🎉 Изучите ClojureScript и повторно фармите - видеоурок 🎉
