На что лучше перейти на Angular, React, Vue?
==============================================

 Здравствуйте, уважаемые пользователи сообщества. Передо мной встала проблема, с которой мне теперь тяжело жить. Работаю я в средней компании, команда занимается enterprise проектом, где разработка ведётся из трёх человек: два джависта и один фронтд-разработчик (он же я).  
  

Из моих знаний, владею я только Angular. Год назад начинали проект на первом ангуляре, с выходом второго успешно портировали на второй (четвертый). Но вот на проекте встала задача, отрисовывать динамически компоненты на странице по требованию (то есть в зависимости от того, какой макет страницы придет с сервера). Проблема в том, что когда я стал реализовывать задачу понял, что для меня она либо не подъемна, либо я не правильно решаю. То есть в момент загрузки приложения, мне приходится грузить все компоненты, которые могут быть в макете (а их около 200), но с сервера приходит макет, в котором может быть 5 компонентов на данной странице, и получается, что я загружаю бессмысленный бандл из N-мегабайт объемом ожиревший от всех компонентов. Я сначала пытался динамически компоненты выносить в модули, но в разных модулях могли быть одинаковые компоненты, отсюда идея с lazy load модуля потерпела неудачу, реализации вынесения компонента в виде js файла, но тут не нашёл решений на ангуляре, хотел выносить один компонент в один модуль для ленивой загрузки по требованию, но отсюда ломается идея, ибо роутинг завязывается в ангуляре только на загрузку одного модуля, реализация с динамической загрузкой при помощи systemjs тоже отпала, так как эта штука уже устарела и на новом ангуляре не удается ее запустить у себя, а реализация с динамическим компилированием typescript в рантайме тоже не подошло, ибо это дело очень долго собиралось в итоге в браузере, в то время как требования к UI загрузка за секунду в браузере (хотя AOT не работает для динамических компонентов, и снова проблемы). То есть на себе я ощутил боль и ненависть, и желания писать на Angular почему все меньше. Но хотя я один из его фанатов, но решить задачу не выходит. Может серверный рендеринг надо для этого поднимать, в качестве дополнительного сетевого приложения, который собирал нужный макет на сервере, но опять же, почему столько мучений?  
  

Разве в React, Vue (на них я не писал) столько же проблем? Мне 23 года, я хочу развиваться и может я не верный путь выбрал. Смотрю в Сбертехе, Яндексе, Рамблер и другие крупные используют React, может поэтому только статьи на Хабре и других ресурсах только про React, типо потому, что там реально лучше разрабатывается или что? Если Vue такой крутой, почему на нем мало вакансий.   
  

Хочу узнать, мне теперь переписывать весь проект на другую технологию или что делать с моей проблемой? Есть люди из крупных команд, что посоветуете?  
  

Динамически генерировать формочки мне не надо, это делается легко  
  

```
<div *ngFor="let field of entityFields">
<input [ngModel]="field" />
</div>
```
  
  

Мне нужно генерировать разного рода компоненты:  
  

<ТУТ ДОЛЖЕН БЫТЬ КОМПОНЕНТ> ТУТ ДОЛЖЕН БЫТЬ КОМПОНЕНТ>  
  

И черт его знает, что это за компонент, может это dropdown-list, может step-list, может   

graphSVG компонент, потому как прилетает разметка, а судя по разметке нужно рендерить в тех метках где указан компонент, тупейший способ использовать ngComponentOutlet, но ему на вход нужен reference компонента, а это значит нужно все компоненты где-то хранить в Map и получать их по ссылке, а значит это тупой единый бандл с компонентами.  
  

Изначально искал решения вот так:  

для 2 Angular есть пример динамической загрузки компонентов и модулей.   

ng-course.org/ng-course/demos/ng-course/index.html...  

Исходники:  

[https://github.com/eyalvardi/ng-course/tree/master...](https://github.com/eyalvardi/ng-course/tree/master/app/05-DynamicComponent)  
  

Но эти примеры на втором ангуляре, когда у него был сборщик SystemJS. Я писал о проблеме выше. Мы же перешли в этом году на четвертый ангуляр, и суть в том, что запустить старые примеры с тем же SystemJsNgModuleLoader уже просто нереально, то webpack пишет непонятные ошибки, решения который нет на гитхабе, либо попросту не компилируется TS, к тому же, современный алгоритм текущего решения является синтаксическим сахаром в четвертом ангуляре директивой ngComponentOutlet, но по факту, там тоже куча минусов, и разработчики не постарались сделать ничего для Input, Output событий для этой директивы.  
  

Да и текущий алгоритм я смог интерпретировать иначе:  

[https://github.com/splincode/codework/blob/master/...](https://github.com/splincode/codework/blob/master/typescript/angular/dynamic.ts)  
  

Но в итоге, как оказывается нужно строить Map с компонентами, а если у вас их 200? Получается вы 200 компонентов должны уже загрузить и хранить в Map, в общем не особо то и хороший вариант.  
  

Заранее спасибо 

 Ну я React даже не трогал, на первом Angular писал когда-то и вот несколько месяцев уже на Vue работаю.  

Я бы брал Vue. Порог вхождения у него низкий, документация русскоязычная просто пушка, ну и для вашей задачи мне кажется самое то. 

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

Рассмотрим упомянутые варианты...  
  
**AngularJS**. JS. Он пляшет от шаблонов. В этом его сила (заверстали страницу, добавили директив и готово) и слабость (динамическое формирование страниц, как вы заметили, даётся с большим трудом). Криво реализованное двустороннее связывание и обнаружение изменений приводит к странным костылям и тормозам.  
  
**Angular**. TS. Опять же пляшет от шаблонов. Но внутрення архитектура улучшилась. С одной стороны она стала ещё сложнее, с другой - гибче. Динамику реализовать в нём проще, но придётся поломать голову ковыряясь в абстракциях. "Проталкивающая" модель реактивности не очень удобная и эффективная, но жить можно.  
  
**Vue**. JS. По уму сделанный AngularJS. Довольно практичный (если не пытаться прикручивать TS) с приятной "затягивающей" реактивностью. Из трендовых фреймворков я бы обратил внимание именно на него.  
  
**React based**. JS. Сам реакт - не более чем библиотека для рендеринга. Так что под его лейблом подразумевается на самом деле "мы написали свой фреймворк, в котором рендерим через реакт". Достаточно легко в нём реализуется динамика. Но с переиспользуемостью кода и его лаконичностью - просто беда. Куча копипасты во имя великой идеи с глобальным состоянием - типичная ситуация. Каждый такой фреймворк по своему уникален, так что "знание реакта" мало чем помогает при вхождении в проект.  
  
**Polymer**. JS. Попытка воспользоваться самыми последними стандартами. Всё крутится вокруг DOM, что весьма не эффективно. Реактивности как таковой нет. Спека ShadowDOM имеет уже вторую версию и та весьма ограниченна и требует костыльных костылей и вытягивания гланд через анус при использовании. Динамика с одной стороны отличная - рендерите что угодно куда угодно и динамически всё подгружается. Но без "вулканизации" вся эта динамика дико тупит, поэтому всё-равно всё объединяют в один бандл.  
  
**$mol. TS. Полностью динамичен и ленив. Что угодно может быть динамически загружено, но в этом нет необходимости, так как компоненты получаются крайне компактными, а в бандл тянется лишь то, что реально используется. Рендерит тоже по возможности лениво, что позволяет быстро показать даже очень большую страницу. Имеет стандартную библиотеку компонент. В качестве примера, могу привести визуальный редактор компонент, который динамически строится по его коду и тут же в рантайме этот компонент изменяет (он ещё в разработке, но уже много чего позволяет): [mol.js.org/#demo=mol_app_hello/edit/path](http://mol.js.org/#demo=mol_app_hello/edit/path)  
  

К тем вариантам, что "JS", разумеется можно прикрутить сбоку и TS, но очень ограниченно:  
Будет много кода с декларациями типов и мало выведения типов.
Практичная с точки зрения JS магия вырождается в весьма непрактичную борьбу с типизацией.
Многие библиотеки/плагины/компоненты написаны на JS. В лучшем случае вы сможете своими силами написать для них типы.

Итого:  
Под вашу задау идеально подходит $mol, но он далеко не в тренде (80 звёзд на гитхабе, ага). На нём можно быстро разрабатывать приложения, но сложно найти работу. Если есть желание, то мы ищем разработчиков от стажёров до сеньёров.
2. Из востребованного сейчас на рынке: AngularJS, React*. Мой прогноз - скоро реакт выйдет из моды. Многие уже обожглись на нём, нафигачив горы говнокода, и переползают на более практичный Vue.
3. Для устройства в Я имеет смысл изучать BEMJS (тогда точно возьмут :-D) или что-то трендовое типа React или Vue ну и VanillaJS нужно знать обязательно. Я сам в нём 2 раза работал, но как видите самореализоваться там не смог.
4. Так как сроки у вас поджимают, то переписывать проект уже поздно. Так что лучше подумать о типичных костылях: CDN, нескучная анимация загрузки, агрессивное кеширование. Тем не менее по скорости разработки я бы отсортировал решения в следующем порядке (от быстрой к медленной): $mol, Vue, Angular, Polymer, React
Производительность и размер приложений на упомянутых фреймворках можете сравнить тут: [mol.js.org/app/bench/#bench=https%3A%2F%2Feigenmet...](http://mol.js.org/app/bench/#bench=https%3A%2F%2Feigenmethod.github.io%2Ftodomvc%2Fbenchmark%2F/sample=angular2~mol~polymer~typescript-angular~typescript-react~vue/sort=fill)
Так как у вас энтерпрайз, то выбирать стоило бы из фреймворков, предоставляющих свою библиотеку высокоуровневых компонент (ExtJS,OpenUI5,KendoUI,VCL.JS,$mol). Энтерпрайзу обычно скорость разработки, богатство и единообразие функциональности важнее кастомных дизайнерских изысков на каждом экране.
7. Для разработки более-менее крупных поектов имеет смысл брать фреймворки написанные с использованием статической типизации, тогда вы получите от типизации больше преимуществ и меньше боли. Их пока ещё не очень много: Angular (TS/Dart), $mol (TS), CycleJS (TS), VCL.JS (TS)...
8. Джуниору лучше не заниматься созданием нового фреймвора (даже на Реакте), ничем хорошим это не закончится. Тут нужен опыт, чутьё и рациональность. Не у каждого сеньёра это всё есть.
9. IE10 - это боль и страдания. Вы профилировали, на что именно уходит больше всего времени (загрузка, инициализация приложения, загрузка данных рендеринг)? Возможно стоит уменьшить объём единовременно отображаемых данных или подумать о серверном рендеринге ангуляровских шаблонов.

 

> Если Vue такой крутой, почему на нем мало вакансий

  
  

Ты сам ответил на этот вопрос. Потому что почти все корпоративные монстры вливают бабло в разработку на Реакте!   
  

Кроме того, вакансии на Вью растут по экспоненте. Недавно выкладывали статистику. Рост очень стабильный. 

> Хочу узнать, мне теперь переписывать весь проект на другую технологию   
> 

  
  

а вам выделят бюджет переписать все с нуля ?  

да в react есть возможность разбить бандл на части но вы уверены что вам это нужно ?  

я не писал на angular но мне очень интересно и если это не займет много времени поделитесь пожалуйста сравнением сколько весит бандл с 10 компонентами, 50 и 200 

 Вот для 2 Angular есть пример динамической загрузки компонентов и модулей.   

Live:  

[ng-course.org/ng-course/demos/ng-course/index.html...](http://ng-course.org/ng-course/demos/ng-course/index.html#05-DynamicComponent)  

Исходники:  

[https://github.com/eyalvardi/ng-course/tree/master...](https://github.com/eyalvardi/ng-course/tree/master/app/05-DynamicComponent)  

Стоит проверить на 4, думаю Вам подойдет.  

PS  

Добавлю сюда.  

Вот проект на Angular 4.3.6: <https://yadi.sk/d/-inXYkVB3MZ2iy>  

Запуск простой:  

>npm install  

...  

>npm start  

Profit! 

 Посмотрите как сделаны lazy loading в самом ангуляре (router) и в Ionic.  
  

Не очень понятно чем вас стандартные решения из коробки не устраивают.  
  

Ещё можно постюмотреть в сторону Stencil JS - это команда из Ionic делает фреймворк для создания web components- там ленивая загрузка компонентов из коробки.  
  

У меня на <https://debtstracker.io/> ленивая загрузка работает (Ionic), хотя есть тонкости по дублированию кода. 

 Странно вы как-то подходите. А серверные технологии уже не в счет?  

У нас в проекте похожая проблема - загружать только те файлы, которые нужны данному проекту (у нас их три сейчас). Связка: grunt, node+ejs, Angular (1.5)  

В grunt прописываем, какому проекту что идет.   

И еще есть главный домен и неглавные, у них разные наборы файлов - логика отрабатывает на серверной стороне и реализовать ее несложно.  

Вашу проблему также можно решить на сервере с использованием любой серверной технологии/языка. 

 Толко Vue.js - меньше гемора и все понятно ))