Автор оригинала: FreeCodeCamp Community Member.
Jacek Schae.
Эта статья – это обновление Реальное сравнение фронтальных структур с тестами С декабря 2017 года.
В этом сравнении мы покажем, как различные реализации практически идентичных Пример приложения Realworld составляю друг против друга.
Пример приложения Realworld дает нам:
- Приложение Real World – Нечто большее, чем «TODO». Обычно «Тодос» не передает достаточно знаний и перспективе, чтобы на самом деле построить реальный Приложения.
- Стандартизирован – проект, который соответствует определенным правилам. Предоставляет внутреннюю API, статическую разметку, стили и спецификацию.
- Написано или рассмотрено экспертом – последовательный, реальный мировой проект, который, в идеале, эксперт в этой технологии будет построен или рассмотреть.
Критика из последней версии (декабрь 2017)
✅️. Угловой был не в производстве. Демо-приложение, перечисленное в Real World Refo, использовали версию разработки, но благодаря Jonathan Faircloth теперь сейчас находится в производственной версии!
✅ Vue не был перечислен в реальном мире репо, и поэтому не был включен. Как вы можете себе представить, в переднем мире это вызвало много тепла. Как вы не добавили Vue? Что, черт возьми, не так с тобой? На этот раз вокруг Vue.js находится в! Спасибо Эммануэль Вильсбол Отказ
Какие библиотеки/рамки мы сравниваем?
Как и в статье декабря 2017 года, мы включили все реализации, перечисленные в RealWorld Repo. Это не имеет значения, имеет большое значение или нет. Единственная квалификация заключается в том, что она появляется на Real World Repo страница.
На каких метриках мы смотрим?
- Производительность: Как долго это приложение делает, чтобы показать контент и стать полезным?
- Размер: Насколько велика приложение? Мы сравним размер только скомпилированного файла JavaScript. CSS распространен для всех вариантов и загружается с CDN (сеть доставки контента). HTML является общим для всех вариантов. Все технологии скомпилируются или транпилируют JavaScript, поэтому мы только размер этого файла.
- Линии кода: Сколько строк кода имел автора для создания приложения RealWorld на основе спецификации? Быть честным, некоторые приложения имеют немного больше колоколов и свистков, но оно не должно оказывать существенное влияние. Единственная папка, которую мы оцениваем, это
SRC/в каждом приложении.
Метрика № 1: производительность
Проверьте Первая значимая краска Тест с Аудит маяка это корабли с хром.
Чем раньше вы рисуете, тем лучше опыт для человека, который использует приложение. Маяк также меры Первый интерактивный С Но это было почти идентично для большинства приложений, и это в бета-версии.
Вы, вероятно, не увидите много различий, когда речь идет о производительности.
Метрика # 2: Размер
Размер передачи на вкладке Chrome Network. Заголовки ответа Gzuпленок плюс тело ответа, поставляемое сервером.
Чем меньше файл, тем быстрее загрузка (и меньше разбираться).
Это зависит от размера вашей структуры, а также на любых дополнительных зависимостях, которые вы добавили, и насколько хорошо ваш инструмент сборки может сделать небольшой пучок.
Вы можете увидеть, что Svelte, Dojo 2, и одобрено сделать довольно хорошую работу. Я не могу сказать достаточно о ELM, особенно когда вы смотрите на следующий график. Я хотел бы увидеть, как HyperApp сравнивает … Может быть, в следующий раз, Хорхе Букаран ?
Метрика № 3: Линии кода
Использование CLOC Мы считаем строки кода в каждой папке SRC REPO. Пустые и комментарии линии не Часть этого расчета. Почему это значимо?
Меньше строки кода у вас есть, то вероятность поиска ошибки меньше. У вас также есть небольшая кодовая база для обслуживания.
В заключение
Я хотел бы сказать большое спасибо за Эрик Саймонс Для создания Реальный мир Пример приложений РЕПО и многочисленным участникам, которые написали разные реализации.
Обновление: Благодаря Джонатан Фэрклот Для обеспечения производственной версии угловой.
Оригинал: “https://www.freecodecamp.org/news/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962/”