Использовать e.stopPropagation() — плохая идея. Читайте

Правильный способ — проверять, является ли target сделанного клика элементом меню или чем-то другим. Если это не меню — закрывать меню.

Появляется правильный вопрос, что делать, если кликнутый элемент — дочерний элемент меню? Для этого есть офигенный метод node.contains()

Собственно, вся требуемая проверка получается совсем несложная — gist

var el = document.getElementById('el');

document.addEventListener('click', outsideEvtListener);

function outsideEvtListener(evt) {
    if (evt.target === el || el.contains(evt.target)) {
        // клик внутри
        return;
    }
    // код для закрытия меню, например el.classList.add('hidden')
   
    // не забыть убрать слушатель событий (не для каждой имплементации требуется)
    document.removeEventListener(outsideEvtListener);
}

Отличный вопрос, а большинство ответов дурацкие. Да, до "однозначно идеальной" архитектуры коммьюнити пока не доросло, но это не значит, что не надо интересоваться тем, как можно сделать лучше и опираться на чей-то опыт.

Как раз за последнее время с появлением es2015 и webpack дела стали куда лучше, чем когда-либо.
Однако в сводобном доступе больших полноценных проектов я встречал мало, хотя может быть не так хорошо искал. Но известные примеры есть, посмотри вот —

https://github.com/andrewngu/sound-redux
https://github.com/vslinko/ripster

Помимо этого неплохой идеей будет посмотреть на бойлерплейт проекты, которые как раз созданы для того, чтобы предложить своё видение архитектуры и того, "как правильно".

Посмотри на react-starter-kit. Там собрано очень много полезного. Хотя я и не советую вслепую брать бойлерплейты и разворачивать на них свой проект, но очень советую на них посмотреть "изнутри" и узнать много интересного или просто нового.

Посмотри на examples в react-router'е. Конкретно в примере huge-apps показывается, как можно бить вебпаком код на куски и подгружать только необходимое на лету.

Может смутить то, что во всех приведённых ссылках используется react, но для твоей цели (узнать о хорошей архитектуре приложений) это большого значения не имеет. Хотя реакт и сыграл большую роль в "компонентном" мышлении и представлении и повлиял — в хорошем, на мой взгляд, смысле — на то, какими сейчас видятся клиентские js приложения. Из большинства упомянутых проектов реакт убирается довольно легко и заменяется другой понравившейся библиотекой, а именно такая лёгкость смены технологий и является одним из критериев хорошей архитектуры.