Вопрос: Как устроена архитектура современного front-end приложения?

Лучший ответ:
Так сразу не ответишь. Почитайте Интернет, много всего. ITDVN на ютубе посмотреть можно. На хабре много интересных статей. Например, свежий, "легкий" пост https://habrahabr.ru/post/321844/
По сути архитектура не менялась с появления скриптов в браузере. Три уровня операций в архитектуре: 
1) Верстка. Раньше были таблицы, потом стали дивы. Все писали свои библиотеки. Затем библиотеки стали выкладывать в общий доступ - появились CSS-фреймворки Bootstrap, Foundation и так далее. Стало слышно о предпроцессорах CSS - less, sass. В 2014 году Гугол выпустил свой подход к дизайну Material Design. На базе него есть масса CSS-фреймворков. Сейчас переходим на флексы, приятная вещь. 
1.2) Лет пять назад начался бум мобильного трафика со смартфонов. Поэтому появились медиа-запросы и адаптивная верстка. Я сам года полтора назад взял ксиаоми 5.5 дюймов - первое время в деревне балдел :) Важный элемент. 
2) DOM. Операции по работе с DOM. Парсинг HTML дерева. Раньше писали большие библиотеки для разных браузеров (в основном на Javascript). Модно было менять картинки в меню по наводке мыши. Потом появился jQuery, он во многом снял вопросы о кросс-браузерности. Сейчас это все переросло в JS-фреймворки. Самые популярные, насколько понимаю - Angular, React. Их много.
3) Запросы на сервер. Когда то давно это называлось XmlHttpRequest в виде COM-объекта в IE. Потом модное слово Web 2.0. Далее - мода на Ajax. Потом появился jQuery - это правда очень хороший и качественный продукт. И опять же JS-фреймворки.
---
Эти операции за последние лет 15 обросли кучей терминов и технологий. Каждый считает, что он сможет написать лучше - и делает свою систему, технологию, подход, фреймворк и так далее. Не говорю, что это плохо - может и хорошо, но бардак аццкий. 
И в серверных технологиях много нового, хотя гиганты вроде Явы, Майкрософта, Оракла - удержались. Вокруг конечно создали много всего, но ИМХО - как был PHP и ASP в Интернете, так и остались. Хотя, такие штуки как REDIS весьма полезны :)
ЗЫ: я лично смотрю в сторону Angular 2 или React (скорее всего буду пробовать обоих) и Bootstrap 4 с флексами. Если бутстрап до апреля не забЭтится - выкину и напишу свои небольшие библиотеки, мне много не надо :) Хотя мне пока что и на ASP.NET Forms и ASP.NET MVC неплохо живется, ну jQuery конечно, Yandex MAP API, бустрапа в меру. Но у всех свои мнения :)

Худший ответ:
В одностраничном приложении (SPA) присутствует единая точка входа. Это загрузка основного скрипта, который будет отвечать за логику работы приложения. Это как index.php в корне веб-сайта. Ну а дальше он уже сам решает, что делать. В основной скрипт обычно включены составляющие отвечающие за маршрутизацию и загрузку других частей приложения. Вы можете представить себе SPA как набор кирпичиков с раствором в виде основного скрипта.
Так вот эти кирпичики могут быть загружены сразу, а могут лишь в тот момент, когда они потребуется, примерно как Autoloader в Composer. 
Относительно загрузки есть несколько разных подходов. 
1. Когда грузится только загрузчик и затем остальные скрипты и шаблоны подгружаются по необходимости.
2. Когда все (скрипты+шаблоны) собирается в огромный JS-файл. Это файл потом работает.
3. Когда JS идет большим файлом, а шаблоны отдельно (так работает AngularJS 1).
Есть множество различных сборщиков, например WebPack, Gulp, Brunch, Grunt. Их вариаций много, не пугайтесь.
После начальной загрузки приложение решает, что должно быть запущено первым. Обычно это какие-то системные вещи, вроде загрузки шаблонизатора, всяких кэшей и роутера. 
Далее роутер рабирает маршрут и запускает нужный модуль (контроллер/компонент); в зависимости от фреймворка это выглядит по-разному, но суть одна и таже.
Каждый компонент отвечает за модификацию отдельных узлов дерева состояний, которое так или иначе спроецировано на DOM. Если смотреть на бэкенд, это как подставлять в шаблон данные, только на бэкэнде это происходит в один проход, а здесь перестройка происходит сразу после изменения оригинальных данных.
В каждом феймворке это сделано по-своему. Смысл одинаков - проекция данных на DOM.
Данные вытаскиваются приложением самостоятельно, могут быть загружены через Ajax. У меня есть приложение, где транспорт идет через веб-сокеты. Можно даже через iframe заморочиться, это не имеет значения.
Иногда сервер отдает страничку с изначально подготовленными данными. Это делается в разных целях, в основном для уменьшения скорости старта приложения. 
Из личного опыта скажу, что вам следует начинать с Angular 2, т.к. он сделан намного проще остальных в плане использования.