Jacek Schaeоригинал, лицензияLeanCloudпереводить.
мы будем основываться наПример приложения RealWorldСравните интерфейсные фреймворки. Возможности примера приложения RealWorld:
-
Приложение реального мира
Более сложное, чем приложение для списков дел. Часто приложений для списков дел недостаточно, чтобы передать достаточно информации для построениядействительныйзаявление.
-
стандартизация
Предметы подчиняются определенным правилам. Предоставьте внутренний API, статический язык разметки, стиль, спецификацию API.
-
Профессиональное написание и обзор
В идеале это должен быть проект с высокой степенью согласованности и точности, написанный или проверенный профессионалами, использующими данную технологию.
Сравнение библиотек и фреймворков
Напишите эту статью,Пример приложения RealWorldВсего на складе имеется 18 Conduit (приложения для клонирования Medium.com).
В этой статье не рассматривается популярность фреймворка, в объем сравнения входят интерфейсные фреймворки, перечисленные в репозитории RealWorld.
мера
представление
Содержание приложений, вы можете использовать это занимает сколько времени?
размер
Realworld Сколько строк кода создавать приложения на основе необходимости регулирования? Быть справедливым, некоторые функции будут реализованы в чуть более чем немного, но это не должно быть существенного влияния. Мы измеряли только для каждого приложенияsrc/содержание.
представление
Мы будем использовать ChromeLighthouse AuditПроизводительность теста. Оценка возврата маяка 0-100. 0 - самый низкий балл.
настроить
Все тесты используют следующую конфигурацию:
Оценки производительности основаны на следующих показателях:
- First Contentful Paint (первый рендеринг элементов контента на странице)
- First Meaningful Paint (значимые элементы контента на странице во время первого рендеринга)
- Индекс скорости (скорость визуального изменения при загрузке страницы)
- Первый бездействие ЦП (время до первого бездействия ЦП)
- Time to Interactive (интерактивная страница за раз)
- Расчетная задержка ввода
смотрите подробностиРуководство по рейтингу маяков.
TL;DR
В заключение
Большинство приложений имеют рейтинг выше 90. Поэтому пользователи, вероятно, не почувствуют большой разницы в производительности этих фреймворков.
размер
Это зависит от размера фреймворка и размера дополнительных зависимостей, а также от эффективности инструмента сборки для сокращения неиспользуемого кода.
TL;DR
Чем меньше файл, тем быстрее загрузка и меньше содержимого для анализа. (Единица измерения на рисунке ниже — КБ.)
В заключение
В этом отношении есть довольно много удивительных результатов. Svelte, волшебный исчезающий UI-фреймворк, оправдывает свое название. Stencil — это относительно новый фреймворк, который хорошо работает. Оба фрейма являются относительно новыми, что расширяет их размер до новых пределов.
Линии кода
Мы используемclocПодсчитайте количество строк кода в каталоге src каждого репозитория, исключая пустые строки и комментарии. Зачем сравнивать строки кода? Это потому что:
Если отладка — это процесс удаления программных ошибок, то программирование должно быть процессом добавления ошибок.
Edsger Dijkstra
TL;DR
На приведенной ниже диаграмме показано, насколько компактна данная библиотека/фреймворк/язык. Сколько строк кода потребуется для реализации почти идентичного приложения (некоторые приложения с немного большей функциональностью) в соответствии со спецификацией.
ПРИМЕЧАНИЕ. Мы пропустили Имбу, потому чтоclocНе выдерживаю.imbaдокумент. Elm 开发者写代码喜欢分行，所以行数较多（至少). Angular+ngrx 只计算了libsв каталоге.tsа также.htmlMateusz KwasniewskiУкажите правильное количество строк кода.
В заключение
С точки зрения количества строк кода, использование рефрейминга ClojureScript дало взрывной 💥 результат. Clojure известен своей исключительной выразительностью. Если вам небезразличны строки кода, вы должны знать ClojureScript, AppRun, Svelte.
Суммировать
Не забывайте, что это не точное и справедливое сравнение. Некоторые реализации разделяют код, некоторые нет. Некоторые развернуты на GitHub, некоторые развернуты на Now, некоторые развернуты на Netlify. Если вы все еще должны спросить, что является лучшим? Все, что я могу сказать, это то, что лучший фреймворк — это тот, который наилучшим образом соответствует вашим потребностям.
Q:Предпочитаете строгую проверку типов?A:Узнайте о Elm, PureScript, TypeScript — Angular, AppRun, Dojo.
Q:Хотите очень легкий фреймворк?A:Узнайте о Svelte, Stencil, AppRun.
Q:Хотите поддерживать как можно меньше кода?A:Узнайте о рефрейминге (с использованием ClojureScript), AppRun, Svelte.
Q:Хотите узнать что-то новое?A:Выберите фреймворк, о котором вы не знаете!
FAQ
1. Почему бы не сравнить кадры X, Y, Z?
потому чтоСклад реального мираРеализация в неполная. Рассмотрите возможность внесения кода! Реализуйте его с вашей любимой библиотекой/фреймворком, мы включим их в наше следующее сравнение!
2. Почему он называется RealWorld?
Потому что он более сложный, чем приложение To-Do. Реальный мир не означает, что мы будем сравнивать заработную плату, уровень обслуживания, производительность, кривую обучения.Другое исследование
3. Почему вы не включили мою любимую рамку?
Пожалуйста, вернитесь и прочитайте первый вопрос выше. Но я все же хочу подчеркнуть здесь: потому чтоСклад реального мираРеализация в неполная. Эти реализации — результат совместных усилий сообщества, а не меня как человека. Если вы хотите сравнить свой любимый фреймворк, рассмотрите вклад кода.
本文撰写时（2019 年 3 月）可用的版本。 смотрите подробностиСклад реального мира.
再一次，看看前面的问题。 Очень простой,Склад реального мираРеализация в неполная.
благодарныйRich Harrisа такжеRichard FeldmanПросмотрите эту статью до публикации.
Если вам понравилось эту статью, вы можетеСледи за мной на Твиттере. Я только чирикаю по программированию и технологиям.