React vs Angular vs Ember vs Vue.js

Как вы уже знаете, в начале 2017 года было опубликовано много новых фреймворков JavaScript. Но как выбрать лучший, который подходит для вашего проекта? Такой подход может вызвать огромную головную боль ... Итак, я решил сравнить эти фреймворки для вас.

Часть 1 Реагировать

В чем основная идея?

React - это популярный JavaScript-фреймворк пользовательского интерфейса Facebook. Самая замечательная часть React заключается в том, что он охватывает только представления пользовательского интерфейса приложения, другие части, такие как запросы к серверу, должны разрабатываться с использованием других фреймворков.

• Есть элементы, которые должны быть небольшими и не иметь слишком много логики, могут быть объединены в более крупные элементы, могут удерживать состояние, это означает, что сам элемент не изменяется, но его состояние может изменяться, хранятся в React DOM.
• Для веб-приложений реальный DOM сравнивается с React DOM, и только изменение будет повторно отрисовано, это делает ReactJs производительным.
• Более сложные элементы хранятся в классах ES6.
• Класс может иметь состояние, методы жизненного цикла (componentDidMount, componentWillUnmount,…)
• React можно использовать с JSX, который представляет собой объектно-ориентированный язык программирования со статической типизацией.
• Является лишь частью стека технологий Javascript, которую можно комбинировать с множеством других инструментов.

Часть 1 React: стабильность фреймворка

• Уже в версии 15.4.2 react
• Релизы ежемесячно

Часть 1 React: наличие активного сообщества и качество документации

• Официальные вопросы и ответы через stackoverflow с более чем 1000 темами, 7200 сообщениями, 3500 пользователями (за все время)

• На stackoverflow 27000 вопросов

• Всего 860 участников проекта github
• почти 10000 форков и 55000 звезд на github
• Тема Reddit с 17000 читателями
• некоторые сайты

• официальный блог

• reactiflux чат

Часть 1 React: Открытый исходный код, лицензирование и особенности фреймворка

• Исходный код размещен на github
• BSD3 (с дополнительным пунктом о патенте!)

Часть 1. Реагирование: расширенная библиотека виджетов пользовательского интерфейса (автозаполнение, менеджеры компоновки, сетка и т. Д.)

Цитата: https://www.quora.com/Can-you-make-single-page-app-with-ReactJS

Если вы задаете этот вопрос, это заставляет меня подозревать, что вы предполагаете, что React - это обширный фреймворк, такой как Angular или Backbone, а это не так. React - это строго инструмент для рендеринга представления (представьте его как V в MVC) и на самом деле не имеет ничего общего с маршрутизацией или чем-то в этом роде. На самом деле это не облегчит или затруднит создание одностраничного приложения.

Часть 1 React: поддержка Virtual DOM

• Вид виртуального DOM реализован как основная идея React.
• В отличие от элементов DOM браузера, элементы React представляют собой простые объекты, и их создание дешево. React DOM заботится об обновлении DOM в соответствии с элементами React.

Часть 1 React: темы и поддержка скинов

• Matieral UI:

• Belle

• React Bootstrap

• Элементный интерфейс

Часть 1 React: Поддержка валидаций

Не из коробки, нужна другая библиотека Javascript

Часть 1. Реакция: поддержка отложенной загрузки контента

Неподдерживаемый

Часть 1. Реакция: поддержка плагинов

Да, это основная цель реакции

Часть 1 React: собственные мобильные приложения с использованием React

• React также может выполнять рендеринг на сервере с помощью Node и мощные мобильные приложения с помощью React Native.
• React Native (v 0.42) можно использовать как для iOS, так и для Android на Mac, Linux и Windows.
• Есть мнение, что крупные игроки используют React Native, такие как Facebook, Instagram, Airbnb, Baidu, Vogue.
• FB в основном использует реакцию, потому что в любом случае это их фреймворк.

Часть 1 React: будущее фреймворка

• Facebook настойчиво реагирует
• В Google наблюдается растущая тенденция к использованию reactjs:

• По сравнению с AngularJS, это еще меньше:

Часть 1 React: Стартовые комплекты

Есть несколько стартовых наборов, которые используют reactjs с некоторыми другими библиотеками javascript:

Часть 1 React: Инструменты

Есть много дополнительных инструментов: которые упрощают повседневную работу с React (но также могут привести к привязке к этим плагинам поставщиком)

Часть 1 React: Результаты более глубокого анализа:

Для этого анализа я выбрал https://github.com/kriasoft/react-starter-kit

• Код имеет высокую согласованность, по крайней мере, в компонентах.
• Иногда эта сплоченность усложняет задачу (у вас есть приложение со списком, в списке есть несколько элементов, в самом элементе есть некоторые другие компоненты)
• у вас здесь минимум 5 компонентов
• JSX немного усложняет задачу, мне это не понравилось, большинству разработчиков нравится что-то вроде шаблона (представления) с некоторыми заполнителями, в которых данные (модель) отображаются в
• Интеграция начальной загрузки не была прямой (пробовал 30 минут)

Часть 1 React: в основном сочетается с

React в основном сочетается с:

• сокращение
• реагирующий маршрутизатор
• webpack
• Вавилон
• выражать
• карма
• eslint

Часть 2 Angular

Стартовый комплект Angular Material, созданный с помощью Angular 4 (разработанный мной):

Видео демонстрация

Связанная статья

Angular 2.0 был анонсирован на конференции ng-Europe 22–23. Сентябрь 2014 года. Финальная версия была выпущена 14 сентября 2016 года.
Angular 2 - это не обновление версии, а полная переработка. Основные отличия Angular 2 от AngularJS:

• Разработка на всех платформах (для Интернета, гибридных мобильных, собственных мобильных и настольных ПК)
• Скорость и производительность (генерация кода, веб-воркеры и рендеринг на стороне сервера)
• Мобильная разработка: разработка для настольных ПК намного проще, если в первую очередь решать проблемы с производительностью мобильных устройств.
• Модульность: большая часть основных функций перенесена в модули, в результате чего ядро ​​стало легче и быстрее.
• Только современные браузеры: снижение потребности в обходных решениях совместимости браузеров
• Angular 2 рекомендует использовать язык Microsoft TypeScript, в котором представлены следующие улучшения: * объектно-ориентированное программирование на основе классов * статическая типизация * универсальные шаблоны * лямбда-выражения и т. Д.
• Улучшенная инъекция зависимостей: привязки позволяют именовать зависимости
• Динамическая загрузка
• Асинхронная компиляция шаблона
• Более простая маршрутизация
• Заменены контроллеры и $ scope на компоненты и директивы: компонент - это директива с шаблоном
• Поддержка реактивного программирования с использованием RxJS

Часть 2 Angular: последний выпуск

• На сегодняшний день последняя версия Angular - 4.0.0-rc.2.

Часть 2 Angular: компоненты пользовательского интерфейса

• Angular Material 2 (компоненты Material Design, созданные на основе Angular 2)
• Fuel-UI (Bootstrap 4 для Angular 2)
• Kendo UI для Angular 2 (One UI Toolkit для Интернета, настольных компьютеров и мобильных устройств)
• PrimeNG (набор богатых компонентов пользовательского интерфейса для Angular 2)
• Семантический интерфейс для Angular 2
• Пользовательский интерфейс Onsen для Angular 2

Часть 2 Angular: библиотеки данных

• База данных Angular 2 Fire (наблюдаемая, привязанная в реальном времени, объектная база данных)
• Apollo (стек данных для современных приложений, созданный с помощью GraphQL)
• Метеор
• NgRX

Часть 2 Angular: переход с Angular 1

• См. Мою статью о том, как перейти с AngularJS на Angular 2

Часть 2 Angular: поддержка Virtual DOM

• Поддерживается

Часть 2 Angular: шаблоны и темы

• Есть предопределенный синтаксис шаблона, но вы можете определить свои собственные теги шаблона с помощью директив.

Часть 2 Angular: поддержка валидации

• Встроенные валидаторы Angular 2 (требуется, минимальная длина, максимальная длина, шаблон)
• Существуют плагины, такие как ng2-validation (диапазон, цифры, номер, URL, адрес электронной почты, дата, json, телефон ...)
• Вы также можете создать свои собственные валидаторы.

Часть 2 Angular: Ленивая загрузка

Предположим, у нас есть две страницы в нашем приложении: «главная» и «админ». Некоторые люди могут никогда не попасть на страницу администратора, поэтому имеет смысл обслуживать загрузку страницы администратора только тем людям, которые действительно в ней нуждаются или которые имеют к ней доступ. Здесь мы будем использовать отложенную загрузку.

• Поддерживается

Часть 2 Angular: поддержка плагинов

• Плагины Angular 2

• Угловые 2 модуля

Часть 2 Angular: Инструменты

• Angular Universal (рендеринг на стороне сервера для приложений Angular 2)
• Augury (расширение Google Chrome Dev Tools для отладки приложений Angular 2)
• Codelyzer (набор правил lint машинописного текста для анализа кода проектов Angular 2 TypeScript)

Часть 2 Angular: Книги

• Угловая 2 Книга

• Электронная книга Станьте ниндзя с Angular 2

• Изучение книги Angular 2

• Angular 2 в действии

• Тестирование приложений Angular 2

• Разработка на Angular 2 с помощью TypeScript

• нг-книга 2

• Учебное пособие по Angular 2 от Rangle

Часть 2 Angular: онлайн-обучение

• Udemy курсы

• Линда курсы

Часть 2 Angular: Сообщество

• Официальная группа Google

• Каналы обмена мгновенными сообщениями (# Angular2, IRC-сервер Freenode, канал Slack для # Angular2 в сети DartLang)
• Чат Gitter с разработчиками 8551 Angular2
• Сообщество Reddit с немногим более 6200 участников
• DevChat Adventures in Angular (еженедельный подкаст, посвященный фреймворку Angular JavaScript и связанным с ним технологиям, инструментам, языкам и практикам.)
• Подписка на ng-newsletter (бесплатный еженедельный информационный бюллетень лучшего контента AngularJS в сети)
• Stack Overflow (отмечены 25103 вопроса)
• Сообщение о проблемах на github
• События и встречи
• Угловой лагерь

• Angular Air: видео-подкаст, посвященный Angular

Часть 3 Эмбер

• Ember - это фреймворк с открытым исходным кодом для веб-приложений.
• Ember разработан, чтобы помочь разработчикам создавать «амбициозные веб-приложения».
• Ember работает по шаблону MVC (разделение обязанностей). Это упрощает приложение:

Поддерживать

Распространяйте и делитесь кодом с другими разработчиками

Эмбер философия

Перегруппируйте все лучшие практики, стандарты и соглашения сообщества в рамках Ember.

• Члены основной команды Ember участвуют в разработке спецификаций и стандартов комитетов W3C.
• Каждый член основной команды Ember активно работает над одним или несколькими производственными приложениями, использующими Ember.

Часть 3 Ember: требуются знания

• Javascript
• HTML 5
• NodeJs

Часть 3 Ember: Кто этим пользуется?

• PlayStation сейчас
• Справочная платформа Apple
• Музыкальный магазин Apple
• Nasa.gov

Часть 3 Ember: последний выпуск

Последний релиз LTS (Long Time Support) - v2.11.3
Эта версия была выпущена 08.03.2017

Часть 3 Ember: частота общедоступных обновлений, исправлений и выпусков

• Релизы ежемесячно

Часть 3 Ember: основные характеристики

• Продуктивность
• С Ember CLI многое сделано «из коробки».
• Генерация проекта
• Тестирование (codemash)
• Сервер разработки
• Многоразовые шаблоны
• Поддержка IDE
• Возможно TDD
• Соглашение важнее конфигурации
• Библиотека данных Ember
• Модель как ORM с отношениями на стороне клиента
• Если мы соблюдаем соглашение об именах в нашей модели, нам не нужно беспокоиться об извлечении данных, поступающих с сервера.
• Пример видео о взаимоотношениях →

• Для членов модели возможна отложенная загрузка, например:
• У пользователя много адресов
• Мы можем загрузить Пользователя в один пейлоад без Адресов
• А позже загрузите адреса в другую полезную нагрузку
• Магазин Ember
• Магазин представляет собой центральное хранилище моделей в приложении.
• Компоненты и маршруты могут запрашивать у магазина модели, и магазин отвечает за то, чтобы знать, как их получить.
• Вы можете думать о магазине как о сквозном кеше для моделей вашего приложения.
• Когда модель уже присутствует в магазине, данные не запрашиваются в серверной части (работают как кеш). Если мы хотим снова загрузить модель, уже присутствующую в магазине, мы должны явно сообщить об этом в магазин.

Часть 3 Ember: кроссплатформенная разработка

• Ember-cli для Кордова

Часть 3 Ember: компоненты пользовательского интерфейса

• В духе Google Material Design

• Семантический интерфейс

• Загрузочный файл для Ember

Часть 3 Ember: библиотеки данных

• Модель поддержки с отношениями

Часть 3 Ember: Ленивая загрузка

• Ленивая загрузка классов модели с отношениями, такими как объект ORM (см. Главу Основные функции)
• Ember-cli ленивая загрузка

• Ленивая загрузка изображения с помощью Ember

Часть 3 Ember: развертывание

• Ember-cli deploy делает свою работу

Часть 3 Ember: поддержка Virtual DOM

• Ember использует Virtual DOM

Часть 3 Ember: поддержка валидации

• Валидатор модели Ember должен сделать эту работу

• Ember easy form

• Мы также можем создать наш настраиваемый валидатор, расширяющий, например, объект InputText и реализующий настраиваемую проверку.

Часть 3 Ember: поддержка плагинов

• Дополнения Ember

Часть 3 Ember: Инструменты

• Настроить REST-сервер на стороне клиента

• Тратьте меньше времени на подключение заглушек HTTP и возвращайтесь к разработке своего приложения
• Используйте фабрики, чтобы определять состояние вашего сервера для каждого теста. Приемочное тестирование стало намного проще
• Поделитесь функциональным прототипом вашего приложения, которое полностью работает на клиенте, прежде чем писать одну строку вашего API.
• Ember Inspector, доступный для Firefox и Chrome, представляет собой удобное расширение для просмотра состояния работающего приложения Ember. Он предлагает способ проверки:
• иерархия шаблонов
• полная схема маршрутов
• Обозреватель магазина Ember Data
• устаревание, производительность и многое другое

Часть 3 Ember: Книги

• Просто ищите в любимой поисковой системе :)

Часть 3 Ember: онлайн-обучение

• Несколько видео бесплатно

• Просто ищите на YouTube :)

Часть 3 Ember: Сообщество

• Часы Ember

• Stackoverflow с тегами 20192 вопроса

• Официальный дискуссионный форум

• Просто погуглите свой вопрос :)

Часть 3 Ember: о члене основной команды Ember

Каждый член основной команды Ember активно работает над одним или несколькими производственными приложениями, использующими Ember.
Это означает, что основная команда вынуждена испытывать все радости и боли использования фреймворка, как и любой другой разработчик. А это означает, что основная команда, естественно, будет заботиться о благе всех разработчиков, использующих фреймворк.

Члены основной команды Ember участвуют в разработке спецификаций и стандартов комитетов W3C.

Часть 3 Ember: Руководство устанавливают самые опытные

Итак, вот вопрос: кто вы хотите установить руководство и лучшие практики для использования фреймворка? Разработчики, имеющие некоторый опыт использования фреймворка, или разработчики, которые фактически создали фреймворк?

В этом разница между Angular и Ember.

Angular не дает подробных инструкций по использованию фреймворка, поэтому он становится диким западом, когда компания впервые принимает Angular. Каждая команда использует фреймворк так, как считает нужным.

Часть 3 Ember: анекдот разработчика

Вот пример: четыре команды разработчиков в настоящее время используют Angular на моем рабочем месте, и каждая команда структурировала свое приложение Angular по-своему. Нет никакой последовательности, даже если мы все используем одну и ту же структуру. И мы буквально потратили несколько дней на обсуждение и обсуждение того, как должны быть структурированы наши приложения. И они все еще не так структурированы.

С другой стороны, у Ember есть свои рекомендации и передовой опыт, установленные членами его основной команды. И эти рекомендации и передовые практики встроены непосредственно в структуру, поэтому им легко следовать.

Поскольку Ember конкретно определяет, как должно быть структурировано приложение, разработчики не тратят часы на обсуждение того, как должно быть структурировано приложение. Вместо этого они могут потратить это время на разработку приложения и создание ценности для бизнеса.

Это также означает, что новые члены команды, которые уже знают Ember, могут стать продуктивными в любом приложении Ember за считанные минуты, потому что они знают, как приложение структурировано и куда идти, чтобы добавить новую функцию или исправить ошибку. Как я уже говорил выше, потратив всего несколько часов на изучение Ember, я смог просмотреть и понять структуру большого приложения Ember. Этого нельзя сказать о большинстве разработчиков, изучающих Angular.

Vue.js

Точнее Vue.js версии 2.

Обзор всех фреймворков от Vue.js:

Статья о том, почему мы выбрали Vue.js

Строительство

Использовал веб-пакет Vue.js.

Плагины

Связь со службой отдыха

Стартовый пакет

Стабильность фреймворка, частота публичных обновлений и релизов

Централизовано вокруг небольшой команды разработчиков.
Часто выпускает.

Наличие активного сообщества, качество документации и расширяемость фреймворка.

Сообщество в основном активно работает над окружающими плагинами.
Основные плагины поддерживаются основной командой разработчиков.

Открытый исходный код, лицензирование и особенности фреймворка

Исходный код доступен на GitHub

Разработкой в ​​основном занимался Эван Ю, финансировал

Расширенная библиотека виджетов пользовательского интерфейса (автозаполнение, менеджеры макета, сетка и т. Д.)

Можно легко интегрировать существующие UI-фреймворки.
bootstrap, font-awesome и т. Д.
Хорошим примером для этого является проект vue-material:

Поддержка виртуального DOM

Поддерживается

Темы и поддержка скинов

Только через динамические классы, стили и CSS.

Поддержка валидаций

vee-validate обеспечивает простую проверку пользовательского интерфейса Vue.js 2.0.
Более сложные проверки можно довольно легко реализовать в виде директив.

Поддержка отложенной загрузки контента

Зависит от того, как используется веб-пакет. Это должно быть возможно.

Поддержка плагинов

На основе поддержки плагинов.

Можем ли мы создавать собственные мобильные приложения, используя ту же платформу

Доступна демонстрационная версия Cordova.
Weex поддерживает формат vue.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —-

Большое спасибо Габриэлю, Патрику, Матье и Эмре за их помощь.

Если вам понравилась моя статья, не забудьте аплодировать, поделиться ею или прокомментировать. Для меня важно привлечь больше людей. Пожалуйста, проверьте мою последнюю статью: