Здравствуйте, уважаемые пользователи сообщества. Передо мной встала проблема, с которой мне теперь тяжело жить. Работаю я в средней компании, команда занимается 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...
Но эти примеры на втором ангуляре, когда у него был сборщик SystemJS. Я писал о проблеме выше. Мы же перешли в этом году на четвертый ангуляр, и суть в том, что запустить старые примеры с тем же SystemJsNgModuleLoader уже просто нереально, то webpack пишет непонятные ошибки, решения который нет на гитхабе, либо попросту не компилируется TS, к тому же, современный алгоритм текущего решения является синтаксическим сахаром в четвертом ангуляре директивой ngComponentOutlet, но по факту, там тоже куча минусов, и разработчики не постарались сделать ничего для Input, Output событий для этой директивы.
Да и текущий алгоритм я смог интерпретировать иначе:
https://github.com/splincode/codework/blob/master/...
Но в итоге, как оказывается нужно строить Map с компонентами, а если у вас их 200? Получается вы 200 компонентов должны уже загрузить и хранить в Map, в общем не особо то и хороший вариант.
Заранее спасибо
Простой
Сложный
Средний
