Jacek Schae.
Также доступен в: Турецкий – Благодаря @erdenizzz, Португации – Благодаря @felipefialho.
В третий раз мы сравниваем передние рамки, используя Реальный мир Пример приложений Отказ Примерное приложение Realworld дает нам:
Приложение Realworld Нечто большее, чем «TODO». Обычно «Тодос» не передает достаточно знаний и перспективе, чтобы на самом деле построить реальный Приложения.
Стандартизированы Проект, который соответствует определенным правилам. Обеспечивает внутреннюю API, статическую разметку, стили и спецификацию.
Написано или рассмотрено экспертом Последовательный, реальный проект, который, в идеале, эксперт в этой технологии будет построен или рассмотреть.
Какие библиотеки/рамки мы сравниваем?
Начиная с письма, есть 18 реализаций трубопровода на Realworld Пример приложения репо.
Неважно, если он имеет большое следующее или нет. Единственная квалификация заключается в том, что она появляется на странице Real World Repo.
На каких метриках мы смотрим?
Представление
Как долго это приложение делает, чтобы показать контент и стать полезным?
Размер
Насколько велика приложение? Мы сравним размер только скомпилированного файла JavaScript. CSS распространен для всех вариантов и загружается с CDN (сеть доставки контента). HTML является общим для всех вариантов. Все технологии компилируют или транпилируют JavaScript, поэтому мы только размер этого файла.
Линии кода
Сколько строк кода имел автор для создания приложения Real World на основе спецификации? Быть честным, некоторые приложения имеют немного больше колоколов и свистков, но не должно оказывать существенное влияние. Единственная папка, которую мы определяем, это SRC/ в каждом приложении.
Метрика № 1: производительность
Мы проверим оценку производительности от Аудит маяка это корабли с хром. Маяк Возвращает оценку производительности от 0 до 100. 0 – самый низкий возможный балл.
Настройки аудита
Производительность является комбинированным баллом по следующим метрикам
- Первая кончальная краска
- Первая значимая краска
- Ускоренный индекс
- Первый процессор холостой
- Время интерактивности
- Предполагаемая входная задержка
Для получения более подробной информации о проверке Гид оценки маяка Отказ
Производительность TL; DR
Чем раньше вы рисуете, а тем раньше кто-то может что-то сделать, тем лучше опыт для человека, который использует приложение.
Примечание. Purescript был пропущен из-за отсутствия демонстрационного применения.
Заключение
Большинство приложений оценки старше 90 лет. Вы, вероятно, не почувствуете много различий, когда речь идет о производительности.
Метрика # 2: Размер
Размер передачи на вкладке Chrome Network. Заголовки ответа ответа плюс тело ответа, поставляемое сервером.
Это зависит от размера вашей структуры, а также на любых дополнительных зависимостях, которые вы добавили, и насколько хорошо ваш инструмент сборки может устранить неиспользуемый код из вашего пучка.
Размер TL; DR
Чем меньше файл, тем быстрее загрузка и меньше для анализа.
Заключение
В этой области много сенсационных вещей, происходящих в этой области. SVELTE – волшебная исчезающая структура пользовательского интерфейса – действительно верно своей линейке. Трафарет – это новый ребенок в этом эталоном, а также также хорошо работает. Оба относительно новы и толкают пределы того, что возможно с точки зрения размера.
Метрика № 3: Линии кода
Использование CLOC Мы считаем строки кода в каждой папке SRC REPO. Пустые и комментарии линии не Часть этого расчета. Почему это значимо?
Линии кода TL; DR
Это показывает, как сжатая данная библиотека/рамка/язык. Сколько строк кода вам необходимо реализовать почти одно и то же приложение (некоторые из них имеют немного больше ремней и свистков) соответственно для спецификации.
Примечание IMBA: IMBA был пропущен из-за Cloc. не в состоянии обрабатывать .imba файлы.
ПРИМЕЧАНИЕ ELM: разработчики ELM еще более вертикально написать код, при этом высокий счетчик LOC – по крайней мере, это Что мне сказали .
Примечание angular + ngrx: расчет /libs. Только папка, в том числе .ts.ts. а также .html файлы. Если вы считаете, что это неправильно, пожалуйста, дайте мне знать, какой правильный номер и как вы его рассчитали.
Примечание HyperApp: LOC не был правильным, когда статья была опубликована, благодаря Mateusz Kwasniewski. для указывания правильного способа расчета loc.
Заключение
Clojurecript с Re-Frame дает вам больше всего взрыва? для лока. Clojure известно, что это необычно выразительна. Если вы заботитесь о вас, вы должны проверить CLOJURESCRICT, Appround и Svelte.
Резюме
Имейте в виду, что это не совсем сравнение яблок к яблокам. Некоторые реализации используют расщепление кода и некоторые нет. Некоторые из них размещены в Github, некоторые сейчас и некоторые в NetLify. Вы все еще хотите знать, какой из них лучший? Лучший, тот, который соответствует вашим потребностям.
Q: Вам нравятся типы? A: Посмотрите в ELM, Purescript и Tymdercript – угловые, одобренные, додзё.
Q: Вы хотите иметь очень маленький след? A: Проверьте Svelte, трафарет и одобрил.
Q: Вы хотите иметь наименьшую базу кода для обслуживания? A: Проверьте Clojurectscript с Re-Frame, Applund и Svelte.
Q: Хотите узнать что-то новое? A: Выберите тот, который вы не знаете!
часто задаваемые вопросы
# 1 Почему были рамочными X, Y и Z, не включенные в это сравнение?
Потому что реализация не завершена в Realworld Repo Отказ Рассмотрим вклад вклад! Реализуйте решение в вашей любимой библиотеке/рамках выбора, и мы будем включать его в следующий раз!
# 2 Почему вы называете это реальным миром?
Потому что это немного больше, чем приложение для DO. RealWorld мы не имеем в виду, что мы будем сравнивать зарплаты, обслуживание, производительность, кривые обучения и т. Д. Есть другие опросы Это ответить на некоторые из этих вопросов. То, что мы подразумеваем под действием Realworld – это приложение, которое подключается к серверу, аутентификации, и позволяет пользователям Crud – так же, как приложение реального мира будет делать.
# 3 Почему вы не включили мои любимые рамки?
Пожалуйста, смотрите # 1 выше, но на всякий случай, вот он снова находит: потому что реализация не завершена в Realworld Repo Отказ Я не делаю все реализации – это общинные усилия. Рассмотрим вклад, если вы хотите увидеть свои рамки в сравнении.
# 4 Какую версию библиотеки/рамки вы включали?
Тот, который доступен во время проводки (Мар 2019). Информация исходит от Realworld Repo Отказ Я уверен, что вы можете найти это из Github repo Отказ
# 5 Почему вы забыли включить рамку, которая более популярна, чем в сравнении?
Опять видите выше. Реализация не завершена в Realworld Repo ; это так просто.
Благодаря Богатый Харрис и Ричард Фельдман для взгляда перед публикацией.
Обновления:
Когда эта статья была опубликована TL; DR LOC имел следующее описание:
Оригинал: “https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/”