Jacek Schaeоригинал, лицензияLeanCloudпереводить.
Пришло время снова рассмотреть интерфейсные фреймворки. мы в2017,2018,2019Оценка проводится каждый год, и в этом году (2020) это четвертая оценка.
Прежде всего, я заявляю, что эта оценка определенно не предназначена для того, чтобы диктовать, какую структуру вы должны использовать для своего следующего проекта. Это всего лишь небольшой, относительно простой обзор, сравнивающий производительность, размер и строки кода фреймворка на основе похожих приложений.
мы будем основываться наПример приложения RealWorldСравните интерфейсные фреймворки. Возможности примера приложения RealWorld:
-
Приложение реального мира
Более сложное, чем приложение для списков дел. Часто приложений для списков дел недостаточно, чтобы передать достаточно информации для построениядействительныйзаявление.
-
стандартизация
проект, которому нужно следоватьспециальные правила. Предоставьте внутренний API, статический язык разметки, стиль, спецификацию API.
-
Профессиональное написание и обзор
В идеале это должен быть проект с высокой степенью согласованности и точности, написанный или проверенный профессионалами, использующими данную технологию.
Сравнение библиотек и фреймворков
На момент написания этой статьиПример приложения RealWorldРепозиторий содержит в общей сложности 24 реализации Conduit (клон Medium.com).
В этой статье не рассматривается популярность фреймворка, в объем сравнения входят интерфейсные фреймворки, перечисленные в репозитории RealWorld.
мера
представление
Сколько времени требуется, чтобы приложение отобразило содержимое и стало доступным?
размер
Насколько большое приложение? Мы сравниваем только размеры скомпилированных файлов JavaScript. Все приложения используют один и тот же файл стилей CSS, который загружается из CDN. Все приложения используют один и тот же HTML. Все эти фреймворки поддерживают компиляцию или транспиляцию в JavaScript, поэтому мы измеряем только размер файла JavaScript.
строки кода
Сколько строк кода требуется для создания приложения RealWorld из спецификации? Справедливости ради следует отметить, что некоторые реализации имеют немного большую функциональность, но это не должно оказывать существенного влияния. Мы измеряем толькоsrc/содержание.
представление
Мы будем использовать ChromeLighthouse AuditТест производительности. Маяк возвращает рейтинг от 0 до 100. 0 — самый низкий балл. смотрите подробностиРуководство по подсчету очков маяка.
настроить
Все тесты используют следующую конфигурацию:
оправдание
Чем быстрее первый рендеринг и чем короче время до действия, тем лучше пользовательский интерфейс приложения.
Примечания
Мы пропустили PureScript, потому что у него нет демо-приложения.
В заключение
Lighthouse Audit не стоит на месте. Возможно, вы заметили, что в обзоре этого года некоторые элементы без обновлений обслуживания получили оценку ниже 90. Если ваше приложение набрало более 90 баллов, разница в несколько баллов никак не повлияет на взаимодействие с пользователем. При этом AppRun, Elm,Svelteпроизводительность впечатляет.
размер
Размер передачи в соответствии с вкладкой Chrome DevTools Network, включая заголовки ответов и тела ответов (сжатые GZIP), доставленные сервером.
Это зависит от размера фреймворка и размера дополнительных зависимостей, а также от эффективности инструмента сборки для сокращения неиспользуемого кода.
оправдание
Чем меньше файл, тем быстрее загрузка и меньше содержимого для анализа. (Единица измерения на рисунке ниже — КБ.)
Примечания
Мы пропустили PureScript, потому что у него нет демо-приложения.
Пожалуйста, не жалуйтесь, что результат Angular + ngrx + nx неверен, вы можете открыть инструменты разработчика Chrome, чтобы проверить это самостоятельно. Пожалуйста, дайте мне знать, если вы обнаружите, что я делаю ошибку.
Включено при расчете размера Rust + Yew + WebAssembly.wasmдокумент.
В заключение
SvelteИ сообщество Stencil проделало большую работу, сохранив размер менее 20 КБ, что удивительно.
строки кода
Мы используемclocПодсчитайте строки кода в каталоге src каждого репозитория,ИсключаяПустые строки и комментарии. Зачем сравнивать строки кода? Это потому что:
Если отладка — это процесс удаления программных ошибок, то программирование должно быть процессом добавления ошибок.
Edsger Dijkstra
оправдание
На приведенной ниже диаграмме показано, насколько компактна данная библиотека/фреймворк/язык. Сколько строк кода потребуется для реализации почти идентичного приложения (некоторые приложения с немного большей функциональностью) в соответствии со спецификацией.
Примечания:
Нет данных от Svelte, когда эта статья была впервые опубликована, спасибоSvelte masterПредоставляет методы подсчета строк кода в проектах Svelte.
Мы пропустили riotjs-effector-universal-hot, потому чтоclocне могу справиться.riotдокумент.
Учитывается только Angular+ngrxlibsв каталоге.tsа также.htmlфайл, если вы считаете, что это неправильно, пожалуйста, сообщите мне правильный номер и как он рассчитывается.
В заключение
По количеству строк кода только Imba иClojureScript + re-frameПриложение было реализовано в 1000 строк кода. Clojure известен своей исключительной выразительностью. Imba — новинка в обзоре этого года (прошлогодний обзор не включал Imba, потому что cloc не мог справиться с этим в то время)..imbaформат файла). Если вас волнует количество строк, вы знаете, какие кадры хотите сделать.
Суммировать
Не забывайте, что это не точное и справедливое сравнение. Некоторые реализации разделяют код, некоторые нет. Некоторые развернуты на GitHub, некоторые развернуты на Now, некоторые развернуты на Netlify. Если вы все еще должны спросить, что является лучшим? Вы должны сами ответить на этот вопрос.
FAQ
1. Почему бы не сравнить кадры X, Y, Z?
потому чтоСклад реального мираРеализация в неполная. Рассмотрите возможность внесения кода! Реализуйте его с вашей любимой библиотекой/фреймворком, мы включим их в наше следующее сравнение!
2. Почему он называется RealWorld?
Потому что его функционал сложнее, чем у приложения To-Do. RealWorld не означает, что мы сравниваем уровни заработной платы, уровни обслуживания, производительность, кривые обучения и т. д.Другое исследованиеНа некоторые из этих вопросов есть ответы. RealWorld означает, что это приложение будет подключаться к серверу, как реальный проект, аутентифицировать пользователей и разрешать пользователям добавлять, удалять, изменять и проверять.
3. Почему вы не включили мою любимую рамку?
Пожалуйста, вернитесь и прочитайте первый вопрос выше. Но я все же хочу подчеркнуть здесь: потому чтоСклад реального мираРеализация в неполная. Эти осознания являются результатом усилий сообщества, а не только меня. Если вы хотите увидеть свой любимый фреймворк в сравнении, рассмотрите возможность написания кода.
4. Какая версия библиотеки/фреймворка сравнивается?
Версия доступна на момент написания этой статьи (март 2020 г.). смотрите подробностиСклад реального мира.
5. Почему нет сравнения с гораздо более популярным фреймворком?
Опять же, посмотрите на предыдущий вопрос. очень простой,Склад реального мираРеализация в неполная.
Если вам понравилась эта статья, вы можетеСледи за мной на Твиттере. Я пишу только о программировании и технологиях.
Примечание переводчика: различные различия в реализации и другие факторы сильно повлияют на результаты, поэтому диаграмма предназначена только для справки и не точно отражает уровень фреймворка. Более того, выбор фреймворка включает в себя множество факторов, в большинстве сценариев множество факторов, вес которых намного выше, чем производительность, размер и количество строк кода. Какой фреймворк лучше, у каждого может быть свой ответ.