JavaScript: Архитектура приложения с нуля?

Подскажите что по читать или ресурсы полезные для освоения материала по архитектуре приложения на js. Дело в том, что я хочу освоить это для себя, в плане развития, по этому про react, angular и тому подобные я не спрашиваю, с react'ом и так знаком.

Я пробую с нуля написать не большое приложение и мягко говоря получается дичь полная. Вот что я делаю:
Собираю вебпаком js, sass, pug, картинки.
JS разбит на компоненты описанные классами, и каждый компонент добовляется в свойство главного объекта. Проблема в том что это не гибко и говнокод дикий. Даже если я ставлю для каждого компонента возможность подписки/отписки событий то это не спасает, так как заставляет в некоторых местах кода вызывать события после инициализации приложения, так как компоненты присваиваются по очереди и у первого компонента нет возможности подписаться на метод второго... такая дичь просто...

Вот как примерно выглядит главный файл приложения:
тут импорты...

export default class App extends Observable {
  constructor() {
    super();

    this.navbar = new Navbar();
    this.sidebar = new Sidebar(this);
    this.content = new Content(this);
    this.footer = new Footer(this);
    this.slider = new Slider(this);

    this.trigger('init');
  }
}


вот такой быдло стак классов...

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

Остальные файлы версты тоже на компоненты разпределены и лежат в своих папках sass, pug.

Подскажите что по теме.
  • Вопрос задан
  • 9821 просмотр
Решения вопроса 2
sHinE
@sHinE
веб-разработчик, php/js/mysql и сопутствующее
Не знаю как у вас с английским, но есть такое старое видео https://www.youtube.com/watch?v=vXjVFPosQHw про архитектуру масштабируемых приложений. Там как раз рассказывается про общие принципы. Презентация из этого видео - https://www.slideshare.net/nzakas/scalable-javascr... , в принципе там есть примеры кода, думаю, будет полезна.
Ответ написан
voronkovich
@voronkovich
Помимо ссылки на видео (с Nicolas Zakas), которое привели выше, можете посмотреть также t3js фреймворк. Он собственно и был создан Закасом, с учетом идей о которых он говорит в видео.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
alexiusp
@alexiusp
senior frontend developer
Если говорить о высокоуровневой архитектуре приложений, то я в последнее время сталкиваюсь с двумя подходами: шина событий (event bus) и flux/redux. В клиентской части популярнее вторая, в серверной - первая (за счёт популярности микросервисной архитектуры). У обоих подходов есть свои плюсы и минусы, серебряной пули нет. Для обоих подходов есть соответствующие библиотеки в документации к которым обычно описаны best practices.
Кроме того, не стоит бояться писать говнокод, особенно для своих проектов. Вы не научитесь писать хороший код, если не будете знать, что такое говнокод. Напишите так, как можете приложение до работающего прототипа, а потом, в следующей итерации, подумайте, как можно сделать лучше. Преждевременная оптимизация - главный враг перфекциониста!
P.S.: забыл добавить, что прямые взаимные зависимости между компонентами - это действительно наихудший подход. Оба описанных подхода преследуют одну цель - избавиться от этих зависимостей.
Ответ написан
Комментировать
uaKorona
@uaKorona
Front-End разработчик
Есть замечательная статья на Хабре про архитектуру приложений. Пока это лучшее, что попадалось
Создание архитектуры программы или как проектирова...

Там есть и критерии хорошей архитектуры, и декомпозиция, и инверсия контроля и много чего другого.
А затем вам эти подходы нужно будет применить в js.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы