Автор оригинала: FreeCodeCamp Community Member.
Jacek Schae.
Обновление: Есть более новая версия этой статьи
Реальное сравнение интерфейсных структур с тестами (обновление 2018 года) Эта статья является обновлением реального сравнения внешних структур с тестами с декабря 2017 года. Medium.freecodeCamp.org.
За последние пару лет мы видели взрыв передних рамок. Каждый из них более чем способен построить отличные веб-приложения. Так как вы сравниваете и решаете, какой из них использовать для вашего следующего проекта?
Прежде всего, сделать значимое сравнение, нам нужно несколько вещей:
- Приложение Real World – Нечто большее, чем «TODO». Обычно «Тодос» не передает знания и перспективы на самом деле построить реальный Приложения.
- Стандартизирован – проект, который соответствует определенным правилам. Хозяин в том же месте, обеспечивает внутреннюю API, статическую разметку, стили и спецификацию.
- Написано экспертом – последовательный, реальный мировой проект, который в идеале был бы эксперт в этой технологии. Это правда, по крайней мере, большую часть времени (см. Ниже).
Так как мы получаем такой проект? Хорошая новость в том, что Эрик Саймонс Уже создано Realworld проект. Это клон платформы среднего блога. Каждая реализация этого проекта использует одну и ту же структуру HTML, CSS и API, но другой библиотеку/рамки. Когда дело доходит до экспертных знаний, это правда большую часть времени. Я написал реализацию в Clojurecript и Перезапись И я не считаю себя экспертом. В моей защите эксперт рассмотрел мой код – спасибо Даниэль Комптон Отказ
Теперь у нас есть базовый спектр, нам нужен стандартный набор тестов/метрик для их сравнения.
- Представление. Как долго это приложение делает, чтобы показать контент и стать полезным?
- Размер. Насколько велика приложение? Мы сравним только размер скомпилированного JavaScript. CSS распространен для всех вариантов и загружается с CDN (сеть доставки контента). HTML распространяется для всех вариантов. Все технологии компилируют или транпилируют JavaScript, поэтому мы только размер этого файла.
- Линии кода. Сколько строк кода была автор для создания приложения RealWorld на основе спецификации? Быть честным, некоторые приложения имеют немного больше колоколов и свистков, но оно не должно оказывать существенное влияние. Единственная папка, которую мы определяем, это SRC/в каждом приложении.
На момент написания (декабрь 2017) проект реального мира доступен в следующих рамках:
- Реагировать/redux.
- Эльма
- Угловой 4+
- Угловой 1,5+
- React/mobx.
- Crizmas MVC.
- CLSJ Keechma
- Одобрять
- CLJS Re-Frame (Это тот, который я сделал. Это еще не перечислено в проекте RealWorld).
Метрика № 1: производительность
Первая значимая краска Тест с Аудит маяка это корабли с хром.
Чем раньше вы рисуете, тем лучше опыт для человека, который использует приложение. Маяк также меры Первый интерактивный Но это было почти идентично для большинства приложений.
Метрика # 2: Размер
Размер передачи на вкладке Chrome Network. Заголовки ответа Gzuпленок плюс тело ответа, поставляемое сервером.
Меньшая скачать и меньше разбираться.
Это зависит от размера вашей структуры, любые дополнительные зависимости, которые вы добавили, и насколько хорошо ваш инструмент сборки может сделать небольшой пучок.
Метрика № 3: Линии кода
Использование CLOC Мы считаем строки кода в каждой папке SRC REPO. Пустые и комментарии линии не Часть этого расчета. Почему это значимо?
Меньше строки кода у вас есть меньшая вероятность ошибки и меньшая кодовая база для обслуживания.
Заключение
Представление
Это сравнение реального произведения, а не ориентир в вакууме. Испытания были выполнены из Европы (Швейцария). Все приложения были размещены на GitHub. Значения могут отличаться для вас, что в порядке. Тесты проводились пару раз для каждого приложения, а затем усредненные и округлые. Результаты были довольно линейными при сравнении в течение дня. Большинство библиотек/каркасов находятся в диапазоне отличных и хороших. Вы не увидите много различий, когда речь идет о производительности.
Размер
Размер связки для каждого приложения всегда одинаково. Мы сравниваем аналогичные реализации и посмотрим, как различаются размеры пакета. Оснащен безумно! Я посмотрел пару раз, потому что я не мог поверить в это. ELM делает удивительную работу, когда речь идет о размере связки и особенно когда вы смотрите на строки кода.
Линии кода
Это оказывает наибольшее влияние на вас как разработчик программного обеспечения. Чем больше строк кода, тем больше вам нужно ввести и больше для обслуживания. Здесь есть некоторые компромиссы. Особенно, когда дело доходит до напечатанного по сравнению с динамическими языками. Типы дают вам больше безопасности и поставляются по стоимости – больше вещей, чтобы ввести.
Напечатано против динамики
Напечатано : Elm, angular 4+ и одобрено.
Динамический : Реагировать |. Redux, Angular 1.5, Rect | MOBX, CRIZMAS MVC, CLJS Keechma и Re-Frame.
Так что лучше? Это не лучше или хуже, это другое. Как TDD (тестовое развитие), некоторые люди любят это, некоторые ненавидят это. Вы можете разрабатывать отличное программное обеспечение с или без него – выберите тот, который подходит вам лучше.
Где Vue, PreaCt, Ember, Svelte, Aurelia и другие?
Похоже, они опаздывают на вечеринку, но не беспокоится. Я сделаю еще один раунд, когда у нас их есть. Уже есть Открытые проблемы – Рассмотрим вклад вклад! Или начать с нуля и откройте новый вопрос.
Окончательное слово
Это сравнение именно то, что он говорит. Сравнивает различные реализации аналогичных реальных веб-приложений мира в реальном мире. Я знаю, это не идеально. Он отличается на основе нагрузки на сервер, сетевой трафик и многие другие вещи, которые происходят в реальном мире.
Благодаря Даниэлю Комптону для корректора.
Если вы наслаждались этой статьей, и хотели бы быть уведомленной, когда я выпускаю подобную статью, подумайте о том, чтобы следовать за мной на среднем и твиттер .